Date edit format on grid incell editing

4 posts, 1 answers
  1. Ale
    Ale avatar
    13 posts
    Member since:
    Dec 2013

    Posted 04 Apr 2014 Link to this post

    Hi everyone,
    I have a grid with a DateTime inside, I want to modify it with inCell editing.

    This is my grid definition:

    @(Html.Kendo().Grid(Model.row)
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(l => l.LRId).Hidden();
            columns.Bound(l => l.StartDate).Format("{0:d}");
            columns.Bound(l => l.Amount);
     
            columns.Command(command => command.Custom("logicalDelete"));//.Click("udmAltDelete"));
        })
        .ToolBar(toolbar => toolbar.Create())
        .Editable(ed => ed.Mode(GridEditMode.InCell))
        .DataSource(ds => ds
            .Ajax()
            .Batch(true)
            .ServerOperation(false)
            .Model(model =>
            {
                model.Id(l => l.LRId);
            })
            )
    )

    When the grid show data correctly formatted with "Short date format" (look image attached: View.png),
    but when i modify the date the grid modify the format (look image attached: Modify.png).

    How can I have the same format for view and editing data?
  2. Answer
    Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2190 posts

    Posted 08 Apr 2014 Link to this post

    Hi Alessio,

    There are several ways to achieve the desired behavior and which one you would choose depends entirely on you and the exact setup that you have. For example you can create custom editor template for the required field in which to set the needed format to the DateTimePicker or use the Edit event of the Grid as demonstrated below:

    .Events(e => e.Edit("onEdit"))

    function onEdit(e) {
        //replace OrderDate with your field name
        var datePicker = e.container.find("#OrderDate").data("kendoDateTimePicker");
        datePicker.setOptions({ format: "{0:d}" });
        datePicker.value(datePicker.value());
    }

    Regards,
    Vladimir Iliev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. Mandar
    Mandar avatar
    3 posts
    Member since:
    Apr 2017

    Posted 29 Apr Link to this post

    I try to add datepicker in grid cell but there are following problems are occured
    1)its not assign to cell
    2) date is not formatted as 'dd/MM/yyyy'
    3)onclick cell value not show and empty textbox display

    I attached the gif file which will explain the my problems

    I use latest updated kendo library for grid

    Please give me sample project if possible.

    my grid configuration is batch edit 'true' and 'GridEditMode is incell'

     

     

  4. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1742 posts

    Posted 02 May Link to this post

    Hi Mandar,

    In order to specify the date format manually for a column you need to define it in the Format() setting. For example:

    columns.Bound(p => p.DateField).Format("{0:dd/MM/yyyy}");

    Also, if you would like to specify custom editors for some of the fields you should use an approach similar to the one described in the article below:



    Regards,
    Viktor Tachev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top