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

Forums / Developing with Sitefinity / Custom Expandible List JavaScript

Custom Expandible List JavaScript

6 posts, 0 answered
  1. andersleet
    andersleet avatar
    155 posts
    Registered:
    03 Jun 2009
    14 Jul 2009
    Link to this post
    Hey all,

    With the lists module there is an "ExpandableList" mode. The only problem I have with it is it will allow you to expand each item. I have a javascript file that does the same thing, but allows you to choose if you want all nodes to be able to be expanded or only one at a time.

    I am unsure of how to implement this, this is what I have come up with so far:

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="FAQListView.ascx.cs" Inherits="Custom_ControlTemplates_Personified_FAQ_FAQListView" %> 
     
    <telerik:CssFileLink ID="CssFileLink1" EmbeddedFileName="Telerik.Lists.Resources.ControlTemplates.Frontend.listsCommonLayout.css" FileName="" Media="screen" runat="server" /> 
    <%--<telerik:JsFileLink ID="JsFileLink1" EmbeddedFileName="Telerik.Lists.Resources.ExpandableList.js" FileName="" runat="server" />--%> 
    <telerik:JsFileLink ID="SwitchContent" EmbeddedFileName="" FileName="~/Custom/Resources/SwitchContent.js" runat="server" /> 
     
    <div id="latest-post" class="post"
        <div class="entry"
        <asp:Repeater ID="lists" runat="server"
            <ItemTemplate> 
                <h2 class="sf_listTitle"><asp:Literal ID="listTitle" runat="server"></asp:Literal></h2
                 
                <class="sf_controlListItems"
                    <id="expandAll" runat="server"
                        <asp:Literal ID="Literal1" runat="server" Text="<%$Resources:ExpandAll %>"></asp:Literal> 
                    </a> 
                    <id="collapseAll" runat="server" style="display:none;"
                        <asp:Literal ID="Literal2" runat="server" Text="<%$Resources:CollapseAll %>"></asp:Literal> 
                    </a> 
                </p> 
                 
                <ul class="sf_expandableList" id="expandableList" runat="server"
                    <asp:Repeater ID="listItems" runat="server"
                        <HeaderTemplate> 
                        </HeaderTemplate> 
                        <ItemTemplate> 
                            <li> 
                                <h3 id="<%= string.Format(\"switch{0}-title\", [probably have to have a databound item here]) %>" runat="server" class="sf_listItemTitle"
                                    <id="headline" runat="server" title="<%$Resources:ClickToExpand %>"></a> 
                                </h3> 
                                <div id="<%= string.Format(\"switch{0}\", [same databound item here]) %>runat="server" class="sf_listItemBody" style="display:none;"
                                    <asp:Literal ID="content" runat="server"></asp:Literal> 
                                </div> 
                            </li> 
                        </ItemTemplate> 
                        <FooterTemplate> 
                        </FooterTemplate> 
                    </asp:Repeater> 
                </ul> 
            </ItemTemplate> 
        </asp:Repeater> 
        <script type="text/javascript"
            var gsContent = new switchcontent("switch", "div"); 
            gsContent.collapsePrevious(true); // TRUE: only 1; FALSE: any number 
            gsContent.setPersist(false); 
            gsContent.defaultExpanded(-1); 
            gsContent.init(); 
        </script> 
        </div> 
    </div> 

    This is how to implement the script, per the author:

    "The only protocol you must follow is to give each content container a unique ID (ie: "bobcontent1") and a common CSS class name to group them together (ie: "switchgroup1"). Then for each content's corresponding header, assign it the same ID as the content itself, but suffixed with "-title" (ie: "bobcontent1-title"). This conversion lets the script know what belongs to what."

    So I need to know if I embedded the source file properly (with the <telerik:JsFileLink ... /> element) and then how to pull a databound item (such as the guid) so I can use that as the unique ID.

    Cheers,
    anders


  2. Georgi
    Georgi avatar
    3583 posts
    Registered:
    28 Oct 2016
    20 Jul 2009
    Link to this post
    Hello andersleet,

    I think the approach is reasonable. You can get the ID by the following code:
    <div><%# DataBinder.Eval(Container.DataItem, "ID") %></div

    The rest of the DataItem fields are:
    • Headline
    • Content
    • Ordinal
    • Parent
    I hope this helps.
    Sincerely yours,
    Georgi
    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.
  3. Laura
    Laura avatar
    311 posts
    Registered:
    25 Feb 2008
    17 Nov 2010
    Link to this post
    I am trying to do the same with the Expandable List view for FAQs with the question on the left and the answer to display on the right.  I can change the display by altering the layout of template.

    However, to only allow one item to be open at a time, can I add javascript / JQuery to the template do this? And how?

    Thanks,
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    17 Nov 2010
    Link to this post
    Hello Laura,

    You can use show/hide/toggle effects.

    Best wishes,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Laura
    Laura avatar
    311 posts
    Registered:
    25 Feb 2008
    17 Nov 2010
    Link to this post
    and would i remove

    <

     

    telerik:JsFileLink ID="JsFileLink1" EmbeddedFileName="Telerik.Lists.Resources.ExpandableList.js" FileName="" runat="server" />

     

    and replace with the linik to the JQuery js file? 
  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    17 Nov 2010
    Link to this post
    Hello Laura,

    If you are not going to use the default expandable list mode you can remove the script, otherwise you should leave the ExpandableList.js to load on the page.

    Kind regards,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Register for webinar
6 posts, 0 answered