How to clear grid contents?

[Alex MinMember]

Hello.

I was wondering how to clear all of data in grid.

I need to delete all of data in grid when I click some button.
But, I’m not sure how to do.

I tried to use this method. $(‘#grid’).jqxGrid(‘clear’); But, it dosen’t work.
Please let me know how to delete all of contents in grid.

================================================================================================
$(document).ready(function () {
var theme = “classic”;
var data = new Array();
var rowcnt;

var dex = [];
var cntryCd = [];
var cntryNm = [];
var portCd = [];
var portNm = [];

var generatedata = function (rowscount) {
for (var i = 0; i < rowscount; i++) {
var row = {};
row["number"] = dex[i];
row["cntryCode"] = cntryCd[i];
row["cntryName"] = cntryNm[i];
row["portCode"] = portCd[i];
row["portName"] = portNm[i];
data[i] = row;
}
return data;
};

var source = {
localdata: generatedata(0),
datatype: "array"
};

var dataAdapter = new $.jqx.dataAdapter(source, {
downloadComplete: function (data, status, xhr) { },
loadComplete: function (data) { },
loadError: function (xhr, status, error) { }
});

$("#jqxGrid").jqxGrid({
theme: theme,
width: 760,
height:320,
source: dataAdapter,
pagesize: 10,
pageable: true,
autoheight: false,
sortable: true,
altrows: true,
clear: true,
columnsresize: true,
enabletooltips: true,
columns: [
{ text: '', datafield: 'check', columntype: 'checkbox', checkboxes: true, width: 50},
{ text: 'Number', datafield: 'number', cellsalign: 'right', width: 60 },
{ text: 'Country Code', datafield: 'cntryCode', width: 100 },
{ text: 'Country Name', datafield: 'cntryName', width: 200 },
{ text: 'Terminal Code', datafield: 'portCode', width: 100 },
{ text: 'Terminal Name', datafield: 'portName', width: 260 }
]
});

dataAdapter.dataBind();

$('#TERMINAL_CLEAR_BTN').click(function () {
$("#jqxGrid").jqxGrid('clear');
});

$('#TERMINAL_INQUIRY_BTN').click(function () {
var sCntryCd = $('#COUNTRY_CD').val().toUpperCase();
var sCntryNm = $('#COUNTRY_NM').val().toUpperCase();
var sPortCd = $('#TERMINAL_CD').val().toUpperCase();
var sPortNm = $('#TERMINAL_NM').val();

$.getJSON('terminalInquiry.do', {'sCntryCd':sCntryCd, 'sCntryNm':sCntryNm, 'sPortCd':sPortCd, 'sPortNm':sPortNm},function(data) {
$.each(data, function(index, entry) {
dex.push(index+1);
cntryCd.push(entry["cntryCode"]);
cntryNm.push(entry["cntryName"]);
portCd.push(entry["portCode"]);
portNm.push(entry["portName"]);
rowcnt = index+1;
});
source.localdata = generatedata(rowcnt);
dataAdapter.dataBind();

$("#jqxGrid").jqxGrid({ source: source});

});
});
});

[Peter StoevKeymaster]

Hi Alex Min,

To clear the Grid contents, you need to use its ‘clear’ method. By looking into your code, I found out that you are defining a ‘clear’ variable when you initialize the Grid. Remove the ‘clear’ definition from the Grid’s constructor and you will be able to use the Grid’s clear method.

See below:

The $(“#jqxGrid”).jqxGrid({
theme: theme,
width: 760,
height:320,
source: dataAdapter,
pagesize: 10,
pageable: true,
autoheight: false,
sortable: true,
altrows: true,
clear: true,
columnsresize: true,
enabletooltips: true,
columns: [
{ text: ”, datafield: ‘check’, columntype: ‘checkbox’, checkboxes: true, width: 50},
{ text: ‘Number’, datafield: ‘number’, cellsalign: ‘right’, width: 60 },
{ text: ‘Country Code’, datafield: ‘cntryCode’, width: 100 },
{ text: ‘Country Name’, datafield: ‘cntryName’, width: 200 },
{ text: ‘Terminal Code’, datafield: ‘portCode’, width: 100 },
{ text: ‘Terminal Name’, datafield: ‘portName’, width: 260 }
]
});

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Alex MinMember]

OMG, I made a mistake. Thank you Peter. It works. Have a great day!

[Author]

Posts