CODEWITHSUNDEEP
knockout.jskendo-panelbar
confused
confused

Reputation: 199

Knockoutjs kendoPanelBar not working when looping through a list

Does anyone know what's happening with my code wherein I can't seem to get kendoPanelBar working with a code like this:

<ul data-bind="kendoPanelBar:{}">
  <!--ko foreach: Students -->
  <li>James
     <ul>
       <li data-bind="text: Age">Age: 25</li>
       <li data-bind="text: Score">Score: 9/10</li>
     </ul>
  </li>
  <!-- /ko -->
</ul>

but, if not inside the foreach loop the panelbar is working fine.

<ul data-bind="kendoPanelBar:{}">
  <li>James
     <ul>
       <li>Age: 25</li>
       <li>Score: 9/10</li>
     </ul>
  </li>
</ul>

Hopefully you can help me. Thanks.

Upvotes: 1

Views: 146

Answers (2)

confused
confused

Reputation: 199

@super cool sorry for late response

By the way thanks for your effort. Anyway I was able to make it work by doing like this:

  <div data-bind="with: $root.Room">
  <ul data-bind="kendoPanelBar:{}">
  <!--ko foreach: Students -->
   <li>James
      <ul>
        <li data-bind="text: Age">Age: 25</li>
        <li data-bind="text: Score">Score: 9/10</li>
      </ul>
   </li>
   <!-- /ko -->
 </ul>
 </div>

wherein $root.Room is a field in my MainVM

Upvotes: 1

super cool
super cool

Reputation: 6045

you are not properly closing the container-less foreach at the end .

view: 

<ul data-bind="kendoPanelBar:{}">
  <!--ko foreach: Students -->
  <li>James
     <ul>
       <li data-bind="text: Age">Age: 25</li>
       <li data-bind="text: Score">Score: 9/10</li>
     </ul>
  </li>
  <!--/ko--> /*correction here*/
</ul>

Straight from Docs :

The <!-- ko --> and <!-- /ko --> comments act as start/end markers, defining a “virtual element” that contains the markup inside. Knockout understands this virtual element syntax and binds as if you had a real container element.

Upvotes: 2

Related Questions