jqgrid rtl horizontal scrollbar problem

Question

When I resize my grid , and the horizontal scrollbar appears , I see that an extra space in the header is created for it , but I still see it on the other grid columns. i want to see this scrollbar only on the most left column.

this is my code:

$(function()
    {               
        $("#gridTable").jqGrid(
        {
            editurl: "clientArray",
            direction:"rtl",
            datatype: "local",
            colNames:['Code1','Code2', 'Code3', 'Code4','Code5','Code6','Code7','Code8','Code9'],
            colModel:[
                                        {name:'code1',index:'code1', width:60, sorttype:"int" , editable:true, edittype:'text'},
                                        {name:'code2',index:'code2', width:150, sorttype:"date" , editable:true, edittype:'text'},
                                        {name:'code3',index:'code3', width:150 , editable:true, edittype:'text'},
                                        {name:'code4',index:'code4', width:80,  sorttype:"float" , editable:true, edittype:'text'},
                                        {name:'code5',index:'code5', width:80, sorttype:"float" , editable:true, edittype:'text'},
                                        {name:'code6',index:'code6', width:80, sorttype:"float" , editable:true, edittype:'text'},
                                        {name:'code7',index:'code7', width:80, sortable:false , editable:true, edittype:'text'},
                                        {name:'code8',index:'code8', width:80, sorttype:"float" , editable:true, edittype:'text'},
                                        {name:'code9',index:'code9',  sorttype:"float" , editable:true, edittype:'text'},
                                  ],                
            height: '120px' ,
             scrolling: true,
            autowidth: true,
            shrinkToFit: false                
          });

          $("#gridTable").closest(".ui-jqgrid-bdiv").css({ 'overflow-y' : 'scroll' });

          var mydata = [
               {code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
               {code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
               {code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
               {code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
               {code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
               {code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
               {code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
    ];

            for(var i=0;i<=mydata.length;i++)
                    jQuery("#gridTable").jqGrid('addRowData',i+1,mydata[i]);
    });

and this is a picture of the problem:

Any help will be appritiated ,

Thank's in advance.

Answer 1

Try to verify that the problem with the horizontal scrollbar exist in Google Chrome or Safari web browsers. If in the browsers you will have no horizontal scroll bar, that the problem which you have is the same which I described here.

The problem that jqGrid had wrong width calculation in case of shrinkToFit:false. My suggestion to fix the bug is implemented in the jqGrid code on the GitHub and will be sure in the code of the next jqGrid version. So you can either try to use developer (non-minimized) version of jqGrid from the GitHub or set the correct width of the grid explicitly like I described in the bug report.

One more workaround: you can fix the grid width with respect of fixGridWidth function which code I posted here.

UPDATED: I looked the problem one more time and can say that your problem come really mostly from the bug in jqGrid in case of shrinkToFit:false usage. After the changing of one line of jqGrid code (after the bug fixing) and minor changes in the definition of jqGrid the grid will be the following

you can see it live here. The corresponding code is

$(function() {
    var mydata = [
       {id:"1",code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
       {id:"2",code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
       {id:"3",code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
       {id:"4",code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
       {id:"5",code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
       {id:"6",code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
       {id:"7",code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""}
    ];
    $("#gridTable").jqGrid({
        editurl: "clientArray",
        direction:"rtl",
        datatype: "local",
        data: mydata,
        colNames:['Code1','Code2', 'Code3', 'Code4','Code5','Code6','Code7','Code8','Code9'],
        colModel:[
            {name:'code1',index:'code1', width:60, sorttype:"int", editable:true},
            {name:'code2',index:'code2', width:150, sorttype:"date", editable:true},
            {name:'code3',index:'code3', width:150, editable:true},
            {name:'code4',index:'code4', width:80, sorttype:"float", editable:true},
            {name:'code5',index:'code5', width:80, sorttype:"float", editable:true},
            {name:'code6',index:'code6', width:80, sorttype:"float", editable:true},
            {name:'code7',index:'code7', width:80, sortable:false, editable:true},
            {name:'code8',index:'code8', width:80, sorttype:"float", editable:true},
            {name:'code9',index:'code9', sorttype:"float", editable:true}
        ],
        height: 'auto',
        shrinkToFit: false
    });
});

The code fix small bugs in you code and make minimal optimization with respect of the usage of the data parameter instead of addRowData. The small bugs in your code are following:

• at the end of initializing of mydata you have comma before ']' which is syntax error. The same error you have in the definition of the colModel. You should remove both commas before ']'. In the case of usage data it would be strictly recommended to include additional id property in the definition of every item in the mydata array. The id will define the corresponding row id.
• in the loop for(var i=0;i<=mydata.length;i++) you will try to access to undefined element mydata[mydata.length]. The loop should be changed to for(var i=0;i<mydata.length;i++). More better is to fill grid with respect of data parameter (see the code above).
• the parameter edittype:'text' used in all columns is default, so you can remove it.
• there are not exist jqGrid parameter scrolling: true which will be just ignored by jqGrid.
• the jqGrid parameter autowidth: true seems to me not good in case of the usage together with shrinkToFit: false, because it will follow to the change of the grid width. So you will either have horizontal scroll bar in the grid because of autowidth: true or you will have many free space as the part of grid.
• setting the grid height explicitly like height: '120px' instead of height: 'auto' can also follows to vertical scroll bar which will take the grid width. So the horizontal bar can be also seen.

UPDATED: I recommend additionally to look at the demo and this one from the comment.

UPDATED 2: No such problem exist in free jqGrid.