Stop Kendo from auto-generating grid columns

2019-09-13 23:37发布

问题:

I am nesting a kendo grid inside another kendo grid row as a "detail" template. I'm having this extremely frustrating issue, though; Kendo seems to be auto-generating the columns for the detail grid for me even though I have defined them myself and it's displaying a lot of columns that I don't want to be displayed.

Here is the original grid:

$("#ResellerBillingGrid").kendoGrid({
    dataSource: viewModel.resellerDataSource,
    editable: false,
    groupable: false,
    sortable: true,
    pageable: true,
    scrollable: false,
    filterable: {
        extra: false,
        messages: {
            isTrue: "Yes",
            isFalse: "No",
            info: " "
        }
    },
    filterMenuInit: filterMenuInit,
    detailTemplate: kendo.template($("#resellerDetailTemplate").html()),
    detailInit: viewModel.detailInit,
    columns: [
        { field: "DisplayName", title: "Reseller" }
    ]
});

And here is my viewmodel along with the grid detail:

var viewModel = new kendo.observable({
    resellerDataSource: new kendo.data.DataSource({
        transport: {
            read: {
                url: "/Host/Billing/GetResellers",
                dataType: "json",
                type: "GET"
            }
        },
        pageSize: 20,
        schema: {
            model: {
                fields: {
                    DisplayName: { type: "string" },
                    ResellerOrganizationsDataSource: [
                        {
                            Id: { type: "number" },
                            OrgDisplay: { type: "string" },
                            UserCount: { type: "number" },
                            PricingTier: {
                                Id: { type: "number" },
                                Name: { type: "string" },
                                PricePerUser: { type: "number" },
                                Total: { type: "number" }
                            }
                        }
                    ]
                }
            }
        }),
        detailInit: function (e) {
            var detailRow = e.detailRow;

            detailRow.find(".resellerOrgsGrid").kendoGrid({
                dataSource: {
                    data: e.data.ResellerOrganizationsDataSource,
                    pageSize: 10,
                    schema: {
                        model: {
                            fields: {
                                Id: { type: "number" },
                                OrgDisplay: { type: "string" },
                                UserCount: { type: "number" },
                                PricingTier: {
                                    Id: { type: "number" },
                                    Name: { type: "string" },
                                    PricePerUser: { type: "number" },
                                    Total: { type: "number" }    
                                }
                            }
                        }
                    }
                },
                scrollable: false,
                sortable: true,
                pageable: true,
                columns: [
                    { field: "OrgDisplay", filterable: { ui: orgFilter }, title: "Name" },
                    { field: "PricingTier.Name, title: "Pricing Tier", filterable: { ui: tierFilter } ),
                    { field: "PricingTier.PricePerUser", title: "Price Per User", format: "{0:C2}" },
                    { field: "UserCount", title: "Total Users" },
                    { field: "PricingTier.Total", title: "Total", format: "{0:C2}" }
                ]
            }
        });
    }
});

Now the crazy part is that even if I remove the column definitions from the detail grid then all of the "auto-generated" columns are still there.

Here is a screenshot of what I'm getting - notice how all of the columns in the detail for the row are shown even when only 5 are defined:

Has anyone run into this issue before or have any ideas on what could be causing this?

回答1:

I figured it out. The issue was that I was defining my columns and other properties of the grid inside the DataSource instead of outside of it. All is working fine now.