Row Template

2 posts, 0 answers
  1. Joel
    Joel avatar
    207 posts
    Member since:
    Jun 2018

    Posted 20 Oct 2020 Link to this post

    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>

     

  2.
  3. Preslav
    Admin
    Preslav avatar
    591 posts

    Posted 23 Oct 2020 Link to this post

    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

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top