jQuery UI Widgets Forums Grid Pager and rowSelect problem

This topic contains 12 replies, has 3 voices, and was last updated by  Peter Stoev 11 years, 11 months ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
  • Pager and rowSelect problem #2746

    cornflex4
    Member

    Hi !

    This is the code :

    $(document).ready(function () {
    // prepare the data
    var theme = 'classic';

    var tabSelection = [];

    var source =
    {
    datatype: "json",
    datafields: [
    { name: 'Id'},
    { name: 'Sel'},
    { name: 'ShippedDate'},
    { name: 'ShipName'},
    { name: 'ShipAddress'},
    { name: 'ShipCity'},
    { name: 'ShipCountry'}
    ],
    url: 'data.php',
    root: 'Rows',
    beforeprocessing: function(data)
    {
    source.totalrecords = data[0].TotalRows;
    for(x in data[0].Rows){
    for(y in tabSelection){
    if(data[0].Rows[x]["Id"]==tabSelection[y]){
    data[0].Rows[x]["Sel"] = 1;
    break;
    }
    }
    }
    },
    sort: function()
    {
    // update the grid and send a request to the server.
    $("#jqxgrid").jqxGrid('updatebounddata');
    }
    };

    var dataadapter = new $.jqx.dataAdapter(source);

    // initialize jqxGrid
    $("#jqxgrid").jqxGrid(
    {

    pageable: true,
    autoheight: true,
    source: dataadapter,
    theme: theme,
    sortable: true,
    sorttogglestates: 1,
    virtualmode: true,
    autoheight: true,
    rendergridrows: function()
    {
    return dataadapter.records;
    },
    columns: [
    { text: 'Sel.', datafield: 'Sel', columntype: 'checkbox', width: 67 },
    { text: 'Shipped Date', datafield: 'ShippedDate', cellsformat: 'd', width: 200 },
    { text: 'Ship Name', datafield: 'ShipName', width: 200 },
    { text: 'Address', datafield: 'ShipAddress', width: 180 },
    { text: 'City', datafield: 'ShipCity', width: 100 },
    { text: 'Country', datafield: 'ShipCountry', width: 140 }
    ]
    });

    $("#jqxgrid").bind('rowselect', function (event) {
    $("#selectrowindex").html(event.args.rowindex);
    var data = $('#jqxgrid').jqxGrid('getrowdata', event.args.rowindex);
    //alert(data.ShipAddress);
    data.Sel = (data.Sel==0) ? 1 : 0;
    if(data.Sel==1){
    tabSelection.push(data.Id);

    }else{
    var idx = tabSelection.indexOf(data.Id); // Find the index
    if(idx!=-1) tabSelection.splice(idx, 1);
    }

    alert(data.Id); // NO WORK WHEN PAGER IS > 4

    //alert(tabSelection.length);
    $('#jqxgrid').jqxGrid('updaterow', event.args.rowindex, data);
    });

    });

    The problem is appear when i am in page >=4 the rowselect don’t work.

    And when i return on page 1, 2, 3 is ok ?

    Why ?

    Thanks & best regards !

    Cornflex4

    • This topic was modified 12 years, 1 month ago by  cornflex4.
    Pager and rowSelect problem #2748

    Peter Stoev
    Keymaster

    Hi Cornflex4,

    I was able to reproduce the problem. This is an issue related to the Grid’s Virtual Mode. We will fix it for the next release which is scheduled for 03-23-2012. Unfortunately, there’s no workaround that I can suggest you.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Pager and rowSelect problem #2749

    cornflex4
    Member

    Ok, thanks !

    I’ll wait, great job !

    Pager and rowSelect problem #4017

    SRK
    Participant

    Hi Peter,

    After Fix , i took latest code for the above issue. it is working fine in Firefox and chrome but it is breaking IE.could you please let me know if there is any alternative which will support cross browsers.

    Pager and rowSelect problem #4018

    Peter Stoev
    Keymaster

    Hi srinivas,

    I’m afraid that I’m not sure what is the behavior on your side as the above code works in all browsers. Therefore, providing a small sample in which this can be observed locally will be appreciated.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Pager and rowSelect problem #4019

    SRK
    Participant

    Peter,

    I have taken the sample demo code which was present in website:

    please find the below code:

    This example shows how to enable the paging feature of the Grid.

     
    $(document).ready(function () {
    var theme = getTheme();
    var url = "../sampledata/orders.xml";
    var parentsLength = $("#jqxWidget").parents().length;
    if (parentsLength > 3) {
    url = 'demos/sampledata/orders.xml';
    }
    // prepare the data
    var source =
    {
    datatype: "xml",
    datafields: [
    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName' },
    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress' },
    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity' },
    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry' }
    ],
    root: "entry",
    record: "content",
    id: 'm\\:properties>d\\:OrderID',
    url: url
    };
    $("#jqxgrid").jqxGrid(
    {
    width: 670,
    source: source,
    theme: theme,
    sortable: true,
    pageable: true,
    autoheight: true,
    columns: [
    { text: 'Ship Name', datafield: 'ShipName', width: 250 },
    { text: 'Shipped Date', datafield: 'ShippedDate', width: 230, cellsformat: 'D' },
    { text: 'Freight', datafield: 'Freight', width: 130, cellsformat: 'F2', cellsalign: 'right' },
    { text: 'Ship Address', datafield: 'ShipAddress', width: 350 },
    { text: 'Ship City', datafield: 'ShipCity', width: 100 },
    { text: 'Ship Country', datafield: 'ShipCountry', width: 101 }
    ]
    });
    $('#events').jqxPanel({ width: 300, height: 300, theme: theme });
    $("#jqxgrid").bind("pagechanged", function (event) {
    $("#eventslog").css('display', 'block');
    if ($("#events").find('.logged').length >= 5)
    {
    $("#events").jqxPanel('clearcontent');
    }
    var args = event.args;
    var eventData = "pagechanged <div>Page:" + args.pagenum + ", Page Size: " + args.pagesize + "</div>";
    $('#events').jqxPanel('prepend', '<div style="margin-top: 5px">' + eventData + '</div>');
    // get page information.
    var paginginformation = $("#jqxgrid").jqxGrid('getpaginginformation');
    $('#paginginfo').html("<div style='margin-top: 5px'>Page:" + paginginformation.pagenum + ", Page Size: " + paginginformation.pagesize + ", Pages Count: " + paginginformation.pagescount);
    });
    $("#jqxgrid").bind("pagesizechanged", function (event) {
    $("#eventslog").css('display', 'block');
    $("#events").jqxPanel('clearcontent');
    var args = event.args;
    var eventData = "pagesizechanged <div>Page:" + args.pagenum + ", Page Size: " + args.pagesize + ", Old Page Size: " + args.oldpagesize + "</div>";
    $('#events').jqxPanel('prepend', '<div style="margin-top: 5px">' + eventData + '</div>');
    // get page information.
    var paginginformation = $("#jqxgrid").jqxGrid('getpaginginformation');
    $('#paginginfo').html("<div style='margin-top: 5px'>Page:" + paginginformation.pagenum + ", Page Size: " + paginginformation.pagesize + ", Pages Count: " + paginginformation.pagescount);
    });
    });
    <div style="font-size: 13px;font-family: Verdana;float: left">
    <div>
    </div>
    <div style="margin-top: 30px">
    <div style="float: left">
    Event Log:
    <div style="border: none">
    </div>
    </div>
    <div style="float: left">
    Paging Details:
    <div>
    </div>
    </div>
    </div>
    </div>

    i am getting following error:

    res://ieframe.dll/acr_depnx_error.htm#,

    Complete Error with Application name is:

    res://ieframe.dll/acr_depnx_error.htm#,http://localhost:18454/Paging.aspx

    This is causing only when i add this line

    if i comment this line , IE is working fine , but i can’t select any row in the grid.

    Regards,
    /Srinivas

    • This reply was modified 11 years, 11 months ago by  SRK.
    • This reply was modified 11 years, 11 months ago by  Peter Stoev. Reason: code formatting
    Pager and rowSelect problem #4022

    Peter Stoev
    Keymaster

    Could you tell me which line do you comment as it is not displayed in your post?

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Pager and rowSelect problem #4023

    SRK
    Participant

    javascript Reference line (jqwidgets/jqxgrid.selection.js)

    Pager and rowSelect problem #4025

    Peter Stoev
    Keymaster

    What steps should I follow to reproduce this? I tried it with IE7, 8 and 9 and I can’t see an error with the online demo.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Pager and rowSelect problem #4027

    SRK
    Participant

    Copy the online demo paging code to new asp.net application(4.0 framework) and add the reference (script/css) files to the solution and map to the solution directory and build and execute it, In IE will get the issue. (or else please find the below code).

    This example shows how to enable the paging feature of the Grid.

    <%-- --%>

    $(document).ready(function () {
    var theme = getTheme();
    var url = "../sampledata/orders.xml";
    var parentsLength = $("#jqxWidget").parents().length;
    if (parentsLength > 3) {
    url = '../sampledata/orders.xml';
    }
    // prepare the data
    var source =
    {
    datatype: "xml",
    datafields: [
    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName' },
    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress' },
    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity' },
    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry' }
    ],
    root: "entry",
    record: "content",
    id: 'm\\:properties>d\\:OrderID',
    url: url,
    sortcolumn: 'ShipName',
    sortdirection: 'asc'
    };
    $("#jqxgrid").jqxGrid(
    {
    width: 670,
    height: 450,
    source: source,
    theme: theme,
    sortable: true,
    pageable: true,
    altrows: true,
    autoheight: true,
    columns: [
    { text: 'Ship Name', datafield: 'ShipName', width: 250 },
    { text: 'Shipped Date', datafield: 'ShippedDate', width: 230, cellsformat: 'D' },
    { text: 'Freight', datafield: 'Freight', width: 130, cellsformat: 'F2', cellsalign: 'right' },
    { text: 'Ship Address', datafield: 'ShipAddress', width: 350 },
    { text: 'Ship City', datafield: 'ShipCity', width: 100 },
    { text: 'Ship Country', datafield: 'ShipCountry', width: 101 }
    ]
    });
    $('#events').jqxPanel({ width: 300, height: 300, theme: theme });
    $("#jqxgrid").bind("pagechanged", function (event) {
    $("#eventslog").css('display', 'block');
    if ($("#events").find('.logged').length >= 5) {
    $("#events").jqxPanel('clearcontent');
    }
    var args = event.args;
    var eventData = "pagechanged

    Page:" + args.pagenum + ", Page Size: " + args.pagesize + "

    ";
    $('#events').jqxPanel('prepend', '

    ' + eventData + '

    ');
    // get page information.
    var paginginformation = $("#jqxgrid").jqxGrid('getpaginginformation');
    $('#paginginfo').html("

    Page:" + paginginformation.pagenum + ", Page Size: " + paginginformation.pagesize + ", Pages Count: " + paginginformation.pagescount);
    });
    $("#jqxgrid").bind("pagesizechanged", function (event) {
    $("#eventslog").css('display', 'block');
    $("#events").jqxPanel('clearcontent');
    var args = event.args;
    var eventData = "pagesizechanged

    Page:" + args.pagenum + ", Page Size: " + args.pagesize + ", Old Page Size: " + args.oldpagesize + "

    ";
    $('#events').jqxPanel('prepend', '

    ' + eventData + '

    ');
    // get page information.
    var paginginformation = $("#jqxgrid").jqxGrid('getpaginginformation');
    $('#paginginfo').html("

    Page:" + paginginformation.pagenum + ", Page Size: " + paginginformation.pagesize + ", Pages Count: " + paginginformation.pagescount);
    });

    // $("#jqxgrid").bind('rowselect', function (event) {
    // $("#selectrowindex").html(event.args.rowindex);
    // var data = $('#jqxgrid').jqxGrid('getrowdata', event.args.rowindex);
    // alert(data.ShipAddress);
    // data.Sel = (data.Sel == 0) ? 1 : 0;
    // if (data.Sel == 1) {
    // tabSelection.push(data.Id);
    //

    // } else {
    // var idx = tabSelection.indexOf(data.Id); // Find the index
    // if (idx != -1) tabSelection.splice(idx, 1);
    // }

    // alert(data.Id); // NO WORK WHEN PAGER IS > 4

    // //alert(tabSelection.length);
    // $('#jqxgrid').jqxGrid('updaterow', event.args.rowindex, data);
    // });

    $("#jqxgrid").bind("sort", function (event) {
    $("#events").jqxPanel('clearcontent');
    var sortinformation = event.args.sortinformation;
    var sortdirection = sortinformation.sortdirection.ascending ? "ascending" : "descending";
    if (!sortinformation.sortdirection.ascending && !sortinformation.sortdirection.descending) {
    sortdirection = "null";
    }
    var eventData = "Triggered 'sort' event

    Column:" + sortinformation.sortcolumn + ", Direction: " + sortdirection + "

    ";
    $('#events').jqxPanel('prepend', '

    ' + eventData + '

    ');
    });
    $('#clearsortingbutton').jqxButton({ height: 25, theme: theme });
    $('#sortbackground').jqxCheckBox({ checked: true, height: 25, theme: theme });
    // clear the sorting.
    $('#clearsortingbutton').click(function () {
    $("#jqxgrid").jqxGrid('removesort');
    });
    // show/hide sort background
    $('#sortbackground').bind('change', function (event) {
    $("#jqxgrid").jqxGrid({ showsortcolumnbackground: event.args.checked });
    });

    });

    Event Log:

    Paging Details:

    New Issue: Now i tried adding Sorting Code to the existing one which i got from demo code, if i add reference of “jqwidgets/jqxgrid.sort.js” file same error in the IE8, but working in Firefox/chrome. Might be some ieframe.dll is giving some exception with our js files.

    Regards,
    /Srinivas

    Pager and rowSelect problem #4028

    Peter Stoev
    Keymaster

    I will test it with ASP .NET application. However, is this an issue related to ASP .NET i.e do you reproduce it in a simple .htm file without the ASP .NET application? Do you reproduce it in our online demo? In addition, Visual Studio 2010 comes with a very old version of jQuery. I think that it was 1.4.2. Do you use jQuery 1.7.2 in your application?

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Pager and rowSelect problem #4029

    SRK
    Participant

    Yes Peter, Visual Studio 2010 is giving default jQuery 1.4.2 but we have referred which was mentioned in the Demo code i.e, jQuery 1.7.2 version.
    Online Demo and .htm file is working fine in IE browser

    Regards,
    /Srinivas

    Pager and rowSelect problem #4030

    Peter Stoev
    Keymaster

    Could you send my your ASP .NET test app to support@jqwidgets.com. I’d like to test debug it locally. Thanks in advance.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.