Pager and rowSelect problem

[cornflex4Member]

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

[Peter StoevKeymaster]

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

[cornflex4Member]

Ok, thanks !

I’ll wait, great job !

[SRKParticipant]

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.

[Peter StoevKeymaster]

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

[SRKParticipant]

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

[Peter StoevKeymaster]

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

[SRKParticipant]

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

[Peter StoevKeymaster]

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

[SRKParticipant]

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

[Peter StoevKeymaster]

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

[SRKParticipant]

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

[Peter StoevKeymaster]

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

[Author]

Posts