RadTreeView for ASP.NET AJAX Not Rendering Properly

7 posts, 0 answers
  1. Fred Koehlmann
    Fred Koehlmann avatar
    7 posts
    Member since:
    Feb 2008

    Posted 03 Sep 2009 Link to this post

     

    I am working on an existing ASP.NET 2.0 web application built in VS2005. Our desktop OS is WinXP (IIS5) and the servers are Win2003 (IIS6). My current issue revolves around a new AJAX RadTreeView that is located within a couple of asp:Panel within a rad:PageView on a content page. Initially the control renders correctly, but after hiding a parent panel that it is contained within, and then making that panel visible again, the controls renders as an unordered list. There are no checkboxes, or style formatting.

     

    In navigating back to the control by making the parent panel visible again, the tree view control does have its visibility set to false initially and once a specific dropdown selection has been selected the tree view is made visible and the nodes cleared and rebound. I’ve debugged and interrogated the tree view from the command window and the nodes are populated both before and after being made visible and not. In fact the improperly rendered view of the control indicates that it is getting the data.

     

    Are there any ideas as to why this is happening? I have played around with the RadAjaxManager to see if different control selections modified the rendered results, but no.

    Much thanks, Fred. 

     

    <rad:PageView ID="RightsView" runat="server" meta:resourcekey="RightsView">

    <asp:Panel ID="ViewRoleRightsPanel" runat="Server" Visible="True">

    </asp:Panel>

     

    <asp:Panel ID="CreateEditRoleRightsPanel" runat="Server" Visible="False">

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

        <AjaxSettings>

            <telerik:AjaxSetting AjaxControlID="ddlRole">

                <UpdatedControls>

                    <telerik:AjaxUpdatedControl ControlID="LocationLabelPanel" />

                    <telerik:AjaxUpdatedControl ControlID="ManagerialTypePanel" />

                    <telerik:AjaxUpdatedControl ControlID="TreeViewPanel" />

                    <telerik:AjaxUpdatedControl ControlID="LocationWidePanel" />

                    <telerik:AjaxUpdatedControl ControlID="LocationNarrowPanel" />

                    <telerik:AjaxUpdatedControl ControlID="NotificationPanel" />

                    <telerik:AjaxUpdatedControl ControlID="btnSaveRight" />

                </UpdatedControls>

            </telerik:AjaxSetting>

            <telerik:AjaxSetting AjaxControlID="ddlManagerialType">

                <UpdatedControls>

                    <telerik:AjaxUpdatedControl ControlID="TreeViewPanel" />

                    <telerik:AjaxUpdatedControl ControlID="btnSaveRight" />

                </UpdatedControls>

            </telerik:AjaxSetting>

            <telerik:AjaxSetting AjaxControlID="RadLocationGrid1">

                <UpdatedControls>

                    <telerik:AjaxUpdatedControl ControlID="RadLocationGrid1" />

                    <telerik:AjaxUpdatedControl ControlID="btnSaveRight" />

                </UpdatedControls>

            </telerik:AjaxSetting>

        </AjaxSettings>

    </telerik:RadAjaxManager>

    <div class="ContentSection">

    <div class="ContentFirstColumn">

    <div class="ContentLine">

        <asp:Panel ID="TreeViewPanel" runat="server" Visible="True">

            <div class="ContentFirstItem RightAligned">

                <asp:label id="lblTreeViewRolesProduct" runat="server" Visible = "false" Text="**Product/Practice - Area of Practice/Sub-Practice:" CssClass="FormLabel" meta:resourcekey="lblTreeViewRolesProduct"></asp:label>

                <asp:label id="lblTreeViewRolesLOB" runat="server" Visible = "false" Text="**LOB/Sector/Segment:" CssClass="FormLabel" meta:resourcekey="lblTreeViewRolesLOB"></asp:label>

            </div>

            <div class="ContentDoubleItem LeftAligned">

                <telerik:RadTreeView ID="TreeViewRoles" Visible="true" runat="server" CheckBoxes="true" TriStateCheckBoxes="true" CheckChildNodes="true" Skin="Outlook" OnNodeCheck="TreeViewRoles_NodeCheck" Height="290px">

                </telerik:RadTreeView>

                <asp:Label ID="lblNote" runat="server"></asp:Label>

            </div>

        </asp:Panel>

    </div>

     

  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 04 Sep 2009 Link to this post

    Hi Fred,

    The problem is that the skin file for RadTreeView is not loaded and that's why it is rendered as unordered list. I suggest you copy the "Default" skin files from your installation folder into the project and reference the css file manually in the head section of your page in order to make sure that they are loaded properly.

    If you have any difficulties, please contact us again

    Kind regards,
    Yana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Fred Koehlmann
    Fred Koehlmann avatar
    7 posts
    Member since:
    Feb 2008

    Posted 08 Sep 2009 Link to this post

    Hi Yana,

    The control is using one of your internal built-in default skins. If the skin isn't loading then it wouldn't show up when the control initially loads, but as I mentioned it does show correctly initially! It's only after the parent panel and the control is hidden and then made visible again that the issue occurs.

    <telerik:RadTreeView ID="TreeViewRoles" Visible="true" runat="server" CheckBoxes="true" TriStateCheckBoxes="true" CheckChildNodes="true" Skin="Outlook" OnNodeCheck="TreeViewRoles_NodeCheck" Height="290px"></telerik:RadTreeView>

  5. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 09 Sep 2009 Link to this post

    Hello Fred,

    I understood that the treeview looks as expected initially, but I guess that it is made visible with an ajax request, that's why the skin is not loaded. Have you tried my suggestion from the previous post? You can, of course, copy "Outlook" skin from the installation folder and use it as a custom skin, here it's explained in more details.

    Regards,
    Yana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  6. Fred Koehlmann
    Fred Koehlmann avatar
    7 posts
    Member since:
    Feb 2008

    Posted 09 Sep 2009 Link to this post

    Hi Yana,

    No go I still have the same issue.

     

    I copied the skin to my project,set the "EnableEmbeddedSkins" property to "False", and referenced the style sheet from my master page. The TreeView control still renders the same way. Looking fine the first time through, but not after it has been hidden and then made visible again.

    Fred.

  7. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 10 Sep 2009 Link to this post

    Hello Fred,

    Could you please prepare a simple running project demonstrating the issue and send it to us so we could test it? Thanks a lot

    Greetings,
    Yana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  8. Aarsh
    Aarsh avatar
    192 posts
    Member since:
    Jun 2012

    Posted 13 Jun 2013 Link to this post

    I too had the same issue, but I solved it by adding following
    Either, all to my content page
    Or, To my master page.
    Or, I had script manager only in master page and everything else was in content page, that too worked for me



    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="scriptSchMaster" runat="server" EnablePartialRendering="true"
            EnableScriptCombine="true" OnAsyncPostBackError="scriptSchMaster_AsyncPostBackError">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js">
                </asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js">
                </asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js">
                </asp:ScriptReference>
            </Scripts>
        </telerik:RadScriptManager>
     
    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">
        </telerik:RadStyleSheetManager>
     
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
     
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server">
            <TargetControls>
                <telerik:TargetControl ControlsToApplySkin="<Some Telerik Control>" Skin="<Some Skin Name>" />
                <telerik:TargetControl ControlsToApplySkin="<Some Telerik Control>" Skin="<Some Skin Name>" />
                <telerik:TargetControl ControlsToApplySkin="<Some Telerik Control>" Skin="<Some Skin Name>" />
                <telerik:TargetControl ControlsToApplySkin="<Some Telerik Control>" Skin="<Some Skin Name>" />
                <telerik:TargetControl ControlsToApplySkin="<Some Telerik Control>" Skin="<Some Skin Name>" />
            </TargetControls>
        </telerik:RadSkinManager>

    Please mark this as answer if it works, it may save / make a day of some else, too !
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017