CODEWITHSUNDEEP
javascriptjqueryjqgrid
jeffery_the_wind
jeffery_the_wind

Reputation: 18198

jqgrid 4.5.1 pager not adjusting to fit width of grid

see the pictures of the problem. I have included the HTML and JS grid definition. You can see UI in the pager is not shrinking to fit the width of the container.

I am using jQuery 1.10.2, jQuery UI 1.10.3, and jQgrid 4.5.1. Chromium browser.

Grid definition:

$("#phone_calls").jqGrid({
    url:'/data.php',
    datatype: "json",
    height: 255,
    width: '100%',
    colNames:['Status','Call Time', 'Reason','Name','Phone Number','Address','City or Town','Notes','id'],
    colModel:[
            {name:'Status',index:'Status', width:'60%',searchoptions:{sopt:['eq','ne','le','lt','gt','ge']}},
            {name:'Call_Time',index:'Call_Time', width:'60%',searchoptions:{sopt:['eq','ne','le','lt','gt','ge']}},
            {name:'Reason',index:'Reason', width:'60%',searchoptions:{sopt:['eq','ne','le','lt','gt','ge']}},
            {name:'Name',index:'Name', width:'60%',searchoptions:{sopt:['eq','ne','le','lt','gt','ge']}},
            {name:'Phone_Number',index:'Phone_Number', width:'60%',searchoptions:{sopt:['eq','ne','le','lt','gt','ge']}},
            {name:'Address',index:'Address', width:'60%',searchoptions:{sopt:['eq','ne','le','lt','gt','ge']}},
            {name:'City_Town',index:'City_Town', width:'60%',searchoptions:{sopt:['eq','ne','le','lt','gt','ge']}},
            {name:'Notes',index:'Notes', width:'60%',searchoptions:{sopt:['eq','ne','le','lt','gt','ge']}},
            {name:'id',index:'id', width:'60%',searchoptions:{sopt:['eq','ne','le','lt','gt','ge']}}
    ],
    rowNum:20,
    rowTotal: 200,
    rowList : [20,30,50],
    loadonce:true,
    mtype: 'POST',
    postData: {a:'phone_calls'},
    rownumbers: true,
    rownumWidth: 40,
    gridview: true,
    pager: '#pager_phone_calls',
    sortname: 'id',
    viewrecords: true,
    sortorder: "asc",
    caption: "Phone Calls"  
})
        .jqGrid('filterToolbar',{searchOperators : true});

Actual output: jQgrid pager width not adjusting

Desired pager output (http://trirand.com/blog/jqgrid/jqgrid.html) : example of pager adjusting properly

I am not seeing any JS errors, please let me know with anything. Thanks!

Upvotes: 1

Views: 3241

Answers (1)

Vinoth Krishnan
Vinoth Krishnan

Reputation: 2949

I have tried your code. I did some modifications in your code. Pager working fine for me. The thing is setting percentage to colModel may not work. Remove all percentage, witdh:100% and add the code below.

shrinkToFit : false,
autowidth : true,
height : 'auto',

You can find the working example in fiddle. Let me know if this helps..

Upvotes: 3

Related Questions