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

1 Answer 4373 Views
Grid
Suniel
Top achievements
Rank 1
Suniel asked on 19 Sep 2013, 06:32 AM
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

1 Answer, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 23 Sep 2013, 09:06 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Roman
Top achievements
Rank 1
commented on 21 Nov 2016, 10:21 AM

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
Telerik team
commented on 22 Nov 2016, 03:05 PM

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
Telerik UI for ASP.NET MVC is ready for Visual Studio 2017 RC! Learn more.
Chris
Top achievements
Rank 1
Veteran
Iron
Iron
commented on 29 Nov 2016, 03:26 PM

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
Top achievements
Rank 1
Veteran
Iron
Iron
commented on 29 Nov 2016, 03:32 PM

and after the datetime column resized but DatePicker not resized automatically. lots of problem. 
Chris
Top achievements
Rank 1
Veteran
Iron
Iron
commented on 29 Nov 2016, 03:33 PM

and after the datetime column resized but the DatePicker not resized automatically. lots of problem.
Konstantin Dikov
Telerik team
commented on 01 Dec 2016, 11:00 AM

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
Telerik UI for ASP.NET MVC is ready for Visual Studio 2017 RC! Learn more.
Partha Pratim
Top achievements
Rank 1
commented on 29 Mar 2018, 05:41 AM

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
Telerik team
commented on 30 Mar 2018, 02:18 PM

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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
James
Top achievements
Rank 1
commented on 09 Jan 2019, 09:07 PM

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
Telerik team
commented on 11 Jan 2019, 06:40 AM

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:
Hope this helps.


Regards,
Konstantin Dikov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Suniel
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Share this question
or