Introducing Column Editors for FlexGrid for ASP.NET Core MVC

FlexGrid provides an efficient excel-style input editing method. But in some cases, you may need to customize the editor used for providing an overall enriching experience for the user. This includes adding custom editors in FlexGrid.

Custom editors can override the default editor of FlexGrid and instead uses input controls for editing. For example, suppose a grid displays the data of a companies employees, and it has a role column that displays the current role/position of an employee. In that case, you can use ComboBox/AutoComplete to display all the roles while editing, and the user can select one of the roles. This will prevent users from entering an invalid value. You can also use MultiSelect if an employee has multiple roles.

In the previous versions, we had to use cell templates to add custom editors. We also had to manually set the TemplateBinding, mainly to provide an initial value to the controls when editing begins.

In this release, we added a new Editor property in the Column class so that we easily provide a custom editor. This property takes the input control id, which should be used as a custom editor for this particular column.

How to use editors for FlexGrid

For creating editors for FlexGrid, first, create an input control, set its necessary properties like its ItemsSource, and set an id for it. While creating a column for FlexGrid, provide the id of the control as the editor property for the column.

For example, if your requirement is to create as an editor for the Country column, create a ComboBox and set its data source:

<c1-combo-box id="countryEditor" style="width:100%" is-editable="false">
    <c1-items-source source-collection="@countries"></c1-items-source>
</c1-combo-box>

Now, you can use the id as the value of editor:

<c1-flex-grid auto-generate-columns="false">
    <c1-items-source source-collection="@Model"></c1-items-source>
    <c1-flex-grid-column binding="Country" editor="countryEditor"></c1-flex-grid-column>
    .....
</c1-flex-grid>

Similarly, if there is a column that displays numerical values, you can use InputNumber as an editor:

<c1-input-number id="amountEditor" style="width:100%" is-required="false" format="c2" step="10" show-spinner="true"></c1-input-number>

And use the id as the editor property:

<c1-flex-grid auto-generate-columns="false">
    <c1-items-source source-collection="@Model"></c1-items-source>
    <c1-flex-grid-column binding="ID" is-read-only="true"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Amount" format="c2" editor="amountEditor"></c1-flex-grid-column>
     .....
</c1-flex-grid>

Through this way, you can add multiple editors to provide a better editing experience for the users.

You can download the complete sample here