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

Forums / Designing with Sitefinity / styling lists using custom user control pages

styling lists using custom user control pages

9 posts, 0 answered
  1. amar koli
    amar koli avatar
    19 posts
    Registered:
    19 Feb 2010
    11 Mar 2010
    Link to this post
    hi,
    i have few list items to be displayed, for one i have used expandable list control and provided it a custom template, i wanted to ask is weather by default can i show the first item expanded.

    another list type i was to customize to look like the image attached - listproducts.gif. how i can built this kind of a list. on the left are the header, when clicked or mousehover, the description is shown on right side.

    another list type is for the page list which should look like - listlinks.gif. where should i specify the page which is opened on click of the link, and how can i give different icons to different link.

    another is the login box, how i can style is to look like - login.gif. also there are 2 login box, the other is displayed on clicked on the other option in the header Investor/Distributor.

    lastly is the Equity/Debt box - equity.gif, how should i built this kind of control, what needs to be used.

    Can you please help me on these queries.

  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    11 Mar 2010
    Link to this post
    Hello amar koli,

    i have few list items to be displayed, for one i have used expandable list control and provided it a custom template, i wanted to ask is weather by default can i show the first item expanded.

    Use JQuery to achieve desired functionality. You can map the external template for ListsDisplay - ExpandableListview.ascx and add the following logic to it

    <script type="text/javascript">
     
        $(document).ready(function() {
            $(".sf_expandableList:first").find(".sf_listItemBody").show();
        });
    </script>


    another list type i was to customize to look like the image attached - listproducts.gif. how i can built this kind of a list. on the left are the header, when clicked or mousehover, the description is shown on right side.

    Please take a look at TabStrip / Vertical

    another list type is for the page list which should look like - listlinks.gif. where should i specify the page which is opened on click of the link, and how can i give different icons to different link.

    You could create a custom control where you have several properties -  properties for setting the links through selector and properties for setting different image to each url.  If you are going to use datasource you can bind it to a repeater. So each item should have title, link and image. In the Item template of the repeater you should have an Image control, and HyperLink control where you set the Text of the Item and NavigateUrl property.

    another is the login box, how i can style is to look like - login.gif. also there are 2 login box, the other is displayed on clicked on the other option in the header Investor/Distributor.

    You can use RadTabStrip control with MultiPage - demo., Tabbed control, TabStrip / Dynamic RadPageView

    lastly is the Equity/Debt box - equity.gif, how should i built this kind of control, what needs to be used.


    The case is the same as with the login box.

    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.
  3. amar koli
    amar koli avatar
    19 posts
    Registered:
    19 Feb 2010
    11 Mar 2010
    Link to this post
    thanks for the reply, i will try out the controls told.

    can you tell me please, how i can i add the link to the jquery script, when i add that script its gives me error as object doesn't support this property or method, its probably because of not finding the jquery function, that is what i think, please correct me and help me.

  4. amar koli
    amar koli avatar
    19 posts
    Registered:
    19 Feb 2010
    11 Mar 2010
    Link to this post
    got that jquery working by adding this
    <%@ Register Assembly="Telerik.Cms.Web.UI" Namespace="Telerik.Cms.Web.UI" TagPrefix="sf" %>
    and then this
    <sf:JsFileLink id="jsLink" runat="server" ScriptType="jQuery"></sf:JsFileLink>
    inside the body and before the form tag.

    but when i add this

    <script type="text/javascript">
     
        $(document).ready(function() {
            $(".sf_expandableList:first").find(".sf_listItemBody").show();
        });
    </script>

    this expands all the list, and also the css is now applied for the expanded header.
    please can you help me on this.
  5. amar koli
    amar koli avatar
    19 posts
    Registered:
    19 Feb 2010
    11 Mar 2010
    Link to this post
    I checked the other examples you gave, but please can you spoon-feed me on how to use it in sitefinity. i have created a template for home, and using that i have created a index page. where and how should i add those controls in sitefinity.
    please can you explain it in details, i am very new to sitefinity and also .net coding.
  6. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    11 Mar 2010
    Link to this post
    Hello amar koli,

    The following resources explain how to develop controls for Sitefinity and add them to the system:

    http://www.sitefinitywatch.com/blog/09-01-21/Creating_a_Basic_Sitefinity_User_Control.aspx

    http://www.sitefinity.com/support/webinars/creating-highly-usable-distributable-sitefinity-controls.aspx

    Regards,
    Radoslav Georgiev
    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.
  7. amar koli
    amar koli avatar
    19 posts
    Registered:
    19 Feb 2010
    12 Mar 2010
    Link to this post
    hi,

    any help on my question of expanding the 1st list item by default. the javascript you gave expanded all the list item and also did not apply the expanded header css.

    please help,

    i also have few question on how can i insert generic content in a radtab/multipage, can i select the generic content id from the properties of the usercontrol i make. can you guide me to a simple example. i saw the genericContentWrapper example, but i something like a radTab using the generic content, and i want to able to select the generic content id from properties of the user control. any help on this.
    i had also looked into this
    http://www.sitefinity.com/support/forums/sitefinity-3-x/developing-with-sitefinity/tabstrip-multipage-vs-lists.aspx

    one more thing to add to it, can i used vb.net as the language to develop my page/code behind, our project might just be developed in vb.net and not c#.

    thanks
  8. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    12 Mar 2010
    Link to this post
    Hello amar koli,

    1. You need to use  ExpandableList mdoe and map ~/Sitefinity/ControlTemplates/Lists/ExpandableListView.ascx template from ExpandableListTemplatePath property of the control. Using jQuery you can get the first list item and expand it as described in the previous posts to you. Please refer the the jQuery API as well. The key notes are highlighted.

    <script type="text/javascript">
      
        $(document).ready(function() {
            $(".sf_expandableList:first").find(".sf_listItemBody").show();
        });
    </script>
     
    -<asp:Repeater ID="lists" runat="server">
        <ItemTemplate>
            <h2 class="sf_listTitle"><asp:Literal ID="listTitle" runat="server"></asp:Literal></h2>
             
            <p class="sf_controlListItems">
                <a id="expandAll" runat="server">
                    <asp:Literal ID="Literal1" runat="server" Text="<%$Resources:ExpandAll %>"></asp:Literal>
                </a>
                <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">
                    <ItemTemplate>
                        <li>
                            <h3 id="headlineContainer" runat="server" class="sf_listItemTitle">
                                <a id="headline" runat="server" title="<%$Resources:ClickToExpand %>"></a>
                            </h3>
                            <div id="contentContainer" runat="server" class="sf_listItemBody" style="display:none;">
                                <asp:Literal ID="content" runat="server"></asp:Literal>
                            </div>
                        </li>
                    </ItemTemplate>
                </asp:Repeater>
            </ul>
        </ItemTemplate>
    </asp:Repeater>

    This code expands the body of the first list item in our list.

    2. You can add GenericContent in one of the RadTabStrip tabs. You need to create a custom control with a public property that will be associated with the GenericContent/ content item ID.

    3.You can use vb instead of C#.

    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.
  9. amar koli
    amar koli avatar
    19 posts
    Registered:
    19 Feb 2010
    12 Mar 2010
    Link to this post
    hi,

    As i said previously that its expanding all the elements, and also the expandable header css is also not applied.

    i am using the same template which you have mentioned.

    so to just make it work, i am calling the javascript which is rendered on the 1st element, this is not correct i know, but for time being using it.

    can you also check my other question in the development section.

    thanks for the other answers.
Register for webinar
9 posts, 0 answered