Why is my template adding extra top and bottom spacing on a row?

[Nicklas]

I have a GridView with a custom rowtemplate, looking like this:

@(Html.Kendo().Grid(Model.UnitTypes)
            .Name("Grid")
            .RowTemplate(@<tr>
                <td>
                    <div>@item.Name</div>
                </td>
                <td>
                    <div>@item.CurrentRun.Operation.WellContract.Location</div>
                </td>
                <td>
                    <div>@item.CurrentRun.Operation.WellContract.Name</div>
                </td>
                <td>
                    <div>@item.CurrentRun.Id</div>
                </td>
                <td>
                    <div>@item.CurrentRun.RunTask</div>
                </td>
                <td>
                    <div>@item.Status.StatusText</div>
                </td>
                <td>
                    <div>Lamp</div>
                </td>
                <td>
                    <div>
                        <div class="progress progress-warning">
                            <div class="bar" style="width: 50%">
                                <span class="offset6" style="color: #676767;">@Math.Round(item.CurrentRun.LatestWellLogEntry.Depth.Value, 2)</span>
                            </div>
                        </div>
                    </div>
                </td>
                <td>
                    <div>@Math.Round(item.CurrentRun.LatestWellLogEntry.Speed.Value, 2)</div>
                </td>
                <td>
                    <div>@Math.Round(item.CurrentRun.LatestWellLogEntry.Tension.Value, 2)</div>
                </td>
                <td>
                    <div>@item.CurrentRun.Name</div>
                </td>
                <td>
                    <form method="POST" action="~/UnitDetails/Index/@item.Id">
                        <input type="submit" class="k-button" value="Details" />
                    </form>
                </td>
            </tr>
            )
            .HtmlAttributes(new { style = "height:430px;" })
            .Columns(columns =>
                {
                    columns.Bound(p => p.Name).Title("Unit");
                    columns.Bound(p => p.CurrentRun.Operation.WellContract.Location).Title("Site");
                    columns.Bound(p => p.CurrentRun.Operation.WellContract.Name).Title("Well");
                    columns.Bound(p => p.CurrentRun.Id).Title("Run");
                    columns.Bound(p => p.CurrentRun.RunTask).Title("Task");
                    columns.Bound(p => p.CurrentRun.Operation.Description).Title("Operation");
                    columns.Bound(p => p.Status.StatusText).Title("Status");
                    columns.Bound(p => p.CurrentRun.LatestWellLogEntry.Depth).Title("Depth (m)");
                    columns.Bound(p => p.CurrentRun.LatestWellLogEntry.Speed).Title("Speed (m/min)");
                    columns.Bound(p => p.CurrentRun.LatestWellLogEntry.Tension).Title("Weight (kg)");
                    columns.Bound(p => p.CurrentRun.Name);
                    columns.Command(command => command.Custom("Edit Unit").Action("Index", "UnitDetails")).Width(85);
                })
            .DataSource(dataSource =>
                      dataSource.Server().Model(m => m.Id(p => p.Id)))
            .Pageable()
            .Scrollable(builder => builder.Height(250))
            .Sortable())

Whenever I open my page and look at the grid, it contains spacing both at the top and bottom of each row, causing the lines that separates the columns to be spaced apart vertically. (See attached image)

Am I doing the template thing wrong or am I missing something?

[Dimo]

Hello Nicklas,

Server row templates should not include table row or table cell elements, unless you add a whole new <table>. The current row template generates invalid HTML on the page, as a <tr> element is added direcly inside a table cell. You can see this by inspecting the page HTML source.

The desired template can be used as a client row template. Server row templates have been implemented differently in the above-mentioned way in order to ensure backwards compatibility with the MVC Grid.

Regards,
Dimo
Telerik

[Nicklas]

Hi Dimo,

When adding this as a ClientRowTemplate, I'm not able to get "item" in the same way as I got it when using RowTemplates. It's simply not available.
Could you possibly produce an example, based on my previously posted markup?

[Dimo]

Hi Nicklas,

The demo provided in my previous reply shows how to use data fields inside a client template, including in the Kendo UI MVC Grid - namely, the field names are used directly as variables - Name or Status.StatusText, etc.

More information about Kendo UI templates is available at:

http://docs.kendoui.com/getting-started/framework/templates/overview

http://demos.kendoui.com/web/templates/expressions.html

Regards,
Dimo
Telerik