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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

DateTime field for Grid

Thread ID:

Created:

Updated:

Platform:

Replies:

118161 Feb 6,2015 08:07 AM UTC Feb 9,2015 09:47 AM UTC ASP.NET MVC 1
loading
Tags: Grid
William Wong
Asked On February 6, 2015 08:07 AM UTC

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)?

Madhu Sudhanan P [Syncfusion]
Replied On 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: http://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.

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

Please let us know if you have any queries.

Regards,

Madhu Sudhanan. P



CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;