Kendo UI MVC grid with Date picker and combo box (data of combo is based on each row data)

[Suniel]

Hi,

I am new to the Kendo UI MVC grid. We have a scenario where we have a Kendo UI MVC Grid.

Points to be noted in the grid.

• The columns Finish Date, Machine Id, Master Roll are editable.
• The column Pln Ind is editable based on the other column value.
• We need to update the grid data in batch.
• By default the grid will be empty.
• When we click the Filter button, based on the filter condition the grid data will be loaded.
• The toolbar should be invisible during the load of the page and it should be visible only if the grid is binded with the data.
• The Datepicker need to be displayed in the Finish Date Column. The Combo box need to be displayed in the MachineId column. The Key is content of the combo is dynamic for each row.

My .cshtml file contains

@(Html.Kendo().Grid(Model.PlanOrderToMachineModelList)   
    .Name("GrdPlanOrderToMachine")
    .AutoBind(false)
    .BindTo(Model.PlanOrderToMachineModelList)
    .Columns(columns =>
    {
        columns.Bound(p => p.CustomerOrder).Filterable(true).Width(120).Title("Customer Order");
        columns.Bound(p => p.SlitPattern).Filterable(false).Width(100).Title("Slit Pattern");
        columns.Bound(p => p.FinishSeq).Filterable(false).Width(50).Title("Fin Seq");
        columns.Bound(p => p.Status).Filterable(false).Width(50).Title("Status");
        columns.Bound(p => p.WorkCenter).Filterable(false).Width(100).Title("Work Center");
        columns.Bound(p => p.CSR).Filterable(false).Width(50).Title(("CSR"));
        columns.Bound(p => p.Roll).Filterable(false).Width(100).Title("Roll");
        columns.Bound(p => p.Width).Filterable(false).Width(100).Title("Width");
        columns.Bound(p => p.Length).Filterable(false).Width(100).Title("Length");
         columns.Bound(p => p.FinishDate).Filterable(false).Width(100).Title("Finish Date") .ClientTemplate((
         @Html.Kendo().DatePicker()
          .Name("FDPicker_#=CustomerOrder#")
          .Value("#=FinishDate#")
          .Format("{0:dd/MM/yyyy}")
          .ToClientTemplate()).ToHtmlString());
        columns.Bound(p => p.ShipDate).Filterable(false).Width(100).Title("Ship Date").Format("{0:dd/MM/yyyy}");
        columns.Bound(p => p.FinishTime).Filterable(false).Width(100).Title("Finish Time").Format("{0:HH:mm}");
        columns.Bound(p => p.ShipTime).Filterable(false).Width(100).Title("Ship Time").Format("{0:HH:mm}");
        columns.Bound(p => p.PackageId).Filterable(false).Width(100).Title("Pkg");
        columns.Bound(p => p.OrderType).Filterable(false).Width(100).Title("Ord Type");
        columns.Bound(p => p.ServiceVariant).Filterable(false).Width(100).Title("Srvc. Vmt");
        columns.Bound(p => p.TentativeInd).Filterable(false).Width(100).Title("Ttty");
       
        columns.Bound(p => p.Machines).Filterable(false).Width(100).Title("Mach ID").ClientTemplate((
          @Html.Kendo().ComboBox()
          .Name("Machines_#=CustomerOrder#")
          .DataTextField("MachineId")
          .DataValueField("MachineId")
          .HtmlAttributes(new { style = "width:250px" })
          //.Filter("contains")
          //.AutoBind(false)
          //.MinLength(3)
          //.BindTo((System.Collections.IEnumerable)"#=Machines#")
          //.BindTo((System.Collections.IEnumerable)Model.Machines[0].MachineId)
          .ToClientTemplate()).ToHtmlString());         
        //.DataSource(p => p.Machines)
        //columns.Bound(p => p.Machines).Filterable(false).Width(100).Title("Mach ID").ClientTemplate("#=Machines.MachineId#");
        columns.Bound(p => p.PlanningInd).Filterable(false).Width(100).Title("Pln Ind");
        columns.Bound(p => p.PlanningSeq).Filterable(false).Width(100).Title("Seq");
        columns.Bound(p => p.Grd).Filterable(false).Width(100).Title("Grd");
        columns.Bound(p => p.Message).Filterable(false).Width(100).Title("Msg");
        columns.Bound(p => p.MasterRoll).Filterable(false).Width(100).Title("Master-roll");
        columns.Bound(p => p.MasterRollDesc).Filterable(false).Width(100).Title("Master-roll Description");
        columns.Bound(p => p.Customer).Filterable(false).Width(100).Title("Customer");
        columns.Bound(p => p.SumOfSlitWidth).Filterable(false).Width(100).Title("SumOfSlitWidth").Hidden(true);
        columns.Bound(p => p.MaximumCrossWidth).Filterable(false).Width(100).Title("MaximumCrossWidth").Hidden(true);
        columns.Bound(p => p.ProductWidth).Filterable(false).Width(100).Title("ProductWidth").Hidden(true);
    })
            //.ToolBar(toolbar =>
            //{
            //    toolbar.Save();
            //})
    .Groupable()
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .Resizable(resize=>resize.Columns(true))
    .Editable(p => p.Mode(GridEditMode.InCell))
    .HtmlAttributes(new { style = "height:400px;width:900px" })
    .Events(e => e.DataBound("onGridDataBound"))
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
        .Batch(true)
        .Model(model =>
            {
                model.Id(p => p.CustomerOrder);
                model.Field(p => p.CustomerOrder).Editable(false);
                model.Field(p => p.SlitPattern).Editable(false);
                model.Field(p => p.FinishSeq).Editable(false);
                model.Field(p => p.Status).Editable(false);
                model.Field(p => p.WorkCenter).Editable(false);
                model.Field(p => p.CSR).Editable(false);
                model.Field(p => p.Roll).Editable(false);
                model.Field(p => p.Width).Editable(false);
                model.Field(p => p.Length).Editable(false);
                model.Field(p => p.FinishDate).Editable(false);
                model.Field(p => p.ShipDate).Editable(false);
                model.Field(p => p.ShipTime).Editable(false);
                model.Field(p => p.PackageId).Editable(false);
                model.Field(p => p.OrderType).Editable(false);
                model.Field(p => p.ServiceVariant).Editable(false);
                model.Field(p => p.TentativeInd).Editable(false);
                model.Field(p => p.PlanningSeq).Editable(false);
                model.Field(p => p.Grd).Editable(false);
                model.Field(p => p.Message).Editable(false);
                model.Field(p => p.MasterRoll).Editable(false);
                model.Field(p => p.MasterRollDesc).Editable(false);
                model.Field(p => p.Customer).Editable(false);
            })
        .Read(read => read.Action("Index", "PlanOrderToMachine").Data("AdditionalParameters"))
        .PageSize(10)
        .Update("Index","Home")
    )
      )

