Change default events on all Grids in my application

Question

I am developing a app in EJ2 and i am adding some common functionality to all grids:

dialog overlay body in all grid dialogs
send toast messages in actionfailure and actioncomplete (replacing processresponse to get messages from controllers) in all grids
change default 'startsWith' filters to 'contains' in all columns

i made this by personalizing some events, but i have to write this code in all Grids:

.ActionBegin("ActionBegin")

.ActionFailure("ActionFailure")

.Load("Load")

.DataBound("DataBound")

.ActionComplete("ActionComplete")

and it's a little repetitive...

In the past, i developed a app in EJ1 and i replaced the default events in my app and it worked very well, with this code in a javascript file after ej.min.js replacing the default events:

ej.Grid.prototype.defaults.actionBegin = "ActionBegin";

ej.Grid.prototype.defaults.actionComplete = "ActionComplete";

ej.Grid.prototype.defaults.actionFailure = "ActionFailure";

ej.Grid.prototype.defaults.load = "Load";

I want to do the same in EJ2.

I tryed the example in https://www.syncfusion.com/forums/143934/how-to-auto-fit-column-from-controller-razor-page

var old = ej.grids.Grid.prototype.wireEvents;

ej.grids.Grid.prototype.wireEvents = function() {

old.apply(this, arguments);

this.on('content-ready', function() {

this.autoFitColumns();

this.load = Load; //Doesn't work!

}, this);

}

</script>

Is there any way? Thanks in advance.

Sujith Kumar Rajkumar · Accepted Answer

Hi Emiliano,

Greetings from Syncfusion support.

You can achieve this requirement of initializing a common event handler for the Grid’s public events(For multiple Grid’s rendered in a page) by defining the event handlers in the WireEvents function. This is demonstrated in the below code snippet,

var old = ej.grids.Grid.prototype.wireEvents;

ej.grids.Grid.prototype.wireEvents = function () {

old.apply(this, arguments);

this.actionBegin = function (args) {

alert("ActionBegin event handler triggered for " + this.element.id);

}

this.actionComplete = function (args) {

alert("ActionComplete event handler triggered for " + this.element.id);

}

</script>

We have prepared a sample based on this for your reference. You can download it from the following link,

Sample: https://www.syncfusion.com/downloads/support/forum/156318/ze/GridApplication-1123144876

Note: This cannot be achieved for the Grid’s load event as the WireEvents function will be initialized in the source only after the Grid is loaded.

Please get back to us if you require any further assistance.

Regards,

Sujith R

Emiliano · Answer

Your answer works. But it's not exactly what i want.

Cause i tought it would have another behaviour.

I will explain it in detail:

I wanted this functionality. To set "personalized" events as default.

BUT in some cases, in some grids, i want to have a "local" or a "unique" functionality in a event in a single Grid.

Example:

I will use the wireEvents to set my "personalized" default DataBound event:

function DataBound(args) {

console.log('DataBound');

//Change the Edit/Confirm dialog overlay to body in all Grids.

dialog = this.element.querySelector("[id$='EditConfirm']");
if (dialog)

      dialog.ej2_instances[0].targetEle = document.querySelector('body');

    //Change the Edit/Alert dialog overlay to body in all Grids.
    dialog = this.element.querySelector("[id$='EditAlert']");
    if (dialog)
        dialog.ej2_instances[0].targetEle = document.querySelector('body');

}

All my Grids will apply this behaviour.

But i have one Grid where i want the totals to be above the lines, so in the view i have:

@Html.EJS().Grid("GridDebitosClientes")

...

.DataBound("DataBoundDebitosClientes")

(script)

function DataBoundDebitosClientes(args) {
        console.log('DataBoundDebitosClientes');

        //totals row above data rows
        //From: https://www.syncfusion.com/forums/150174/aggregate-row-on-first-row-not-footer
        this.getHeaderContent().append(this.getFooterContent());

//Apply the default behaviour

DataBound.call(this.element.ej2_instances[0], args);
}

(/script)

The problem i have with your solution is that the DataBoundDebitosClientes event gets replace by the default DataBound when javascript 'this.on('content-ready', function () { ...' occur.

Isn't there another way to set the name of the events the Grid calls, like in the EJ1 version?

To have "personalized" events by default, but replace them anywhere i want, and call them if i want...

Sujith Kumar Rajkumar · Answer

Hi Emiliano, 
 
You can set different event handlers for particular Grid’s alone by using their id’s(Current Grid’s instance will be received in ‘this’ keyword of the WireFunctions event) to differentiate the Grids as demonstrated in the below code snippet, 
 




var old = ej.grids.Grid.prototype.wireEvents; 
    ej.grids.Grid.prototype.wireEvents = function () { 
        old.apply(this, arguments); 
        if (this.element.id === "GridDebitosClientes") { 
            this.actionBegin = function (args) { 
                alert("ActionBegin event handler triggered for " + this.element.id); 
            } 
        } else { 
            this.actionBegin = function (args) { 
                alert("ActionBegin event handler triggered for " + this.element.id); 
            } 
        } 
} 
 
Modified sample for reference, 
 
Sample: https://www.syncfusion.com/downloads/support/forum/156318/ze/GridModified1691099637  
 
If we misunderstood your query or if you require any further assistance, please get back to us. 
 
Regards, 
Sujith R

Emiliano · Answer

Thanks for your answer.

I think that's not maintainable for me, because i have the wireEvent in the _Layout.cshtml and if i change the grid id, i will have to keep mantaining the names.

That's not a option, at least, for me.

I was testing, and found a diferent way of doing what i want:

I have to at least put the event .Load("MyLoad") in all Grids.

Then in "MyLoad" event, i will set my "personalized" events as default events for all Grids. The benefit is i can check if the Grid has another "unique" or "local" events defined in the View. If it's null, it means i can set my default event, if it's not null, it means i have personalized code in the View, near the Grid, and i should not set my "personalized" event.

if (!this.dataBound)

this.dataBound = MyDataBound;

if (!this.actionComplete)

this.actionComplete = MyActionComplete;

Thanks anyway.

Please confirm if my tought about this is correct, and if i have to take care about something else.

Sujith Kumar Rajkumar · Answer

Hi Emiliano, 

We checked the shared information and for your scenario the method you have mentioned would be the best approach to achieve your requirement as it allows you to customize the events based on individual Grids. 

Please get back to us if you require any further assistance. 

Regards, 
Sujith R