Is there an event indicating that a Kendo Grid has been rendered?

3
votes

I would like to make some changes to the Kendo grid after it has been rendered (show/hide columns etc.). However the Kendo grid does not provide any onRendered event. So how can I do this?

Earlier, I have used the dataBound event to do this. It used to work aparently becuase the grid was already rendered by the time the data arrived from the AJAX request. However, my use case has changed - the data is now already available when the grid is declared. So the code inside the dataBound event is not finding the grid. In the code below if (grid) always returns false:

$('#mygrid').kendoGrid({

    dataSource: {
        data: myGridData
    },

    dataBound: function() {
        // Check if the grid has been rendered
        var grid = $('#mygrid').data('kendoGrid');
        if (grid) {
            // Show/hide columns
            ...
        }
    },

    ...
});

I also tried to move the check after the kendoGrid() call, but that still does not work. The grid has not yet been rendered right after the call.

$('#mygrid').kendoGrid({

    dataSource: {
        data: myGridData
    },

    ...
});

// Check if the grid has been rendered
var grid = $('#mygrid').data('kendoGrid');
if (grid) {
    // Show/hide columns
    ...
}

I could use a setTimeout() before doing the check, but that feels like a hack! Is there any other way? Can Kendo Grid introduce an event such as onRendered? I feel that that would be the right way to solve this issue.

Thanks in advance for your time.

2
kendo-uikendo-grid
Seems to work fine from the Dojo: dojo.telerik.com/aLUXA - CodingWithSpike
@CodingWithSpike, thanks for the example. It seems to indicate that databound should work. Unfortunately, I am not able to replicate this in my code. Tried putting breakpoints in the databound function - $('#mygrid') exists, but $('#mygrid').data('kendoGrid') does not. Still trying to figure out what's going on. Any ideas? - Naresh
You might be able to get back to the grid widget with the parameter passed to the event handler. Try something like: dataBound: function (dataBoundEvent) { var gridWidget = dataBoundEvent.sender; } or maybe something else in that event object? - CodingWithSpike
Ok, I can get to the grid using dataBoundEvent.sender. It does give me a workaround, but its not pretty - now I have to pass around the grid to all nested functions. Any reason you can think of why the dataBoundEvent knows about the grid but $('#mygrid').data('kendoGrid') does not return it? - Naresh
No clue. I've never really seen that before. Seems odd to me too. See if your #grid element has the attribute data-role="grid" on it. Whatever element has the data-role should be the one that you call .data("kendoGrid") on. You can also try the Kendo UI Chrome Extension to see if it can find your grid: chrome.google.com/webstore/detail/telerik-kendo-ui-chrome-i/… - CodingWithSpike

2 Answers

0
votes

Figured it out finally! This was not an issue with Kendo UI at all. It was a bug with the Marionette framework. At the point where I was trying to do $('#mygrid').data('kendoGrid'), #mygrid was not attached to the DOM - the rendering was being performed off-dom. Naturally the selector returned nothing! So I put a workaround for Marionette and Kendo grid started working just fine!

0
votes
$("#grid").on("DOMSubtreeModified", function () {
  var grid = $("#grid").data("kendoGrid");
  if (grid) {
    console.log("Grid is ready!"); 

    /* Note that dataSource will not be available here. 
    You can however start attaching event handlers e.g. 
    grid.bind("dataBound", func) */

    $("#grid").off("DOMSubtreeModified");
  }        
});