3

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.

Naresh
  • 23,937
  • 33
  • 132
  • 204
  • Seems to work fine from the Dojo: http://dojo.telerik.com/aLUXA – CodingWithSpike Sep 08 '14 at 20:59
  • @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 Sep 11 '14 at 13:30
  • 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 Sep 11 '14 at 13:59
  • 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 Sep 11 '14 at 17:30
  • 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: https://chrome.google.com/webstore/detail/telerik-kendo-ui-chrome-i/npcmgpnfknjmndbbakdhchgibaajnlpe?hl=en – CodingWithSpike Sep 11 '14 at 18:02
  • 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! @CodingWithSpike, thank you so much for your help. Without your guidance, I would not have been able to eliminate all the possibilities. – Naresh Sep 12 '14 at 04:21
  • No problem. Glad you got it worked out. – CodingWithSpike Sep 12 '14 at 13:37
  • @Naresh, glad to see you solve your problem. Please move your answer from comments to Your Answer. – Iman Mahmoudinasab May 06 '15 at 04:31

2 Answers2

0

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!

Naresh
  • 23,937
  • 33
  • 132
  • 204
0
$("#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");
  }        
});
Greg R Taylor
  • 3,470
  • 1
  • 25
  • 19