Invalid Viewstate with Dynamic Tooltips on RadTreeView Nodes

2 posts, 0 answers
  1. Adriaan
    Adriaan avatar
    4 posts
    Member since:
    Feb 2014

    Posted 05 Jun 2015 Link to this post

    I am having an issue with using a RadTooltipManager on RadTreeView nodes here is related code - this sits inside a user control:

    <asp:HiddenField runat="server" id ="ResourceToolTip"/>
                            <telerik:RadToolTipManager
                                ID="RadTooltipManager1"
                                runat="server"
                                AutoTooltipify="False"
                                Position="TopCenter"
                                EnableViewState="False"
                                OnAjaxUpdate="RadTooltipManager1_AjaxUpdate">
                            </telerik:RadToolTipManager>
                            <telerik:RadTreeView
                                runat="server"
                                ID="tvResourceKitBundles"
                                OnClientContextMenuShowing="onClientResourceTreeContextMenuShowing"
                                OnClientContextMenuItemClicking="onClientResourceTreeContextMenuItemClicking"
                                OnClientMouseOver="onNodeMouseOverResourceTree"
                                OnClientMouseOut="onNodeMouseOut"
                                OnClientNodeDragStart="onResourceKitDragStart"
                                OnClientNodeDropping="onNodeDropping"
                                OnContextMenuItemClick="tvResourceKitBundles_ContextMenuItemClick"
                                OnNodeEdit="tvResourceKitBundles_NodeEdit"
                                OnNodeDrop="tvResourceKitBundles_OnNodeDrop"
                                EnableDragAndDrop="True"
                                EnableDragAndDropBetweenNodes="true">
                                <ContextMenus>
                                    <telerik:RadTreeViewContextMenu ID="tvResourceKitContextMenu" runat="server">
                                        <Items>
                                            <telerik:RadMenuItem Value="Rename" Text="Rename"></telerik:RadMenuItem>
                                            <telerik:RadMenuItem Value="Edit" Text="Edit"></telerik:RadMenuItem>
                                            <telerik:RadMenuItem Value="Delete" Text="Delete"></telerik:RadMenuItem>
                                            <telerik:RadMenuItem Value="Add Hyperlink" Text="Add Hyperlink"></telerik:RadMenuItem>
                                            <telerik:RadMenuItem Value="Alphabetize Resources" Text="Alphabetize Resources"></telerik:RadMenuItem>
                                            <telerik:RadMenuItem Value="Featured" Text="Make Final Output" Visible="False"></telerik:RadMenuItem>
                                        </Items>
                                    </telerik:RadTreeViewContextMenu>
                                </ContextMenus>
                            </telerik:RadTreeView> 

    function onNodeMouseOverResourceTree(sender, args) {
                //gets the node upon mousing over the node
                currentNode = args.get_node();
                currentTree = "resourceTree";

                if (currentNode.get_level() == 1) {
                    $get("<%=ResourceToolTip.ClientID%>").value = currentNode.get_value();
                    showToolTip(sender._element);
                }
            }

            function showToolTip(element) {
                var tooltipManager = $find("<%=RadTooltipManager1.ClientID%>");
                //If the user hovers the image before the page has loaded, there is no manager created  
                if (!tooltipManager) return;
                //Find the tooltip for this element if it has been created   
                var tooltip = tooltipManager.getToolTipByElement(element);
                //Create a tooltip if no tooltip exists for such element  
                if (!tooltip) {
                    tooltip = tooltipManager.createToolTip(element);
                }
                tooltip.show();
            }

     

     Code behind:

     //this gets called on page load

                foreach (var resource in resources)
                {
                    //build new node
                    var node = new RadTreeNode(resource.Title, resource.ResourceID.ToString());
                    node.ImageUrl = "/ImageResize.aspx?img=" + resource.FileIcon + "&h=16&w=16";
                    node.Attributes.Add("ResourceFileID", resource.ResourceFileID.ToString());
                    node.Attributes["id"] = Guid.NewGuid().ToString();

                    RadTooltipManager1.TargetControls.Add(node.Attributes["id"], node.Value, true);

                    if (resource.IsFeatured)
                    {
                        node.BackColor = ColorTranslator.FromHtml("#EE7026");
                    }
                    else
                    {
                        node.BackColor = Color.White;
                    }

                    //add new node tree
                    nodes.Add(node);

     

    //and this is the ajax update

     

    protected void RadTooltipManager1_AjaxUpdate(object sender, ToolTipUpdateEventArgs e)
            {
                try
                {
                    var resource = new Resource(SQLData.GetDBInt(ResourceToolTip.Value));

                    Label lbl = new Label();
                    lbl.ID = "lblResourceToolTip";
                    if (resource.ResourceFileID > 0)
                        lbl.Text = resource.ResourceFile.FileName;
                    else
                    {
                        lbl.Text = Path.GetFileName(resource.URLToFile);
                    }

                    e.UpdatePanel.ContentTemplateContainer.Controls.Add(lbl);
                }
                catch
                {
                }
            }

     

     

    So everything mostly works however when I quickly hover over a list of nodes it will start firing invalid viewstate errors - though it seems generally to continue to work - any way "I can avoid these viewstate errors? I'm thinking it's just firing too many ajax postbacks too fast when you run your mouse over multiple nodes at once - I've considered switching to the web service method for doing this but figured I'd see if there was a simple solution. Also, I don't necessarily need this to be dynamic but when I tried to use the tooltipify set to true and load each node.tooltip value on page load it does not work for me. Thanks

  2. Adriaan
    Adriaan avatar
    4 posts
    Member since:
    Feb 2014

    Posted 05 Jun 2015 Link to this post

    Seems I may have solve my own problem, after examining the code for multiple demos out there for this I realized I did not need to use the javascript function that generated a tooltip with the tooltipmanager when I was already assigning target controls on page load. No onmouseover event or hidden field needed for this as it must be generated when you assign the target controls.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top