Showing validation errors from the server in a Grid (local data binding)

[Boardy]

As part of a report I have a list of supervisor timeframe data (who supervised between two times). This is certainly not the only data of the report. The whole report is entered and submitted with a single button click.

This supervisor data can be edited in a grid

@Html.LabelFor(m => m.Report.GSupervisors, htmlAttributes: new {@class="form-label"})
@(Html.Kendo().Grid(Model.Report.GSupervisors)
    .Name("supervisors")
    .ToolBar(tb => tb.Create())
    .Columns(columns =>
    {
        columns.Bound(p => p.Start).Format("{0:yyyy-MM-dd HH:mm}").Width(240);
        columns.Bound(p => p.End).Format("{0:yyyy-MM-dd HH:mm}").Width(240);
        columns.Bound(p => p.Supervisor);
    })
    .Navigatable()
    .HtmlAttributes(new { @class = "mt-3" })
    .Editable(e => e.Enabled(true)
        .Mode(GridEditMode.InCell)
        .CreateAt(GridInsertRowPosition.Bottom))
    .Selectable(sel => sel.Mode(GridSelectionMode.Single))
)

All three fields are required and Start < End. During editing, the grid correctly creates a red border with an error message if no data is entered in a field when exiting. But still it is possible to have incorrect data (e.g., enter only a Start, but not the other fields). This is caught when the data is submitted and the report is redisplayed with validation errors.

An example of the validation error would have the key Report.GSupervisors[2].Supervisor (see screengrab).

However, the grid does not show what the errors are and which cells contain the errors. I expected the red border around the cells and to see the error message when hovering or entering the cell. This does not happen.

I have found several examples about error handling, but all of them use remote binding. In my case local data binding is used. Also the examples use the OnError event of the datasource to show a popup window, which is really not the way I would like to address this.

How can I achieve the desired error handling?

[Aleksandar]

Hello Boardy,

Thank you for sharing the Grid configuration and details on the scenario.

I see the Grid is configured for InCell editing. In this configuration only the field that is being edited is validated. Your observation is correct and when adding a new record, for example, the first filed will enter edit mode, but the user should complete the rest. If they are required, as in the case, but not completed invalid data will be submitted. An option to mitigate this is to use InLine or PopUp editing. This way the Grid will validate all the fields, as all of them will be in edit mode. The user won't be able to save the record if any of the required fields is not completed. This way you will avoid the submission of records with empty required fields.

The other important note I should make is the Grid is not an editor component i.e. it is not part of the HTML Form Elements. With remote binding ModelState errors, if any, are serialized and returned as the Errors field of the DataSourceResult object, being returned from the endpoint. In local binding, as in the example you have the IEnumerable passed to the Grid is internally set as data for the DataSource and serialized as such. In this scenario the Grid' DataSource has no knowledge whether there are any errors or not. Thus the expectation for a red border around the cells and an error message when hovering or entering a cell is not being met.

With all that said I can provide the following suggestions:

• Use InCell or PopUp editing mode. This way you will avoid the scenario where empty model fileds will be submitted. You can also extend the kendo validator with additional rules such as that for the dates: Start < End as demonstrated in this example or in this article.
• Consider using remote binding for the Grid. With this approach you may use the Error event handler, but instead of showing a popup you could style complete rows or cells with errors or add tooltips with details on errors.
• You could use local binding, access the ModelState and check for errors related to the Grid records and style any Grid rows/cells as desired.

I hope this helps.

Regards,
Aleksandar
Progress Telerik

[Boardy]

Thank you for your reply.

Unfortunately, the grid is part of a greater input form and as such it is not possible to switch it to remote binding. You mention that the grid has no knowledge of the ModelState errors in the case of local binding. Is it possible to make the grid aware? I would much prefer the grid to handle al the styling etc., than having to do it myself. Not because I'm lazy (well not more than average), but for consistency and what not.

Also I tried the other forms of editing and each had their own issues, but maybe I will try again with InLine.

[Aleksandar]

When you bind the Grid to the IEnumerable you set it's data and that's it. Even though the model you pass back to the view might contain ModelState errors for the items in that collection, the Grid is not a HTML Form element that is supposed to visualize them, as a regular input, for example.

If visualization for the end user is the main goal an approach that comes to mind is to use the HtmlAttributes overload, that expects a JavaScript handler returning the attributes.

columns.Bound(p => p.UnitPrice).Width(140).HtmlAttributes("attributesHandler");

You could then check the value for the particular cell and model and add some styling to the cell:

<script>
    function attributesHandler(e){
        if(e.UnitPrice == 0){
            return {"class": "flagged"}
        }
    }
</script>
<style>
    .flagged {
        background-color:yellow;
    }
</style>

In this REPL when you add a new record the UnitPrice will get a highlight. Once updated and the record is saved, if the criteria is matched the flag won't show.

Would an approach like this be useful?

[Boardy]

Thanks again.

I went down a little bit different road, setting the class/styling in the doc.ready and removing it in the validation event if the field became dirty.

It works now, but it's a pitty it doesn't work right out of the box.