Get a reference to Kendo Grid from inside the error handler

Question

There already are questions how to get custom error handling, with answers, but all those answers use 'external' reference/selector to the grid to make it work, for example:

function onError(e) {
    if (e.errors) {
        var message = "Error:\n";  

        var grid = $('#gridID').data('kendoGrid'); // <<- here
    (...)
}

Is it possible to get the reference to the grid from inside the error handling function without providing the selector by hand or 'externally' (because global variables are meh)? That way the error handling script could be totally self-contained.

Pyralid

Answer 1

Version 'current' as of 2015-12-05

Apparently, the source grid can now be retrieved via e.sender.table.context.id. Thanks, Akbari!

KendoUI 2014.1.318

Solution below won't work. It seems that table member is missing from data source.

My workaround was quite crude, just using selectors to grab all k-grid elements which return not-null for .data("kendoGrid") and compare the data sources with arg.sender. When the data sources match - we have a grid which raised the error:

$(".k-grid").each(function() {
    var grid = $(this).data("kendoGrid");
    if (grid !== null && grid.dataSource == args.sender) {
        // We have a winner!
    }
});

---

Original answer

Turns out - after browsing the Internet for quite a bit - that it is possible. So here it goes, for anyone searching for the answer sometime in the future, maybe even future-me.

Inside the function, this is not bound to a grid, but to a DataSource that the grid uses internally, so it can't really be used directly to alter the error-handling behavior. A little bit of poorly documented magic is needed.

It means that (as of Kendo UI MVC version 2013.3.1119.545) the following can be used:

e.sender.options.table.context

to return the wrapping grid (DOM element), while

e.sender.options.table.context.id

returns grid's ID.

It means that, with jQuery, the grid can be retrieved by:

var grid = $(e.sender.options.table.context).data("kendoGrid");

And the rest of the error-handling script remains exactly the same.

Technically, both this bound in the scope and sender seem to be the same thing - grid's DataSource, so they should be interchangeable in the example above.

Pyralid

The "Warning" should be first. Because time moves forwards, not backward. – Gavrah

I should add that in the current version it's accessible with e.sender.table.context.id. – Valetudinary

As of 2017.2.504 (and probably earlier) the table property was removed from dataSource. Probably because it may be shared by multiple widgets. – Cherriecherrita

So what would be the new way to access it @MarcL ? – Curet

@TomelSafadi, sorry, I haven't used kendo-ui since soon after that comment (switched projects). I see that I did upvote Atanas Korchev's answer, that may have led me to a solution at the time. – Cherriecherrita

Answer 2

I would suggest passing the target grid id as an argument to your function. Example: .Events(events => events.Error("function(args){telerikGridAraxErrorhandler(args,'myGridId');}"))

I think it will result in less support in case they change anything in future versions of Telerik Grid

Pilpul

Answer 3

Indeed the error event is exposed by the data source and one can't easily get which grid triggered it. Also we should keep in mind that one data source can be shared by many widgets.

Another possible solution is to use a closure bound to the widget name:

function errorHandler(gridName) {
   return function(e) {
       // handle the event.
       var grid = $(gridName).data("kendoGrid");
   };
}

$("#grid").kendoGrid({
   dataSource: {
       error: errorHandler("#grid")
   }
});

Gaylene

Answer 4

I know this is old, but it seems out of date. I needed to access the grid's name within the error because the error was coming from an 'inner grid' (from a template in and within the main grid's detail template). This is from the Telerik forums so I don't want to take credit for it, but it took me a bit to find it so I'm sharing here. For razor helpers,

@Html.Kendo().Grid<Model>()
   .DataSource(dataSource => dataSource
    .Events(events => events.Error("function(e){error_handler(e, 'GridName')"}))

For Jquery:

$("#Promotions").kendoGrid({
    dataSource: {
        error: errorHandler("#Promotions")
    }
});

and the Javascript function

Function error_handler(e, GridName)
{
}

Postgraduate

Answer 5

you can use the overloaded method of Error() event and pass the grid name as a parameter like:

...
.Events(events => events.Error("function(e){error_handler(e, '#grid')}"))

javascript method:

function error_handler(e, gridName) {

    $(gridName).data("kendoGrid").cancelChanges();

    if (e.errors) {
        var message = "Errors:\n";
        $.each(e.errors, function (key, value) {

            if ('errors' in value) {
                $.each(value.errors, function () {
                    message += this + "\n";
                });
            }
        });

        alert(message);
    }        
}

Hardback