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

Date edit format on grid incell editing

3 Answers 430 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ale
Top achievements
Rank 1
Ale asked on 04 Apr 2014, 04:07 PM
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?

3 Answers, 1 is accepted

Sort by
0
Accepted
Vladimir Iliev
Telerik team
answered on 08 Apr 2014, 09:45 AM
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.

 
0
Mandar
Top achievements
Rank 1
answered on 29 Apr 2017, 06:13 AM

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'

 

 

0
Viktor Tachev
Telerik team
answered on 02 May 2017, 11:28 AM
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.
Tags
Grid
Asked by
Ale
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Mandar
Top achievements
Rank 1
Viktor Tachev
Telerik team
Share this question
or