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.
JS
<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
Figure 1: Initial rendering of a Grid.
Figure 2: While editing the “Order Date” column with the ejTimePicker control.
Figure 3: After save the value of “Order Date” column in Grid.
