Conflict with width Setting and Sorting by Header Click (v. 2.4.1)

[mshapiro]

I have found what appears to be a conflict between using a width setting other than "flex" and local sorting by header click.  With width set as a number or a percent, the following is happening: The column header is clicked, the grid data is sorted internally but the view does not refresh and the column header that was clicked does not highlight with the sort up/down indicator. 

When this happens and a row or cell is selected after sorting (depending upon the selectionModel setting), the rowClick/rowSelect or cellClick/cellSelect events return the correct row for the new sort order even though that may not be the row on the screen that was selected.  Sometimes this occurs when the grid is initially displayed and other times after a row or cell is selected, and then refreshView will correct it.  The headerCellClick, beforeSort and sort events are firing with the correct column value.  I had not seen this before switching to version 2.4.1. 

These are the settings on one of the grids where it happens:

        width: '1000',
        height: '400',
   editable: false,
   wrap: false,
   resizable: true,
   columnBorders: true,
        sortable: true,
        collapsible: { collapsed: false, toggle: false },
        scrollModel: { horizontal: true, lastColumn: 'none' },
        selectionModel: { type: 'row', mode: 'single' },
        hoverMode: 'row',
        draggable: true, 
        dataModel: { location: "local", recIndx: "PeerGroupId", sortIndx: "PeerGroupCode" },

This is happening on all grids where an absolute width is specified.  I need to use absolute widths in some grids because they have many columns and I need to use a horizontal scrollbar.  Thanks.

[paramvir]

I couldn't reproduce the mentioned issue.

The online demo http://paramquery.com/pro/demos/sorting (which is running on 2.4.1) has absolute width and it works fine.

Please share a jsfiddle if you are still facing the issue.

[mshapiro]

hoverMode: 'row' is what is causing the problem in my grids.  When I remove that setting then the problem goes away and I can specify an absolute width with no issues (that I know of).  When I remove it don't get hoverMode: 'row' behavior even though that is supposed to be the default.
hoverMode: 'cell' is okay. 

I would like to use hoverMode: 'row' in most grids.  What would cause a conflict with that setting?

[paramvir]

hoverMode : 'row' works fine too. I don't see any issue with it.

Please share a jsfiddle of your issue so that I can check.

[mshapiro]

I created a jsfiddle (https://jsfiddle.net/mshapiro/n6ts0op8/) but I don't have this issue in the jsfiddle environment.  I don't think the references in jsfiddle are pointing to v. 2.4.1.   I am using http://paramquery.com/Content/js/pqgrid.min.js as the pggrid reference in jsfiddle, I don't know how to include v. 2.4.1 in jsfiddle (same for the .css files). 


The cshtml page in  my .NET application looks like this:

@section Styles {
    <link href="@Url.Content("http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />

    <link href="@Url.Content("gridPro/pqgrid.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("gridPro/themes/office/pqgrid.css")" rel="stylesheet" type="text/css" />
}

@section FooterScripts
{
    <script src="@Url.Content("http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js")" type="text/javascript"></script>

    <script src="@Url.Content("gridPro/pqgrid.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("MyApplication.js")" type="text/javascript"></script>
}

When I switch the pgrid files to version 2.3.0 then the problem goes away.  Am I missing something?  Thanks.

[paramvir]

I've updated the pqgrid reference to 2.4.1 in jsfiddle, but still can't see the issue.

http://jsfiddle.net/paramquery/0g30xsv4/1/

Few suggestions:

1) Please try to use jQueryUI >= 1.9.2

2) Please try to isolate the problem by creating a new page with minimal dependencies and functionality and adding more functionality ( and other libraries ) one at a time until the cause of issue is known and can be reproduced.