How To Make an Accordion using Kendo UI based on Form

4 posts, 0 answers
  1. md
    md avatar
    4 posts
    Member since:
    May 2015

    Posted 25 Jan Link to this post

    I want to make just like Accordion which is uploaded and I tried several time to make an accordion just like given image or window using Kendo UI panelbar tool. But it did not work. I need your support to solve this issue by using Kendo UI panelbar.
  2. Nencho
    Admin
    Nencho avatar
    1646 posts

    Posted 27 Jan Link to this post

    Hello,

    Could you please specify what is the exact issue that you are facing? The needed widgets and labels  should be placed within the div element of each PanelBar item, in order to include them under each item.

    I am looking forward to your reply.

    Regards,
    Nencho
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. md
    md avatar
    4 posts
    Member since:
    May 2015

    Posted 27 Jan in reply to Nencho Link to this post

    I need to use PanelBar with Animation effects. In this panelbar, i have to set multiple input box just like given image. I did use panelbar using input box, but it did not work and input box always hidden when i ran the page.

     

    <div id="example">

     <ul id="panelbar">
       <li>Input By Text
           <ul>
               <li>
               <div class="row">
                    <div class="col-sm-12">
             <div class="col-lg-3 col-md-3 col-sm-12 col-xs-6">
                           <div class="control-group">
                               <div class="form-group" id="symbol">
                                   <div class="controls ">
                                       <div class="input-prepend input-group">
                                           <span class="input-group-addon input-sm k-primary">Symbol:</span>
                                                <input id="txtSymbol" type="text" class="k-textbox" placeholder="Enter Symbol"   title="Give a symbol."
                                                />
                                       </div>
                                   </div>
                               </div>
                           </div>
                       </div>
                       
                                                 
                               </div>
                       </div>                   
                             </li>
             <li>Sub Item 2</li>
              <li>Sub Item 3</li>
           </ul>
       </li>
       <li>Input By File
           <ul>
               <li>Sub Item 1</li>
               <li>Sub Item 2</li>
               <li>Sub Item 3</li>
           </ul>
       </li>
    </ul>

    </div>

    <script>
    $(document).ready(function() {
        $("#panelbar").kendoPanelBar({
            expandMode: "single"
        });
    });
    </script>

     

  4. Nencho
    Admin
    Nencho avatar
    1646 posts

    Posted 31 Jan Link to this post

    Hello,

    Indeed such direct nesting in an item is not a valid scenario, because there is no text before the divs that you use as content. The div element is considered as the content for a given item, however, in the code snippet there is no item to attach the content to. In other words, you should have, for example - SubItem 1 and place the divs after it, so that the content of the divs should be rendered as content to that item.

    Please refer to the following dojo example, demonstrating this implementation:

    http://dojo.telerik.com/EroNe/4


    The <li> elements in certain item are considered as child items, while the div elements are considered as placeholders for content. Hence, without a text to specify/initialize a given item, the content cannot be associated with it (which is why the input is not rendered in your example)

    Regards,
    Nencho
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 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