Grid Not Working Inside jQuery Colorbox

[Mike]

We're trying to get our grid to be fully functional inside a colorbox (http://colorpowered.com/colorbox/). The grid works fine on the page itself, but when inside a colorbox the grid loses all interactive elements (no selecting rows, changing pages, etc.).

For example:

<div>
    <div id="grid_container">
        <form id="form0" runat="server">
            <telerik:RadScriptManager id="RadScriptManager0" runat="server" />
            <telerik:RadAjaxManager id="RadAjaxManager0" EnablePageHeadUpdate="false" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadGrid0">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid0" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <telerik:RadGrid ID="RadGrid0" runat="server" AllowPaging="True" AllowSorting="True" AllowAutomaticUpdates="True" DataSourceID="ObjectDataSource0" GridLines="Vertical" PageSize="10" Skin="Telerik">
                ...
            </telerik:RadGrid>
        </form>
    </div>
</div>

The above works just fine.

However, when colorbox is added:

<div style="display:none;">
    <div id="grid_container">
        <form id="form0" runat="server">
            <telerik:RadScriptManager id="RadScriptManager0" runat="server" />
            <telerik:RadAjaxManager id="RadAjaxManager0" EnablePageHeadUpdate="false" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadGrid0">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid0" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <telerik:RadGrid ID="RadGrid0" runat="server" AllowPaging="True" AllowSorting="True" AllowAutomaticUpdates="True" DataSourceID="ObjectDataSource0" GridLines="Vertical" PageSize="10" Skin="Telerik">
                ...
            </telerik:RadGrid>
        </form>
    </div>
</div>
<script type="text/javascript">
    function openGrid() {
        jQuery.colorbox({ innerWidth: "800", innerHeight: "350", opacity: 0.5, inline: true, scrolling: false, href: "#grid_container" });
    }
</script>

This does not work correctly; the colorbox opens but the grid has the issues described above.

I'm not sure how to go about fixing this, so I'd appreciate some help if possible. Thanks.

[Marin]

Hello Mike,

This behaviour might be observer if the control fails to load its client-side scripts initially.
I tried to reproduce the issue on my side using your sample code but no avail. I am attaching the sample page that worked correctly on my side. Have a look at it and let me know how it works in your case.
Additionally if the problem persists I will appreciate if you could open a formal support ticket and send us a sample page that reproduces the issue so we can investigate it on our end.

All the best,
Marin
the Telerik team

[Mike]

Thanks Marin. I was able to get our grid mostly working based on your example page. The one last problem is that our pager is in "slider" mode, which seems to cause trouble here. At first it would not display, but I fixed that based on this KB article. Unfortunately the slider still doesn't work, reverting to the first page after every attempt to change pages. The issue appears in your example as well, after setting the pager mode. Do you know how to fix this? Thanks for the help.

[Marin]

Hello Mike,

 You can try adding an empty OnCommand client-side event handler for the grid. It might help firing of commands in ajaxified grid in some more complicated scenarios. 

<ClientSettings>
    <ClientEvents OnCommand="gridCommand" />
</ClientSettings>

function gridCommand(sender, args)
{

}

All the best,
Marin
the Telerik team

[Mike]

Perfect, thanks.