This is a migrated thread and some comments may be shown as answers.

RowTemplate gives empty rows

3 Answers 255 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Gert Van Meerbergen
Top achievements
Rank 1
Gert Van Meerbergen asked on 19 Jan 2017, 10:02 AM

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"))
)

 

3 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 23 Jan 2017, 07:27 AM
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:

Best Regards,
Konstantin Dikov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Erik
Top achievements
Rank 1
answered on 21 Nov 2017, 08:40 PM

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?

0
Konstantin Dikov
Telerik team
answered on 23 Nov 2017, 12:21 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Gert Van Meerbergen
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Erik
Top achievements
Rank 1
Share this question
or