toggle expand/collapse

9 posts, 0 answers
  1. David Ocasio
    David Ocasio avatar
    147 posts
    Member since:
    Nov 2009

    Posted 22 Jan 2014 Link to this post

    I would like a panelbar item to collapse if it is already expanded.
    I would also like it to be deselected.

    So in essence it would toggle open and closed

    Is there a simple way to do that or what approach should I use.

    thanks
    dco
  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 24 Jan 2014 Link to this post

    Hi David,

    This could be done using the PanelBar's expand and collapse methods.

    Regards,
    Alexander Popov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. David Ocasio
    David Ocasio avatar
    147 posts
    Member since:
    Nov 2009

    Posted 31 Jan 2014 in reply to Alexander Popov Link to this post

    Could you elaborate.

    Yes I am aware of the methods expand and collapse

    Rather I am asking how to reference/determine the selected item in the select event.
    I want to collapse/Deselect the item if the panel is expanded/selected.

    My panel bars are made dynamically since the panelbar does not play well with  the datasource.

    I do not see an selected prop on the panelbar object nor do I see an isselected method on the param passed to the
    selected event.

    any help would be appreciated


  5. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 04 Feb 2014 Link to this post

    Hello again David,

    Basically you can use the PanelBar's select method to determine which is the currently selected item. Additionally, expanded items have a k-state-active class, which could be used to collapse all expanded items. For example: 
    $("#panelbar").data("kendoPanelBar").collapse($("li.k-state-active"));
    You can find similar examples in the PanelBar's API demo.

    Regards,
    Alexander Popov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. David Ocasio
    David Ocasio avatar
    147 posts
    Member since:
    Nov 2009

    Posted 07 Apr 2014 in reply to Alexander Popov Link to this post

    Sorry for the late response ..

    The code you quoted works fine in collapsing the element.
    Thanks

    But it does not deselect the item ...

    I tried using .select(null) but that does not work.
    How do I remove the selection as thought the person never clicked on that item

    thanks
    dco
  7. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 09 Apr 2014 Link to this post

    Hi David,

    This could be achieved by removing the k-state-selected class from the item. For example: 
    panelbar.select().find("span.k-state-selected").removeClass("k-state-selected")

    Regards,
    Alexander Popov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. David Ocasio
    David Ocasio avatar
    147 posts
    Member since:
    Nov 2009

    Posted 09 Apr 2014 in reply to Alexander Popov Link to this post

    cool
    almost there

    Just one more thing
    the border of the panel bar item is still highlighted after the selection is removed

    thanks
    dco
  9. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 11 Apr 2014 Link to this post

    Hi David,

    I would suggest removing the k-state-focused class as well.

    Regards,
    Alexander Popov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  10. Matthew
    Matthew avatar
    2 posts
    Member since:
    May 2016

    Posted 04 Nov Link to this post

    This would be for mvc/razor

    .ToolBar(toolBar => toolBar.Template("<a class='k-button k-button-icontext' onclick='customCommand()' href='#'></span><div id='toggleGroups'>EXPAND</div></a>"))

    function customCommand() {

        var label = document.getElementById("toggleGroups").childNodes[0].data;

        if (label === "COLLAPSE") {
            $("#PartSearchResultGrid .k-i-expand").trigger("click");
            $("#toggleGroups").html("EXPAND");
        }

        if (label === "EXPAND") {
            $("#PartSearchResultGrid .k-i-collapse").trigger("click");
            $("#toggleGroups").html("COLLAPSE");
        }

        
    }

     

Back to Top
Kendo UI is VS 2017 Ready