Row Template

[Joel]

I'm trying to define a grid where the first column is a checkbox and the 2nd has a large font bound to "name" with a small font below it showing the "description".  I'd appreciate a working example.

 

This is NOT working:

<script id="rowTemplate" type="text/x-kendo-tmpl">
                    <tr data-uid="#: uid #">
                        <td class="checkbox">
                            <input type="checkbox" name="optCheck" />
                        </td>
                        <td class="details">
                            <span class="name">#: Name #</span>
                            <span class="desc">#: Description #</span>
                        </td>
                    </tr>
                </script>

                @(Html.Kendo().Grid<SessionOptionTemplate>()
                    .Name("template-grid")
                    .ClientRowTemplate("rowTemplate")
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(20)
                        .Read(read => read.Action("IndexJson", "SessionOptionTemplates")
                            .Data("getData"))
                    ))

 

Style

<style>
    .checkbox {
        width: 75px;
    }

    .details {
        width: 400px;
    }

    .name {
        display: block;
        font-size: 1.6em;
    }

    .desc {
        display: block;
        padding-top: 1.6em;
        font-size: small
    }
</style>

 

[Preslav]

Hello Joel,

I examined the provided code. The reason for the described faulty behavior comes from the fact that the row template is not inside the relevant property.

If we use an implementation similar to the one below, the issue should be resolved:

    .ClientRowTemplate(
    "<tr data-uid='#: uid #'>" +
        "<td class='checkbox'>" +
            "<input type='checkbox' name='optCheck' />" +
        "</td>" +
        "<td class='details'>" +
            "<span class='name'>#: Name #</span>" +
            "<span class='desc'>#: Description  #</span>" +
        "</td>" +
    "</tr>"
    )

Also, you could check our demo regarding the Row Templates - https://demos.telerik.com/aspnet-core/grid/rowtemplate

I hope the above information helps.

 

Regards,
Preslav
Progress Telerik