This is a migrated thread and some comments may be shown as answers.

Using a datepicker inside kendogrid

1 Answer 287 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Doug asked on 16 Dec 2013, 08:48 AM
I am trying to use kendo datepicker inside a grid using editor template but when a select a date from date picker, it doesn't bind that selected date value to the grid and value remains the same as it was earlier. So I am not able to update the value for a particular field using datepicker inside kendogrid.
Here is my code:

This is my View part:

                  .Columns(columns =>

  columns.Bound(p => p.stateid).Title("[[[State]]]").Width(50);
                      columns.Bound(p => p.distributor).Title("[[[Distributor]]]").Width(100);
                      columns.Bound(p => p.whare_house_code).Title("[[[Warehouse Code]]]").Width(120);
                      columns.Bound(p => p.brand).Title("[[[Brand]]]").Width(100);
                      columns.Bound(p => p.item).Title("[[[Item]]]").Width(100);
                      columns.Bound(p => p.fob).Title("[[[FOB]]]").Width(50).Format("{0:" + ViewBag.GetAllFormat.currencyFormat + "}");
                      columns.Bound(p => p.pricesheetform_version_no).Title("[[[Form Version]]]").Width(50);
                      columns.Bound(p => p.startdate).Title("[[[Start Date]]]").Width(50).Format("{0:dd/MM/yyyy}").EditorTemplateName("DateTime");
                      columns.Bound(p => p.enddate).Title("[[[End Date]]]").Width(200).Format("{0:dd/MM/yyyy}").Width(170).EditorTemplateName("EditrTemp");
                     columns.Bound(p => p.createdate).Title("[[[Created On]]]").Width(50).Format("{0:" + ViewBag.GetAllFormat.dateFormat + "}");
                      columns.Bound(p => p.modifydate).Title("[[[Modified On]]]").Width(50).Format("{0:" + ViewBag.GetAllFormat.dateFormat + "}");
                      columns.Bound(p => p.createby).Title("[[[Created By]]]").Width(50);
                      columns.Bound(p => p.modifyby).Title("[[[Modified By]]]").Width(50);
                  }).ToolBar(toolBar =>
                                        toolBar.Custom().Text("[[[Export To Excel]]]").HtmlAttributes(new { onclick = "javascript:ExportToExcel(event);", @class = "k-button" });
                                        .Editable(editable => editable.Mode(GridEditMode.InCell))
                  .Pageable(pageable =>
                      pageable.PageSizes(new int[] { 25, 50, 100, 200 });  
                      pageable.Messages(messages => messages.Empty("[[[No form found]]]"));
                  .Filterable(f => f.Operators(o => o.ForString(fs =>
                              { fs.Clear().Contains("Contains");
                                fs.DoesNotContain("Does not contain");
                                fs.IsEqualTo("Equal to");
                                fs.IsNotEqualTo("Not equal to");
                                fs.StartsWith("Starts with");
                                fs.EndsWith("Ends with"); })))
                  .HtmlAttributes(new { style = "min-width: 1250px;" })
                  .DataSource(dataSource => dataSource
                      .ServerOperation(false) // paging, sorting, filtering and grouping will be applied client-side
                      .Model(model =>
                          model.Id(p => p.pricesheetid);                                  
                      .Read("GetAllModifyPriceSheetAjax", "PriceSheet")
                      .Update(update => update.Action("UpdatePriceEntry", "PriceSheet"))
                      .Events(events => events.Error("error_handler"))

This is the EditrTemp i am using for datepicker:

@model DateTime?

(m => m)

1 Answer, 1 is accepted

Sort by
Alexander Popov
Telerik team
answered on 17 Dec 2013, 04:03 PM
Hi Doug,

Thank you for the provided code snippet. I reviewed it and noticed that the DatePickerFor has an explicitly set Name. Basically the For helpers are using the name for value binding, thus it should be either the same as the field you're binding to, or preferably - removed. For example:  
@model DateTime?
@(Html.Kendo().DatePickerFor(m => m)

Alexander Popov
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Asked by
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Share this question