Articles in this section
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

Apply custom format in both display and edit mode

 

Demo: https://www.syncfusion.com/downloads/support/directtrac/general/ze/customFormat-1225644421

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied