Call Function on DataBound of Every Instance of Widget

[Lee]

I have a lot of projects with kendo grids in them. As a matter of practice, I always call the same function on the dataBound event. Instead of adding this every time I initialize a widget, I would like to set it as a default so that any time I initialize a kendo grid, it is already set. I don't want to give up the ability to add additional functions to specific grids though. Is this possible? 

[Skyler]

Yes, you can use kendo.ui.Grid.fn.options to extend the default configuration and attach your dataBound handler globally. Individual grids can still override or add additional handlers by defining their own dataBound option when initializing.

Retro Bowl

[Nikolay]

Hi Lee,

A possible approach would be if you instantiate the Grids with a JSON literal of options, save a base form of that literal and .extend() it with particulars for each instance. This base literal will have the databound handler.

var baseGridConfig = {
            dataBound: function(e) {
                // Common functionality for all grids
                console.log('Default dataBound executed for:', e.sender.element[0].id);
            },
            sortable: true,
            pageable: {
                pageSize: 5,
                buttonCount: 5
            },
            height: 300,
            scrollable: true
        };

Dojo demo: https://dojo.telerik.com/hYnFGlCv

Regards,
Nikolay
Progress Telerik

[Lee]

Thanks. This gives me a start. I'm still going to figure out how to merge the default dataBound event with the custom one so that both fire but I think I can get inventive there.

[Rizwan]

Yes, it's possible to set a default dataBound function for all Kendo Grids without losing the ability to add specific functions to individual grids.

You can achieve this by extending the Kendo UI Grid's default behavior. Here's how you can do it:

1. Create a custom default function that you want to be called on the dataBound event of all Kendo Grids.

2. Override the dataBound event globally by using Kendo's kendo.ui.Grid.fn to hook into the grid's event lifecycle.

Here's an example solution:

// Define the default function you want to call on dataBound
function defaultDataBound(e) {
    // Your default function logic here
    console.log('Default dataBound function called');
}

// Extend Kendo Grid's default dataBound event
var originalGrid = kendo.ui.Grid.fn;

kendo.ui.Grid.fn = $.extend(true, {}, originalGrid, {
    events: $.extend({}, originalGrid.events, {
        dataBound: "dataBound"
    }),
    dataBound: function(e) {
        defaultDataBound(e); // Call the default function
        if (originalGrid.fn.dataBound) {
            originalGrid.fn.dataBound.call(this, e); // Call the grid's specific dataBound function
        }
    }
});

// Initialize a Kendo Grid, it will automatically call the default function on dataBound
$("#grid").kendoGrid({
    dataSource: data,
    columns: columns,
    dataBound: function(e) {
        // Additional logic specific to this grid
        console.log('Specific dataBound logic');
    }
});

• The defaultDataBound function is called whenever the dataBound event is triggered for any grid.

• You can still add a dataBound function specific to an individual grid. The global function will be called first, followed by any grid-specific function.

This solution ensures you have a default behavior without losing flexibility for individual grid customizations.

Thanks & Regards
Team XtraSaaS