More in this section

Forums / Developing with Sitefinity / expandable list have to expand onload

expandable list have to expand onload

10 posts, 0 answered
  1. Venkatesh Alagu
    Venkatesh Alagu avatar
    42 posts
    Registered:
    22 Nov 2009
    30 Nov 2009
    Link to this post
    Admin,

    i m new to this sitefinity. its a good user-friendly software. i m designing a layout for my client with sitefinity 3.5.  i used expandable list with 3 categories. but all 3 categories  are collapsed onload. but i need first category in expandable form and remaining 2 categories in collapse form. i checked all ur forums. but i didnt find any solutions for this issue. can u please reply me as soon as possible.

    Thanks for ur support.

    Regards,

    Venkatesh

  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    30 Nov 2009
    Link to this post
    Hi venkatesh alagu,

    Could you tell us which control you use? There are expandable list modes for EventsView and ListsDisplay controls.

    Best wishes,
    Ivan Dimitrov
    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. Venkatesh Alagu
    Venkatesh Alagu avatar
    42 posts
    Registered:
    22 Nov 2009
    30 Nov 2009
    Link to this post
    Admin,

    thanks for ur reply. i used listdisplay.

    is it possible to use arrow showing ">" on collapse state and "down >" to show its expandable?

    thanks for ur support.

    Regards,

    Venkatesh
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    30 Nov 2009
    Link to this post
    Hello venkatesh alagu,

    You can  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>

    More information at jQuery.

    This will expand only the first element. To add arrows you need to use an image and modify the layout of the template.

    Sincerely yours,
    Ivan Dimitrov
    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.
  5. Venkatesh Alagu
    Venkatesh Alagu avatar
    42 posts
    Registered:
    22 Nov 2009
    30 Nov 2009
    Link to this post
    thanks a lot for ur reply.

    i dont y i dont have "ExpandableListview.ascx" file in my sitefinity folder. my PM only downloaded and installed sitefinity. is there any way to download or add this "ExpandableListview.ascx" file in the sitefinity folder??

    sorry for troubling you  again. only we tested and project is success. we need to purchase sitefinity cms for our client to implement.

    thanks for ur support.

    Regards,

    Venkatesh

  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    30 Nov 2009
    Link to this post
    Hi venkatesh alagu,

    Please take a look at the following links - How to map a view to an external template, in Sitefinity 3.6 or later?, Mapping ContentViewDesigners and working with Presentation Modes.

    Kind regards,
    Ivan Dimitrov
    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.
  7. Venkatesh Alagu
    Venkatesh Alagu avatar
    42 posts
    Registered:
    22 Nov 2009
    01 Dec 2009
    Link to this post
    hi thanks for ur reply.

    as u told i downloaded zip archive from myclient.net. and added ur javascript code in the lists/ExpandableListView.ascx file. but nothing happened.

    i try edit the code in ExpandableListView.ascx. but it doesnt any changed any thing. whether i need to do anything further in the code??

    so, where i need to add this code :

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

    to change arrow on expandable and collapse what i need to do?

    once again thanks bro.
  8. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    01 Dec 2009
    Link to this post
    Hello venkatesh alagu,

    1. Make sure that the control uses the template you have downloaded.
    2. Make sure that you have reference to jQuery Library.

    to change arrow on expandable and collapse what i need to do?

    In ExpandableListView template there is anchor control with id ="headline". You need to subscribe for onclick event and change the image.

    sample:

    $("#image1").bind("click", function() {
          $("#image1").attr("src","first.jpg");
    });


    All the best,
    Ivan Dimitrov
    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.
  9. Venkatesh Alagu
    Venkatesh Alagu avatar
    42 posts
    Registered:
    22 Nov 2009
    07 Dec 2009
    Link to this post
    hi,

    thanks for ur reply.

    1. i fix the problem of onload first list content in the expandable list open. but when i click second list , all list are opened and it makes page height larger. for me  first list have to close. what i need to do for this issue??

    2. u gave this code :
    $("#image1").bind("click", function() {
          $("#image1").attr("src","first.jpg");
    });
    whether i need alter css code or where i need to add this code?? whether i need to add any extra code in any other files?

    i need to use png or gif image for ">" and  "v".  this image wil be appear on close ">" .  this "v" for opened list.

    hope this is my last issue in this project. we already bought sitefinity software. once testing successful we need to implement this in the main site.

    thanks for ur kind help.
  10. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    07 Dec 2009
    Link to this post
    Hello venkatesh alagu,

    Below is a sample code that illustrates how to switch an image on click event using jQuery

    $(document).ready(function() {
        $('img#nav1').click(function() {
            $(this).attr("src", "App_Master/Images/open.gif");
        });
    });

    You need to get the id of the html element and when it is clicked change the image. You have to do the same for collapse the list item. You can add the code to ExpandableList external template or create a script reference using JsFileLink control. More information at  How to use jQuery and other JavaScript Libraries in Sitefinity

    Greetings,
    Ivan Dimitrov
    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.
Register for webinar
10 posts, 0 answered