displaying the waiting circle while grid takes time to populate

[Venu GopalParticipant]

grid is taking some time to load the data from DB. i want to add some wainting circle before it gets completely loaded…. how to do it…?

[Peter StoevKeymaster]

Hi Venu Gopal,

When the Ajax binding is done through jqxDataAdapter, a loading image is displayed automatically.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Venu GopalParticipant]

iam doing the way shown below.. it is not displaying any loading image…

var myarray = new Array();
$.ajax({
type: “POST”,
url: “ShopCodes.asmx/getDelays”,
data: ”,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
success: function(data) {

var myArray = new Array();

var count =0;

var msg = eval(data.d);

for(i=0; i< msg.length; i++)
{
var row = {};

row["del_date"] = new String(msg[i].del_date);
row["shop_code"] = new String(msg[i].shop_code);
row["shop"] = new String(msg[i].shop);
row["material"] = new String(msg[i].material);

row["rake"] = new String(msg[i].rake);
row["delay_from"] = new String(msg[i].delay_from);
row["delay_to"] = new String(msg[i].delay_to);
row["delay_durn"] = new String(msg[i].delay_durn);

row["cum_delay"] = new String(msg[i].cum_delay);
row["eqpt"]= new String(msg[i].eqpt);
row["sub_eqpt"]= new String(msg[i].sub_eqpt);

row["remarks"] = new String(msg[i].remarks);
row["delay_det_code"] = new String(msg[i].delay_det_code);
row["agency_code"] = new String(msg[i].agency_code);

row["delay_freq"] = new String(msg[i].delay_freq);
row["expected_doc"] = new String(msg[i].expected_doc);
row["continued"] = new String(msg[i].continued);
row["eff_duration"] = new String(msg[i].eff_duration);

myarray[i] = row;
};
// alert(t1);
//alert(myarray);
var source =
{
localdata: myarray,

datafields:
[
{ name: 'del_date', type: 'date',format: 'dd/MM/YYYY' },
{ name: 'shop_code', type: 'string' },
{ name: 'shop', type: 'string' },
{ name: 'material', type: 'string' },
{ name: 'rake', type: 'string' },
{ name: 'delay_from', type: 'float' },
{ name: 'delay_to', type: 'float' },
{ name: 'delay_durn', type: 'float' },
{ name: 'cum_delay', type: 'float' },
{ name: 'eqpt', type: 'string' },
{ name: 'sub_eqpt',typ:'string'},
{ name: 'remarks', type: 'string' },
{ name: 'delay_det_code', type: 'string' },
{ name: 'agency_code', type: 'string' },
{ name: 'delay_freq', type: 'number' },
{ name: 'expected_doc', type: 'string' },
{ name: 'continued', type: 'char' },
{ name: 'eff_duration', type: 'float' }
],
datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid(
{
width: 750,
source: dataAdapter,
theme: theme,
columnsresize: true,
pageable: true,
autoheight: true,
filterable: true,
sortable: true,
altrows: true,
enabletooltips: true,

autoshowfiltericon: true,
columns: [
{ text: 'Delay Date',datafield: 'del_date', cellsformat: 'dd-MM-yyyy',width: 100 },
{ text: 'Shop Code',datafield: 'shop_code', width: 50 },
{ text: 'Shop',datafield: 'shop', width: 70 },
{ text: 'Material', datafield: 'material',width: 80 },

{ text: 'Rake', datafield: 'rake',width: 40 },
{ text: 'Delay From',datafield: 'delay_from', width: 80 },
{ text: 'Delay Upto',datafield: 'delay_to', width: 80 },
{ text: 'Durn', datafield: 'delay_durn',width: 80},

{ text: 'Cum Delay', datafield: 'cum_delay',width: 100 },
{ text: 'Eqpt', datafield: 'eqpt',width: 80},
{ text: 'Sub Eqpt', datafield: 'sub_eqpt',width: 80 },
{ text: 'Descr',datafield: 'remarks', width: 120 },
{ text: 'Delay Code',datafield: 'delay_det_code', width: 100 },

{ text: 'agency', datafield: 'agency_code',width: 100 },
{ text: 'Freq', datafield: 'delay_freq',width: 80 },
{ text: 'Close Dt', datafield: 'expected_doc',width: 80},
{ text: 'Contd', datafield: 'continued',width: 80},

{ text: 'Eff Durn', datafield: 'eff_duration',width: 100 }

]
});

[Peter StoevKeymaster]

Hi Venu Gopal,

Loading Image will not be displayed because the Grid is bound to a dataAdapter which uses data that is already loaded. If you handle the Ajax requests through jqxDataAdapter as in our samples and documentation, then the built-in image will be displayed. Another option is to add to your page IMG tag with loading image and dynamically show and hide it using jQuery.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Venu GopalParticipant]

can i convert the above program to suit my requirement…. how to do the ajax binding through data adapter…
i tried putting my webservice address (“ShopCodes.asmx/getDelays”) to url field of soure and datatype to json… but i did not get the result

[Author]

Posts