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

Row Template

1 Answer 29 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Joel asked on 20 Oct 2020, 08:37 PM

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>

 

1 Answer, 1 is accepted

Sort by
0
Preslav
Telerik team
answered on 23 Oct 2020, 11:43 AM

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/.

Tags
Grid
Asked by
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Answers by
Preslav
Telerik team
Share this question
or