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
