RowTemplate gives empty rows

[Gert Van Meerbergen]

When using RowTemplate, the html output contains empty rows (see attachments, marked items in yellow) which I can't find the option to no render them.

Grid:

@(Html.Kendo().Grid<ePower.Mvc.Areas.PM.Models.ObjectiveListData>(Model.Data)
.Name("ObjectiveListView")
.Columns(columns =>
{
columns.Bound(c => c.Item1).Visible(Model.Item1Used).Title(Model.Item1Header);
columns.Bound(c => c.Item2).Visible(Model.Item2Used).Title(Model.Item2Header);
columns.Bound(c => c.Employees).Title(EPower.Utils.Web.Configuration.WebSettings.Settings.LabelManager.GetString("PM_TeamObjective_ObjectiveListView_EmployeeHeader"));
columns.Bound(c => c.Item4).Visible(Model.Item4Used).Title(Model.Item4Header);
})
.RowTemplate(template =>
@<text>
<tr>
@if (Model.Item1Used)
{
<td>@item.Item1</td>
}
@if (Model.Item2Used)
{
<td>
<div class="item2">@item.Item2</div>
<div class="item3">@item.Item3</div>
</td>
}
<td>@Html.Raw(item.Employees)</td>
@if (Model.Item4Used)
{
<td>@item.Item4</td>
}
</tr>
</text>)
.NoRecords(EPower.Utils.Web.Configuration.WebSettings.Settings.LabelManager.GetString("PM_TeamObjective_ObjectiveListView_NoResult"))
)

 

[Konstantin Dikov]

Hello Gert,

The RowTemplate will be rendered in a TD element, so you need to create a content that will not break the HTML. If you need to have a table structure within the RowTemplate you need to create a TABLE element as well. 

For live example for RowTemplate with server binding you can refer to the following demo:

• http://demos.telerik.com/aspnet-mvc/grid/serverrowtemplate

Best Regards,
Konstantin Dikov
Telerik by Progress

[Erik]

Konstantin,

The live example demo you point to has a very unique row template where it shows an image and a separate list of info.  Could you point to example that demonstrates a server-bound grid with a row template that aligns with the column headers?

[Konstantin Dikov]

Hello Erik,

Creating a new TABLE that will match the Grid structure might be a difficult task and I would recommend to define a template for each column, instead of trying to replicate the same structure.

As for nesting a table in the row template, you could either switch to AJAX binding and use the ClientRowTemplate or create the TABLE element in the server RowTemplate and once the Grid is initialized on client-side, retrieve the columns width from the Grid and apply the same to the TABLE element in the template.


Best Regards,
Konstantin Dikov
Progress Telerik