Grid display an empty row when no record item from json datasource.

[teguhMember]

Hi,

I used grid widget with json datasource from SQL Server (using coldfusion remote component).
The grid works properly on displaying data from datasource. Problem happened when grid still displayed an empty row although no data record from json datasource. So when i add a new row, it places on second row.
Any suggestion how this happened? is it database query problem or grid widget problem?

thanks for any help.

[DimitarParticipant]

Hello teguh,

Please share the version of jQWidgets you are working with and provide us with a code sample so that we may be of help.

Best Regards,
Dimitar

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

[teguhMember]

Hi Dimitar,

I use jQWidgets-2.5. Currently i added some codes below to solve my problem and working finely, is it good solution?

$("#jqxgrid").bind('bindingcomplete', function (event) {
	rows = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
	cellno = $("#jqxgrid").jqxGrid('getcell', 0, 'no');
	cellname = $("#jqxgrid").jqxGrid('getcell', 0, 'name');
	celldesc = $("#jqxgrid").jqxGrid('getcell', 0, 'description');
	if((rows == 1) && (cellno.value == '') && (cellname.value == '') && (celldesc.value == ''))
	{	var commit = $("#jqxgrid").jqxGrid('deleterow', 0); }
});

and below is my jqxgrid code:

var source =
{
	datatype: "json",
    datafields: [   { name: 'no' }, { name: 'id'}, { name: 'name'}, { name: 'description'}    ],
    url: 'remote.cfc?method=getKomplek',
    data: { categoryLabel: value, categoryLevel: level },
    addrow: function (rowid, rowdata, position, commit) {  	commit(true);	},
    deleterow: function (rowid, commit) {	commit(true);	},
    updaterow: function (rowid, newdata, commit) {	commit(true);	}
};
var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true 	});
dataAdapter.dataBind();
				
$("#jqxgrid").jqxGrid(
{
	width: '100%',
	height: '100%',
	source: dataAdapter,
	theme: customDemo.config.theme,
	selectionmode: 'singlerow',
	sortable: true,
	columnsresize: true,
	pagerheight: 40,
	editable: false,
	showtoolbar: true,
	showstatusbar: true,
	columns: [
		{ text: 'No', datafield: 'no', width: 40, cellsalign: 'right' },
		{ text: 'Name', datafield: 'name' },
		{ text: 'Description', datafield: 'description' }
	],
	rendertoolbar: function (toolbar) {
		var me = this;
		var container = $("<div style='margin:4px;'></div>");
		var addSpan = 	$("<a href='#' title='Add' id='addRecord'><span  class='ui-icon ui-icon-plus' style='display:inline-block;float: left; margin-top: 0px; margin-left: 10px;'></span></a>");
		var editSpan =  $("<a href='#' id='editRecord' title='Edit'><span  class='ui-icon ui-icon-pencil' style='display:inline-block;float: left; margin-top: 0px; margin-left: 10px;'></span></a>");
		var trashSpan = $("<a href='#' id='delRecord' title='Delete'><span  class='ui-icon ui-icon-trash' style='display:inline-block;float: left; margin-top: 0px; margin-left: 10px;'></span></a>");
		var tripNumberInput = $("<input class='jqx-input jqx-widget-content jqx-rc-all' id='searchTripNumber' type='text' style='height: 23px; float: right; width: 79px;margin-top: 1px;margin-left:145px;' />");
		toolbar.append(container);
		container.append(addSpan);
		container.append(editSpan);
		container.append(trashSpan);
						
		addSpan.bind('click',function(){});
		editSpan.bind('click',function() { });
		trashSpan.bind('click',function(){});
	}
});

thanks for any suggestion.

[Author]

Posts