I am getting the combobox and the datepicker, but the values are not binded. It is coming as empty. Please help me to solve this issue. I am using Client Template.

Please give a code sample, that will help me better.

Kind Regards,
Suniel

[Petur Subev]

Hello Suniel,

You cannot bind widget when they are used within a ClientTemplate.

However if you can use the data-attribute initialization. To achieve this you need to execute kendo.bind on each table element and bind it to the dataItem for that row.

To demonstrate this and make it easier to understand I prepared a small demo which you can find in the attached files.

All of the methods used there are listed in the documentation.

For reference here is the code that I used:

@(Html.Kendo().Grid<KendoMVCWrappers.Models.Person>().Name("people")
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model=>{
            model.Id(m=>m.PersonID);
            model.Field(f => f.Name);
        })
            .Read(read => read.Action("GetPeople","Home").Data("extraData"))
            .Update(up=>up.Action("UpdatePerson","Home"))

    )
    .Columns(columns =>
    {
        columns.Bound(c => c.PersonID);
        columns.Bound(c => c.Name);
        columns.Bound(c => c.BirthDate).HtmlAttributes(new
        {
            @class = "templateCell"

        }).ClientTemplate(
         Html.Kendo().DatePicker()
          .Name("FDPicker_#=PersonID#")
          .Format("{0:dd/MM/yyyy}")
          .HtmlAttributes(new { data_bind = "value:BirthDate" })
          .ToClientTemplate().ToString()

          ).Format("{0:dd/MM/yyyy}");
        columns.Command(cmd => cmd.Edit());
    })
    .Events(ev=>ev.DataBound("db"))
    .Pageable()
    .Sortable()
)

