如何在Kendo模板中动态设置列 [英] How to set columns dynamically in Kendo template

问题描述

如何在Kendo网格的Kendo模板中动态设置列.在我的Kendo网格中，列会根据用户首选项而动态更改.如何动态创建Kendo模板?我正在使用Kendo JavaScript，可以切换到Kendo MVC如果可以实现相同的目标，是否还有其他方法可以实现?

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>

在Kendo网格中，我们正在动态设置列.现在的问题是我们如何设置内容表和标题表的动态宽度.如果超过最大宽度，我们如何启用水平滚动条.有什么方法可以做到这一点?

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?

推荐答案

我没有将kendo用于MVC，但是我仍然可以解释如何使用常规的kendo函数来做到这一点.

I'm not using kendo for MVC but I can still explain how to do this using regular kendo functions.

基本上，您可以通过将html字符串传递给kendo.template来创建新的剑道模板实例.然后，您可以将新模板实例分配给网格的rowTemplate(或altRowTemplate)，然后调用dataSource.read()强制刷新网格.

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.

您可以生成自己的html字符串或更新页面中的现有模板，然后使用jquery的html()将其转换为字符串.

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.

例如:

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();

这篇关于如何在Kendo模板中动态设置列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！