Batch update - error reporting from server

10 posts, 1 answers
  1. Bilal
    Bilal avatar
    109 posts
    Member since:
    Oct 2014

    Posted 20 Feb 2015 Link to this post

    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
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 24 Feb 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Bilal
    Bilal avatar
    109 posts
    Member since:
    Oct 2014

    Posted 25 Feb 2015 Link to this post

    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


  5. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 26 Feb 2015 Link to this post

    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!
     
  6. Bilal
    Bilal avatar
    109 posts
    Member since:
    Oct 2014

    Posted 26 Feb 2015 in reply to Vladimir Iliev Link to this post

    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
  7. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 02 Mar 2015 Link to this post

    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!
     
  8. Bilal
    Bilal avatar
    109 posts
    Member since:
    Oct 2014

    Posted 02 Mar 2015 in reply to Petyo Link to this post

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

    Regards
    Bilal
  9. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 04 Mar 2015 Link to this post

    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!
     
  10. Bilal
    Bilal avatar
    109 posts
    Member since:
    Oct 2014

    Posted 04 Mar 2015 in reply to Petyo Link to this post

    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
  11. Answer
    Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 06 Mar 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready