Grid with Templates

[Jeff]

I'm trying to create a grid with a column template that has a KendoDropDownList of Checkboxes. The checkboxes are checked on load based on the data source of the grid.

I have the following, but it doesn't work at all. Can someone point me in the right direction please?

Thank you.

<table id="grid" height="300px">
    <thead>
        <tr>
            <th data-field="Content1">Content</th>
        </tr>
    </thead>
</table>
   
<script id="consumersTemplate" type="text/x-kendo-tmpl">
    <select id="dropdownlist" />
</script>

<script id="consumerTemplate" type="text/x-kendo-tmpl">
    <input type="checkbox" name="#= Name #" value="#= Name #" 
    # if (#= IsSelected#) { # 
        checked
    # }
    /> 
</script> 

$("#grid").kendoGrid({
    dataSource: [ 
        { Consumers: [ { Name: "John", IsSelected: false }, { Name: "Jane", IsSelected: true } ] }, 
        { Consumers: [ { Name: "John", IsSelected: true }, { Name: "Jane", IsSelected: false} ] } 
    ],
   height: 200,
   scrollable: {
     virtual: true
   },
   columns: [
       { 
           template: kendo.template($("#consumersTemplate")
                                    .kendoDropDownList(
                                        template: $("#consumerTemplate").html(),
                                        dataSource: kendo.template("#=Consumers#")
           ).html())
       }
   ],
   selectable: true
}); 

[Petyo]

Hi,

You can initialize the dropdown lists in the dataBound event of the grid. This example illustrates the approach. 

All the best,
Petyo
the Telerik team

[Ingolf]

Hi,

your example doesn't work on IE 8 or IE 7.

Any idea?

[Petyo]

Hi,

Sorry for that. Seems like templates from script tags are choking in jsFiddle. Along with that, there was an extra comma present. Check this version.  


http://jsfiddle.net/FsEVT/

Regards,
Petyo
the Telerik team

[Ingolf]

Hi,

thanks for your reply.

I have found the solution too. The Comma is the problem but .text() is also the problem. After changing in .html() the example works fine in IE 8.

Change
template: $("#consumersTemplate").text()
to
template: $("#consumersTemplate").html()
       
regards Ingolf