jqxGrid: The data is still loading. When the data binding is completed, the Grid

[fatima12Participant]

` <script type=”text/javascript”>
$(document).ready(function () {

//for Type combo box1
var source1 = new Array({ status: ‘Source’, value: 0 }, { status: ‘Agent’, value: 1 }, { status: ‘Insurance Company’, value: 2 }, { status: ‘Customer’, value: 3 }); // static combo values
var dataAdapter1 = new $.jqx.dataAdapter(source1);

$(“#jqxComBo1”).jqxComboBox({ selectedIndex: 0, source: dataAdapter1, displayMember: “status”, valueMember: “status”, width: 200, height: 25, theme: “summer” });
//save selected value in hiden field for furthr use..

// combo box2…. by default type is source…..
in_Type = “Source”;
var url1 = “../Report/jqx_Outstanding_Detail_.ashx?Action=GetAllType&Type=” + in_Type;
var source2 =
{
datatype: “json”,
datafields: [
{ name: ‘id’ },
{ name: ‘name’ }
],
url: url1,
async: true
};
var dataAdapter = new $.jqx.dataAdapter(source2);

// Create a jqxComboBox
$(“#jqxComBo2”).jqxComboBox({ selectedIndex: 0, source: dataAdapter, displayMember: “name”, valueMember: “id”, width: 200, height: 25 });

//for insurance Type
var url2 = “../Report/jqx_Outstanding_Detail_.ashx?Action=GetInsuranceType”;
var source3 =
{
datatype: “json”,
datafields: [
{ name: ‘id’ },
{ name: ‘name’ }
],
url: url2,
async: true
};

var dataAdapter3 = new $.jqx.dataAdapter(source3);
$(“#jqxComBo3”).jqxComboBox({ selectedIndex: 0, source: dataAdapter3, displayMember: “id”, valueMember: “name”, width: 200, height: 25, theme: “summer” });

//on select change save values of combobox1 combobox2 combobox3 in hiden field.
$(“#jqxComBo1”).on(‘select’, function (event) {
if (event.args) {
var item = event.args.item;
if (item) {
var valueelement = $(“<div></div>”);
valueelement.text(“Value: ” + item.value);
var labelelement = $(“<div></div>”);
labelelement.text(“Label: ” + item.label);
$(“#name”).text(”);
$(“#name”).text(item.label);
($(“#<%=HiddenField_ComBo1.ClientID%>”).val(item.label));
}
}
});

// ———————– on change of combo1 reload combobox2
$(‘#jqxComBo1’).on(‘change’, function (event) {
var args = event.args;
if (args) {
// index represents the item’s index.
var index = args.index;
var item = args.item;
// get item’s label and value.
var label = item.label;

var value = item.value;
var type = args.type; // keyboard, mouse or null depending on how the item was selected.

var url1 = “../Report/jqx_Outstanding_Detail_.ashx?Action=GetAllType&Type=” + label;
// prepare the data
var source2 =
{
datatype: “json”,
datafields: [
{ name: ‘id’ },
{ name: ‘name’ }
],
url: url1,
async: true
};
var dataAdapter = new $.jqx.dataAdapter(source2);

// Create a jqxComboBox
$(“#jqxComBo2”).jqxComboBox({ selectedIndex: 0, source: dataAdapter, displayMember: “name”, valueMember: “id”, width: 200, height: 25, promptText: “All”, theme: “summer” });

}
});

//save selected value in hiden field for furthr use..

$(“#jqxComBo2”).on(‘select’, function (event) {
if (event.args) {
var item = event.args.item;
if (item) {
var valueelement = $(“<div></div>”);
valueelement.text(“Value: ” + item.value);
var labelelement = $(“<div></div>”);
labelelement.text(“Label: ” + item.label);
($(“#<%=HiddenField_ComBo2.ClientID%>”).val(item.label));
}
}
});

//save selected value in hiden field for furthr use..

$(“#jqxComBo3”).on(‘select’, function (event) {
if (event.args) {
var item = event.args.item;
if (item) {
var valueelement = $(“<div></div>”);
valueelement.text(“Value: ” + item.value);
var labelelement = $(“<div></div>”);
labelelement.text(“Label: ” + item.label);
($(“#<%=HiddenField_ComBo3.ClientID%>”).val(item.label));
}
}
});

//Set Default Values
($(“#<%=HiddenField_ComBo1.ClientID%>”).val(“Source”));
($(“#<%=HiddenField_ComBo2.ClientID%>”).val(“ALL”));
($(“#<%=HiddenField_ComBo3.ClientID%>”).val(“ALL”));

}); //end of document ready

function OnClientClick_Load() {

//select agent,customer,source name
var All_combo = $(“#<%=HiddenField_ComBo2.ClientID%>”).val();

//select insurance tpe value
var Insurance_combo = $(“#<%=HiddenField_ComBo3.ClientID%>”).val();

//select type either source,agent ,customer or insurance comapny
var Type_combo = $(“#<%=HiddenField_ComBo1.ClientID%>”).val();

var source =
{
async: true,
datatype: “json”,
datafields: [

{ name: ‘Name’, type: ‘string’ },
{ name: ‘PolicyName’, type: ‘string’ },
{ name: ‘ApplyOn’, type: ‘string’ },
{ name: ‘New’, type: ‘decimal’ },
{ name: ‘Renewal’, type: ‘decimal’ },
{ name: ‘Discount’, type: ‘decimal’ },
{ name: ‘CreditLimit’, type: ‘decimal’ },
{ name: ‘CreditDays’, type: ‘int’ },
],

cache:false,
url: ‘../Report/jqx_Outstanding_Detail_.ashx?Action=GetAllASCV&Type=’ + Type_combo + ‘&Name=’ + All_combo + ‘&Insurance_type=’ + Insurance_combo + ”

};

var dataAdapter = new $.jqx.dataAdapter(source);
$(‘#txtSearch’).bind(‘keyup’, function (event) {

var searchText = $(“#txtSearch”).val();
var columns = $(“#jqxgrid”).jqxGrid(‘columns’);

if (searchText.length >0) {

var filtergroup = new $.jqx.filter();
var filtervalue = searchText;
var filtercondition = ‘contains’;
var filter = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
//used when there are multiple filters on a grid column:
var filter_or_operator = 1;
// used when there are multiple filters on the grid:
filtergroup.operator = ‘or’;
filtergroup.addfilter(filter_or_operator, filter);

for (var i = 0; i < columns.records.length; i++) {
if (!columns.records[i].hidden && columns.records[i].filterable) {
$(“#jqxgrid”).jqxGrid(‘addfilter’, columns.records[i].datafield, filtergroup);

}
}

//apply the filters.
$(“#jqxgrid”).jqxGrid(‘applyfilters’);
}
else {
$(“#jqxgrid”).jqxGrid(‘clearfilters’);
}

});

$(“#jqxgrid”).jqxGrid(
{
width: (window.screen.width – 100),
source: dataAdapter,
showfilterrow: false,
filterable: false,
sortable: true,
showstatusbar: true,
statusbarheight: 25,
altrows: true,
showaggregates: true,
columnsresize: true,
pageable: true,
pagesizeoptions: [’20’, ’50’, ‘100’],
pagesize: 20,
selectionmode: ‘singlecell’,
columns: [

{ text: ‘Name’, datafield: ‘Name’, cellsalign: ‘left’, width: ‘20%’},
{ text: ‘Policy name.’, datafield: ‘PolicyName’, cellsalign: ‘left’, width: ‘20%’ },
{ text: ‘Apply On.’, datafield: ‘ApplyOn’, cellsalign: ‘left’, width: 100 },
{ text: ‘New’, datafield: ‘New’, cellsalign: ‘right’, cellsformat: ‘f2’, width: ‘20%’, aggregates: [“sum”], cellsformat: ‘f2’ },
{ text: ‘Renew’, datafield: ‘Renewal’, cellsalign: ‘right’, cellsformat: ‘f2’, width: ‘20%’, aggregates: [“sum”], cellsformat: ‘f2’ },
{ text: ‘Discount’, datafield: ‘Discount’, cellsalign: ‘right’, cellsformat: ‘f2’, width: ‘20%’, aggregates: [“sum”], cellsformat: ‘f2’ },
{ text: ‘Credit Limit’, datafield: ‘CreditLimit’, cellsalign: ‘right’, cellsformat: ‘f2’, width: ‘20%’, aggregates: [“sum”], cellsformat: ‘f2’ },
{ text: ‘Credit Days’, datafield: ‘CreditDays’, cellsalign: ‘right’, cellsformat: ‘f2’, width: ‘20%’, aggregates: [“sum”], cellsformat: ‘f2’ },

]

});

}

</script>

[StanislavParticipant]

Hello fatima12,

Here is what the API says about this case:
This event is triggered when the binding is completed. Note: Bind to that event before the Grid's initialization, because if you data bind the Grid to a local data source and bind to the "bindingcomplete" event after the initializaation, the data binding will be already completed.

Best Regards,
Stanislav

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts