Accessing Infragistics WebDataGrid in document.ready

Question

I'm trying to add some JQuery to an existing ASP.NET app. There is a WebDataGrid contained within a div that is usually hidden, and a button which will display the grid.

The grid may or may not have any data. I'd like to be able to change the style of the button which displays the grid depending on if the grid contains any data or not. The problem is that ig_controls doesn't appear to contain the WebDataGrid object in the document.ready() handler.

Here is the relevant HTML -

<div id="grids">
    <ig:WebDataGrid ID="WebDataGrid1" ... />
    <button type="button" class="btnClose">Close</button>
</div>
.
.
.
<button type="button" id="btnShow">Show</button>

And the javascript -

$(function() {
    function UpdateShowButton() {
        // When called from the click handler, 'grid'is non-null,
        // otherwise, 'grid' is null.
        var grid = ig_controls.WebDataGrid1;
        if (grid.get_rows().get_length() > 0) {
            $('#btnShow').addStyle('hasItems');
        } else {
            $('#btnShow').removeStyle('hasItems');
        }
    }

    // View the grid when clicked.
    $('#btnShow').on('click', function() {
        $('#grids').show();
    }

    // Hide the grid, and update the "Show" button
    $('#btnClose').on('click', function() {
        // Hide the grid
        $('#grids').hide();
        UpdateShowButton(); // This call works    
    }

    // Finally, on postbacks, ensure the "Show" button is styled properly
    UpdateShowButton(); // This fails
});

Getting the grid directly with

var grid = $('#WebDataGrid')

is non-null in both instances, but doesn't give me the WebDataGrid object, and I'm not sure how to get the row count from the raw HTML.

Any help would be greatly appreciated. Thanks.

UPDATE: Thanks to Diego, the issue can be worked around. Instead of this -

// Finally, on postbacks, ensure the "Show" button is styled properly
UpdateShowButton(); // This fails

I tried this -

// Finally, on postbacks, ensure the "Show" button is styled properly
setTimeout(UpdateShowButton, 1);

Yes, that's a 1. Delaying the call to UpdateButton by a single millisecond results in the WebDataGrid object being accessible in ig_controls.

Since the delay duration is insignificant (and the app is for internal use only) I don't mind leaving this code in. But I'd still like to find out why the workaround is necessary, or find a fix that doesn't seem like such a hack.

I've tried it both in the .aspx page and in an external .js file. I get the same behavior in both cases. — Dan Shield
That's where it is now, a <script> block immediately before the </body> tag. — Dan Shield
Yes, do it. Not to keep it as a workaround but at least to know if that way works — Diego

Diego Diego · Accepted Answer · 2015-08-27T18:29:20

The most probable scenario is that, at some point, Infragistics grid's initialization uses some async function. By using a millisecond delay you are getting your code to be executed after Infragistic's. The actual millisecond is not what matters.

If you want to get a cleaner code I would ask Infragistics what can be done or what is happening.

Good luck!

Accessing Infragistics WebDataGrid in document.ready

1 Answers