Is it possible to set width of a jQGrid in percentage?

Question

Is it possible to set width of a jQGrid in percentage? If yes, then how?

score 16 · Answer 1 · answered May 12 '12 at 23:44

Not directly but it is possible...

If you are wanting to set the width of the entire grid to a percentage you can use the autowidth property and it will set the grids width to the width of it's parent element (i.e. DIV) and that parent element can have it's percentage set.

autowidth: true

If you want to set the column widths by percentage you can use shrinktofit and then your column width values are basically a percentage.

shrinkToFit: true

These options and many others can be found on the JQGrid wiki

score 16 · Answer 2 · answered Jan 03 '13 at 19:51

It's possible in very simple way:

$(document).ready(function(){
var pageWidth = $("#updatesList").parent().width() - 100;
$("#updatesList").jqGrid({
    url:'quick_updates.php?action=loadUpdates'+"&request=ajax",
    datatype: "json",
    colNames:[table_heading_id, table_heading_products, table_heading_categories, table_heading_model, table_heading_availability, table_heading_weight, table_heading_quantity, table_heading_sortorder, table_heading_manufacturers, table_heading_price, table_heading_tax],
    colModel:[
        {name:'id',index:'id', width:(pageWidth*(5/100)), sortable:true, align:"center", search:true},
        {name:'name',index:'name', width:(pageWidth*(20/100)), sortable:true, align:"left",true:false,resizable:true},
        {name:'categories',index:'categories', width:(pageWidth*(10/100)), sortable:true, align:"left",resizable:true,search:true,stype:"select",searchoptions:{value:categories}},
        {name:'model',index:'model', width:(pageWidth*(10/100)), sortable:false, align:"left",search:true,resizable:true,editable:true},
        {name:'availability',index:'availability', width:(pageWidth*(10/100)), sortable:true, align:"left",resizable:true,search:true,stype:"select",searchoptions:{value:availability},editable:true,edittype:"select",editoptions:{value:availability}},
        {name:'weight',index:'weight', width:(pageWidth*(5/100)), sortable:true, align:"center",search:false,editable:true},
        {name:'quantity',index:'quantity', width:(pageWidth*(5/100)), sortable:true, align:"center",search:false,editable:true},
        {name:'sortorder',index:'sortorder', width:(pageWidth*(5/100)), sortable:true, align:"center",search:false,editable:true},
        {name:'manufacturers',index:'manufacturers', width:(pageWidth*(10/100)), sortable:true, align:"left",resizable:true,search:true,stype:"select",searchoptions:{value:manufacturers},editable:true,edittype:"select",editoptions:{value:manufacturers}},
        {name:'price',index:'price', width:(pageWidth*(10/100)), sortable:false, align:"center",search:false},
        {name:'tax',index:'tax', width:(pageWidth*(10/100)), sortable:true, align:"center",resizable:true,search:true,stype:"select",searchoptions:{value:taxes},editable:true,edittype:"select",editoptions:{value:taxes}}
    ],
    rowNum:50,
    rowList:[10,20,30,50,100],

look at this code:

var pageWidth = $("#updatesList").parent().width() - 100;

and this code:

{name:'id',index:'id', width:(pageWidth*(5/100)), sortable:true, align:"center", search:true},
        {name:'name',index:'name', width:(pageWidth*(20/100)),

Sorry for the late response. Like the trick. But will it work when user changes the resolution or change the size of the browser without page load? Can you send me any demo site where i can see. — Amit, Aug 24 '13 at 18:20

score 5 · Answer 3 · answered Apr 13 '14 at 07:55

5

Datatables 3.5+ supports this via

      jQuery("#dt").jqGrid({
                autowidth: true,
                shrinkToFit: true
            });

answered Apr 13 '14 at 07:55

Deepak Thomas

3,355
4
37
39

Sergey Bogdanov · Answer 4 · 2014-05-22T12:57:55.043

1

As for me, I consider this to be the best deсision:

// add this after JqGrid creation
$("#YourTableGrid").setGridWidth( Math.round($(window).width(), true) );

edited May 22 '14 at 12:57

answered Apr 11 '14 at 07:48

Sergey Bogdanov

525
9
22

score 1 · Answer 5 · answered May 23 '16 at 20:53

check window size in jquery.

$(window).on("resize", function () {
        var newWidth = $("#list").closest(".ui-jqgrid").parent().width();
        $("#list").jqGrid("setGridWidth", newWidth, true);
});

make sure to set autowidth: true in grid properties

score 0 · Answer 6 · answered Dec 30 '16 at 00:14

0

If you're trying to set the width of the jqgrid table on your HTML page, try this.

HTML

<table id="jqGrid" width="98%"></table>

JS

var outerwidth = $("#jqGrid").width();

$("#jqGrid").jqGrid({
   width: outerwidth
});

answered Dec 30 '16 at 00:14

TheRealJAG

1,978
20
16

score 0 · Answer 7 · answered Feb 07 '17 at 06:12

 var operationfieldwidth = 40
    function getPercentage(ask)
    {
        return ((screen.width - operationfieldwidth) * ask) / 100;
    }

    $(document).ready(function ($) {
        GridBind();
    });
    function GridBind() {
        $("#jqGrid").jqGrid({
            url: '@(Url.Action("BindRole", "Role"))',
            datatype: 'json',
            mtype: 'Get',
            colNames: ["Role Name", "Role Description", ""],
            colModel: [{ name: 'ActRoleName', index: 'RoleName', width: getPercentage(20), align: 'left', power: 3, sortable: true },
                       { name: 'ADRoleName', index: 'RoleDesc', width: getPercentage(80), align: 'left', power: 6, sortable: true },
                       { name: 'add', sortable: false, width: operationfieldwidth, search: false, power: 0, formatter: addLink }
            ],
            pager: jQuery('#jqControls'),
            iconSet: "fontAwesome",
            rowNum: 25,
            rowList: [25, 50, 100, 500, 1000],
            height: screen.height - 490,
            viewrecords: true,
            emptyrecords: 'No Records are Available to Display',
            jsonReader: {
                root: "rows",
                page: "page",
                total: "total",
                records: "records",
                repeatitems: false,
                Id: "0"
            },
            autowidth: true,
            multiselect: false,
        }).navGrid('#jqControls', {
            edit: false, add: false, del: false, search: true,
            searchtext: "Search", refresh: true
        }, {}, {}, {},
       {
           zIndex: 100,
           caption: "Search Record",
           sopt: ['cn'],
           closeAfterSearch: true
       });
    }
    function addLink(cellvalue, options, rowObject) {
        var Str = "<a class='fa fa-pencil-square-o fa-2x' style='cursor:pointer;' href='../../Role/AddEditRole?id=" + rowObject.ID + "'></a>"
        return Str;
    }

score 0 · Answer 8 · answered May 05 '17 at 16:27

0

$(document).ready(function () { var yourPercentage = 50%; $("#jQGridDemo").setGridWidth($("#jQGridDemo").parent().width() * yourPercentage/100); });

Percentage calculated in the reference of parent wrapper of jqGrid.

answered May 05 '17 at 16:27

Savan S

407
4
19

Is it possible to set width of a jQGrid in percentage?

8 Answers8