Kendo UI MVC Grid 主题更改答案

【问题标题】：Kendo UI MVC Grid theme changeKendo UI MVC Grid 主题更改
【发布时间】：2018-04-10 11:48:55
【问题描述】：

是否可以在一个 Kendo UI MVC 组件中应用特定主题？我有一个网格，我想用不同的主题进行自定义。

类似于 jQuery 版本的东西

$("#chart").kendoChart({
    theme: "[theme]"
    ...
});

这是我所拥有的：

@(Html.Kendo().Grid<xxxxx.Models.CountrySelectionModel>()
        .Name("countrySelectionGrid")            
        .Columns(columns =>
        {
            columns.Bound(c => c.DepartureCountry);
            columns.Bound(c => c.ArrivalCountry);
            columns.ForeignKey(c => c.TargetCountryId, (SelectList)ViewBag.ValidCountryDataSource)
                   .EditorTemplateName("CountrySelectionEditorTemplate")
                   .ClientTemplate("#: TargetCountry #");
            columns.Command(command => { command.Edit(); }).Width(180);
        })

        .ColumnMenu()
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .Pageable(pager => pager
            .PageSizes(true)                
        )

        .Navigatable()
        .Selectable(selectable =>
        {
            selectable.Mode(GridSelectionMode.Single);
            selectable.Type(GridSelectionType.Row);
        })
        .Sortable(sortable =>
        {
            sortable.SortMode(GridSortMode.SingleColumn);
        })
        .Filterable(f => f.Mode(GridFilterMode.Menu))
        .Scrollable()
        .DataSource(dataSource => dataSource

            .Ajax()
            .Model(model => {
                model.Id(p => p.Id);
                model.Field(p => p.DepartureCountry).Editable(false);
                model.Field(p => p.ArrivalCountry).Editable(false);
            })
            .Read(read => read.Action("Getxxx", "xxx", new { companyId = ViewBag.CompanyId }))
            .Update(update => update.Action("Updatexxx", "xxx", new { companyId = ViewBag.CompanyId }))
            )

)

【问题讨论】：

标签： razor model-view-controller kendo-ui

【解决方案1】：

这不可能开箱即用，因为 kendo 使用基本 CSS 文件的方式，用您选择的单个主题 CSS 文件覆盖部分内容。这个问题在kendo forum 上进行了讨论，Telerik 团队提出了一个可能的解决方案。他们列举了以下不支持开箱即用的原因：

虽然实现起来很简单，但会导致 CSS 文件的大小和复杂性显着增加。

在一个页面上使用多个主题很少见。大多数开发人员不会从该功能中受益，而是相反。

可以通过在iframe 或frameset 中托管您的网格来解决此问题，您可以将CSS 导入完全分开（请注意，我没有尝试过这种方法！）。当然，根据您的情况，由于需要在框架之间进行通信，这可能会引入更多的复杂性。希望这会有所帮助。

【讨论】：

【解决方案2】：

您可以单独使用每个视图的上述主题参考，而不是每个视图中您喜欢的布局和参考。不推荐，但我认为这是一种方式

【讨论】：