Issue with Client-Side Binding and multiple User Controls/Grids on a single page.

[Richard]

Hi Telerik experts,

Was wondering if I could get some help on this issue.

Have a Control Panel page with multiple 'filter' buttons.
What we want to do is put multiple Grids onto this single page
and hide/show them based on what 'filter' button is clicked.
(For reasons having to do with another issue I was having,
it's actually the Grid inside the Control that is being
shown/hidden.)

We do this by puttingmultiple User Controls (.ascx) on the page, each of which contains a Grid
and a RadCodeBlock with javascript to do client-side binding.

The issue is as follows:

You start the app, go to Control Panel page.
It defaults to 'Button1', shows the Grid1, and it works fine. The User Control loads, the Grid inside
the control is Data Bound.

The problem is when you click 'Button 2' and it tries to load a different control.
The Grid fails to databind. Checking the output I can see that the client side binding javascript
for the new control is there/compiled.

weird thing is, it only fails to bind the 'second time'.
After that, if you click 'Button 2' again (or any other button first then click 'Button 2'),
the Grid binds and displays correctly.

 

Each User Control looks something like this:

<telerik:RadCodeBlock ID="RadCodeBlock2" runat="server">
    <script type="text/javascript">

        var headerView = null;
        var commandName = "";
        var entityTypeID = 3;
        var entityID = 154;

        var detailsView = null;

        function m_rgPickupRequests_controlLoad(sender, args) {
            /*
            headerView = $find("<%= m_rgPickupRequests.ClientID %>").get_masterTableView();
            commandName = "Load";
            updateHeaderVirtualItemCount(0);
            var s = headerView.get_sortExpressions().toString();
            var filterState = $get("<%= m_hdnStateButtonType.ClientID %>").value;
            totalcontrol.Service.RequestsService.GetPickupRequestGridContents(
                entityTypeID,
                entityID,
                filterState,
                headerView.get_currentPageIndex() * headerView.get_pageSize(),
                headerView.get_pageSize(),
                headerView.get_sortExpressions().toString(),
                headerView.get_filterExpressions().toString(),
                updateHeaderGrid);
                */
        }

        function m_rgPickupRequests_Command(sender, args) {
            args.set_cancel(true);
            commandName = args.get_commandName();
            var filterState = $get("<%= m_hdnStateButtonType.ClientID %>").value;
            totalcontrol.Service.RequestsService.GetPickupRequestGridContents(
                entityTypeID,
                entityID,
                filterState,
                headerView.get_currentPageIndex() * headerView.get_pageSize(),
                headerView.get_pageSize(),
                headerView.get_sortExpressions().toString(),
                headerView.get_filterExpressions().toString(),
                updateHeaderGrid);
        }

        function m_rgPickupRequests_RowDataBound(sender, args) {
            var description = args.get_dataItem()["Description"];
            var cell = args.get_item().get_cell("Description");
            cell.style.cursor = 'pointer';
            setToolTip(cell, description);
        }

        function setToolTip(element, description) {
            var radToolTipManager = $find('<%= Parent.FindControl("m_rttToolTipManager").ClientID %>');
            if (!radToolTipManager) {
                return;
            }

            var tooltip = radToolTipManager.getToolTipByElement(element);
            if (!tooltip) {
                tooltip = radToolTipManager.createToolTip(element);
            }
        }

        function updateHeaderGrid(result) {
            headerView.set_dataSource(result);
            headerView.dataBind();
            var filterState = $get("<%= m_hdnStateButtonType.ClientID %>").value;
            if (commandName == "Filter" || commandName == "Load") {
                totalcontrol.Service.RequestsService.GetRequestGridContentsCount(
                    entityTypeID,
                    entityID,
                    filterState,
                    headerView.get_filterExpressions().toString(),
                    updateHeaderVirtualItemCount);
            }
        }

        function updateHeaderVirtualItemCount(result) {
            headerView.set_virtualItemCount(result);
        }

    </script>
</telerik:RadCodeBlock>

<asp:ScriptManagerProxy ID="ScriptManager2" runat="server">
    <Services>
        <asp:ServiceReference Path="~/Services/RequestService.svc" />
    </Services>
</asp:ScriptManagerProxy>

<asp:HiddenField ID="m_hdnStateButtonType" runat="server" />

<telerik:RadGrid ID="m_rgPickupRequests" runat="server" AllowFilteringByColumn="true">
    <MasterTableView>
        <Columns>
   <....GridBoundsColumns....>
        </Columns>

    </MasterTableView>
<ClientSettings>
            <ClientEvents OnCommand="m_rgPickupRequests_Command"
            OnGridCreated="m_rgPickupRequests_controlLoad"
            OnRowDataBound="m_rgPickupRequests_RowDataBound"
            />
</ClientSettings>
</telerik:RadGrid>

 

Control Panel is something like so:

    <asp:Panel ID="m_pnlFilters" runat="server" CssClass="clear">           
        <fieldset>
            <table style="display:inline">
                <tr>
                    <th>
                        Filter by Site/Department
                    </th>
                </tr>
                <tr>
                    <td>
                        <telerik:RadTreeView ID="m_rtvEntities" runat="server" CheckBoxes="true"
                            CheckChildNodes="true"
                            TriStateCheckBoxes="true"
                            Width="23em"
                            Height="8em"
                            BorderStyle="Solid"
                            BorderColor="Gray"
                            BorderWidth="1px">
                        </telerik:RadTreeView>
                    </td>
                </tr>
            </table>
            <table style="display:inline; margin-left: 2em">
                <tr>
                    <th>
                        Filter by User
                    </th>
                </tr>
                <tr>
                    <td>
                        <telerik:RadButton ID="m_btnAllItems" runat="server"
                            Text="All Items" ToggleType="Radio" GroupName="MyItemsFilters" Width="8em" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <telerik:RadButton ID="m_btnMyItems" runat="server"
                            Text="My Items Only" ToggleType="Radio" GroupName="MyItemsFilters" Width="8em" />
                    </td>
                </tr>
            </table>
            <table style="display:inline; margin-left: 2em">
                <tr>
                    <th colspan="3">
                        Filter by Status
                    </th>
                </tr>
                <tr>
                    <td>
                        <telerik:RadButton ID="button1" runat="server"
                            Text="Items In Use" ToggleType="Radio" GroupName="StateButtonFilters" Width="12em"
                            CommandName="Filter" CommandArgument="ItemsInUse" OnCommand="FilterStateButton_Command" />
                    </td>
                    <td>
                        <telerik:RadButton ID="button2" runat="server"
                            Text="Pending Pickup" ToggleType="Radio" GroupName="StateButtonFilters" Width="12em"
                            CommandName="Filter" CommandArgument="PendingPickup" OnCommand="FilterStateButton_Command"/>
                    </td>
                </tr>
  <table>  
        </fieldset>
    </asp:Panel>

    <asp:Panel ID="m_pnlGridContainer" runat="server">
        <TC1:RequestGrid ID="m_ctlRequestGrid" runat="server" />
        <TC1:PickupGrid ID="m_ctlPickupRequestGrid" runat="server" />
        <TC1:QuoteGrid ID="m_ctlQuoteGrid" runat="server" />
    </asp:Panel>

Any help would be appreciated. Thanks!

Richard 

 

[Iana Tsolova]

Hi Richard,

Can try explicitly rebinding the grid when the button two is clicked and let me know if it makes any difference?

Regards,
Iana
the Telerik team