We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

DateTime field for Grid

I am trying to bind the Grid control with ApiController and am confused with datetime field. It seems that the grid would try to add the local tiemzone info which is not desirable for my case. I wonder if there is any way to turn off this kind of local/UTC conversion gloablly? It would be great if I could set date/time/datetime format gloablly. BTW, is there any way to let the user edit a time-only field (e.g. textbox with drop down of some predefined time values)?

1 Reply

MS Madhu Sudhanan P Syncfusion Team February 9, 2015 09:47 AM UTC

Hi William,

Thanks for using Syncfusion products.

Query #1: “if there is any way to turn off this kind of local/UTC conversion gloablly? It would be great if I could set date/time/datetime format gloablly

The Date object will contain the time zone information and there is no in-built way to prevent it. But we can control the way in which the date value will be displayed  in the grid column. This can be done by the “Format” property of the columns.

Please refer the below code snippet.

@(Html.EJ().Grid<object>("DataTableGrid")

    . . . 

    .Columns(col =>

                {

. . ..

                    col.Field("OrderDate").HeaderText("Order Date").TextAlign(TextAlign.Right).Format("{0:dd/MM/yyyy}").Width(75).Add();

                    . . ..

                })

    )

If we have used the above format, the Date will be displayed in grid column as “04/07/1996”. We have used the jquery globalize to perform those formatting and we can use all the format strings supported by jquery globalize wrapped between “{0” and “}” . And also please check the below link for standard Date and time format strings available.

https://msdn.microsoft.com/en-us/library/az4se3k1%28v=vs.110%29.aspx

Query #2: “is there any way to let the user edit a time-only field (e.g. textbox with drop down of some predefined time values)?

We can achieve this requirement with the EditTemplate feature of the grid. The EditTemplate feature will provide the way to use different controls for editing (Inline editing) particular value in grid.

For your convenience we have created simple grid sample with TimePicker to edit grid column and the same can be downloaded from the below location.

Sample Location: https://www.syncfusion.com/downloads/support/directtrac/118161/MVCApp-38102971946.zip

The EditTemplate for a column will be provided during grid initialization as follows.

[cshtml]

@(Html.EJ().Grid<object>("Grid")

    . . ..

            .Columns(col =>

            {

. . . .

                col.Field("OrderDate").HeaderText("Time").Format("{0:t}")

                    .EditTemplate(a => { a.Create("create").Read("read").Write("write"); }).TextAlign(TextAlign.Right).Width(90).Add();

. . . . .

            })

    )

The below are the javascript method called to use custom control while editing ‘Time’ column.

[JS]

<script>

    function create() {

        return "<input>"

    }

    function write(args) {

        args.element.ejTimePicker({ width: "100%",  value: args.rowdata !== undefined ? args.rowdata["OrderDate"] : "" });

    }

    function read(args) {

        return args.ejTimePicker("getValue");

    }

</script>

Please refer the below online demo for using EditTemplate feature.

https://mvc.syncfusion.com/demos/web/grid/edittemplate

Please let us know if you have any queries.

Regards,

Madhu Sudhanan. P



Loader.
Up arrow icon