代码之家 › 专栏 › 技术社区 › CMartins

Kendo UI MVC网格主题更改

kendo-ui model-view-controller razor

CMartins · 技术社区 · 8 年前

是否可以在一个剑道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 }))
            )

)

2 回复 | 直到 8 年前

Joe Glover 8 年前

这是不可能开箱即用的,因为剑道使用基本CSS文件的方式,使用您选择的单个主题CSS文件覆盖其中的部分内容。这个问题是在 kendo forum Telerik团队制定了可能的解决方案。他们列举了以下不支持这种开箱即用的理由:

虽然实现很容易,但它会导致CSS文件的大小和复杂性大大增加。

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

通过将网格托管在 iframe 或 frameset 您可以将CSS导入完全分开(请注意,我还没有尝试过这种方法!)。当然,根据您的场景,由于需要在帧之间进行通信,这可能会带来更大的复杂性。希望这有帮助。

Maryam Ghafarinia 8 年前

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