There is currently in the jqGrid API a bug where the horizontal scroll bar will always show when the width of the grid is automatic. Here is a workaround.

First, here are some javascript functions to help fix the error:

        var fixGridWidth = function (grid) {
            var gviewScrollWidth = grid[0].parentNode.parentNode.parentNode.scrollWidth;
            var mainWidth = jQuery('#main').width();
            var gridScrollWidth = grid[0].scrollWidth;
            var htable = jQuery('table.ui-jqgrid-htable', grid[0].parentNode.parentNode.parentNode);
            var scrollWidth = gridScrollWidth;
            if (htable.length > 0) {
                var hdivScrollWidth = htable[0].scrollWidth;
                if ((gridScrollWidth < hdivScrollWidth))
                    scrollWidth = hdivScrollWidth; // max (gridScrollWidth, hdivScrollWidth)
            }
            if (gviewScrollWidth != scrollWidth || scrollWidth > mainWidth) {
                var newGridWidth = (scrollWidth <= mainWidth) ? scrollWidth : mainWidth;  // min (scrollWidth, mainWidth)
                // if the grid has no data, gridScrollWidth can be less then hdiv[0].scrollWidth
                if (newGridWidth != gviewScrollWidth)
                    grid.jqGrid("setGridWidth", newGridWidth);
            }
        };

        var fixGridHeight = function (grid) {
            var gviewNode = grid[0].parentNode.parentNode.parentNode;
            //var gview = grid.parent().parent().parent();
            //var bdiv = jQuery("#gview_" + grid[0].id + " .ui-jqgrid-bdiv");
            var bdiv = jQuery(".ui-jqgrid-bdiv", gviewNode);
            if (bdiv.length) {
                var delta = bdiv[0].scrollHeight - bdiv[0].clientHeight;
                var height = grid.height();
                if (delta !== 0 && height && (height - delta > 0)) {
                    grid.setGridHeight(height - delta);
                }
            }
        };

        var fixGridSize = function (grid) {
            this.fixGridWidth(grid);
            this.fixGridHeight(grid);
        };

        function loadCompletedEvent(data) {
            var gr = jQuery('#grid');
            fixGridSize(gr);
        }

 

Where 'main' is the div containing the grid, and 'grid' is the name of the grid. (main is the MVC default)

Finally you have to add the loadCompletedEventFunction to the grid:

       .SetOnLoadCompleteEvent("loadCompletedEvent")

Full grid:

    <%= Html.Grid(new GridControl()
        .SetName("grid")
        .SetPageSize(10)
        .SetIsAutoSize(true)        
        .SetHttpVerb(HttpVerbs.Get)
        .SetListUrl("Home/List")
        .SetHeight("'100%'")
        .SetOnLoadCompleteEvent("loadCompletedEvent")
        .SetAdditionalAttributes("sortname: 'Price', sortorder: 'asc',")
        .SetColumns<MVC.Controls.Examples.Models.Product>(cs=>
             {
                cs.Add(x => x.Actions).SetEditable(false);                                                
                cs.Add(x => x.ProductId).SetAsPrimaryKey();
                cs.Add(x => x.Name);
                cs.Add(x => x.CompanyName);
                cs.Add(x => x.Price);
            })          
        )
    %>

 

Thanks to Oleg for the fix: Correctly calling setGridWidth on a jqGrid inside a jQueryUI Dialog

Last edited Jun 7, 2011 at 4:21 PM by PhilmanCJ, version 5

Comments

No comments yet.