Kendo UI Grid 根据其数据类型为列提供不同的模板

Posted

技术标签:

【中文标题】Kendo UI Grid 根据其数据类型为列提供不同的模板【英文标题】:Kendo UI Grid different templates for column based on its data type 【发布时间】:2012-12-25 04:25:18 【问题描述】:

我有这样的网格

@(html.Kendo().Grid(Model.Differences)
    .Name("formDifferencesList")
    .HtmlAttributes(new  @class = "fullScreen" )
    .Columns(columns =>
                        
                            columns.Bound(e => e.Property);
                            columns.Bound(e => e.FieldPath);
                            columns.Bound(e => e.FieldType);
                            columns.Bound(e => e.Type);
                            columns.Bound(e => e.LeftValue);
                            columns.Bound(e => e.RightValue);
                        )
    .Pageable()
    .Sortable()
    .Scrollable()
    .Selectable()
    .Resizable(resize =>
        resize.Columns(true))
        .Groupable()
        .Filterable()
        .DataSource(dataSource =>
            dataSource.Ajax()
            .PageSize(25)
            .ServerOperation(false)
                .Model(model => model.Id(e => string.Format("01", e.Property, e.FieldPath)))))

RightValueLeftValueObject 类型的实例,可以是原始值(如intstring),也可以是集合。如果它是一个集合我想用剑道ListView 来代表它。我该怎么做?

我尝试绑定到 DataBound 事件

.Events(events => events.DataBound("onDifferencesDataBounded"))

将 ClientTemplate 添加到网格中

columns.Bound(e => e.LeftValue).ClientTemplate("<div class='leftValueView'></div>");

然后在js函数内部尝试应用模板

<script type="text/javascript">
    function onDifferencesDataBounded() 
        $.each($('.leftValueView'), function () 
            var grid = $('#formDifferencesList').data().kendoGrid;
            var row = $(this).closest('tr');
            var dataItem = grid.dataItem(row);
            $(this).kendoListView(
                dataSource:  data: dataItem ,
                template: kendo.template($("#leftValueTemplate").html())
            );
        );
    
</script>

<script type="text/x-kendo-template" id="leftValueTemplate"> 
    // Not sure what should I do here?
</script>

【问题讨论】:

【参考方案1】:

dataItem.LeftValue 或 RightValue 中是否有任何东西,例如 Array,当您在那里放置断点时?

var dataItem = grid.dataItem(row); //

如果有数字数组[1,3,4,5]这样的数组,那么你可以尝试在模板里面使用#=data# .

【讨论】:

以上是关于Kendo UI Grid 根据其数据类型为列提供不同的模板的主要内容,如果未能解决你的问题,请参考以下文章

如何根据 Kendo-Angular2-grid 中的数据自动调整网格列的大小?

Kendo UI:Grid中单元格日期格式化

kendo ui grid 完成服务器端分页和设置总数

Kendo UI for jQuery数据管理使用教程:PDF导出

Kendo UI Grid:自定义下拉提供程序在视图模式下不显示文本

Telerik Kendo UI ASP.NET MVC Grid - 已保存数据项的事件处理