Grid Refresh

[Vinay ReddyParticipant]

Hi,

I have a issue on gird reloading.

I have a grid where i should load data from server. I am able to load the data from server for the first time but inorder to reload/refresh the data based on some inputs what should i do.

Here is my code snippet which is a generic jqxgrid where every one uses to build grid. can you please help me out.

$.fn.createJqxGrid = function(options)
{
var adpater = getDataAdapter(options);
$(“#” + options.gridID).jqxGrid(
{
width:options.width,
height:options.height,
source: adpater,
pageable: true,
columnsresize: true,
filterable: true,
sortable: true,
virtualmode: true,
theme:’custom’,
rowdetails: options.rowdetails,
initrowdetails: function initrowdetails(index, parentElement)
{
var subGrid = $(parentElement).find(‘.subgrid’);

if (subGrid != null)
{
subGrid.append(getSubGridElement(options).html());
}
},
rowdetailstemplate:{
rowdetails: “<table width=’100%’ height=’100%’><tr><td class=’subgrid’ style=’width:100%;height:100%’ align=’center’></td></tr></table>”,
rowdetailsheight: 80 },
autoshowfiltericon: true,
rendergridrows: function()
{
return adpater.records;
},
columns: options.columns,
});
}

function getDataAdapter(options)
{
var source= {
type: “GET”,
dataType: ‘json’,
cache: false,
datafields: options.datafields,
url:options.url,
beforeprocessing: function(data)
{
source.totalrecords = data.records;
},
sort: function()
{
$(“#” + options.gridID).jqxGrid(‘updatebounddata’, ‘sort’);
},
filter: function()
{
$(“#” + options.gridID).jqxGrid(‘updatebounddata’, ‘filter’);
},
};

var gridDataAdapter = new $.jqx.dataAdapter(source, {
downloadComplete: function (data, status, xhr)
{
return data.rows;
}
});

return gridDataAdapter;
}

function getSubGridElement(options)
{
var subGridDetails = options.subGridDetails;
var tableEle = $(“<table>”,
{
width:”100%”,
id:’sub_grid’
});
var trEle = $(“<tr>”);
var tdEle, divEle;
var length = Object.keys(subGridDetails).length;
var sepWidth = length*2;
var tdWidth = (100-sepWidth)/length;
var counter=0;
$.each(subGridDetails,function(key,value, index)
{
counter++;
tdEle = $(“<td>”,
{
width: tdWidth + “%”,
class:’block’
});

divEle = $(“<div>”,
{
class: “rowDetails”,
text: value
});

divEle.appendTo(tdEle);

divEle = $(“<div>”,
{
class: “rowSubDetails”,
id: key
});
divEle.appendTo(tdEle);
tdEle.appendTo(trEle);

if(counter<length)
{
tdEle = $(“<td>”,
{
width: “2%”,
class:’v-separator’
});
tdEle.appendTo(trEle);
}
});
trEle.appendTo(tableEle);

return tableEle;
}

[DimitarParticipant]

Hello yennamvinay,

First you should make sure your data adapter is bound to the required data. If you have changed the url to the data, you need to re-set the source url property, then call the data adapter’s dataBind method and finally, call the grid’s updatebounddata method.

Best Regards,
Dimitar

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

[Author]

Posts