Load indicator

[Yogesh SinghParticipant]

Hi

I have a grid in which data gets populated from the Ajax call to the web method which runs database sql and return rows
Though grid displays data but it doesn’t display the load indicator as sometimes data takes a min to display
Could you please point me to the right direction here’s my code

$.ajax({
type: ‘POST’,
dataType: ‘json’,
cache: false,
url: ‘AddEditView.aspx/LoadLookUpSearchGrid’,
data: JSON.stringify({ FilterType: $(‘select#ddlFilterType’).val() , Id: $(“#txtId”).val() , Name: $(“#txtName”).val(), SearchText: ”, FilterRows: filterGridRows}),
contentType: ‘application/json; charset=utf-8’,
success: function (data) {

var source = data.d;
SetSearchFields($(‘select#ddlFilterType option:selected’).text(), source);

},
error: function (err) {
alert(err.text + ” : ” + err.status);
}
});

if (fieldName == “Contract Manager”) {

source =
{
datatype: “xml”,
datafields: [
{ name: ‘MANAGERID’, type: ‘string’ },
{ name: ‘NAME’, type: ‘string’ }
],
async: false,
root: “Manager”,
localdata: source
};

$(“#divLookupSearch”).jqxGrid(
{
width: ‘100%’,
source: searchViewGridDataAdapter,
theme: theme,
sortable: true,
pageable: true,
autoheight: true,
selectionmode: ‘checkbox’,
columns: columns
});

[Peter StoevKeymaster]

Hi Yogesh Singh,

It will not display load indicator if you bind the Grid to local data, because it that code that is what happens. You bind the Grid to your Ajax result so the Ajax call is not handled by jqxDataAdapter as shown in our demos. If you do it in the way shown in the live demos and help topics, the load indicator would be displayed, but it will not be displayed when you load the widget from Local Data/Array, because that happens simultaneously and nothing should be displayed.
Best Regards,
Peter Stoev

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

[Yogesh SinghParticipant]

Thanks for the reply peter
But i dont follow where do i have to make changes in the following code

$(“#btnSearch”).jqxButton({ width: ’80’, height: ’25’ });
$(“#btnSearch”).bind(‘click’, function () {

if ($(‘#popupWindow’).jqxValidator(‘validate’))
LoadLookUpSearchGrid();
});

function LoadLookUpSearchGrid() {
var filterRows = getGridRows();
$.ajax({
type: ‘POST’,
dataType: ‘json’,
async: false,
cache: false,
url: ‘AddEditView.aspx/LoadLookUpSearchGrid’,
data: JSON.stringify({ FilterType: $(‘select#ddlFilterType’).val() , Id: $(“#txtId”).val() , Name: $(“#txtName”).val(), SearchText: ”, FilterRows: filterGridRows}),
contentType: ‘application/json; charset=utf-8’,
success: function (data) {

var source = data.d;
SetSearchFields($(‘select#ddlFilterType option:selected’).text(), source);

},
error: function (err) {
alert(err.text + ” : ” + err.status);
}
});
};

function SetSearchFields(fieldName, source) {

var columns;
if (fieldName == “Customer”) {

source =
{
datatype: “xml”,
datafields: [
{ name: ‘CUST_ID’, type: ‘string’ },
{ name: ‘CUST_NAME’, type: ‘string’ }
],
root: “Customer”,
localdata: source
};
columns = [
{ text: ‘Customer ID’, dataField: ‘CUST_ID’, width: ‘30%’ },
{ text: ‘Customer Name’, dataField: ‘CUST_NAME’, width: ‘65%’ }
];

}

lookupSearchResultGrid(source, columns,fieldName);
}

function lookupSearchResultGrid(source, columns,fieldName) {

var searchViewGridDataAdapter = new $.jqx.dataAdapter(source);

// Create jqxGrid.
$(“#divLookupSearch”).jqxGrid(
{
width: ‘100%’,
source: searchViewGridDataAdapter,
theme: theme,
sortable: true,
pageable: true,
autoheight: true,
selectionmode: ‘checkbox’,
columns: columns
});

// columnsArray = $(“#divLookupSearch”).jqxGrid(‘columns’);
// var colCount = columnsArray.records.length
var value = columns[0].dataField;
if(searchViewGridDataAdapter.records.length!=1)
{
$(“#popupWindow”).jqxWindow(‘show’);
ShowSearchFieldsLabel(fieldName);
if($(‘#divLookupSearch’).jqxGrid(‘getselectedrowindexes’).length > 0)
$(“#divLookupSearch”).jqxGrid(‘clearselection’);

$(“#txtId”).val(“”);
$(“#txtName”).val(“”);
}
else
{
AddNewFilter(searchViewGridDataAdapter.records[0],value);
$(“#txtValue”).val(“”);
}
};

[Peter StoevKeymaster]

Hi Yogesh Singh,

I suggest you to look at the Grid’s Live demos and also the help documentation topics about jqxGrid. There you will find how to bind the widget through jqxDataAdapter.

Best Regards,
Peter Stoev

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

[Yogesh SinghParticipant]

I did refer the demos such as binding to xml and
in order to parse xml data comin in from my webmethod i need to have a source which binds the data to its localdata property i dont know if there is any other way and adaptor to load data and grid to display the data from loaded adaptor
the examples basically refer either text files or array

[Yogesh SinghParticipant]

In addition to that i have also tried to show load image explicitly using
$(‘#divLookupSearch’).jqxGrid(‘showloadelement’);
setTimeout(function() {
LoadLookUpSearchGrid();
}, 500);

but still it doesnt show any suggestions following is the code snippet of ajax call and grid definition

function LoadLookUpSearchGrid() {
var filterRows = getGridRows();
$.ajax({
type: ‘POST’,
dataType: ‘json’,
async: false,
cache: false,
url: ‘AddEditView.aspx/LoadLookUpSearchGrid’,
data: JSON.stringify({ FilterType: $(‘select#ddlFilterType’).val() , Id: $(“#txtId”).val() , Name: $(“#txtName”).val(), SearchText: ”, FilterRows: filterGridRows}),
contentType: ‘application/json; charset=utf-8’,
success: function (data) {

$(‘#divLookupSearch’).jqxGrid(‘hideloadelement’);
var source = data.d;

SetSearchFields($(‘select#ddlFilterType option:selected’).text(), source);

},
error: function (err) {
alert(err.text + ” : ” + err.status);
}
});
};

$(“#divLookupSearch”).jqxGrid(
{
width: ‘100%’,
source: searchViewGridDataAdapter,
theme: theme,
sortable: true,
pageable: true,
autoheight: true,
selectionmode: ‘checkbox’,
columns: columns
});

[Peter StoevKeymaster]

Hi Yogesh Singh,

There are samples with XML Binding so may be you will want to look at them, too. You cannot display a load indicator in the way you try to use jqxGrid, because in general you bind the Grid after your data is downloaded so the only solution if the load indicator is important for you is to use jqxDataAdapter to load your data and set its “url” and other required settings.

Best Regards,
Peter Stoev

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

[Yogesh SinghParticipant]

Hi Peter,

Thanks for your reply could you please provide an example to implement my scenario i tried few setting but it didnt work
what all settings would be required should i have my grid to any particular event of the adaptor to make sure data is loaded

[Author]

Posts