Weird rendering behavior for multiple grids on a page

[Lay]

I am using Razor MVC3 and using KendoUI 2014.3.1411.440. I currently have a page that displays group of records in multiple kendo grids. Here's a snippet:

@foreach(var item in Model.Items)
{
@Html.Kendo().Grid(item.Records).Name("Grid").Columns(columns =>
            {
                columns.Bound(x => x.DateCompleted).Format("{0:yyyy-MM-dd}").Title("Date Completed").Width(80).Sortable(true);
                columns.Bound(x => x.Title).Template(@<text><a href="~/details/@item.Id">@item.Title</a></text>).Title("Title").Width(200).Sortable(true);
                columns.Bound(x => x.Status).Title("Status").Width(80).Sortable(true);
            }).Scrollable().Sortable().DataSource(d => d.Ajax().Sort(sort => sort.Add("DateCompleted").Descending()).ServerOperation(false))

}

What's strange here is that the FIRST grid rendered will NOT use the Template I specified in the 2nd column. Instead, it just displays the Title property as plain text. On the other hand, the other grids uses the Template. When I research on possible solutions, I was told that since I am using Ajax, I need to use ClientTemplate instead of Template. I followed this recommendation and the inverse occurred when the page is rendered. The FIRST grid displays what the ClientTemplate is set to while the other grids ignore it.

Has anyone seen this before? I'm completely stumped on this.

Thanks in advance.

 

 

 

​

 

​

[Boyan Dimitrov]

Hello Lay,

 

What I notice in this code is that all grids have same name value set to "Grid". The Kendo UI Grid for AS.NET MVC will renders a div element with id attribute set to the value defined as "Name". Then the widget is initialized using that HTML element.  

 

In general having more than one element with same "id" attribute values is not good practice. Please refer to the Two HTML elements with same id attribute: How bad is it really? discussion for more information. 

 

We suggest defining a unique "Name" for each widget on the page in order to avoid such problems. 

 

Regards,
Boyan Dimitrov
Telerik