Accessing all RadGrids on a Page

[Brian Levin]

I have looked everywhere for this answer and just can't seem to find it.  Hope someone out there knows....

I have a RadTabStrip on my page with dynamically loaded UserControls, each having its own RadGrid on it.  These are all scrollable grids and I have the appropriate working JavaScript to get the height to work and ensure the grid renders correctly (along with making sure the columns line up in all browsers). The problem I am having is that once a tab is loaded, I click on another tab to load that one, then go back to the first tab (with no Postback), the grid is all messed up!  The header row is gone and just replaced with blocks. I need to call my FixGrid method which takes a RadGrid as the parameter.  Calling this method does fix the grid when I have it in a scenario where the grids are not dynamically loaded with UserControls and I can access the IDs of each RadGrid on the page; i.e. something like this:

function ClientTabSelected(sender, args) {
    var radgrid;
     if (sender.get_selectedIndex() == 0) {
         radgrid = $find("<%= rgGrid1.ClientID %>");
     }
     else {
         radgrid = $find("<%= rgGrid2.ClientID %>");
     }

     FixGrid(radgrid);
 }

I have tried the OnClientTabSelected event on the RadTabStrip on the ASPX page that houses the UserControls; the problem is I can't access the IDs for the RadGrids on the dynamically loaded UserControls from that page.  Furthermore, I plan to use this scenario quite a bit and would like a centralized method that can handle this.

So, my question is, is it possible to write some JavaScript / jQuery that can get all instances of RadGrids on the page every time the OnClientTabSelected is called and loop through them, calling the my FixGrid method on every one?  Or is there a better way to solve this problem?

I saw there is a $telerik.findGrid() method, a $telerik.toGrid() method and I can access the Telerik.Web.UI.RadGrid object.  Unfortunately I just can't find any way to get this to work.

Thanks in advance for your help with this!

[Antonio Stoilkov]

Hello,

You could achieve your scenario by following the steps below:

• Define the getElementsByClassName function that will return all elements with the same class name

document.getElementsByClassName = function (cl) {
    var retnode = [];
    var myclass = new RegExp('\\b' + cl + '\\b');
    var elem = this.getElementsByTagName('*');
    for (var i = 0; i < elem.length; i++) {
        var classes = elem[i].className;
        if (myclass.test(classes)) retnode.push(elem[i]);
    }
    return retnode;
};

• Use the declared function and loop through all the grids calling FixGrid

var grids = document.getElementsByClassName("RadGrid");
for (var i = 0; i < grids.length; i++) {
    var grid = $find(grids[i].id);
    FixGrid(grid);
}

All the best,
Antonio Stoilkov
the Telerik team

[Brian Levin]

Hi Antonio,

One again Telerik support has come through in a HUGE way for me!  That worked perfectly!  What an excellent way to start off the New Year with some outstanding support.

Thank you very much for your assistance.  It saved me a lot of time and frustration!

Sincerely,
Brian Levin