jQuery Grid Plugin - jqGridForum

Forum

November 2nd, 2014

A A A

Topic RSS

Column Reordering from v.3.6 works incorrect with master/detail grids

30/10/2009
13:11

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

Hello Tonny!

New Column Reordering is very nice, but it works incorrect with master/detail grids:

Before columns reordering master/detail grids looked like

after reordering columns "Name" and "Testtiefe" in the master grid we receive a vary strange picture:

If we remove detail grid (comment the corresponding code), everything will be works fine:

The same problem I have in all my master/detail grid pages. All pages with one grid works correct. So I think, to reproduce the problem you can add "sortable: true" in any your master/detail grid example.

Best regards

Oleg

31/10/2009
03:23

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello Oleg,

Thanks. Will certainly test this behaviour.

Best Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

31/10/2009
03:30

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Oleg,

I have just tested this on the demo MasterDetail and Grid as SubGrid and everething work OK. Could you please provide me a link to the problem or just publish or send me the code.

Thanks.

Best Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

31/10/2009
14:10

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

Hello Tony!

I reduced my code and made it working with local data only instead of json in the original:

<html>

<head>

...

</head>

<body>

...

...

</body>

</html>

where Testclusters.js looks like following

jQuery(document).ready(function() {
    jQuery('#list').jqGrid({
        caption: 'Testclusters',
        height: 'auto',
        gridview: true,
        rownumbers: true,
        sortable: true,
        datatype: 'local',
        viewrecords: true,
        pager: '#pager',
        pgbuttons: false,
        pginput: false,
        rowNum: 10000,
        colNames: ['Name', 'Testtiefe', 'RowVersion'],
        colModel: [
            { name: 'Name', index: 'Name', width: 120, sortable: false, editable: true, editoptions: { size: 30} },
            { name: 'TesttiefeName', index: 'TesttiefeName', width: 180, sortable: false, search: false, editable: true, editoptions: { size: 25} },
            { name: 'RowVersion', index: 'RowVersion', width: 1, sortable: false, hidden: true, editable: true, editrules: { edithidden: false} }
        ]
    });
    var myData = [
                { Name: "VIA XP", TesttiefeName: "Alle SW-Produkte", RowVersion: "20FC31" },
                { Name: "KUBUS", TesttiefeName: "Alle SW-Produkte", RowVersion: "20FC32" }
    ];
    for (var i = 0; i <= myData.length; i++)
        jQuery("#list").addRowData(i + 1, myData[i]);

    jQuery('#detail').jqGrid({
        caption: 'Testclustersdetails',
        height: 'auto',
        gridview: true,
        rownumbers: true,
        sortable: true,
        datatype: 'local',
        pager: '#pagerdetail',
        rowNum: 10000,
        colNames: ['Businessprofil', 'Bereitstellungsform', 'RowVersion'],
        colModel: [
            { name: 'BusinessprofilName', index: 'Profil', width: 150, editable: true, editoptions: { size: 30} },
            { name: 'BereitstellungsformName', index: 'Bereitstellungsform', width: 150, search: false, editable: true, editoptions: { size: 25} },
            { name: 'RowVersion', index: 'RowVersion', width: 1, hidden: true, editable: true, editrules: { edithidden: false} }
        ],
        pgbuttons: false,
        pginput: false
    });

    var myDetailData = [
                { BusinessprofilName: "ERGO PC KUBUS XP", BereitstellungsformName: "Fat Client", RowVersion: "20FC67" },
                { BusinessprofilName: "ERGO PC KUBUS XP", BereitstellungsformName: "Web", RowVersion: "20FC68" }
    ];
    for (var j = 0; j <= myDetailData.length; j++)
        jQuery("#detail").addRowData(j + 1, myDetailData[j]);

});

You can download the full HTML/CSS/JavaScript code with all dependend files from http://www.ok-soft-gmbh.com/ReorderColumnsError/ReorderColumnsError.zip

