Jqgrid - window.bind event does not allow column resizing in IE8

StackOverflow https://stackoverflow.com/questions/14513518

  •  17-01-2022
  •  | 
  •  

Question

For Jqgrid in IE8, column resizing is not working when I bind a resize event to the window. When I click on a column to resize, it shows resize sign but does not do anything. I am currently using jqgrid 4.4.1 version, I did not have this issue when I was using 4.1.2 for the same code. I have to use 4.4.1 version to have subgrid, grouping support together so cannot revert to 4.1.2 version now. Is there a way to fix this issue? Any help is greatly appreciated. Thanks in advance..

Also I do not see this issue in FF/chrome but only in IE8.

Basically the following code snippet is causing the issue, if I comment out this code column resizing works with out any issue but I cannot resize grid width when browser is resized :(

$(window).bind('resize', function() {
     grid.setGridWidth($(window).width() - 20);
}).trigger('resize');

Following is the complete code to reproduce this issue..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Window Resize Event - Grid Not Resizeable</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/css/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/src/css/ui.multiselect.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/src/ui.multiselect.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/js/jquery.jqGrid.min.js"></script>

    <script type="text/javascript">
    //<![CDATA[
        $(document).ready(function () {

            var grid = $("#list");

            $(window).bind('resize', function() {
                grid.setGridWidth($(window).width() - 20);
            }).trigger('resize');

            var mydata = [
                    {id:"1", invdate:"2007-10-01 13:03:12",name:"test",  note:"note",  amount:"200.00",tax:"10.00",closed:true, ship_via:"TN",total:"210.00"},
                    {id:"2", invdate:"2007-10-02 13:03:12",name:"test2", note:"note2", amount:"300.00",tax:"20.00",closed:false,ship_via:"FE",total:"320.00"},
                    {id:"3", invdate:"2007-09-01 13:03:12",name:"test3", note:"note3", amount:"400.00",tax:"30.00",closed:false,ship_via:"FE",total:"430.00"},
                    {id:"4", invdate:"2007-10-04 13:03:12",name:"test4", note:"note4", amount:"200.00",tax:"10.00",closed:true ,ship_via:"TN",total:"210.00"},
                    {id:"5", invdate:"2007-10-31 13:03:12",name:"test5", note:"note5", amount:"300.00",tax:"20.00",closed:false,ship_via:"FE",total:"320.00"},
                    {id:"6", invdate:"2007-09-06 13:03:12",name:"test6", note:"note6", amount:"400.00",tax:"30.00",closed:false,ship_via:"FE",total:"430.00"},
                    {id:"7", invdate:"2007-10-04 13:03:12",name:"test7", note:"note7", amount:"200.00",tax:"10.00",closed:true ,ship_via:"TN",total:"210.00"},
                    {id:"8", invdate:"2007-10-03 13:03:12",name:"test8", note:"note8", amount:"300.00",tax:"20.00",closed:false,ship_via:"FE",total:"320.00"},
                    {id:"9", invdate:"2007-09-01 13:03:12",name:"test9", note:"note9", amount:"400.00",tax:"30.00",closed:false,ship_via:"TN",total:"430.00"},
                    {id:"10",invdate:"2007-09-08 13:03:12",name:"test10",note:"note10",amount:"500.00",tax:"30.00",closed:true ,ship_via:"TN",total:"530.00"},
                    {id:"11",invdate:"2007-09-08 13:03:12",name:"test11",note:"note11",amount:"500.00",tax:"30.00",closed:false,ship_via:"FE",total:"530.00"},
                    {id:"12",invdate:"2007-09-10 13:03:12",name:"test12",note:"note12",amount:"500.00",tax:"30.00",closed:false,ship_via:"FE",total:"530.00"}
                ];


            grid.jqGrid({
                datatype:'local',
                data: mydata,
                colNames:['Inv No','Date','Client','Amount','Tax','Total','Closed','Shipped via','Notes'],
                colModel:[
                    {name:'id',index:'id',width:70,align:'center',sorttype: 'int'},
                    {name:'invdate',index:'invdate',width:80, align:'center', sorttype:'date',
                     formatter:'date', formatoptions: {newformat:'d-M-Y'}, datefmt: 'd-M-Y'},
                    {name:'name',index:'name', width:70},
                    {name:'amount',index:'amount',width:100, formatter:'number', align:'right'},
                    {name:'tax',index:'tax',width:70, formatter:'number', align:'right'},
                    {name:'total',index:'total',width:120, formatter:'number', align:'right'},
                    {name:'closed',index:'closed',width:110,align:'center', formatter: 'checkbox',
                     edittype:'checkbox',editoptions:{value:'Yes:No',defaultValue:'Yes'}},
                    {name:'ship_via',index:'ship_via',width:120,align:'center',formatter:'select',
                     edittype:'select',editoptions:{value:'FE:FedEx;TN:TNT;IN:Intim',defaultValue:'Intime'}},
                    {name:'note',index:'note',width:100,sortable:false}
                ],
                rowNum:10,
                rowList:[5,10,20],
                pager: '#pager',
                gridview:true,
                autowidth: true,
                sortname: 'invdate',
                viewrecords: true,
                sortorder: 'desc',
                caption:'Just simple local grid',
                height: '100%',
                loadComplete: function(data) {
                   grid.setGridWidth($(window).width() - 20);
                }
            });
            grid.jqGrid ('navGrid', '#pager',
                         {edit:false, add:false, del:false, refresh:true, view:false},
                         {},{},{},{multipleSearch:true,overlay:false});
            grid.jqGrid ('navButtonAdd', '#pager',
                         {
                             caption: "", buttonicon: "ui-icon-calculator", title: "choose columns",
                             onClickButton: function() {
                                 grid.jqGrid('columnChooser');
                            }
                         });
        });
    //]]>
    </script>
</head>
<body>
    <table id="list"><tr><td/></tr></table>
    <div id="pager"></div>
</body>
</html>
Was it helpful?

Solution

The reason of the problem which you describes is compatibility mode of Internet Explorer. By the way I used to use XHTML 1.0 instead of HTML5 only to make easy to switch off the compatibility mode of IE. Inserting of the line

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

will solve the problem of resizing. Compare your original demo with the fixed one.

I recommend you additionally fix some other small problems from the demo which you posted (probably the same problems exist in my original demo which you used as prototype). For example one should fix the URL of multiselect and so on. The modified version of the demo you will find here.

UPDATED: You are right that IE8 (not IE9 where I tested before) still have a problem (another problem) after adding <meta> to the <head>. First of all the problem which you describes are fixed in jqGrid 4.4.3 (see the demo). To fix the problem in jqGrid 4.4.1 you have to modify the code for resizing to the following

$(window).bind("resize", function () {
    var oldWidth = grid.jqGrid("getGridParam", "width"),
        newWidth = $(window).width() - 20;

    if (oldWidth !== newWidth) {
        grid.jqGrid("setGridWidth", newWidth);
    }
}).trigger("resize");

See the corresponding demo.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top