This is a migrated thread and some comments may be shown as answers.

toggle expand/collapse

16 Answers 2436 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
David Ocasio
Top achievements
Rank 2
Iron
Veteran
Iron
David Ocasio asked on 22 Jan 2014, 09:16 PM
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

16 Answers, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 24 Jan 2014, 10:13 AM
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!
0
David Ocasio
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 31 Jan 2014, 04:18 PM
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


0
Alexander Popov
Telerik team
answered on 04 Feb 2014, 10:58 AM
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!
0
David Ocasio
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 07 Apr 2014, 08:13 PM
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
0
Alexander Popov
Telerik team
answered on 09 Apr 2014, 11:40 AM
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!
 
0
David Ocasio
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 09 Apr 2014, 12:33 PM
cool
almost there

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

thanks
dco
0
Alexander Popov
Telerik team
answered on 11 Apr 2014, 07:38 AM
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!
 
0
Matthew
Top achievements
Rank 1
answered on 04 Nov 2016, 06:59 PM

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

    
}

 

0
Johnson
Top achievements
Rank 1
answered on 22 Jan 2018, 11:17 AM

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

0
Neli
Telerik team
answered on 23 Jan 2018, 04:29 PM
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.
0
Johnson
Top achievements
Rank 1
answered on 24 Jan 2018, 09:35 AM

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

0
Johnson
Top achievements
Rank 1
answered on 24 Jan 2018, 11:38 AM

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.

0
Ivan Danchev
Telerik team
answered on 26 Jan 2018, 09:07 AM
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.
0
Johnson
Top achievements
Rank 1
answered on 27 Jan 2018, 07:47 AM

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

0
Neli
Telerik team
answered on 30 Jan 2018, 05:29 PM
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.
0
Neli
Telerik team
answered on 01 Feb 2018, 08:40 AM
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.
Tags
PanelBar
Asked by
David Ocasio
Top achievements
Rank 2
Iron
Veteran
Iron
Answers by
Alexander Popov
Telerik team
David Ocasio
Top achievements
Rank 2
Iron
Veteran
Iron
Matthew
Top achievements
Rank 1
Johnson
Top achievements
Rank 1
Neli
Telerik team
Ivan Danchev
Telerik team
Share this question
or