Is it possible to combine the fields into a single cell in kendo grid inline mode?

Question

I wrote the code to display the information in Kendo UI grid. It's using the inline grid mode to update and insert the record.

Here the code:

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"))

In this code, each column has its own editor template. What I need here is to combine some fields into a single cell in inline editing mode.

For example : Start date and time into a single cell,finish time and time taken into another single cell.

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

Is it possible in Kendo UI Grid ?

I don't find any documentation to support this features in Telerik Kendo UI.

Any help is appreciated.

Thank you.

GP24 GP24 · Accepted Answer · 2014-06-25T08:56:14

You are so close! Just put two or more of your fields in the same editor template. So maybe start and finish date in the same editor, then that column uses that editor template but only one cell, if you seen what I mean? Imagine the below in a single editor template:

@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

Is it possible to combine the fields into a single cell in kendo grid inline mode?

1 Answers