RadToolTipManager Failed to load viewstate

[Zinoviy Margovskiy]

Hi Telerik,
I need help:
I have a rad grid with edit form and bunch of text boxes and buttons in it.
inside edit form I am trying to load user controls into RadToolTip dinamicly based on clicked button.
When I click first link button lnkEditSupplierSearch ==> everything works fine;  however if I click
after this the another link button (lnkEditProductrSearch and only after clicking lnkEditSupplierSearch)
I am receiving following error:

Failed to load viewstate.  The control tree into which viewstate is being loaded must match the control
tree that was used to save viewstate during the previous request.  For example, when adding controls
dynamically, the controls added during a post-back must match the type and position of
the controls added during the initial request.

Here is the code WEB USER CONTROL:

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManagerProxy1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1"/>

            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1"/>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                <telerik:AjaxUpdatedControl ControlID="RadToolTipManager1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>

<telerik:RadScriptBlock ID="rdScriptBlockCloseSearchWindow" runat="server">
    <script language="javascript" type="text/javascript">
        function CloseActiveSuppliersSearchGridToolTip(selectedSupplierID)
        {
            var controller = Telerik.Web.UI.RadToolTipController.getInstance();
            var tooltip = controller.get_activeToolTip();
            if (tooltip) tooltip.hide();

        }

        function CloseActiveProductSearchGridToolTip(selectedproductID)
        {
            var controller = Telerik.Web.UI.RadToolTipController.getInstance();
            var tooltip = controller.get_activeToolTip();
            if (tooltip) tooltip.hide();
        }
    </script>
</telerik:RadScriptBlock>

<asp:Panel ID="pnlOrderlineItems" runat="server">
<asp:UpdatePanel ID="LineItemsGridPanel" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <telerik:RadGrid .................. OnItemCreated="RadGrid1_ItemCreated">
                <MasterTableView>
                    ............
                    <EditFormSettings EditFormType="Template">
                        <FormTemplate>
                         ...................
                            <telerik:RadTextBox ID="txtEditSupplier" runat="server" Skin="Office2007">
                            </telerik:RadTextBox>
                            <asp:LinkButton ID="lnkEditSupplierSearch" runat="server" Skin="Office2007">
                                <img style="border:0px;vertical-align:middle;" src="<%= ResolveUrl("~") %>Images/Details.gif" alt="Search Supplier" />
                            </asp:LinkButton>

                            <telerik:RadTextBox ID="txtEditProduct" runat="server" Skin="Office2007">
                            </telerik:RadTextBox>
                            <asp:LinkButton ID="lnkEditProductrSearch" runat="server" Skin="Office2007">
                                <img style="border:0px;vertical-align:middle;" src="<%= ResolveUrl("~") %>Images/Details.gif" alt="Search Supplier" />
                            </asp:LinkButton>
                            ...................
                        </FormTemplate>
                    </EditFormSettings>
                </MasterTableView>
            </telerik:RadGrid>
            <telerik:RadToolTipManager runat="server" ID="RadToolTipManager1" Width="800px" Height="500px"
                OnAjaxUpdate="RadToolTipManager1_AjaxUpdate" RelativeTo="Element" Animation="Slide"
                Position="MiddleRight" Modal="true" ContentScrolling="Auto" AutoTooltipify="false"
                ShowEvent="OnClick" HideEvent="FromCode">
            </telerik:RadToolTipManager>
       </ContentTemplate>
</asp:UpdatePanel>

    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px"
        Width="75px" Transparency="1">
        <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'
            style="border: 0;" />
    </telerik:RadAjaxLoadingPanel>

protected void RadGrid1_ItemCreated(object sender, Telerik.Web.UI.GridItemEventArgs e)
    {
        if (e.Item is GridEditFormItem && e.Item.IsInEditMode)
        {
            GridEditFormItem editFormItem = (GridEditFormItem)e.Item;
            SetSupplierSearch(editFormItem);
            SetProductSearch(editFormItem);
        }
    }

    private void SetSupplierSearch(GridEditFormItem editFormItem)
    {
        LinkButton lnkbtnSupplierSearch = (LinkButton)editFormItem.FindControl("lnkEditSupplierSearch");

        if (lnkbtnSupplierSearch != null)
        {
            RadToolTipManager1.TargetControls.Add(lnkbtnSupplierSearch.ClientID, "lnkbtnSupplierSearch", true);
        }

        RadTextBox txtEditSupplier = (RadTextBox)editFormItem.FindControl("txtEditSupplier");
        if (txtEditSupplier != null)
        {
            string s = "AssignHdnSupplierSearchText($get('" + txtEditSupplier.ClientID + "'))";
            lnkbtnSupplierSearch.Attributes.Add("onclick", s);
        }
    }

    private void SetProductSearch(GridEditFormItem editFormItem)
    {
        LinkButton lnkbtnProdNumSearch = (LinkButton)editFormItem.FindControl("lnkEditProdNumberSearch");
        LinkButton lnkbtnProdDescSearch = (LinkButton)editFormItem.FindControl("lnkEditProdDescSearch");
        if (lnkbtnProdNumSearch != null)
        {
            RadToolTipManager1.TargetControls.Add(lnkbtnProdNumSearch.ClientID, "lnkbtnProdNumSearch", true);
        }

        if (lnkbtnProdDescSearch != null)
        {
            RadToolTipManager1.TargetControls.Add(lnkbtnProdDescSearch.ClientID, "lnkbtnProdDescSearch", true);
        }

        RadTextBox txtEditProdNumber = (RadTextBox)editFormItem.FindControl("txtEditProdNumber");
        RadTextBox txtEditProdDesc = (RadTextBox)editFormItem.FindControl("txtEditProductDesc");

        if (txtEditProdNumber != null)
        {
            string s = "AssignHdnProdNumSearchText($get('" + txtEditProdNumber.ClientID + "'))";
            lnkbtnProdNumSearch.Attributes.Add("onclick", s);
        }

        if (txtEditProdDesc != null)
        {
            string s = "AssignHdnProdDescSearchText($get('" + txtEditProdDesc.ClientID + "'))";
            lnkbtnProdDescSearch.Attributes.Add("onclick", s);
        }


    }

    protected void RadToolTipManager1_AjaxUpdate(object sender, ToolTipUpdateEventArgs args)
    {
        this.UpdateToolTip(args.Value, args);
    }

    private void UpdateToolTip(string elementID, ToolTipUpdateEventArgs args)
    {
        if (elementID.ToUpper() == "LNKBTNSUPPLIERSEARCH")
        {
            UpdateSupplierToolTip(elementID, args);
        }
        else if (elementID.ToUpper() == "LNKBTNPRODNUMSEARCH" || elementID.ToUpper() == "LNKBTNPRODDESCSEARCH")
        {
            UpdateProductToolTip(elementID, args);
        }
    }

    private void UpdateSupplierToolTip(string elementID, ToolTipUpdateEventArgs args)
    {
        UpdatePanel panel = args.UpdatePanel;
        List<ISupplier> listSuppliers = DoSupplierSearch();

        Control cntrl = this.LoadControl("SupplierSearchResults.ascx");
        panel.ContentTemplateContainer.Controls.Add(cntrl);
        SupplierSearchResults supplierResultsCntrl = (SupplierSearchResults)cntrl;
        supplierResultsCntrl.SuppliersList = listSuppliers;
        supplierResultsCntrl.ParentControl = panel;
        supplierResultsCntrl.ParentControlName = "LINEITEMSEDITFORM";
        panel.ContentTemplateContainer.Controls.Add(cntrl);
    }

    private void UpdateProductToolTip(string elementID, ToolTipUpdateEventArgs args)
    {
        UpdatePanel panel = args.UpdatePanel;
        List<Product> listPrds = DoProductSearch(elementID);

        Control cntrl = this.LoadControl("ProductSearchResults.ascx");
        panel.ContentTemplateContainer.Controls.Add(cntrl);
        ProductSearchResults productResultsCntrl = (ProductSearchResults)cntrl;
        productResultsCntrl.ProductList = listPrds;
        productResultsCntrl.ParentControl = panel;
        productResultsCntrl.ParentControlName = "LINEITEMSEDITFORM";
        panel.ContentTemplateContainer.Controls.Add(cntrl);
    }

[Svetlina Anati]

Hi Zinoviy,

If you add a control dynamically to a placeholder (update panel in this case)  (WebUserControl1.ascx) and on the next postback (ajax request) you add a different control  (WebUserControl2.ascx) to the same placeholder  ASP.NET tries to load the ViewState of the control contained previously at the placeholder -  it's expecting the previous control  you added :(WebUserControl1.ascx) but it will encounter another control instead  (WebUserControl2.ascx). That is why you get the ViewState problem.

The easiest way to solve this problem is that you set EnableViewState="false" to the RadToolTipManager. The only side effect you can get is in case you set some property on the server and you do this once and not every time, e.g:

if(!isPostBack)
{
    RadToolTipManager1.Modal = true;
}

However, since this is not a very often case and you also do not do this in your code, I recommend to set
EnableViewState="false" for the manager.

Let me know whether this works for you.



Regards,

Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.