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)))))
RightValue
和LeftValue
是Object
类型的实例,可以是原始值(如int
、string
),也可以是集合。如果它是一个集合我想用剑道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 for jQuery数据管理使用教程:PDF导出