Question

I have a grid without too much customization that renders fine with grouping: false

If I turn on grouping, the border disappears, as shown in the screenshot.

The CSS classes for one of the cells regarding border are ui-jqgrid and TR.ui-row-ltr TD which have the border set to 1px solid, but it doesn’t actually render. If I turn off the border attribute, it removes it from the grouping row and all other rows in the grid.

Any thoughts on how to get this border to draw? Thanks!

Grid definition by request:

{
        colNames: ["ItemId", "DetailId", "UPC", "Ship Date", "Vendor", "VendorDisplay", "Item", "UPC", "Description", "Pack", "Ret", "Exp", "Inv", "Memo", "Distro", "Requst", "Reason"],
        colModel: [
            { name: "ItemId", index: "ItemId", width: 1, hidden: true },
            { name: "DetailId", index: "DetailId", width: 1, hidden: true, editable: true },
            { name: "UPC", index: "UPC", width: 1, hidden: true },
            { name: "ShipDateDisplay", index: "ShipDateDisplay", width: 65, stype: "text", searchoptions: { dataInit: GridModels.Formatters.DatePicker, attr: { title: "Select Date"}} },                
            { name: "Vendor", index: "Vendor", width: 0, hidden: true, stype: "select", searchoptions: { searchhidden: true, value: "0:Vendor1;1:Vendor2"} },                
            { name: "VendorDisplay", index: "VendorDisplay", hidden: true },
            { name: "VendorItem", index: "VendorItem", width: 40, align: "Right" },
            { name: "UPC_DISPLAY", index: "UPC_DISPLAY", width: 70, align: "Right" },
            { name: "ItemDescription", index: "ItemDescription", width: 200 },
            { name: "CasePack", index: "CasePack", width: 35, align: "Right" },
            { name: "Retail", index: "Retail", width: 50, align: "Right", search: false, formatter: Store.Cuts.Common.RetailLoader },               
            { name: "InvQty", index: "InvQty", width: 50, align: "Right", search: false, formatter: Store.Cuts.Common.InventoryLoader },
            { name: "Memo", index: "Memo", width: 50 },
            { name: "Qty", index: "Qty", width: 30, align: "Right", search: false },
            { name: "StoreQty", index: "StoreQty", width: 35, align: "Right", search: false, editable: true, editrules: { required: true, integer: true, minValue: 0} },
            { name: "StoreReason", index: "StoreReason", width: 130, align: "Right", search: false, editable: true, edittype: "select", editoptions: { value: reasons} }
        ],
        editurl: editurl,
        url: gridurl,
        grouping: true,
        groupingView: {
            groupField: ['VendorDisplay'],
            groupColumnShow: false,
            groupText: ['<b>{0}</b>'],
            groupDataSorted: true
        },
        pager: pager,
        height: 250,
        rowNum: 20            
    };

$.extend($.jgrid.defaults, {
            datatype: 'json',
            height: "100%",
            loadui: 'none',
            jsonReader: {
                root: "Rows",
                page: "Page",
                total: "Total",
                records: "Records",
                repeatitems: false,
                userdata: "UserData",
                id: "Id",
                subgrid:
                {
                    root: "Rows",
                    repeatitems: false
                }
            },
            mtype: 'GET',
            autowidth: true,
            sortable: true,
            sortname: 'Id',
            sortorder: 'asc',
            rowNum: 10,
            rowList: [10, 20, 50, 100],
            viewrecords: true,              
            beforeRequest: function () {
                $("#load_grid").html('<h4 style="display: inline; position: relative; top: -10px; font-weight: bold">Loading...</h4>' + $(".loader").html());
                Common.Grid.DisableControls();
            },
            loadComplete: function () {
                if (!loadonce)
                    loadonce = true;

                if ($("#grid").getGridParam("reccount") === 0)
                    Common.Grid.DisplayStatus("No records found...");
                else
                    Common.Grid.HideStatus();

                if (loadCompleteEx)
                    loadCompleteEx();
            },
            gridComplete: function () {
                if (!loadonce) {
                    Common.Grid.LoadNavBar($(this));

                    // Align check all checkbox better
                    $("th[id=grid_cb]")
                        .css("text-align", "center")
                        .css("position", "relative")
                        .css("left", "1px");
                }

                if (gridCompleteEx)
                    gridCompleteEx();

                Common.Grid.EnableControls();
            }
        });

