CODEWITHSUNDEEP
htmlcssjqgridinternet-explorer-10internet-explorer-11
Earth
Earth

Reputation: 3571

Un-Frozen columns headers are not moving(scrolling) along with data when doing horizontal scroll in jqgrid particularly in IE11 and Chrome?

In IE10, the un-frozen column headers are getting scroll, when the data is scrolled horizontally. IE 10, there is no Issue and working fine as expected.

But in IE11 and in chrome latest version, the Un-Frozen columns headers are not moving(scrolling) along with data, when doing horizontal scroll in jqgrid.

I set first two columns as frozen to true.

Code:

        $grid.jqGrid({
                        datatype: 'local',
                        data: myData,
                        colNames: ['Column1', 'Column2', 'Column3', 'Column4', 'Column5', 'Column6',
                                    'Column7', 'Column8', 'Column9', 'Column10', 'Column11', 'Column12'],
                        colModel: [
                            { name: 'col1', index: 'col1', frozen: true }, { name: 'col2', index: 'col2', frozen: true },
                            { name: 'col3', index: 'col3' }, { name: 'col4', index: 'col4' },
                            { name: 'col5', index: 'col5' }, { name: 'col6', index: 'col6' }, { name: 'col7', index: 'col7' },
                            { name: 'col8', index: 'col8' }, { name: 'col9', index: 'col9' }, { name: 'col10', index: 'col10' },
                            { name: 'col11', index: 'col11' }, { name: 'col12', index: 'col12' } 
                          ],
                        shrinkToFit: false,
                        rowNum: 20,
                        rowList: [5, 10, 20, 50, 100],
                        pager: '#pager',
                        gridview: true,
                        ignoreCase: true,
                        rownumbers: true,
                        sortname: 'col3',
                        viewrecords: true,
                        sortorder: 'desc',
                        caption: "TEST",
                        height:'auto'
                    });
            $grid.jqGrid('setFrozenColumns');

CSS

.ui-jqgrid .ui-jqgrid-bdiv {
        position: relative;
        margin: 0em;
        padding: 0;
        overflow: auto;
        text-align: left;
        height:650px !important;
    }

Un-Frozen columns headers are not moving(scrolling) along with data, when doing horizontal scroll in jqgrid particularly in IE11 and Chrome. Provide me a solution. Thanks.

Upvotes: 0

Views: 1070

Answers (1)

Oleg
Oleg

Reputation: 221997

Try to add

$grid.triggerHandler("jqGridAfterGridComplete");

directly after $grid.jqGrid("setFrozenColumns");. You should do this in case of filling jqGrid body before calling of setFrozenColumns. In my opinion it's problem of jqGrid (see the last post in the thread), which should be fixed, but Tony (the developer of jqGrid) have another opinion about the problem.

By the way I think that CSS which you use is not needed. Instead of that you should specify width option in the grid so that the grid will have horizontal scroll bar.

Upvotes: 1

Related Questions