toggle expand/collapse

[David Ocasio]

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

[Alexander Popov]

Hi David,

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

Regards,
Alexander Popov
Telerik

[David Ocasio]

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

[Alexander Popov]

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

[David Ocasio]

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

[Alexander Popov]

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

 

 

[David Ocasio]

cool
almost there

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

thanks
dco

[Alexander Popov]

Hi David,

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

Regards,
Alexander Popov
Telerik

 

 

[Matthew]

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");
    }

    
}

 

[Johnson]

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...

[Neli]

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

[Johnson]

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..

[Johnson]

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.

[Ivan Danchev]

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

[Johnson]

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..

[Neli]

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

[Neli]

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