toggle expand/collapse

17 posts, 0 answers
  1. David Ocasio
    David Ocasio avatar
    157 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
    1437 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. David Ocasio
    David Ocasio avatar
    157 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


  4. Alexander Popov
    Admin
    Alexander Popov avatar
    1437 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!
  5. David Ocasio
    David Ocasio avatar
    157 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
  6. Alexander Popov
    Admin
    Alexander Popov avatar
    1437 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!
     
  7. David Ocasio
    David Ocasio avatar
    157 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
  8. Alexander Popov
    Admin
    Alexander Popov avatar
    1437 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!
     
  9. Matthew
    Matthew avatar
    2 posts
    Member since:
    May 2016

    Posted 04 Nov 2016 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");
        }

        
    }

     

  10. Johnson
    Johnson avatar
    14 posts
    Member since:
    Jun 2011

    Posted 22 Jan in reply to Alexander Popov Link to this post

    Hi Alex,

     The panel bar expanding is not working when I migrated to the latest version (2017.2.621.545).

      here is the Jquery code to expand which I am using ,it was working perfectly 

       var panelBar = $("#pnlbar").data("kendoPanelBar");

       panelBar.select(panelBar.element.children("li").eq(2));
       panelBar._selected[0].style.display = 'block';
       var item = panelBar.select();
        panelBar.expand(item);

    please advice me the solution asap to solve the issue  ..

    Thanks...

  11. Neli
    Admin
    Neli avatar
    139 posts

    Posted 23 Jan Link to this post

    Hello Johnson,

    I used the provided code to prepare a Dojo example. I have tested with both versions - 2017.2.621 and our latest version 2018.1.117. As you can see in the linked screencast, the PanelBar is correctly expanded with both versions. 

    Could you please modify the example in order to replicate the issue the way it is at your end? It will be helpful if you can give us more details regarding the steps required to reproduce the behavior. This will help us to run the sample locally and investigate the issue further.

    Regards,
    Neli
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  12. Johnson
    Johnson avatar
    14 posts
    Member since:
    Jun 2011

    Posted 24 Jan in reply to Neli Link to this post

    Hi Neli,

    Thank you very much for your reply, unfortunately still its not working as well, I am attaching the sample project files which I recreated the scenario.. could you please verify the files, am unable attach the complete source due to size,.. 

    Thank you..

  13. Johnson
    Johnson avatar
    14 posts
    Member since:
    Jun 2011

    Posted 24 Jan in reply to Neli Link to this post

    Hi Neli,

    One thing I noticed ,actually the panel bar expanding is working ,but am calling some partial views on panel bar "select" event.

    With old version , the panel bar "Select" event was triggering when I called  the below method, now its not

    panelBar.select(panelBar.element.children("li").eq(2));
       panelBar._selected[0].style.display = 'block';
       var item = panelBar.select();
        panelBar.expand(item);

     

    Thanks.

  14. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1437 posts

    Posted 26 Jan Link to this post

    Hello Johnson,

    In older versions the select() method triggered the PanelBar's select event. After R1 2017 SP1 the PanelBar's behavior was made consistent with that of the TreeView and now only user selection fires the event (as mentioned in the select event's documentation), whereas programmatic selection does not. Thus instead of executing logic related to item selection in the select event handler, we would recommend executing it after the select() method is called.

    Regards,
    Ivan Danchev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  15. Johnson
    Johnson avatar
    14 posts
    Member since:
    Jun 2011

    Posted 27 Jan in reply to Ivan Danchev Link to this post

    Hello Ivan,

    Thank you for your clarification , its not a good practice modifying the existing functionality for the Telerik customers, they are upgrading the versions not for changing existing working code which they already written , what we are looking for  from the latest version is the additional facilities ..  now its seems we need to spend lot of time to identify and solve the issues due to version upgrade which was working perfectly ..

    Regards..

  16. Neli
    Admin
    Neli avatar
    139 posts

    Posted 30 Jan Link to this post

    Hello Johnson,

    I will need more time to investigate the issue and will come back to you as soon as possible.

    Regards,
    Neli
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  17. Neli
    Admin
    Neli avatar
    139 posts

    Posted 01 Feb Link to this post

    Hello Johnson,

    Thank you very much for your patience. 

    I have discussed the issue with the developers in out team. It is considered as a bad practice if an event is triggered when a method is called. In some scenarios this might lead to recursion. We consider this as a bug. So the purpose of the change in the PanelBar select() method behavior was to fix the bug. We always give our best to keep the good practices and improve our code. 

    As previously suggested in this thread, you could execute the needed logic after the select() method is called. Also, you could trigger the select event manually. Example is below:
    var panelbar = $("#id").data("kendoPanelBar");
    panelbar.trigger("select");

    Regards,
    Neli
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top