Format DateTimePicker dynamically in kendo.grid

4 posts, 1 answers
  1. Jacob
    Jacob avatar
    45 posts
    Member since:
    Sep 2014

    Posted 19 Aug 2015 Link to this post

    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

  2. Answer
    Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 21 Aug 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Jacob
    Jacob avatar
    45 posts
    Member since:
    Sep 2014

    Posted 26 Aug 2015 in reply to Jacob Link to this post

    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.

  5. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 26 Aug 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready