SharePoint Journey: Bind Dropdown and Dropdown selection change Event /Bind data in Table and Hyper link and Search Operation and Export to excel

SearchPage.aspx

<asp:Content ContentPlaceHolderId="PlaceHolderPageTitle" runat="server">

<SharePoint:ListItemProperty Property="BaseName" maxlength="40" runat="server"/>

</asp:Content>

<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">

<SharePoint:ScriptBlock runat="server">

var navBarHelpOverrideKey = "WSSEndUser"; </SharePoint:ScriptBlock>

<SharePoint:StyleBlock runat="server">

body #s4-leftpanel {

display:none;

}

.s4-ca {

margin-left:0px;

} </SharePoint:StyleBlock>

</asp:Content>

<asp:Content ContentPlaceHolderId="PlaceHolderSearchArea" runat="server">

<SharePoint:DelegateControl runat="server"

ControlId="SmallSearchInputBox"/>

</asp:Content>

<asp:Content ContentPlaceHolderId="PlaceHolderPageDescription" runat="server">

<SharePoint:ProjectProperty Property="Description" runat="server"/>

</asp:Content>

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">

#SearchTable

{

border-style:solid;

border-color:#da2128;

width:100%;

}

#example_length

{

display:none !important;

}

#SearchTable tr td

{

padding-bottom:10px;

}

#example

{

font-size:12px;

}

#example tr th

{

font-weight:bold;

font-size:13px;

}

#example_filter

{

float:right;

padding-right:1%;

}

#example > thead >tr> th

{

background-color: #FFCCCC;

color: black;

}

#gridTable

{

width:100%;

}

.multiselect.dropdown-toggle.btn.btn-default > div.restricted {

margin-right: 5px;

max-width: 100px;

overflow: hidden;

}

.btnClass

{

width: 150px !important;

background: #da2128 !important;

color: white !important;

}

.CRDeatailsCss

{

color:#ff501e !important;

}

.lefthead

{

font-weight:bold;

}

.selectClass

{

width:150px !important;

}

.textboxClass

{

width:150px !important;

border:1px solid #ccc !important;

}

.paging-nav {

text-align: right;

padding-top: 2px;

}

.paging-nav a {

margin: auto 1px;

text-decoration: none;

display: inline-block;

padding: 1px 7px;

background:#6d6e71;

color: white;

border-radius: 3px;

}

.paging-nav .selected-page {

background-color: #ff501e !important;

font-weight: bold;

}

.paging-nav,

#tableData {

width: 400px;

margin: 0 auto;

font-family: Arial, sans-serif;

}

#tablepaging td:nth-of-type(6) a

{

color:#ff501e !important;

}

#SearchTable tr td

{

width:33.33%;

text-align:center;

}

.tdLeft

{

float: left;

padding-top: 5px;

width: 150px;

font-weight:bold;

font-size:13px;

}

table tr.odd td{ background-color: white!important; }

table tr.even td{ background-color: lightgray !important; }

#divPostsLoader

{

text-align:center;

font-weight:bold;

font-style:italic;

}

</style>

<tr>

<td>

<div class="tdLeft">Technology</div>

</td>

<td>

<div class="tdLeft">Technology Description</div>

<option value="Select">--Select--</option></select></div>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

<td>

Enter CR Number

</td>

</td>

</tr>

<tr>

</td>

</tr>

</table>

Export To Excel</a>

</div>

<tr>

<td>

</div>

</div>

</td>

</tr>

</table>

</div>

<script type="text/javascript" src="../SiteAssets/NGOScripts/NGOSearchFinal.js"></script>

</asp:Content>

NGOSearchFinal.js

var CQuery="";

var queryCount=0;

var RowCount = 3;

var monthNames = [

"Jan", "Feb", "Mar",

"Apr", "May", "Jun", "Jul",

"Aug", "Sep", "Oct",

"Nov", "Dec"

];

var clientContext = null;

var web = null;

var table=null;

$( document ).ready(function() {

ExecuteOrDelayUntilScriptLoaded(Initialize, "sp.js");

});

function Initialize()

