How would i highlight the grid row/cell that contained an element with a server side validation error in a kendo grid with incell and batch editing

2 posts, 0 answers
  1. Logan
    Logan avatar
    37 posts
    Member since:
    Apr 2013

    Posted 11 Sep 2013 Link to this post

    I need to do some server side validation of data that is being updated on a large grid and wanted to give the user an idea of where any validation errors occurred in the grid.  Ideally it would be by highlighting the row/cell and having a mouse over or other error message associated. 

    What I have done so far is:
    ModelState.AddModelError(Item.Id, "this value is outside of the valid range");
    JavaScript grid error handler
    01.function error_handler(e) {
    02.    var data = e.sender._data;
    03.    if (e.errors) {
    04.        $.each(e.errors, function (key, value) {
    05.            highlightError(data, key, value);
    06.        });
    07.    }
    10.function highlightError(data, key, value) {
    11.    var grid = GetGrid("grid");
    12.    for (var i = 0; i < data.length; i++) {
    13.        var row = data[i];
    15.        if ( == key) {
    16.            var hasError = $('[data-uid="' + row.uid + '"]');
    17.            hasError.addClass('kendo-error-row');  //this seems to be working, but it doesn't survive the whole process.
    18.            hasError[0].mouseover = function () { alert(errors[error].value); };
    19.        }
    20.    }
    It seems like the code is working, but it doesn't seem to stick around until the end and if I use the IE developer tools it doesn't show the new class or have the mouseover.  What am I missing?


  2. Vladimir Iliev
    Vladimir Iliev avatar
    2190 posts

    Posted 13 Sep 2013 Link to this post

    Hi Logan,

    Basically this feature is not supported out-of-the-box, however for convenience I created small project which demonstrates the required behavior and attached it to the current thread (please check this screencast). The packages are removed from the project in order to reduce it's size. 

    Kind Regards,
    Vladimir Iliev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top