Category / Section
How to set custom format in edit state of Grid
1 min read
By default, Grid shows the standard formats (ex: ‘yMd’) in edit state of a column. Incase of custom formats, it will show only in display. To show the custom formats in edit state, you can use the ‘edit.params’ property of Grid columns.
This is demonstrated in the below sample code in which the custom format is provided to the DateTimePicker editor component, by setting the ‘format’ property through ‘edit.params’.
CSHTML
@{
var editParams = new { @params = new { format = "hh:mm a" } };
}
<ejs-grid id="Grid" dataSource="@ViewBag.data" allowPaging="true" toolbar="@( new List<object>() {"Add","Edit","Delete","Update","Cancel"})">
<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="120"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" width="175" ></e-grid-column>
<e-grid-column field="OrderDate" allowEditing="false" headerText="Order Date" editType="datetimepickeredit" edit="editParams" Format="hh:mm a" width="130"></e-grid-column>
<e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="120"></e-grid-column>
</e-grid-columns>
</ejs-grid>
OutPut
Demo: https://www.syncfusion.com/downloads/support/directtrac/general/ze/customFormat-1225644421
