I have a Kendo grid that has a template column of a dropdown. How do I switch the template column to use a different control on certain rows? Here is what I have with my grid
function OrderEntryOptions() {
$("#orderEntryOptions").kendoGrid({
columns: [{
field: "Options",
title:"Options"
},
{
field: "SelectAreas",
template: '<select class="form-control" ><option>False</option><option>True</option></select>',
}],
dataSource: {
data: [{
Options: "Show Self Note Column"
},
{
Options: "Ctrl+C, Ctrl-V for Excel Commands"
},
{
Options: "Validation: Show Yellow Alerts when Printing"
},
{
Options: "Default Import/Export Directory"
},
{
Options:"Show Sq. Ft. on screen"
},
{
Options: "Process Global Defaults"
},
{
Options: "Catalog Tree Auto-Expand"
},
{
Options: "Hide Sections column in Globals"
},
{
Options:"First column in blank row to get focus"
},
{
Options: "Search on item name only"
}
]
}
});
}
In my Options column where it says "Default Import/Export Directory", I need to remove the dropdown and use a button instead, then in my Options column where it says "First column in blank row to get focus", I need to change the values in the dropdown from True/False to column names of another grid.
You can specify the template using:
<script id="rowTemplate" type="text/x-kendo-tmpl">
</script>
In your grid definition change:
template: '<select class="form-control" ><option>False</option><option>True</option></select>'
to:
kendo.template($("#rowTemplate").html()
Inside this template you can add conditions, something like:
<script id="rowTemplate" type="text/x-kendo-tmpl">
# if (Options== "Default Import/Export Directory") { #
<button id="button_id">Button text</button>
# } else { #
<select class="form-control" ><option>False</option><option>True</option></select>
# } #
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.