How to have ejTimePicker as edit type for a column?

Solution:

We can use “EditTemplate” feature of Grid column to render ejTimePicker control during editing. The following code example shows how to render ejTimePicker control as editing type for a column using EditTemplate feature.

For more information about “EditTemplate” feature please follow the below documentation link

Link: https://help.syncfusion.com/js/grid/editing#cell-edit-template

Render the Grid control.

<div id="Grid"></div>
<script type="text/javascript">
    $(function () {// Document is ready.        
        $("#Grid").ejGrid({
            dataSource: window.gridData, 
            allowPaging: true,                
            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
            toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },
            columns: [
                      { field: "OrderID", headerText: "Order ID", isPrimaryKey: true, width: 100 },
                     { field: "EmployeeID", headerText: "Employee ID", width: 100},
                     { field: "OrderDate", headerText: " Order Date ", 
                     editTemplate: {
                            create: "create", read: "read", write: "write"                      
                      } ,width: 100 , format: "{0:hh:mm:ss}"
                  },
                 { field: "ShipCity", headerText: "Ship City", width: 100 }                      
            ]
        });
    });                
</script>

MVC

[In View]
@(Html.EJ().Grid<object>("Grid")            
            .Datasource((IEnumerable<object>)ViewBag.data))
            .AllowPaging()            
            .EditSettings(edit => edit.AllowEditing().AllowAdding().AllowDeleting().)
            .ToolbarSettings(toolbar =>
            {
                toolbar.ShowToolbar().ToolbarItems(items =>
                {
                    items.AddTool(ToolBarItems.Add);
                    items.AddTool(ToolBarItems.Edit);
                    items.AddTool(ToolBarItems.Delete);
                    items.AddTool(ToolBarItems.Update);
                    items.AddTool(ToolBarItems.Cancel);
                });
            })                
            .Columns(col =>
            {         col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width(100).Add();
               col.Field("EmployeeID").HeaderText("Employee ID").Width(100).Add();
               col.Field("OrderDate").HeaderText("Order Date ").Format("{0:hh:mm:ss}").EditTemplate(a => { a.Create("create").Read("read").Write("write"); }).Width(100).Add();  
               col.Field("ShipCity").HeaderText("Ship City").Width(100).Add();                
       })
)

ASP.NET

[aspx]
<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" >  
                        <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" ></EditSettings>
            <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>           
            <Columns>
                <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True"   Width="100"/> 
                <ej:Column Field="EmployeeID" HeaderText="Employee ID" Width="100"/>
                 <ej:Column Field="OrderDate" HeaderText="Order Date" Format="{0:hh:mm:ss}" Width="100">
                 <EditTemplate Create="create" Read="read" Write="write"/></ej:Column>
                <ej:Column Field="ShipCity" HeaderText="Ship City"  Width="100"/>                
            </Columns>
</ej:Grid>

2. You can define the Event Handlers for create, read, write of Grid column “EditTemplate” feature.

Events	Description
create	It is used to create the control at time of initialize
read	It is used to read the input value at time of save
write	It is used to assign the value to control at time of editing

<script type="text/javascript">
function create(args) {
            return $("<input>");
}
function write(args) {
//convert the element to ejTimePicker control 
             args.element.ejTimePicker({
                    value: args.rowdata["Time"],
                    interval: 15,
                    timeFormat: "HH:mm:ss",
                    width: "100%"
             });
        }
function read(args) {
            return args.ejTimePicker("getValue");//get the value from the TimePicker control 
}
</script>

The following output is displayed as a result of the above code example