Kendo PanelBar default SELECT/CLICK behavior

[Rizwan]

Hi
I have a certain requirement to work with Kendo Panelbar.
I have a panelbar with around 7 items in it and the default behavior of panelbar is to click on panel to open the section. I want to block this functionality and would like to open panels with the click of my own PREV/NEXT buttons inside each panel. It is like a wizard and user should follow NEXT button clicks to keep on going to next panels instead of clicking on any panel to open it. SO I would like to restrict user to just get to the next panel following a wizard sequence.
Any idea how to do it because I dont find any way to block the user from opening up a panel by clicking on it.
I'd appreciate your help
Thanks
Rizwan

[Patrick | Technical Support Engineer, Senior]

Hello Rizwan,

Here are a few things to help you get started:

1.  If you would like to stop the functionality of expanding or collapsing, you can use e.preventDefault() when the expand and collapse events are fired.  Check out this sample illustrating the behavior of e.preventDefault().

2.  One approach you can try to is use traversing jQuery techniques, and Kendo Classes.  Here is a sample illustrating that scenario.

I would like to make clear that the Kendo PanelBar was not intended to be a used as a wizard, and that in order to achieve your goal, you will need to use custom programming using JQuery.  Because jQuery is unrelated to Kendo, this falls outside the scope of Telerik support.

If you have any questions related to the Kendo Widgets, please reply.  

Regards,
Patrick
Telerik

 

 

[Rizwan]

Appreciate your prompt reply.
Your second solution worked perfectly for me, as far as WIZARD is concerned, its not actually that wizard which we know about rather by wizard I mean user should follow a sequence of screens by clicking on next button and input sequential data as per the business rules….Just restricting user to follow our predefined sequence is actually our WIZARD here.

I appreciate your solution again.
By the way how long these solution links would keep on working?

[Rizwan]

Another quick question, how come one can change the default icon showing on ADD NEW RECORD and EDIT/DESTROY buttons on the Kendo Grid?

[Patrick | Technical Support Engineer, Senior]

Hi Rizwan,

Glad the Kendo PanelBar sample helped you!  That example will most likely remain, but please copy it into your own dojo or into a text file for your own records.

As for changing the icons in the Kendo Grid, take a look at this dojo.  There are a few ways you can go about changing the icons:

1.  Using our custom icons.  I used the following code "k-i-note" for the delete button:

columns: [
...
 { command: ["edit",  { name: "destroy", imageClass: "k-i-note", iconClass: "k-icon" }],
...

For a list of our icons, check out this demo.

2.  Using a custom 16X16px icon using CSS.  Here's the styling I used for Edit and Add:

.k-grid-edit .k-icon:before
 {
     content: url("Your URL here...);
 }


 .k-grid-add .k-icon:before
{
    content: url("Your URL here...");
}

Also, I would kindly ask you to open a separate thread with the appropriate Product (Grid for Kendo UI) and to avoid mixing different subjects in the same thread in future. This will also give you the opportunity to track different cases easily in your account. Thank you for your understanding.

Hope this helps steer you in the right direction.

Regards,
Patrick
Telerik

 

 

[Rizwan]

Thanks for the reply and it worked perfectly fine.
Appreciate your reply.
Once last thing I would like to ask you here on how to select top panel to be open once page loads and all other panels should not be clickable, only my NEXT/PREV button should be able to do it which it is doing now with your help and piece of code you sent me.I just want now to have very first panel selected and open whereas keeping all below panels unselectedable or clickable.
Thanks
Rizwan

[Patrick | Technical Support Engineer, Senior]

Hi Rizwan,

I used the "k-state-active"  class to show the opened panel.

<li class="k-state-active">Item 1
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
          <li><input type="button" class="nextItem" value="next" /></li>
        </ul>
    </li>

To make the panel disabled, I used the disable attribute as shown here:

<li disabled="disabled">Item 2
       <ul>
           <li>Sub Item 1</li>
           <li>Sub Item 2</li>
           <li>Sub Item 3</li>
           <li><input type="button" value="previous" class="previousItem" /> <input type="button" value="next" class="nextItem"/></li>
       </ul>
   </li>

I limited the amount of panels that could be opened to only one panel by using expandMode: "single":

$("#panelbar").kendoPanelBar({
        expandMode: "single"
    });

Hopefully, this helps clear things.

Regards,
Patrick
Telerik

 

 

[Sneha]

How to do this,when we click to menu option in panel bar, submenu should be open and at the same time menu option will disappear.  

[Ivan Danchev]

Hello Sheha,

The PanelBar does not have a configuration option or an API method for hiding its items, but they can be hidden with jQuery. Here's a sample dojo, which demonstrates how root items can be hidden (after being expanded) in the widget's expand event handler. The hidden item's child items remain visible. Note however that if you hide an expanded root item you will not be able to collapse its sub items manually since the element that by default triggers expand/collapse on click would not be visible. To remedy this "single" expandMode is set to the PanelBar in the linked example, which causes an expanded item to be collapsed automatically when another item is expanded. This way only the currently expanded root item is hidden and it is shown again when it auto-collapses.

Regards,
Ivan Danchev
Progress Telerik