{

$('#divPostsLoader').html('loading.....');

clientContext = new SP.ClientContext.get_current();

web = clientContext.get_web();

var list = web.get_lists().getByTitle("lst_NGOCRDetails");

var camlQuery = new SP.CamlQuery();

var q = '<View></View>';

camlQuery.set_viewXml(q);

this.listItems = list.getItems(camlQuery);

clientContext.load(listItems);

var list = web.get_lists().getByTitle("lst_NGOTechnologies");

var camlQuery = new SP.CamlQuery();

var q = '<View/>';

camlQuery.set_viewXml(q);

this.listItemsTech = list.getItems(camlQuery);

clientContext.load(listItemsTech);

var list = web.get_lists().getByTitle("lst_NGOSites");

var camlQuery = new SP.CamlQuery();

var q = '<View/>';

camlQuery.set_viewXml(q);

this.listItemsSite = list.getItems(camlQuery);

clientContext.load(listItemsSite);

clientContext.executeQueryAsync(Function.createDelegate(this, this.onListItemsLoadSuccess),

Function.createDelegate(this, this.onQueryFailed));

}

function onListItemsLoadSuccess(sender, args) {

var listEnumerator = this.listItems.getEnumerator();

var listEnumeratorTech = this.listItemsTech.getEnumerator();

var listEnumeratorSite = this.listItemsSite.getEnumerator();

var htmlbody='';

while (listEnumeratorTech.moveNext()) {

var lstitemTech = listEnumeratorTech.get_current();

$("#ddltechnology").append("<option value=" + lstitemTech.get_item("Title") + ">" + lstitemTech.get_item("Title") + "</option>");

}

while (listEnumeratorSite.moveNext()) {

var lstitemSite = listEnumeratorSite.get_current();

$("#ddlSites").append("<option value=" + lstitemSite.get_item("Title") + ">" + lstitemSite.get_item("Title") + "</option>");

}

$('#ddltechnology').selectpicker('refresh');

$('#ddltechnology').selectpicker('render');

$('#ddlSites').selectpicker('refresh');

$('#ddlSites').selectpicker('render');

htmlbody +='<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">';

htmlbody +='<thead>';

htmlbody +='<tr>';

htmlbody +='<th>CR Number</th>';

htmlbody +='<th>Technology</th>';

htmlbody +='<th>Technology Description</th>';

htmlbody +='<th>Site Name</th>';

htmlbody +='<th>CR Detail</th>';

htmlbody +='<th>Created by</th>';

htmlbody +='<th>Created Date</th>';

htmlbody +='</tr>';

htmlbody +='</thead>';

htmlbody +='<tbody>';

//iterate though all of the items

while (listEnumerator.moveNext()) {

var lstitem = listEnumerator.get_current();

// alert(lstitem.get_item('CRNumber'));

var fieldUserValueCreatedBy = lstitem.get_item("Author");

var dateCreated = new Date(lstitem.get_item('Created'));

htmlbody+='<tr>';

htmlbody+= '<td>'+ lstitem.get_item('CRNumber')+ '</td>';

htmlbody+= '<td>'+ lstitem.get_item('Technology')+ '</td>';

htmlbody+= '<td>'+ lstitem.get_item('TechnologyDescription')+ '</td>';

htmlbody+= '<td>'+ lstitem.get_item('SiteName')+ '</td>';

// console.log(lstitem.get_item("RedirectionUrl").get_url());

try {

lstitem.get_item("RedirectionUrl").get_url()

htmlbody+= '<td><a class="CRDeatailsCss" href="'+ lstitem.get_item("RedirectionUrl").get_url() + '">CR Detail</a></td>';

}

catch(err) {

htmlbody+= '<td><a class="CRDeatailsCss" href="#">CR Detail</a></td>';

}

htmlbody+= '<td>'+ fieldUserValueCreatedBy.get_lookupValue() + '</td>';

htmlbody+= '<td>' + dateCreated.getDate() + "-" + monthNames[dateCreated.getMonth()] + "-" + dateCreated.getFullYear() + '</td>';

htmlbody+='</tr>';

}

htmlbody +='</tbody>';

htmlbody +='</table>';

$('#GridTableResult').html(htmlbody);

//table= $('table#example').DataTable({"lengthMenu": [20],"pagingType": "full_numbers"});

table= $('#example').DataTable( {

"searching": false,

"paging": true,

"info": false,

"lengthChange":false,

"pageLength": 20

} );

$('#divPostsLoader').empty();

}

