1-888-365-2779
+1-888-365-2779
Try Now
More in this section

Forums / Bugs & Issues / sf:FieldListView WrapperTagName P causing wrong rendering HTML code in RadListView/RadTabStrip

sf:FieldListView WrapperTagName P causing wrong rendering HTML code in RadListView/RadTabStrip

4 posts, 0 answered
  1. Ralph
    Ralph avatar
    3 posts
    Registered:
    06 Dec 2011
    11 Jan 2012
    Link to this post
    Hi Telerik,

    We ran into some issues with a set of controls.
    We are using the RadTabStrip with the RadMultiPage and RadPageView in our Sitefinity 4.3 (at that moment, now 4.4) website.
    Within the RadPageView we have ASP:ContentPlaceHolders for drag-and-drop widgets.
    It al goes well until we drag-and-drop a News widget into to ContentPlaceHolder.

    In de edit mode of SiteFinity all Tabs and RadPageViews are rendered correctly but in the ViewMode its not.
    This is how it should be (Edit mode):
    <div id="ctl00_RadMultiPage1" style="width:595px;">
        <div id="RadPageView1">
        </div>
        <div id="RadPageView2">
        </div>
        <div id="RadPageView3">
        </div>
    </div>


    But this is rendered (View mode):
    <div id="ctl00_RadMultiPage1" style="width:595px;">
        <div id="RadPageView1">
            <div id="RadPageView2">
                <div id="RadPageView3">
                </div>
            </div>
        </div>
    </div>

    After long debugging and trying a lot of possible solutions, we found the trigger. It was caused by a control wihtin our custom view of the NewsWidget.
    This element is causing the issue: 
    <sf:FieldListView ID="summary" runat="server" Text="{0}"Properties="Summary" WrapperTagName="p" />

    This resolved it:
    <sf:FieldListView ID="summary" runat="server" Text="{0}"Properties="Summary" WrapperTagName="" />

    The WrapperTagName="p" is causing issues with the RadListView.
    We hope you can reproduce the issue and get it fixed.
    If you need more info or code from us just let us know.

    These are the code parts you'll need:
    <telerik:RadTabStrip ID="RadTabStrip1" MultiPageID="RadMultiPage1" runat="server"
        Skin="CustomSkin" EnableEmbeddedSkins="false" UnSelectChildren="false" SelectedIndex="0">
        <Tabs>
            <telerik:RadTab runat="server" Text="Tab1" Visible="true" PageViewID="RadPageView1" />
            <telerik:RadTab runat="server" Text="Tab2" Visible="true" PageViewID="RadPageView2" />
            <telerik:RadTab runat="server" Text="Tab3" Visible="true" PageViewID="RadPageView3" />
            <telerik:RadTab runat="server" Text="Tab4" Visible="true" PageViewID="RadPageView4" />
            <telerik:RadTab runat="server" Text="Tab5" Visible="true" PageViewID="RadPageView5" />
            <telerik:RadTab runat="server" Text="Tab6" Visible="false" PageViewID="RadPageView6" />
            <telerik:RadTab runat="server" Text="Tab7" Visible="false" PageViewID="RadPageView7" />
            <telerik:RadTab runat="server" Text="Tab8" Visible="false" PageViewID="RadPageView8" />
            <telerik:RadTab runat="server" Text="Tab9" Visible="false" PageViewID="RadPageView9" />
        </Tabs>
    </telerik:RadTabStrip>

    <telerik:RadMultiPage ID="RadMultiPage1" runat="server" RenderSelectedPageOnly="false" SelectedIndex="0" Width="595px">
        <telerik:RadPageView ID="RadPageView1" runat="server">
            <section class="left_breed">
                <asp:ContentPlaceHolder ID="Content1" runat="server">
                </asp:ContentPlaceHolder>
            </section>
            <section class="right_smal w_320 nomarg">
                <asp:ContentPlaceHolder ID="RightContent1" runat="server">
                </asp:ContentPlaceHolder>
            </section>
            <div style="clear: both">
            </div>
        </telerik:RadPageView>
        <telerik:RadPageView ID="RadPageView2" runat="server">
            <section class="left_breed">
                <asp:ContentPlaceHolder ID="Content2" runat="server">
                </asp:ContentPlaceHolder>
            </section>
            <section class="right_smal w_320 nomarg">
                <asp:ContentPlaceHolder ID="RightContent2" runat="server">
                </asp:ContentPlaceHolder>
            </section>
            <div style="clear: both">
            </div>
        </telerik:RadPageView>
        <telerik:RadPageView ID="RadPageView3" runat="server">
            <section class="left_breed">
                <asp:ContentPlaceHolder ID="Content3" runat="server">
                </asp:ContentPlaceHolder>
            </section>
            <section class="right_smal w_320 nomarg">
                <asp:ContentPlaceHolder ID="RightContent3" runat="server">
                </asp:ContentPlaceHolder>
            </section>
            <div style="clear: both">
            </div>
        </telerik:RadPageView>
        <telerik:RadPageView ID="RadPageView4" runat="server">
            <section class="left_breed">
                <asp:ContentPlaceHolder ID="Content4" runat="server">
                </asp:ContentPlaceHolder>
            </section>
            <section class="right_smal w_320 nomarg">
                <asp:ContentPlaceHolder ID="RightContent4" runat="server">
                </asp:ContentPlaceHolder>
            </section>
            <div style="clear: both">
            </div>
        </telerik:RadPageView>
        <telerik:RadPageView ID="RadPageView5" runat="server">
            <section class="left_breed">
                <asp:ContentPlaceHolder ID="Content5" runat="server">
                </asp:ContentPlaceHolder>
            </section>
            <section class="right_smal w_320 nomarg">
                <asp:ContentPlaceHolder ID="RightContent5" runat="server">
                </asp:ContentPlaceHolder>
            </section>
            <div style="clear: both">
            </div>
        </telerik:RadPageView>
        <telerik:RadPageView ID="RadPageView6" runat="server">
            <section class="left_breed">
                <asp:ContentPlaceHolder ID="Content6" runat="server">
                </asp:ContentPlaceHolder>
            </section>
            <section class="right_smal w_320 nomarg">
                <asp:ContentPlaceHolder ID="RightContent6" runat="server">
                </asp:ContentPlaceHolder>
            </section>
            <div style="clear: both">
            </div>
        </telerik:RadPageView>
        <telerik:RadPageView ID="RadPageView7" runat="server">
            <section class="left_breed">
                <asp:ContentPlaceHolder ID="Content7" runat="server">
                </asp:ContentPlaceHolder>
            </section>
            <section class="right_smal w_320 nomarg">
                <asp:ContentPlaceHolder ID="RightContent7" runat="server">
                </asp:ContentPlaceHolder>
            </section>
            <div style="clear: both">
            </div>
        </telerik:RadPageView>
        <telerik:RadPageView ID="RadPageView8" runat="server">
            <section class="left_breed">
                <asp:ContentPlaceHolder ID="Content8" runat="server">
                </asp:ContentPlaceHolder>
            </section>
            <section class="right_smal w_320 nomarg">
                <asp:ContentPlaceHolder ID="RightContent8" runat="server">
                </asp:ContentPlaceHolder>
            </section>
            <div style="clear: both">
            </div>
        </telerik:RadPageView>
        <telerik:RadPageView ID="RadPageView9" runat="server">
            <section class="left_breed">
                <asp:ContentPlaceHolder ID="Content9" runat="server">
                </asp:ContentPlaceHolder>
            </section>
            <section class="right_smal w_320 nomarg">
                <asp:ContentPlaceHolder ID="RightContent9" runat="server">
                </asp:ContentPlaceHolder>
            </section>
            <div style="clear: both">
            </div>
        </telerik:RadPageView>
    </telerik:RadMultiPage>

    This is the content of the NewsWidgets custom view:
    <telerik:RadListView ID="NewsList" ItemPlaceholderID="ItemsContainer" runat="server"
        EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false" OnItemDataBound="RadNewsList_OnItemDataBound"
        AllowCustomPaging="true" AllowPaging="true" EnableViewState="true">
        <LayoutTemplate>
            <sf:ContentBrowseAndEditToolbar ID="MainBrowseAndEditToolbar" runat="server" Mode="Add">
            </sf:ContentBrowseAndEditToolbar>
            <asp:PlaceHolder ID="ItemsContainer" runat="server" />
        </LayoutTemplate>
        <ItemTemplate>
            <div class="newsitem border_top">
                <div class="cal left">
                    <span class="n_date">
                        <%# ((DateTime)Eval("PublicationDate")).ToString("dd")%>
                    </span><span class="n_month">
                        <%# ((DateTime)Eval("PublicationDate")).ToString("MMM")%>
                    </span><span class="n_year">
                        <%# ((DateTime)Eval("PublicationDate")).ToString("yyyy")%>
                    </span>
                </div>
                <div class="nitem left">
                    <h2>
                        <sf:DetailsViewHyperLink ID="DetailsViewHyperLink1" TextDataField="Title" ToolTipDataField="Description"
                            runat="server" />
                    </h2>
                    <asp:Panel ID="pnlAuthor" runat="server">
                        <span class="doornaam">Door <span class="naam"><a href="#" title="asdasd">
                            <sitefinity:TextField ID="TextField3" runat="server" DisplayMode="Read" Value='<%# Eval("Author")%>' />
                        </a></span></span>
                    </asp:Panel>
                    <asp:Panel ID="Tags" runat="server">
                    </asp:Panel>
                    <sf:FieldListView ID="summary" runat="server" Text="{0}" Properties="Summary" WrapperTagName="p" />
                    <span class="l_meer">
                        <sf:DetailsViewHyperLink ID="FullStory" Text="» Lees meer" runat="server" CssClass="sfnewsFullStory" />
                    </span>
                    <div class="n_foto">
                        <asp:Panel ID="Image" runat="server">
                        </asp:Panel>
                    </div>
                    <div class="reacties">
                        <asp:Panel ID="CommentCount" runat="server">
                        </asp:Panel>
                    </div>
                </div>
                <div style="clear: both;">
                </div>
            </div>
        </ItemTemplate>
    </telerik:RadListView>

  2. Jordan
    Jordan avatar
    172 posts
    Registered:
    20 Oct 2015
    16 Jan 2012
    Link to this post
    Hi Ralph,

    I was able to reproduce the issue that you have described. The output is the same (wrong) when using span tag also. The problem is that one more closing tag is generated. We are now investigating the issue.

    For now I can recommend you to wrap the summary in hand-written P tag:

    1.<p>
    2.<sf:FieldListView ID="summary" runat="server" Text="{0}" Properties="Summary"/>
    3.</p>

    Thank you for posting this and sorry for the inconvenience.

    Greetings,
    Jordan
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Ralph
    Ralph avatar
    3 posts
    Registered:
    06 Dec 2011
    16 Jan 2012
    Link to this post
    Thanks Telerik
  4. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    31 Jul 2012
    Link to this post
    FYI...this is STILL outstanding (and irritating) in 5.1
4 posts, 0 answered