RowTemplate gives empty rows

4 posts, 0 answers
  1. Gert Van Meerbergen
    Gert Van Meerbergen avatar
    6 posts
    Member since:
    Sep 2006

    Posted 19 Jan Link to this post

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

     

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2135 posts

    Posted 23 Jan Link to this post

    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.
  3. Erik
    Erik avatar
    32 posts
    Member since:
    Aug 2012

    Posted 21 Nov in reply to Konstantin Dikov Link to this post

    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?

  4. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2135 posts

    Posted 23 Nov Link to this post

    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.
Back to Top