Question

我试图将KendoDatePicker添加到我的网格中，但无法显示它。

我以这篇文章为模板，尝试在列内创建DatePicker。 https://www.telerik.com/forums/kendo-ui-mvc-grid-with-date-picker-and-combo-box-(data-of-combo-is-based-on-each-row-data)

@(Html.Kendo().Grid<OrderViewModel>(Model)
    .Name("order-grid")
    .Columns(columns =>
    {
        columns.Bound(c => c.CreatedAt).Format("{0:MM/dd/yyyy}");
        columns.Bound(c => c.SalesNumber);
        columns.Bound(c => c.MaterialNumber);
        columns.Bound(c => c.SerialNumber);
        columns.Bound(c => c.CompletionDate)
            .HtmlAttributes(new { @class = "templateCell"})
            .ClientTemplate(Html.Kendo().DatePicker().Name("completiondate-picker").Format("{0:MM/dd/yyyy}").HtmlAttributes(new { datab_bind = "value:CompletionDate"}).ToClientTemplate().ToString())
            .Format("{0:MM/dd/yyyy}");
        columns.Bound(c => c.OrderComplete);
        columns.ForeignKey(c => c.ProductionLineId, (System.Collections.IEnumerable)ViewData["ProductionLines"], "Id", "Name");
        columns.Command(command => { command.Edit(); });
        columns.Command(command => { command.Destroy(); });
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .DataSource(ds =>
    ds.Ajax()
    .ServerOperation(false)
    .Model(model =>
    {
        model.Id(p => p.Id);
        model.Field(p => p.ProductionLineId).DefaultValue("4f03f3a1-eda3-462a-b873-69f4baf5e8a5");
    })
    .Read(read => read.Action("GetOrderList", "Order"))
    .Update(update => update.Action("EditOrderInLine", "Order"))
    .Create(create => create.Action("CreateNewOrder", "Order"))
    .Destroy(destroy => destroy.Action("DeleteOrder", "Order"))
    )
    .HtmlAttributes(new { style = "height: 100%"})
    .Sortable()
    .Filterable()
 )

代码将运行并编译，但日期选择器不会出现在文本框中。

Answer 1

尝试像这样为datepicker添加EditorTemplate。

posts =
  from p in Post,
    join: a in subquery(authors_with_assistants),
    on: p.author_id == a.id

Repo.all(posts)

创建文件夹编辑器模板并创建名为“ CompletionDate”的局部视图

局部视图我们会喜欢这样

@(Html.Kendo().Grid<OrderViewModel>(Model)
    .Name("order-grid")
    .Columns(columns =>
    {
        columns.Bound(c => c.CreatedAt).Format("{0:MM/dd/yyyy}");
        columns.Bound(c => c.SalesNumber);
        columns.Bound(c => c.MaterialNumber);
        columns.Bound(c => c.SerialNumber);
        columns.Bound(c => c.CompletionDate).EditorTemplateName("CompletionDate");
           
        columns.Bound(c => c.OrderComplete);
        columns.ForeignKey(c => c.ProductionLineId, (System.Collections.IEnumerable)ViewData["ProductionLines"], "Id", "Name");
        columns.Command(command => { command.Edit(); });
        columns.Command(command => { command.Destroy(); });
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .DataSource(ds =>
    ds.Ajax()
    .ServerOperation(false)
    .Model(model =>
    {
        model.Id(p => p.Id);
        model.Field(p => p.ProductionLineId).DefaultValue("4f03f3a1-eda3-462a-b873-69f4baf5e8a5");
    })
    .Read(read => read.Action("GetOrderList", "Order"))
    .Update(update => update.Action("EditOrderInLine", "Order"))
    .Create(create => create.Action("CreateNewOrder", "Order"))
    .Destroy(destroy => destroy.Action("DeleteOrder", "Order"))
    )
    .HtmlAttributes(new { style = "height: 100%"})
    .Sortable()
    .Filterable()
 )

将KendoDatePicker添加到网格

1 个答案: