Data Loss from DatePicker In Grid Inline Edit

2 posts, 0 answers
  1. Jason
    Jason avatar
    3 posts
    Member since:
    Jul 2011

    Posted 05 May 2015 Link to this post

    Seeing an interesting problem when combining DatePicker and Grid functionality in the inline editing.

    The date is editable without clicking the edit button.  Clicking the edit button returns the date field to a input box and datepicker functionality is lost and when cancelling an edit the date is lost entirely and becomes an empty field.

    Downloaded some other code samples out there and seeing some of the same issues.  Anyone come upon these?

    Cshtml:

     

    <div>
            @(Html.Kendo().Grid(Model)
            .Name("commissionGrid")
            .Columns(columns =>
            {
                columns.Bound(p => p.CommissionId).Hidden();
                columns.Bound(p => p.TenantId).Hidden();
                columns.Bound(p => p.SimpleName);
                columns.Bound(p => p.StartDate).HtmlAttributes(new
                {
                    @class = "templateCell"
                }).ClientTemplate(
                Html.Kendo().DatePicker()
                    .Name("FDPicker_#=CommissionId#")
                    .Format("{0:MM/dd/yyyy}")
                    .HtmlAttributes(new { data_bind = "value:StartDate" })
                    .ToClientTemplate().ToString()
     
                ).Format("{0:MM/dd/yyyy}");
     
                columns.Bound(p => p.CustomerName);
                columns.Bound(p => p.CustomerNumber);
                columns.Command(command =>
                {
                    command.Edit();
                    command.Destroy();
                }).Title("Commands");
            })
             
            .Events(ev => ev.DataBound("db"))
             
            .Editable(editable => editable.Mode(GridEditMode.InLine))
            .Pageable()
            .Navigatable()
            .Sortable()
            .DataSource(dataSource => dataSource
                .Ajax()
                .Batch(false)
                .PageSize(10)
                .ServerOperation(true)
                .Model(model =>
                    {
                        model.Id(p => p.CommissionId);
                        model.Field(p => p.CommissionId).Editable(false);
                    })
                .Update(update => update.Action("EditingInline_Update", "Commissions"))
                .Destroy(destroy => destroy.Action("EditingInLine_Destroy", "Commissions"))
            )
            )
     
     
        </div>

     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);
                });
        }

     

     

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2048 posts

    Posted 07 May 2015 Link to this post

    Hello Jason,

    In server binding grid the Template method should be used instead of ClientTemplate (used in ajax-bound grid). 

    Regards,
    Boyan Dimitrov
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
Back to Top