<script type="text/javascript">
    function db(e) {
        var grid = this;
        $(".templateCell").each(function () {
            eval($(this).children("script").last().html());
            var tr = $(this).closest('tr');
            var item = grid.dataItem(tr);
            kendo.bind($(this), item);
        });
    }
</script>

Kind Regards,
Petur Subev
Telerik

[Roman]

Hi there! It seems this solution doesn't work with the newest version of Kendo UI.
I've upgraded to 2016.3.1118 and DatePicker within the grid looks ugly
Please help me sort out this problem with the current version.

Thank you

[Konstantin Dikov]

Hi Roman,

The approach is applicable with the latest version as well, so there must be something else that fails in your project. Can you please open a support ticket and attach a sample project replicating the issue, so we can examine it locally and see what could be causing the problem on your end.

Meanwhile you can inspect the browser's console for any JavaScript error or see if there are some missing resources.


Regards,
Konstantin Dikov
Telerik by Progress

[Chris]

HI

I have tested the sample 'KendoBindDatePickerToClientTemplate.zip' with the latest version of UI for ASP.NET MVC Grid but not works with GridEditMode.InCell mode.

When I click the datetime cell then leave the cell, the value of the DatePicker was disappeared. and the value is empty when I click the datepicker icon and select a date.

        .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))


    .DataSource(dataSource =>
          dataSource.Ajax()
                    .Batch(true)
                    .ServerOperation(false)

Is there have a sample that works in GridEditMode.InCell mode (as above) and the latest version of UI for ASP.NET MVC Grid.

Best regards

Chris

[Chris]

and after the datetime column resized but DatePicker not resized automatically. lots of problem. 

[Chris]

and after the datetime column resized but the DatePicker not resized automatically. lots of problem.

[Konstantin Dikov]

Hi Chris,

With Batch(InCell) edit mode, you will not be able to use that approach, because once you click on the calendar icon, the cell will be opened for editing and you will be using the editor for that column, instead of the DatePicker in the ClientTemplate. With that in mind, please display the value in the normal mode and the editor only when the cell is opened for editing.


Regards,
Konstantin Dikov
Telerik by Progress

[Partha Pratim]

Hi,

I have a requirement that a datepicker will be used within a grid and the grid will be switched to editable mode(Inline edit) once the 'Edit' button in the grid row is clicked. The sample application attached by Petur Subev is very much helpful to fulfil my requirement.

But I'm facing a problem. The problem is -

Click on 'Edit' button in the grid row. The particular grid row is in edit mode now and the datepicker show the actual value. But if we click 'Cancel' button to cancel the edit action, the datepicker becomes blank when grid goes back to normal mode. Expectation is datepicker should hold it's previous value when the grid goes back to normal mode. Please refer to the screenshots.

Thanks.

[Konstantin Dikov]

Hello Partha,

The Grid will not bind the editors rendered in the ClientTemplate internally and that binding should be handled manually within the DataBound event. However, since clicking on the Cancel button will not trigger the DataBound event, the code within the DataBound event will not be enough for populating the value, so the Cancel event should execute the same logic within a setTimout function.

Notwithstanding, since the DatePicker will be used for editing only when the user clicks on the Edit button, rendering DataPicker in the ClientTemplate will be confusing for the end user, so I would recommend to remove it and display the date as a string value in the normal mode.


Regards,
Konstantin Dikov
Progress Telerik

[James]

Could you please provide an example of using the DateTimePicker for editing in a Grid using InCell editing mode.  I am displaying the value using the value using .ClientTemplate() and can't figure out how to wire up the DateTimePicker widget.  I thought I would use .EditorTemplateName() but that doesn't seem to work.  Thanks,

{code}

        columns.Bound(p => p.ClockOut)
            .ClientTemplate("#=kendo.toString((ClockOut), 'yyyy-MM-dd HH:mm')#")
            .EditorTemplateName("ClockOutEditor")
            .Width(95);

{code}

[Konstantin Dikov]

Hi James,

If you define the custom editor in the ClcokOutEditor.cshtml file placed in the Views\Shared\EditorTemplates folder to use DateTimePicker, the Grid should use it for editing that particular cell. More information for the Editor Templates in the Grid you could refer to the following help article:

• https://docs.telerik.com/aspnet-mvc/helpers/grid/templating/editor-templates

Hope this helps.


Regards,
Konstantin Dikov
Progress Telerik