For the code of jqGrid 3.6 beta I used the code, which I just now loaded from http://github.com/tonytomov/jqGrid/tree/jqgrid36

Best regards

Oleg

01/11/2009
01:20

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello Oleg,

The fix is in GitHub. Thanks

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

01/11/2009
02:33

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

Thank you very much, Tonny!

Now everything works correct. I love jqGrid!

Oleg

02/11/2009
00:07

ilmsair

New Member

Members

Forum Posts: 2

Member Since:
02/11/2009

Offline

Hello,

I am new here. Started using jQgrid for my rails project. Used tabletogrid to format a html table to grid. Works and dipslays fine. However, re-ordering results in mismatch of data and column headings. Help would be appreciated.

Regards

02/11/2009
13:21

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

I can not reproduce this in my testing machine.

Could you please post the code or send me a link to the problem.

Or at last send me the code to my e-mail.

Thank you

Best Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

03/11/2009
00:11

ilmsair

New Member

Members

Forum Posts: 2

Member Since:
02/11/2009

Offline

I am not able to insert the screenshots. If you can tell me your email address I will send the screenshots as a .odt document. I have tested this is Safari and Firefox and the results are the same. In Safari I noticed that the mismatch is happening on the 10th row. I don't know if this is a co-incidence. In Firefox it seems to be random.

The code for displaying the grid below:-

HTML Table:-

<thead>

<tr>

<th>Unit Demand No</th>

<th>Part Number</th>

<th>Reason Demand</th>

<th>Demand Qty

</thead>

<tbody>

<% for unit_demand in @unit_demands %>

<tr>

</tr>

<% end %>

</tbody>

</table>

The data matches the column headers.

After this when re-ordering columns, the data and column headers are mismatched. This is the first block of code in the application.js file. The code in application.js is as follows:-

$(document).ready(function()

{

tableToGrid(”#unitdems”, {

sortable: true,

pager: $('#pager'),

//rowNum: 10,

//rowList: [10, 20, 30],

//sortorder: 'desc',

//viewrecords: true,

imgpath: 'public/images/ui',

forceFit: true,

loadtext: 'Loading…',

caption: 'Unit Demands'

});

Then when I re-order the columns randomly, they all fit together again, as shown below:-

The code for displaying the grid below:-

HTML Table:-

<thead>

<tr>

<th>Unit Demand No</th>

<th>Part Number</th>

<th>Reason Demand</th>

<th>Demand Qty

</thead>

<tbody>

<% for unit_demand in @unit_demands %>

<tr>

</tr>

<% end %>

</tbody>

</table>

The data matches the column headers.

After this when re-ordering columns, the data and column headers are mismatched. This is the first block of code in the application.js file. The code in application.js is as follows:-

$(document).ready(function()

{

tableToGrid(”#unitdems”, {

sortable: true,

pager: $('#pager'),

//rowNum: 10,

//rowList: [10, 20, 30],

//sortorder: 'desc',

//viewrecords: true,

imgpath: 'public/images/ui',

forceFit: true,

loadtext: 'Loading…',

caption: 'Unit Demands'

});

Then when I re-order the columns randomly, they all fit together again.

Regards

04/11/2009
04:39

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Thanks. I will check it.

Best Regsrds

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

19/11/2009
09:51

Joseph Sheinis

Guest

Guests

I see the same issue in IE and Opera, but not in Firefox.

Select a column to the right of the jqgrid horizontal scrollbar (not visible until scrolled) and sort by it - header and data now mismatched. Mozilla in this scenario automatically scrolls grid to show its left side, but IE and Opera do not.

Is there a workaround?

Thank you!

21/11/2009
03:30

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Thanks.I see this. Yes the behaviour is strange in FireFox too when we first resize the coumns so that horizontal scrollbar appear and when we try to sort column which is not visible - it is go to a bad position.

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
82 Guest(s)

Currently Browsing this Page:
1 Guest(s)