You can use the following JSON string to populate the grid with test data which causes the problem on my end:

{"Total":1,"Page":1,"Records":3,"Rows":[{"Id":1,"Description":"","ShipDate":"/Date(-62135578800000)/","ShipDateDisplay":"01/01/0001","Type":null,"IsAvailableToStores":false,"IsReadOnly":false,"IsStoreFinalized":false,"IsHQFinalized":false,"IsDeleted":false,"BuyerId":0,"Buyer":null,"Memo":null,"ItemId":0,"Vendor":"01111","VendorDisplay":"1111 - ","VendorName":null,"VendorItem":null,"UPC_DISPLAY":"00000-01111","UPC":"1111","ItemDescription":"Test","CasePack":0,"RetailAmt":0,"RetailMult":0,"Retail":"$0.00","SaleAmt":0,"SaleMult":0,"ExpressAmt":null,"ExpressMult":null,"InvQty":0,"DetailId":0,"StoreNumber":0,"StoreName":null,"OriginalQty":0,"BuyerQty":0,"Qty":0,"StoreQty":0,"StoreReason":null,"FinalQty":0},{"Id":2,"Description":"","ShipDate":"/Date(-62135578800000)/","ShipDateDisplay":"01/01/0001","Type":null,"IsAvailableToStores":false,"IsReadOnly":false,"IsStoreFinalized":false,"IsHQFinalized":false,"IsDeleted":false,"BuyerId":0,"Buyer":null,"Memo":null,"ItemId":0,"Vendor":"01111","VendorDisplay":"1111 - ","VendorName":null,"VendorItem":null,"UPC_DISPLAY":"00000-01111","UPC":"1111","ItemDescription":"Test","CasePack":0,"RetailAmt":0,"RetailMult":0,"Retail":"$0.00","SaleAmt":0,"SaleMult":0,"ExpressAmt":null,"ExpressMult":null,"InvQty":0,"DetailId":0,"StoreNumber":0,"StoreName":null,"OriginalQty":0,"BuyerQty":0,"Qty":0,"StoreQty":0,"StoreReason":null,"FinalQty":0},{"Id":3,"Description":"","ShipDate":"/Date(-62135578800000)/","ShipDateDisplay":"01/01/0001","Type":null,"IsAvailableToStores":false,"IsReadOnly":false,"IsStoreFinalized":false,"IsHQFinalized":false,"IsDeleted":false,"BuyerId":0,"Buyer":null,"Memo":null,"ItemId":0,"Vendor":"02222","VendorDisplay":"2222 - ","VendorName":null,"VendorItem":null,"UPC_DISPLAY":"00000-01111","UPC":"1111","ItemDescription":"Test","CasePack":0,"RetailAmt":0,"RetailMult":0,"Retail":"$0.00","SaleAmt":0,"SaleMult":0,"ExpressAmt":null,"ExpressMult":null,"InvQty":0,"DetailId":0,"StoreNumber":0,"StoreName":null,"OriginalQty":0,"BuyerQty":0,"Qty":0,"StoreQty":0,"StoreReason":null,"FinalQty":0}],"UserData":null}

Answer 1

The code which you posted include many undefined functions like custom formatters and so on. After I commented all unknown parts I received the demo which has no effects which you described. Probably the problems which you described not exist without the parts of the code which you not posted. If you posted the URL which can be used to see the problem live (of course with unminimized jqGrid code jquery.jqGrid.src.js) I could take a look inside.