Page size

[illuneMember]

Hi there!
I’m new with jqWidget, thank you for your excellent job!
I’ve got 2 issues with paginated grid loaded from array source, here’s the code:

$(document).ready(function () {
var data = [{"datadef_id":"6","table_id":"2","control_id":"1","field":"field1","label":"label1","type":"","length":"10","default":"default","required":"1","class":"class","info":"info","error":"error","custom":"custom","date_added":"2012-03-05 15:06:49","date_modified":"2012-03-07 10:54:37","deleted":"0"},{"datadef_id":"7","table_id":"2","control_id":"1","field":"field2","label":"label2","type":"","length":"10","default":"default2","required":"0","class":"class","info":"info","error":"error","custom":"custom","date_added":"2012-03-05 15:09:08","date_modified":"2012-03-06 17:15:50","deleted":"0"}];
var cols = new Array();
cols.push({text: " ",datafield: "datadef_id",width: 50,cellsrenderer:__checkbox});
cols.push({"text":"Field","datafield":"field","width":100});
cols.push({"text":"Label","datafield":"label","width":100});
cols.push({"text":"Type","datafield":"type","width":100});
cols.push({"text":"Length","datafield":"length","width":100});
cols.push({"text":"Default","datafield":"default","width":100});
cols.push({"text":"Required","datafield":"required","columntype":"checkbox","width":100});
cols.push({text: " ",datafield: "datadef_id",width: 50,cellsrenderer:__edit});
var source = {datatype:"array",data:data};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#4f58797308638_grid").jqxGrid({
pagesize: 10,
width: 700,
theme: "classic",
sortable: true,
pageable: true,
columnsresize: true,
autoheight: true,
source: dataAdapter,
columns: cols});
});

The grid comes out, but it shows me 8 empty rows that disappear if a try to sort by any column.
Second issue is with checkbox column, all controls are checked even if value is zero. I believe I should cast value to integer (without quotas), but my source comes from serialized array in php… Any workaround?

Thanks
Andrea

[Peter StoevKeymaster]

Hi Andrea,

1. Regarding the first issue and taking into account that you use the source object’s data property for setting the data instead of the new ‘localdata’ property, I suppose that you don’t use jQWidgets 1.7. I suggest you to update to the latest version.

2. Regarding the second issue. As your data is in JSON format, you can set the datatype to ‘json’ and also to specify the datafields. In the code below, I set the ‘type’ of the ‘required’ datafield to ‘bool’. This will fix the checkboxes issue as they expect a boolean type.

var data = [{"datadef_id":"6","table_id":"2","control_id":"1","field":"field1","label":"label1","type":"","length":"10","default":"default","required":"1","class":"class","info":"info","error":"error","custom":"custom","date_added":"2012-03-05 15:06:49","date_modified":"2012-03-07 10:54:37","deleted":"0"},{"datadef_id":"7","table_id":"2","control_id":"1","field":"field2","label":"label2","type":"","length":"10","default":"default2","required":"0","class":"class","info":"info","error":"error","custom":"custom","date_added":"2012-03-05 15:09:08","date_modified":"2012-03-06 17:15:50","deleted":"0"}];
var cols = new Array();
            cols.push({text: " ",datafield: "datadef_id",width: 50});
            cols.push({"text":"Field","datafield":"field","width":100});
            cols.push({"text":"Label","datafield":"label","width":100});
            cols.push({"text":"Type","datafield":"type","width":100});
            cols.push({"text":"Length","datafield":"length","width":100});
            cols.push({"text":"Default","datafield":"default","width":100});
            cols.push({"text":"Required","datafield":"required","columntype":"checkbox","width":100});
            cols.push({text: " ",datafield: "datadef_id",width: 50});
            var source = {
			datatype:"array",
			datafields: [
			{name: "field"},
			{name: "label"},
			{name: "type"},
			{name: "length"},
			{name: "default"},
			{name: "datadef_id"},
			{name: "datadef_id"},
			{name: "required", type: "bool"}
			],		
			localdata:data};
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid({
                pagesize: 10,
                width: 700,
                height: 400,
                pageable: true,
                autoheight: true,
                source: dataAdapter,
                columns: cols});
            });
        });

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[illuneMember]

Thank you Peter, your solution worked like a charme for the boolean value!
I still get the problem about empties rows, even with last jqwidget release. Here’s my updated code:

<code>
$(document).ready(function () {
var data = [{"datadef_id":"7","table_id":"2","control_id":"1","field":"field2","label":"label2","type":"varchar","length":"10","default":"default2","required":"0","class":"class","info":"info","error":"error","custom":"custom","date_added":"2012-03-05 15:09:08","date_modified":"2012-03-08 11:49:44","deleted":"0"}];
var cols = new Array();
cols.push({text: " ",datafield: "datadef_id",width: 50,cellsrenderer:__checkbox});
cols.push({"text":"Field","datafield":"field","width":100});
cols.push({"text":"Label","datafield":"label","width":100});
cols.push({"text":"Type","datafield":"type","width":100});
cols.push({"text":"Length","datafield":"length","width":100});
cols.push({"text":"Default","datafield":"default","width":100});
cols.push({"text":"Required","datafield":"required","columntype":"checkbox","width":100});
cols.push({text: " ",datafield: "datadef_id",width: 50,cellsrenderer:__edit});
var source = {
localdata:data,
datafields: [{name: "field"},
{name: "label"},
{name: "type"},
{name: "length"},
{name: "default"},
{name: "datadef_id"},
{name: "datadef_id"},
{name: "required", type: "bool"}],
datatype:"json"};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#4f589e4794886_grid").jqxGrid({pagesize: 10,selectionmode: "none",width: 700,theme: "base",sortable: true,pageable: true,columnsresize: true,autoheight: true,source: dataAdapter,columns: cols});});
</code>

[Peter StoevKeymaster]

Hi Andrea,

I must have tested with another version regarding the auto-sizing. The fix for the auto-height will be available in the tomorrow’s release.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Peter StoevKeymaster]

Hi Andrea,

I am happy to tell you that the new version of jQWidgets is available for download from our Download page and the reported in this thread issue should be fixed.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[illuneMember]

Thank you Peter, it works perfectly!
Regards 😀
Andrea

[Author]

Posts