This is a migrated thread and some comments may be shown as answers.

Batch update - error reporting from server

9 Answers 708 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Bilal
Top achievements
Rank 2
Bilal asked on 20 Feb 2015, 09:27 PM
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

9 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 24 Feb 2015, 02:10 PM
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:

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Bilal
Top achievements
Rank 2
answered on 25 Feb 2015, 05:33 PM
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


0
Vladimir Iliev
Telerik team
answered on 26 Feb 2015, 06:17 AM
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:

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

Regards,
Vladimir Iliev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Bilal
Top achievements
Rank 2
answered on 26 Feb 2015, 11:33 AM
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
0
Petyo
Telerik team
answered on 02 Mar 2015, 10:22 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Bilal
Top achievements
Rank 2
answered on 02 Mar 2015, 12:16 PM
Hi Petyo,
Thanks for getting back. How about the approach to handle such a scenario. Is it acceptable?

Regards
Bilal
0
Petyo
Telerik team
answered on 04 Mar 2015, 12:50 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Bilal
Top achievements
Rank 2
answered on 04 Mar 2015, 12:54 PM
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
0
Accepted
Petyo
Telerik team
answered on 06 Mar 2015, 12:10 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Bilal
Top achievements
Rank 2
Answers by
Vladimir Iliev
Telerik team
Bilal
Top achievements
Rank 2
Petyo
Telerik team
Share this question
or