How to make a time type field with timepicker in adding and editing new row

[Ahmed]

Hi,

Q1- How to make time type (TimeSpan) field with time picker in adding and editing new row? and how to bind it with time format in the grid? and How to send and receive data form controller as time format?

Q2- How to show datetime field as time format only in grid?

In other words,  How to show time part from datetime field in grid?

Thanks a lot.

[Rajapandiyan Settu]

Hi Ahmed, 

Thanks for contacting Syncfusion support. 

Query #1: How to make time type (TimeSpan) field with time picker in adding and editing new row? and how to bind it with time format in the grid? and How to send and receive data form controller as time format?. 

We have validated your query at our end. You can achieve your requirement by using timePicker control to edit the column. This can be achieved by using cellEditTemplate feature. 

TimePicker Doc: https://ej2.syncfusion.com/javascript/documentation/timepicker/es5-getting-started/ 

By using cellEditTemplate feature, you can render custom edit control in the column. The cell edit template is used to add a custom component for a particular column by invoking the following functions: 

• create - It is used to create the element at the time of initialization.
• write - It is used to create the custom component or assign default value at the time of editing.
• read - It is used to read the value from the component at the time of save.
• destroy - It is used to destroy the component.

 

Find the below documentation and sample for more information. 

 

cellEditTemplate: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#cell-edit-template 

[Index.cshtml] 

 

<ejs-grid id="Grid" height="315" allowPaging="true"> 

    <e-data-manager url="/Home/UrlDataSource" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Delete" adaptor="UrlAdaptor"></e-data-manager> 

    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings> 

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column> 

        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column> 

        <e-grid-column field="OrderDate" headerText="Order Date" customFormat="@(new { type ="date", format="hh:mm:ss a" })" edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})" width="120"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

 

<script> 

    var elem; 

    var dObj; 

 

    function create(args) { 

        elem = document.createElement('input'); 

        return elem; 

    } 

 

    function write(args) { 

// render TimePicker control to edit the column 

        dObj = new ej.calendars.TimePicker({ 

// bind the cell value to timepicker 

            value: new Date(args.rowData[args.column.field]), 

            placeholder: 'Select DateTime' 

        }); 

        dObj.appendTo(elem); 

    } 

 

    function destroy() { 

        dObj.destroy(); 

    } 

 

    function read(args) { 

// return the value which will be saved to the controller 

        return dObj.value; 

    } 

</script> 

When we save the edited time value, Grid sends the modified dateTime value to the controller and you can save the data in your data-base. 

Query #2: How to show datetime field as time format only in grid? 

By using customFormat property, you can customize the date time value in different format. please find the below documentation and code example for more information. 

Date Formatting: https://ej2.syncfusion.com/aspnetcore/documentation/grid/columns/#date-formatting 

<e-grid-column field="OrderDate" headerText="Order Date" customFormat="@(new { type ="date", format="hh:mm:ss a" })" edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})" width="120"></e-grid-column> 

We have prepared a sample for your reference. You can get it from the below link, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/core_grid_timepicker1793216297.zip 

Please get back to us if you need further assistance with this. 

Regards, 

Rajapandiyan S