Question

我遇到了如何将行模板数据绑定应用到其中的问题。我不确定这样做的语法是什么。我正在使用服务器绑定模式。以下是我的代码

@(Html.Kendo().Grid((IEnumerable<IcmsViewModel.LookupView>)ViewData["LookupView"]) // Bind the grid to the Model property of the view
  .Name("Grid")
  .CellAction(cell =>
      {

        if (cell.DataItem.Active == false)
        {
            cell.HtmlAttributes["style"] = "background-color: red";

        }

      }
  )
  .Columns(columns =>
  {
      columns.Bound(p => p.LookupValue).ClientTemplate(" ").Title("Short Name").Width(300);
      columns.Bound(p => p.Description).Width(300);
      columns.Bound(p => p.Active).Width(300);
      columns.Command(command => { command.Edit(); command.Destroy(); });

  })
**.RowTemplate(rows =>
                "<tr><td>Testing</td>" +
        "<td colspan=\"2\"><input type=\"button\" name=\"ClickMe\" value=\"ClickMe\" onclick=\"javascript:window.open(('/Test/ViewTest'), 'ViewTest', 'height=' + (window.screen.height - 100) + ',width=200,left=' + (window.screen.width - 250) + ',top=10,status=no,toolbar=no,resizable=yes,scrollbars=yes');\"/></td>" +
        "<td>Name</td></tr>"
)**
  .ToolBar(commands => commands.Create())
  .Groupable()
  .Pageable()
  .Sortable()
    //.Filterable()
  .Scrollable(x => x.Height(600))
  .Editable(editable => editable.Mode(GridEditMode.InLine))
      .DataSource(dataSource => dataSource
            .Server()
             .Model(model => { model.Id(p => p.Id); model.Field(p => p.Id).Editable(false); })
            .Create(create => create.Action("CreateLookup", "Icms"))
            .Read(read => read.Action("Lookup", "Icms"))
            .Update(update => update.Action("UpdateLookup", "Icms"))
            .Destroy(destroy => destroy.Action("Destroy", "Sample"))
        )

）

目前我对行模板中的值进行硬编码，如果我想应用行模板，如何将其与数据库中的数据绑定。

实施例 .RowTemplate（rows =＆gt; “p.LookupValue”+ “”+ “p.Description” ）

请帮我解决这个问题，因为我是kendo UI的新手。非常感谢。

Answer 1

为什么不在列定义上使用Template：

.Columns(columns =>
{
    columns.Bound(p => p.LookupValue)
           .Template(@<text>@item.LookupValue @item.Description</text>).Title("Short Name").Width(300);
    columns.Bound(p => p.Active).Width(300);
    columns.Command(command => { command.Edit(); command.Destroy(); });  
})

Kendo UI网格行模板

1 个答案: