私はそのようなグリッドを持っています
@(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("{0}{1}", e.Property, e.FieldPath)))))
RightValue
およびLeftValue
type のインスタンスであり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>