Unplanned
Last Updated: 02 Sep 2020 11:09 by ADMIN
jwize
Created on: 26 Aug 2020 20:58
Category: Grid
Type: Feature Request
1
Change the Context(This) of Grid event functions for TypeScript classes
Hi Team,

I would like to request the ability to reassign the context of a function in the Kendo UI Grid events.  For example, using the DataBound event, setting This to not be the Grid (e.sender) This would be useful to be able to use my TypeScript class methods.

Thank you.
4 comments
ADMIN
Georgi
Posted on: 02 Sep 2020 11:09

Hi Jaime,

You could set the context of the event handler using the $.proxy method.

e.g.

var grid = $("#grid").data("kendoGrid");
grid.bind("change", $.proxy(grid_change, test));

Below you will find a small sample which demonstrates the above approach:

Regards,
Georgi
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

jwize
Posted on: 26 Aug 2020 22:17
Correction, maybe the following  doesn't work since functions could be called from different classes or services

$("#grid").kendoGrid({
    context : _service,
    databound: _service.onDataBound,
    request : _otherService.onRequest // Ooops wrong context

}

Perhaps the workaround should be encouraged in this situation.

jwize
Posted on: 26 Aug 2020 22:12
Even with the given workaround it would be better to have something like 

$("#grid").kendoGrid({
    context : _service,
    databound: _service.onDataBound

}

 


jwize
Posted on: 26 Aug 2020 22:11

export class Service {
    onDataBound(e) {
       this.doSomething(); // this points at the grid instance so doSomething can't be called
    }

    doSomething() { }
}

// grid javascript

_service = new Service();

$("#grid").kendoGrid({
    ...
    
databound: _service.onDataBound
    ...
}

 

The workaround so far is to add a base class to the service and register function calls slightly differently.

export abstract class ServiceBase { 
    bind(name) {
        return this[name].bind(this);
    }
}

export class Service extends ServiceBase { ... }

 

// Workaround grid code

$("#grid").kendoGrid({
    ...
    
databound: _service.bind('onDataBound')
    ...
}

 

When calling like that the correct context is available for the this keyword and e.sender can be used to access the grid.