CODEWITHSUNDEEP
c#asp.net-mvckendo-uikendo-gridkendo-asp.net-mvc
Halcyon
Halcyon

Reputation: 14941

Kendo UI MVC Grid - DataSource Interfering With Column Template

I have a Kendo UI MVC Helper Grid that is having an issue with a templated column. My issue is that I do NOT want to use server-side calls for filtering or sorting. When I disable the server-side data source, my template does not render for the "name" column. Here is my code:

@(Html.Kendo().Grid(Model.Contacts)
    .Name("contactGrid")
    .Columns(c =>
    {
        c.Bound(p => p.Name).Title("Contact Name").Template(@<text><a href="/contact-details/@item.Id" target="_blank">@item.Name</a></text>);
        c.Bound(p => p.Id).Title("Unique ID");
    })
    .Sortable(s => s.SortMode(GridSortMode.SingleColumn).AllowUnsort(true))
    .Scrollable(s => s.Height(430))
    .Filterable(f => f.Extra(false).Operators(o => o.ForString(s => s.Contains("Contains"))))
    .DataSource(d => d.Ajax().ServerOperation(false))
)

If I comment out the data source like so:

//.DataSource(d => d.Ajax().ServerOperation(false))

then the template works correctly on the "name" column, but the page does a postback, which is overkill for the purpose of the grid. If I leave it uncommented, then the cells in the "name" column all render as pure text (no anchor tag is present), but I have client-side sorting and filtering.

What do I need to change to allow the template on the "name" column and have client-side sorting and filtering?

Upvotes: 0

Views: 4338

Answers (1)

Kyle Magilavy
Kyle Magilavy

Reputation: 787

.DataSource(d => d.Ajax().ServerOperation(false))

Infers that your grid will load its data via ajax remotely, but you are providing the data (Model.Contacts) for the grid at the very beginning of the initialization:

@(Html.Kendo().Grid(Model.Contacts)

By loading Model.Contacts into the grid from the start, the grid is considered server bound, whereas by providing that data source your grid would be considered ajax bound.

Per Kendo documentation an ajax bound grid cannot leverage server templates, which is what your template for the name column would be considered.

If Model.Contacts truly contains all the data you need to load I would remove the datasource completely as you have all the data you need.

If you do want to load the data via ajax you should remove Model.Contacts and initialize the grid something like:

 @(Html.Kendo().Grid<Contact>()

and add in the datasource with the read transport method configured.

Check out this section of the Kendo Grid FAQ (second question down):

http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/faq

Upvotes: 3

Related Questions