jQuery UI Widgets Forums Grid Page size

This topic contains 5 replies, has 2 voices, and was last updated by  illune 10 years, 10 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Page size Posts
  • Page size #2605

    illune
    Member

    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

    • This topic was modified 10 years, 11 months ago by  Peter Stoev.
    Page size #2608

    Peter Stoev
    Keymaster

    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

    Page size #2609

    illune
    Member

    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>
    • This reply was modified 10 years, 11 months ago by  illune.
    • This reply was modified 10 years, 11 months ago by  Peter Stoev. Reason: code formatting
    Page size #2612

    Peter Stoev
    Keymaster

    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

    Page size #2622

    Peter Stoev
    Keymaster

    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

    Page size #2751

    illune
    Member

    Thank you Peter, it works perfectly!
    Regards 😀
    Andrea

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.