Question

我编写了代码以在Kendo UI网格中显示信息。它使用内联网格模式来更新和插入记录。

这里是代码：

Timesheet.cshtml

@model HalsionTimesheetWebApp.Models.TimesheetIndexData

@(Html.Kendo().Grid(Model.TimesheetPrinting)
    .Name("InlineGrid")   
    .Columns(columns =>
    {
 columns.Bound(trans => trans.TimesheetId).Title("ID").Hidden(true)
.EditorTemplateName("TimesheetIdEditor");        
columns.Bound(trans => trans.StartDate).Title("Date")
.Format("{0:dd MMM yyyy}").EditorTemplateName("DateEditor").Width(100)); 
columns.Bound(trans => trans.StartTime).Title("Start Time")
.Format("{0:hh:mm tt}").EditorTemplateName("TimeEditor").Width(85);
columns.Bound(trans => trans.FinishTime).Title("Finish Time")
.Format("{0:hh:mm tt}").EditorTemplateName("TimeEditor").Width(85);        columns.Bound(trans => trans.TimeTaken).Title("Taken")
.Format("{0:n2}")
.EditorTemplateName("TimeTakenEditor").Width(70);
 columns.Command(command =>
        {
            command.Edit();
            command.Destroy();


        }).Width(250).Title("Action");
    })
  .ToolBar(toolbar => toolbar.Create().Text("New entry"))
    .Editable(editable => editable.Mode(GridEditMode.InLine)
    .Sortable()
    .Pageable(pager => pager
                    .PageSizes(new int[] { 5, 10, 20, 50, 100 }).Info(true).Messages(messages => messages.Empty("No entry")
.Display("Showing entries from {0} to {1}. Total entries: {2}").ItemsPerPage("entries per page"))
       )// Enable paging
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .ServerOperation(true)
        .Events(events => events.Error("datasource_error_handler")
        .Model(model =>
        {
            model.Id(p => p.TimesheetId);

        })
        .Read(read => read.Action("Read", "Timesheet))
         .Create(update => update.Action("Create", "Timesheet"))
        .Update(update => update.Action("Update", "Timesheet"))
        .Destroy(update => update.Action("Destroy", "Timesheet"))


    ))

EditorTemplates / DateEditor.cshtml

 @model DateTime
    @(Html.Kendo().DatePickerFor(m => m)
    .Format("{0:yyyy-MM-dd}").Max(DateTime.Now.Date.AddDays(1).AddTicks(-1)))

EditorTemplates / TimeEditor.cshtml

@model DateTime?
@(Html.Kendo().TimePickerFor(m => m))

EditorTemplates / TimeTakenEditor.cshtml

 @model int
 @(Html.Kendo().NumericTextBoxFor(m => m)).Min(0).Max(int.MaxValue)
.Format("# min"))

在此代码中，每列都有自己的编辑器模板。我需要的是在内联编辑模式下将一些字段组合成一个单元格。

例如：将日期和时间开始到单个单元格中，完成进入另一个单元格的时间和时间。

EditorTemplates / StartDateTimeEditor.cshtml

@model DateTime?
@(Html.Kendo().DatePickerFor(m => m) // It's for Start Date
.Format("{0:yyyy-MM-dd}").Max(DateTime.Now.Date.AddDays(1).AddTicks(-1)))
@(Html.Kendo().TimePickerFor(m => m)) // It's for Start Time

EditorTemplates / FinishTimeAndTimeTakenEditor.cshtml

@model object
@(Html.Kendo().TimePickerFor(m => m)) // It's for Finish Time
@(Html.Kendo().NumericTextBoxFor(m => m)).Min(0).Max(int.MaxValue)
.Format("# min")) // It's for Time Taken

是否可以在Kendo UI Grid中使用？

我在Telerik Kendo UI中找不到任何支持此功能的文档。

感谢任何帮助。

谢谢。

Answer 1

你真是太近了！只需将两个或多个字段放在同一个编辑器模板中即可。所以也许在同一个编辑器中开始和结束日期，然后该列使用该编辑器模板但只有一个单元格，如果您看到我的意思？想象一下在单个编辑器模板中的下面内容：

@model DateTime?
@model object
@(Html.Kendo().DatePickerFor(m => m) // It's for Start Date
.Format("{0:yyyy-MM-dd}").Max(DateTime.Now.Date.AddDays(1).AddTicks(-1)))
@(Html.Kendo().TimePickerFor(m => m)) // It's for Start Time
EditorTemplates/FinishTimeAndTimeTakenEditor.cshtml

@(Html.Kendo().TimePickerFor(m => m)) // It's for Finish Time
@(Html.Kendo().NumericTextBoxFor(m => m)).Min(0).Max(int.MaxValue)
.Format("# min")) // It's for Time Taken

是否可以在kendo网格内联模式下将字段组合成单个单元格？

1 个答案: