Kendo PanelBar default SELECT/CLICK behavior

7 posts, 0 answers
  1. Rizwan
    Rizwan avatar
    11 posts
    Member since:
    Sep 2015

    Posted 22 Jan Link to this post

    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
  2. Patrick
    Admin
    Patrick avatar
    174 posts

    Posted 22 Jan Link to this post

    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
     
    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. Rizwan
    Rizwan avatar
    11 posts
    Member since:
    Sep 2015

    Posted 22 Jan in reply to Patrick Link to this post

    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?
  5. Rizwan
    Rizwan avatar
    11 posts
    Member since:
    Sep 2015

    Posted 22 Jan in reply to Patrick Link to this post

    Another quick question, how come one can change the default icon showing on ADD NEW RECORD and EDIT/DESTROY buttons on the Kendo Grid?
  6. Patrick
    Admin
    Patrick avatar
    174 posts

    Posted 25 Jan Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Rizwan
    Rizwan avatar
    11 posts
    Member since:
    Sep 2015

    Posted 28 Jan in reply to Patrick Link to this post

    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
  8. Patrick
    Admin
    Patrick avatar
    174 posts

    Posted 28 Jan Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready