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

问题描述

如何在剑道网格的剑道模板中动态设置列.在我的剑道网格中，列会根据用户偏好动态变化.如何动态创建剑道模板?我正在使用剑道 JavaScript，我可以切换到剑道 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>

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

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?

推荐答案

我没有在 MVC 中使用剑道，但我仍然可以解释如何使用常规剑道函数来做到这一点.

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屋！