Load & Unloading the grid example

[jas-Member]

I would like to see a good example of loading & unloading the grid (while refreshing its data source). Currently I am doing it like the following:

$("#current-inventory").bind('collapse', function(event, ui) {
    $("#jqxgrid").jqxGrid('destroy');
});
$("#current-inventory").bind('expand', function(event, ui) {
    _load();
});
function _load()
{
    $.ajax({
        data: {'key':'value'},
        url: 'http://server.com/path/to',
        success: function(){
            _display($(this));
        }
     });
}
function _display(obj)
{
    var source = {
        localdata: obj,
	sort: customsortfunc,
	datafields:[
		{ name: 'Computer', type: 'string' },
		{ name: 'SKU', type: 'string' },
		{ name: 'Serial', type: 'string' },
		{ name: 'UUIC', type: 'string' },
		{ name: 'MSerial', map: 'Monitor>0>Serial', type: 'string' },
		{ name: 'MSKU', map: 'Monitor>0>SKU', type: 'string' }
	    ],
	    datatype: "json"
  };
  var dataAdapter = new $.jqx.dataAdapter(source);
  $("#jqxgrid").jqxGrid({
	autoshowloadelement: true,
	width: '100%',
	altrows: true,
	source: dataAdapter,
	autoheight: true,
	columns: [
		{ text: 'Hostname', datafield: 'Computer', width: '20%' },
		{ text: 'SKU', datafield: 'SKU', width: '20%' },
		{ text: 'Serial', datafield: 'Serial', width: '20%' },
		{ text: 'UUIC', datafield: 'UUIC', width: '10%' },
		{ text: 'Monitor Serial', datafield: 'MSerial', width: '20%' },
		{ text: 'Monitor SKU', datafield: 'MSKU', width: '10%' }
	    ]
  });
}

It loads the first time, but on subsequent loads I receive errors regarding the current area being unavailable.

[Peter StoevKeymaster]

Hi jas-,

The “destroy” method completely removes the Grid from the DOM. If you want to use that approach, you should add a DIV tag to the DOM for the Grid again.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts