Asp.net mvc 如何在剑道模板中动态设置列

如何在剑道网格的剑道模板中动态设置列。在我的剑道网格中，列会根据用户偏好动态更改。如何动态创建剑道模板？我使用的是剑道JavaScript，如果我可以在那里实现相同的功能，我可以切换到剑道MVC。是否有其他方法来实现这一点

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

#=第1列#
我没有在MVC中使用剑道，但我仍然可以解释如何使用常规剑道函数来实现这一点

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

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

例：

var htmlTemplate=''；
if（userPreferences.likeRed）{
htmlTemplate='#column1#'
}否则{
htmlTemplate='#column1#'
}
$（“#网格”）.data（“kendoGrid”）.rowTemplate=kendo.template（htmlTemplate）；
$（“#网格”）.data（“kendoGrid”）.dataSource.read（）；
要使用有条件选择的操作格式化
剑道网格
列值，您可以使用以下合适的示例之一。有关更多信息：

下面是一些使用示例。借助这种方法，您可以轻松地生成不同的模板

Javascript的用户界面：

MVC的用户界面：



示例二：

<script>
function Getvalue(value) {
    // console.log(value);
    if (value && value != null && value.indexOf("A") == 0)
        return "<b style='color:red'>" + value + "</b>";
    else
        return "";
}

$(document).ready(function () {  
    $("#grid").kendoGrid({
        dataSource: localDataSource,
        columns: [
            {
                field: "FirstName",
                title: "First Name", template: '#=Getvalue(FirstName)#'
            }
        ],
    });
});
</script>


函数Getvalue（值）{
//console.log（值）；
if（value&&value！=null&&value.indexOf（“A”）==0）
返回“+值+”；
其他的
返回“”；
}
$（文档）.ready（函数（）{
$（“#网格”）.kendoGrid({
dataSource:localDataSource，
栏目：[
{
字段：“名字”，
标题：“名字”，模板：“#=Getvalue（名字）#”
}
],
});
});

希望这有帮助…
这将在ASP.NET MVC/Razor中起作用，如果您提前准备了一组动态列定义，然后将它们放在cshtml的视图模型中。然后循环遍历集合并插入与数据源、标题、所需宽度等匹配的字段名

     $("#grid-quick").kendoGrid({
        pageable: {
            pageSizes: [10, 20, 50, 100]
        },
        sortable: { mode: "multiple" },
        columns: [
            @{
                foreach (var col in Model.Columns)
                {
                    @:{ field: "@col.Name.Replace(".","_")", width: "@col.Width" + "px" },
                }
            }
        ],
        filterable: false,
        dataSource: {
            serverPaging: true,
            serverSorting: true,
            pageSize: 20,
            type: 'aspnetmvc-ajax',
            schema: {
                data: "Data",
                total: "Total",
                model: {
                    fields: {
                        @{
                            foreach (var col in Model.Columns)
                            {
                                @: "@col.Name.Replace(".","_")" : { type: "string" },
                            }
                        }
                    }
                }
            },
            transport: {
                read: {
                    url: oVariables.baseURL + "Query/DynamicResults",
                    dataType: "json",
                    type: "post"
                }
            }
        }
    });

可能最初加载所有内容，然后隐藏用户指示的内容您能告诉我您希望在列中做哪些更改吗？您想更改列中的值或列的某些html属性吗？我想要不同的列..列值可以更改..假设我有列a、b、c现在我应该可以添加新的列“d”或者删除现有列“c”。好的，您想在网格的每一行中添加列吗？您有多行？是的，要求是根据用户偏好显示列。如何根据用户选择在Javascript中生成动态html？实际上，生成的模板不是动态的。它是静态的，但基于用户的首选项构建（并在用户每次更新其首选项时重新创建）。
...
columns.Bound(t => t.EmployeeName)
       .Title("Status Name")
       .Template(@<text></text>)
       .ClientTemplate("#= GetEditTemplate(data)#")
       .Width("55px");
...

<script>
//Change the color of the cell value according to the given condition
function GetEditTemplate(data) {
    var html;    
    if (data.StatusID == 1) {
        html = kendo.format(
        //"<a class=\"k-button\" href='" + '@Url.Action("Edit1", "Controller")' + "/{0}" + " '>Edit</a>  ",
        "<span class='text-success'>" +
        data.EmployeeName
        + "</span>"
        );
    }
    else {
        html = kendo.format(
        //"<a class=\"k-button\" href='" + '@Url.Action("Edit2", "Controller")' + "/{0}" + " '>Edit</a>  ",
        "<span class='text-danger'>Cancel</span>"
        );
    }
    return html;
}
</script>

<script>
function Getvalue(value) {
    // console.log(value);
    if (value && value != null && value.indexOf("A") == 0)
        return "<b style='color:red'>" + value + "</b>";
    else
        return "";
}

$(document).ready(function () {  
    $("#grid").kendoGrid({
        dataSource: localDataSource,
        columns: [
            {
                field: "FirstName",
                title: "First Name", template: '#=Getvalue(FirstName)#'
            }
        ],
    });
});
</script>

     $("#grid-quick").kendoGrid({
        pageable: {
            pageSizes: [10, 20, 50, 100]
        },
        sortable: { mode: "multiple" },
        columns: [
            @{
                foreach (var col in Model.Columns)
                {
                    @:{ field: "@col.Name.Replace(".","_")", width: "@col.Width" + "px" },
                }
            }
        ],
        filterable: false,
        dataSource: {
            serverPaging: true,
            serverSorting: true,
            pageSize: 20,
            type: 'aspnetmvc-ajax',
            schema: {
                data: "Data",
                total: "Total",
                model: {
                    fields: {
                        @{
                            foreach (var col in Model.Columns)
                            {
                                @: "@col.Name.Replace(".","_")" : { type: "string" },
                            }
                        }
                    }
                }
            },
            transport: {
                read: {
                    url: oVariables.baseURL + "Query/DynamicResults",
                    dataType: "json",
                    type: "post"
                }
            }
        }
    });