Format DateTimePicker dynamically in kendo.grid

[Jacob]

Hi,

Can't figure out how to format a DateTimePicker dynamically in a grid.

Sample:

@(Html.Kendo().Grid<TheViewModel>()
    .Name("aGrid")
    .ToolBar(toolbar => toolbar.Create())
    .Columns(c =>
            {
                c.Bound(e => e.ID);
                c.Bound(e => e.Decimal).Format("{0:n5}");
                c.Bound(e => e.Stamp);
                c.Command(command => { command.Edit(); });
            })

    .Selectable(p => p.Mode(GridSelectionMode.Single))
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(true)
        .Model(model => model.Id(e => e.ID))
        .Create(create => create.Action("create", "Home"))
        .Read(read => read.Action("read", "Home"))
        .Update(update => update.Action("update", "Home"))
       )
)

 What I would like to do is something similar to this:

c.Bound(e => e.Stamp).Format("{0:#=kendo.culture().calendar.patterns.d#}");

 

Thanks

[Rosen]

Hello Jacob,

I'm not sure I completely understood your question. You want to format the content of the column in the current culture d format or want to set the DatePicker widget, shown in edit mode, display format? The first one you can achieve by just setting the .Format("{0:d}") the actual format should be picked based on the current loaded culture.

 For the later you could use the Edit event to find the widget and use its setOptions method to change the format:

@(Html.Kendo().Grid<...>()
    .Name("grid")
     /*..*/
    .Events(events => events.Edit("edit"))
    .DataSource(dataSource => dataSource
       /*..*/
    )
)
<script type="text/javascript">
    function edit(e) {
        e.container.find("[data-role=datepicker]")
            .kendoDatePicker("setOptions", { format: "d" });
    }
</script>

Regards,
Rosen
Telerik

[Jacob]

It sounds easy when you know how :-)

It is the first thing you mention - so the "d" in .Format("{0:d}") is the same as kendo.culture().calendar.patterns.d ?

I have used the second solution, you talk about, but I like the first more as it seems cleaner.

Thanks.

[Rosen]

Hello Jacob,

Indeed, the kendo.culture().calendar.patterns.d holds the short date pattern for the current culture. More on date formatting can be found here.

Regards,
Rosen
Telerik