Can a Kendo Grid Column's ClientTemplate to another kendo object like a ListView?

Question

I really have 2 questions. One is it possible and two how to do it? RoleModel Type has an IEnumberable of PermissionModel and I'd like that column to show up as a list view. Something similar to this. I'm not sure how to bind the listview to the Permissions object.

@(Html.Kendo().Grid<RoleModel>()
    .Name("RoleGrid")
    .Columns(x =>
                 {
                     x.Bound(p => p.Name).Width(150);
                     x.Bound(p => p.Description).Width(350);
                     x.Bound(p => p.Permissions).ClientTemplate("test");
             }))


<script type="text/x-kendo-template" id="test" >
    @(Html.Kendo().ListView<PermissionModel>().Name("listView").AutoBind(true).ToClientTemplate()                                                                                                                                                                                                                                                               )
</script>

score 2 · Accepted Answer · answered Dec 05 '12 at 20:41

You you can - you should use the dataBound event of the Grid, to find each cell where you want to put a listview and initialize a listview - to pass the collection with items first you need to retrieve it with the dataItem method of the grid.

To make it clearer here is an example:

@(Html.Kendo().Grid<Person>().Name("grid")
        .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model=>model.Id(m=>m.PersonID))
                .Read(read => read.Action("GetPersons","Home"))                    
        )

        .Columns(columns =>
        {
            columns.Bound(c => c.PersonID);
            columns.Bound(c => c.Name).ClientTemplate("test");
            columns.Bound(c => c.Children).ClientTemplate("<div class='myView'></div>");                
        })
        .Events(ev=>ev.DataBound("db"))
    )

<script type="text/javascript">
    function db() {
        $.each($('.myView'), function () {
            var grid = $('#grid').data().kendoGrid;
            var row = $(this).closest('tr');
            var dataItem = grid.dataItem(row);
            $(this).kendoListView({
                dataSource: { data: dataItem.Children },
                template: kendo.template($("#templateLV").html())
            });
        });
    }
</script>

<script type="text/foo" id="templateLV"> 
#=TestID# testid is a property of the Child model
</script>

Good luck

This works great thanks. I am encountering one other minor issue. My grid is Editable with a GridEditMode.Popup. If I hit the cancel button from the Editor Popup it clears out the list view for the Field I was editing. — Tim, Dec 06 '12 at 19:11

Can a Kendo Grid Column's ClientTemplate to another kendo object like a ListView?

1 Answers1