How to set columns dynamically in Kendo template for kendo grid.In my kendo grid,columns are subject to change dynamically based on user preference.How to dynamically create Kendo Template?I am using Kendo JavaScript,I can switch to Kendo MVC if same thing i can achieve there.Is there any other approach to achieve this?
<script id="rowTemplate" type="text/x-kendo-template">
<tr class="k-master-row">
<td>
<div>#=column1#</div>
</td>
<td><span class="mydesign" title="column2#"</span></td>
<td>#column3#</td>
<td>#=column4#</td>
</tr>
</script>
Edit : In Kendo grid, we are dynamically setting the columns. Now issue is how do we set the dynamic width for content table and the header table. If it exceeds the max width how do we enable the horizontal scroll bar. Is there any approach to achieve this?
To identify the column that needs to be updated we can use the tilde selector which does a contains search through the thead of the grid. Create a custom function updateColumnTitle . Get the Grid instance, the DatePicker instances and their values and generate the new title.
To enable hiding/displaying columns, you'll initialize the grid columnX as a normal column, and mark it hidden (in MVC this is the . Hidden() method when binding the column). Then based on a page event, you can simply call showColumn (and then hideColumn to reverse the operation). Save this answer.
I'm not using kendo for MVC but I can still explain how to do this using regular kendo functions.
Basically, you can create a new kendo template instance by passing an html string to kendo.template
. Then you can assign the new template instance to the grid's rowTemplate
(or altRowTemplate
) then call dataSource.read()
to force a grid refresh.
You can generate your own html string or update an existing template in your page then use the jquery's html()
to convert it into a string.
Ex:
var htmlTemplate = '';
if (userPreferences.likeRed) {
htmlTemplate ='<tr class="k-master-row"><td style="background-color:red">#column1#</td></tr>'
} else {
htmlTemplate ='<tr class="k-master-row"><td style="background-color:green">#column1#</td></tr>'
}
$("#grid").data("kendoGrid").rowTemplate = kendo.template(htmlTemplate);
$("#grid").data("kendoGrid").dataSource.read();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With