Batch update - error reporting from server

[Bilal]

The Grid allows to update/create records in batch.
Some of the records might fail to update or create. Assuming the server returned the records that have failed, is there a technique used to reflect those errors on the rows in the grid, maybe show them in different color to signify to the user that he/she should fixed the errors, etc.

Thanks

[Vladimir Iliev]

Hi Bilal,

Basically our CodeLibrary already contains example of server-side validation using "PopUp" edit mode which you can extend to work for your current scenario:

• Handling server-side validation errors during pop-up editing

Also for your convenience I created small example of Grid server-side validation using "InCell" edit mode and attached it to the current thread (it's a custom solution).

Regards,
Vladimir Iliev
Telerik

 

 

[Bilal]

Hi Vladimir,
Thanks for the useful links you sent me. I believe the first example is for InCell editing and the second is for Popup. In all cases, I got the idea, you return an error message per row and display it on each field.

However, take this example:
- I change 3 rows
- 2 of the rows make error on server
- 1 row works fine and gets update

The code sample, will:
- Prevent data binding
- Show errors only for rows with errors

As for rows that were updated successfully, their state will remain "dirty:true", hence every time you send request to update, they will be sent again to be updated.

Also, what if for the rows that were saved you want to show additional data sent from server?

The samples lacks the above two points I mentioned. Can you help me find a solution for them?

- Can I do databinding for rows that were successfully updated?

In MVC, I noticed the use of "ClientTemplate" for columns. How to do the same when using HTML5 controls? Shall I use RowTemplate? An example please.

Many thanks
Bilal

[Vladimir Iliev]

Hi Bilal,

Please note that the provided solution for "InCell" editing is a custom one - it's intended to be used only as baseline and the developer is entirely responsible for customizing it in order to meet his requirements. Currently I could only suggest to enable "batch" updates - this way if even one row fails the validation on the server side you can cancel the whole transaction. For additional customization of the current behavior I would suggest to check the grid and it's dataSource API:

• Grid API
• DataSource API

Also the equivalent of "ClientTemplate" in Kendo UI grid is "columns.template":

• columns.template option

Regards,
Vladimir Iliev
Telerik

 

 

[Bilal]

Hello Vladimir,
Part of the code you pointed me to, I have extended it with the following logic:

1- For each and every record read from server, I attach to it the "uid" as a new property "cid". [client id]
2- For sake of testing, I am returning from server the Errors result, having two fields with errors [2 rows] and one row no errors containing the cid sent from client [no errors in this row]
3- Code below:

function onError(args) {
    if (args.errors) { // some records were updated/created successfully
        for (var i = 0; i < args.errors.length; i++) {
            if (!args.errors[i].cid) { continue; } // only handle rows with cid i.e. no errors / updated successfully on server

            var data = args.errors[i];
            var dataItem = args.sender.getByUid(data.cid);
            if (dataItem) {
                args.sender.pushDestroy(dataItem); // remove the item "silently"
                args.sender.pushCreate({ uid: data.cid, Code: "T22", Text: "Test2" }); // add the item "silently" - data could be retrieved from server, just test now
            }
        }
    }

    if (args.errors) { // same as before handle all error records with no cid
        var grid = $("#Grid").data("kendoGrid");

        //remove previous errors
        grid.table.find(".errorCell").each(function () {
            $(this).removeClass("errorCell");
        })

        grid.one("dataBinding", function (e) {
            e.preventDefault();   // cancel grid rebind if error occurs

            var fieldCellIndices = {},
            dataSource = grid.dataSource,
            errors = args.errors;

            //get current column indexes
            for (var i = 0; i < grid.columns.length; i++) {
                if (grid.columns[i].field) {
                    fieldCellIndices[grid.columns[i].field] = i;
                }
            }

            for (var i = 0; i < errors.length; i++) {
                if (errors[i].cid) { continue; }

                var error = errors[i],
                    item = dataSource.get(error.id),
                    row = grid.table.find("tr[data-uid='" + item.uid + "']");

                for (var j = 0; j < error.errors.length; j++) {
                    var field = error.errors[j].field,
                        message = error.errors[j].message;

                    //find the cell
                    var container = row.find("td:eq(" + fieldCellIndices[field] + ")");

                    //show the validation error message
                    showMessage(container, field, message, item.id);
                    //highlight the cell that have error
                    container.addClass("errorCell");
                }
            }
        });
    }
}

So far, only rows with errors show a notification error. The rows that updated successfully on server, they are destroyed and then added with dirty = false.

Now, according to documentation, 

pushDestroy

Removes the specified data item(s) from the data source without marking them as "removed". The data source will not sync data items appended via pushDestroy.The difference between pushDestroy and remove is that items removed via remove are synced with the remote service.

I thought using pushXXX won't cause Data Source to issue request to server to Delete, Create, etc.

Because, now if I am press "Save Changes" again on Grid, Data Source is sending a Destroy and Create requests in addition to Update [those rows that failed].

Is there a way to add/remove silently from Data Source without causing a request to server?

Thanks

[Petyo]

Hi,

Indeed, the pushDestroy should not trigger the remote transport destroy method - the following example demonstrates it. You may use the same approach (custom transport.destroy) to determine why this is not so in your case. 

Regards,
Petyo
Telerik

 

 

[Bilal]

Hi Petyo,
Thanks for getting back. How about the approach to handle such a scenario. Is it acceptable?

Regards
Bilal

[Petyo]

Hi,

I am not sure what you mean by "acceptable" and the type of assistance you need currently. May you please clarify? 

Regards,
Petyo
Telerik

 

 

[Bilal]

Hi,
I shared the solution Ive implemented with you hoping to hear your feedback if I am using the kendo ui controls the right way in handling errors returned from the server.

thank you

[Petyo]

Hello Bilal,

I can't notice anything unusual with your implementation - if it works for you, then you should go ahead with it.

Regards,
Petyo
Telerik