[Solved] Typescript: Passing dynamic object into a function triggered by an event

rcs Asks: Typescript: Passing dynamic object into a function triggered by an event
I’m building a component based on DevExtreme DataGrid and I wanted to have a custom toolbar. In the demo in the link, I can specify the items inside toolbarOptions.items to indicate any custom button I want to add.

So I’m adding like the following, inside the event onToolbarPreparing

Code:
onToolbarPreparing(e: any) {
e.toolbarOptions.items.unshift(
  {
    location: 'before',
    widget: 'dxButton',
    options: {
        width: 200,            
        text: 'Reset Filter',
        onClick: function() {
          e.component.clearFilter();
        }
    }
 }
);
}

This is working well, but what I want to do now is that instead of hardcoding the custom button inside the function, I want it to be a dynamic variable, so my end goal is something like:

Code:
onToolbarPreparing(e: any) {
e.toolbarOptions.items.unshift(
  this.customButton
);
}

Is this possible? How to do that? Since the function onClick needs to access e.component which won’t be available in another function? Or is there any other workaround?

Ten-tools.com may not be responsible for the answers or solutions given to any question asked by the users. All Answers or responses are user generated answers and we do not have proof of its validity or correctness. Please vote for the answer that helped you in order to help others find out which is the most helpful answer. Questions labeled as solved may be solved or may not be solved depending on the type of question and the date posted for some posts may be scheduled to be deleted periodically. Do not hesitate to share your response here to help other visitors like you. Thank you, Ten-tools.