function onQueryFailed(sender, args) {

//alert('request failed ' + args.get_message() + '\n' + args.get_stackTrace());

}

function BindSiteAreaDropDown(Technology)

{

clientContext = new SP.ClientContext.get_current();

web = clientContext.get_web();

var list = web.get_lists().getByTitle("lst_TechnologyDetail");

var camlQuery = new SP.CamlQuery();

var q = '<View><Query><Where><Eq><FieldRef Name=\'Title\' /><Value Type=\'Text\'>'+Technology+'</Value></Eq></Where></Query></View>';

camlQuery.set_viewXml(q);

this.listItems = list.getItems(camlQuery);

clientContext.load(listItems);

clientContext.executeQueryAsync(Function.createDelegate(this, this.onSiteAreaSuccess),Function.createDelegate(this, this.onSiteAreaFailed));

}

function onSiteAreaSuccess()

{

var listEnumerator = this.listItems.getEnumerator();

var usedNames = [];

$('#ddltechnologydesc').empty();

$("#ddltechnologydesc").append("<option value=\"Select\">--Select--</option>");

while (listEnumerator.moveNext()) {

var lstitem = listEnumerator.get_current();

if (usedNames.indexOf(lstitem.get_item("TechnologyDescription")) == -1) {

$("#ddltechnologydesc").append("<option value=\""+ lstitem.get_item("TechnologyDescription") +"\">" + lstitem.get_item("TechnologyDescription") + "</option>");

usedNames.push(lstitem.get_item("TechnologyDescription"));

}

$('#ddltechnologydesc').selectpicker('refresh');

$('#ddltechnologydesc').selectpicker('render');

}

function onSiteAreaFailed(sender, args)

{

//alert('Request failed. \nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());

}

$("#ddltechnology").change(function(){

var TechName = this.value;

BindSiteAreaDropDown(TechName);

});

///Bind Drop down

$("#fromDate").datepicker({ dateFormat: 'yy-mm-dd' });

$("#toDate").datepicker({ dateFormat: 'yy-mm-dd' });

function GetFilteredData()

{

queryCount=0;

CQuery="";

if(($('#ddltechnology').val()=='All') && ($('#ddlSites').val()=='All') && ($('#ddltechnologydesc').val()=='Select') && ($('#fromDate').val().length == 0) && ($('#toDate').val().length == 0))

{

bindGrid();

}

if($('#ddltechnology').val()!='All')

{

queryCount=queryCount+1;

CQuery +="<Eq><FieldRef Name='Technology' /><Value Type='Text'>"+$('#ddltechnology').val()+"</Value></Eq>;";

}

if($('#ddlSites').val()!='All')

{

queryCount=queryCount+1;

CQuery +="<Eq><FieldRef Name='SiteName' /><Value Type='Text'>"+$('#ddlSites').val()+"</Value></Eq>;";

}

if($('#ddltechnologydesc').val()!='Select')

{

queryCount=queryCount+1;

CQuery +="<Eq><FieldRef Name='TechnologyDescription' /><Value Type='Text'>"+$('#ddltechnologydesc').val()+"</Value></Eq>;";

}

if($('#fromDate').val().length !=0)

{

queryCount=queryCount+1;

CQuery +="<Geq><FieldRef Name='Created'/><Value IncludeTimeValue='TRUE' Type='DateTime'>"+$('#fromDate').val()+"</Value></Geq>;";

}

if($('#toDate').val().length !=0)

{

queryCount=queryCount+1;

CQuery +="<Leq><FieldRef Name='Created' /><Value IncludeTimeValue='TRUE' Type='DateTime'>"+$('#toDate').val()+"</Value></Leq>;";

}

if(queryCount==1)

{

CQuery=CQuery.split(';')[0];

}

if(queryCount==2)

{

CQuery="<And>"+CQuery.split(';')[0]+CQuery.split(';')[1]+"</And>";

}

if(queryCount==3)

{

CQuery="<And>"+CQuery.split(';')[0]+"<And>"+CQuery.split(';')[1]+CQuery.split(';')[2]+"</And></And>";

}

if(queryCount==4)

{

CQuery="<And>"+CQuery.split(';')[0]+"<And>"+CQuery.split(';')[1]+"<And>"+CQuery.split(';')[2]+CQuery.split(';')[3]+"</And></And></And>";

}

if(queryCount==5)

{

CQuery="<And>"+CQuery.split(';')[0]+"<And>"+CQuery.split(';')[1]+"<And>"+CQuery.split(';')[2]+"<And>"+CQuery.split(';')[3]+CQuery.split(';')[4]+"</And></And></And></And>";

}

bindGridOnFilter(CQuery);

}

function bindGrid()

{

$('#divPostsLoader').html('loading.....');

var list = web.get_lists().getByTitle("lst_ITISGCRDetails");

var camlQuery = new SP.CamlQuery();

var q = '<View/>';

camlQuery.set_viewXml(q);

this.listItems = list.getItems(camlQuery);

clientContext.load(listItems);

clientContext.executeQueryAsync(Function.createDelegate(this, this.onbindGridSuccess),

Function.createDelegate(this, this.onQueryFailed));

}

function onbindGridSuccess()

{

var listEnumerator = this.listItems.getEnumerator();

var htmlbody='';

$('#GridTableResult').html('');

htmlbody +='<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">';

htmlbody +='<thead>';

htmlbody +='<tr>';

htmlbody +='<th>CR Number</th>';

htmlbody +='<th>Technology</th>';

htmlbody +='<th>Technology Description</th>';

htmlbody +='<th>Site Name</th>';

htmlbody +='<th>CR Detail</th>';

htmlbody +='<th>Created by</th>';

htmlbody +='<th>Created Date</th>';

htmlbody +='</tr>';

htmlbody +='</thead>';

htmlbody +='<tbody>';

while (listEnumerator.moveNext()) {

var lstitem = listEnumerator.get_current();

// alert(lstitem.get_item('CRNumber'));

var fieldUserValueCreatedBy = lstitem.get_item("Author");

var dateCreated = new Date(lstitem.get_item('Created'));

htmlbody+='<tr>';

htmlbody+= '<td>'+ lstitem.get_item('CRNumber')+ '</td>';

htmlbody+= '<td>'+ lstitem.get_item('Technology')+ '</td>';

htmlbody+= '<td>'+ lstitem.get_item('TechnologyDescription')+ '</td>';

htmlbody+= '<td>'+ lstitem.get_item('SiteName')+ '</td>';

// console.log(lstitem.get_item("RedirectionUrl").get_url());

try {

lstitem.get_item("RedirectionUrl").get_url()

htmlbody+= '<td><a class="CRDeatailsCss" href="'+ lstitem.get_item("RedirectionUrl").get_url() + '">CR Detail</a></td>';

}

catch(err) {

htmlbody+= '<td><a class="CRDeatailsCss" href="#">CR Detail</a></td>';

}

htmlbody+= '<td>'+ fieldUserValueCreatedBy.get_lookupValue() + '</td>';

htmlbody+= '<td>' + dateCreated.getDate() + "-" + monthNames[dateCreated.getMonth()] + "-" + dateCreated.getFullYear() + '</td>';

htmlbody+='</tr>';

}

htmlbody +='</tbody>';

htmlbody +='</table>';

$('#GridTableResult').html(htmlbody);

table= $('#example').DataTable( {

"searching": false,

"paging": true,

"info": false,

"lengthChange":false,

"pageLength": 20

});

$('#divPostsLoader').empty();

}

function bindGridOnFilter(Query)

{

$('#divPostsLoader').html('loading.....');

var list = web.get_lists().getByTitle("lst_ITISGCRDetails");

var camlQuery = new SP.CamlQuery();

var q = '<View><Query><Where>'+Query+'</Where></Query></View>';

camlQuery.set_viewXml(q);

this.listItems = list.getItems(camlQuery);

clientContext.load(listItems);

clientContext.executeQueryAsync(Function.createDelegate(this, this.onbindGridOnFilterSuccess),

Function.createDelegate(this, this.onQueryFailed));

}

function onbindGridOnFilterSuccess()

{

var listEnumerator = this.listItems.getEnumerator();

var htmlbody='';

$('#GridTableResult').html('');

htmlbody +='<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">';

htmlbody +='<thead>';

htmlbody +='<tr>';

htmlbody +='<th>CR Number</th>';

htmlbody +='<th>Technology</th>';

htmlbody +='<th>Technology Description</th>';

htmlbody +='<th>Site Name</th>';

htmlbody +='<th>CR Detail</th>';

htmlbody +='<th>Created by</th>';

htmlbody +='<th>Created Date</th>';

htmlbody +='</tr>';

htmlbody +='</thead>';

htmlbody +='<tbody>';

while (listEnumerator.moveNext()) {

var lstitem = listEnumerator.get_current();

// alert(lstitem.get_item('CRNumber'));

var fieldUserValueCreatedBy = lstitem.get_item("Author");

var dateCreated = new Date(lstitem.get_item('Created'));

htmlbody+='<tr>';

htmlbody+= '<td>'+ lstitem.get_item('CRNumber')+ '</td>';

htmlbody+= '<td>'+ lstitem.get_item('Technology')+ '</td>';

htmlbody+= '<td>'+ lstitem.get_item('TechnologyDescription')+ '</td>';

htmlbody+= '<td>'+ lstitem.get_item('SiteName')+ '</td>';

// console.log(lstitem.get_item("RedirectionUrl").get_url());

try {

lstitem.get_item("RedirectionUrl").get_url()

htmlbody+= '<td><a class="CRDeatailsCss" href="'+ lstitem.get_item("RedirectionUrl").get_url() + '">CR Detail</a></td>';

}

catch(err) {

htmlbody+= '<td><a class="CRDeatailsCss" href="#">CR Detail</a></td>';

}

htmlbody+= '<td>'+ fieldUserValueCreatedBy.get_lookupValue() + '</td>';

htmlbody+= '<td>' + dateCreated.getDate() + "-" + monthNames[dateCreated.getMonth()] + "-" + dateCreated.getFullYear() + '</td>';

htmlbody+='</tr>';

}

htmlbody +='</tbody>';

htmlbody +='</table>';

$('#GridTableResult').html(htmlbody);

//table= $('table#example').DataTable({"lengthMenu": [20],"pagingType": "full_numbers"});

table= $('#example').DataTable( {

"searching": false,

"paging": true,

"info": false,

"lengthChange":false,

"pageLength": 20

} );

$('#divPostsLoader').empty();

}

function fnExcelReport()

{

var tab_text="<table border='2px'><tr bgcolor='#FFCCCC'>";

var textRange; var j=0;

tab = document.getElementById('example'); // id of table

for(j = 0 ; j < tab.rows.length ; j++)

{

tab_text=tab_text+tab.rows[j].innerHTML+"</tr>";

//tab_text=tab_text+"</tr>";

}

tab_text=tab_text+"</table>";

tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table

tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table

tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params

var ua = window.navigator.userAgent;

var msie = ua.indexOf("MSIE ");

if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer

{

txtArea1.document.open("txt/html","replace");

txtArea1.document.write(tab_text);

txtArea1.document.close();

txtArea1.focus();

sa=txtArea1.document.execCommand("SaveAs",true,"Say Thanks to Sumit.xls");

}

else //other browser not tested on IE 11

sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));

return (sa);

}

DefaultSettings.css:

body #s4-leftpanel {

display:none;

}

.s4-ca {

margin-left:0px;

}

.ms-core-pageTitle

{display:none !important;}

#suiteBar,#s4-ribbonrow,#s4-titlerow,#sideNavBox

{

display:none !important;

}

#contentBox

{

margin-left:30px !important;

}

#maindropdownform tr td

{

padding:5px;

}

#mainbuttons tr td

{

text-align:center;

}

Search This Blog

Sunday, August 6, 2017

Bind Dropdown and Dropdown selection change Event /Bind data in Table and Hyper link and Search Operation and Export to excel

No comments:

Post a Comment

My Latest Top 10 Post Of Ram Share Point Journey With Details