开发者

Why is JqGrid losing the rightmost column border when Grouping is active?

开发者 https://www.devze.com 2023-03-26 12:23 出处:网络
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.

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.

Why is JqGrid losing the rightmost column border when Grouping is active?

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}


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号