CODEWITHSUNDEEP
razormodel-view-controllerkendo-ui
CMartins
CMartins

Reputation: 3293

Kendo UI MVC Grid theme change

Is it possible to apply a particular theme in one Kendo UI MVC component? I have a Grid that I would like to customize with a different theme.

Something similar to the jQuery version

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

Here is what I have: 

@(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 }))
            )

)

Upvotes: 0

Views: 1626

Answers (2)

Maryam Ghafarinia
Maryam Ghafarinia

Reputation: 458

You can use the theme reference above of each views separately not the layout and reference which one you like in each views. Not recommended but i think its a way

Upvotes: 0

Joe Glover
Joe Glover

Reputation: 1026

This isn't possible out of the box, due to the way that kendo uses a base CSS file, overriding parts of that with a single themed CSS file of your choice. This very question was discussed on the kendo forum where a possible solution is set out by the Telerik team. They cite the following reasons for not supporting this out of the box:

  1. Although the implementation is easy, it will cause a considerable increase in the CSS files' size and complexity.
  2. Using multiple themes on a single page is rare. Most developers will not benefit from this feature, but on the contrary.

It might be possible to work around this by hosting your grid in an iframe or frameset where you can keep the CSS imports entirely seperate (please note, I haven't tried this approach!). Depending on your scenario of course, this might introduce even more complication due to a need to comunicate between the frames. Hope this helps.

Upvotes: 1

Related Questions