Drawer MVVM each item having own content

[Jaanus]

I am following this example:

https://demos.telerik.com/kendo-ui/drawer/mvvm

Currently, each drawer item has same content.

  <div style="height: 200px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error accusantium odit, optio nulla maiores quo neque fugit debitis dignissimos incidunt maxime? Eum voluptatem blanditiis voluptatum praesentium dolorem, dolore placeat debitis quod delectus laborum assumenda cupiditate quaerat quam fugiat deleniti suscipit necessitatibus.</div>

 

How do I specify a different content for each tab?

[Nikolay]

Hello Jaanus,

You need to hide and show the respective items from the Drawe template in the itemClick event handler:

<div id="drawer"
             data-role="drawer"
             data-width="150"
             data-mode="push"
             data-bind="events: { itemClick: onItemClick }"
             data-template="<ul><li data-role='drawer-item'><span class='k-item-text'>First Item</span></li><li data-role='drawer-separator'></li><li data-role='drawer-item'><span class='k-item-text'>Second Item</span></li><li data-role='drawer-item' class='k-state-selected'><span class='k-item-text'>Third Item</span></li><li data-role='drawer-separator'></li><li data-role='drawer-item'><span class='k-item-text'>Last Item</span></li></ul>">
          <div style="height: 200px;">Third item</div>
        </div>
...
      <script>
          onItemClick: function(e) {
            var text = e.item.find(".k-item-text").text();
            e.sender.contentElement.html(text);
          }
        });
      </script>

Here is a Dojo demo demonstrating this:

https://dojo.telerik.com/AyalIQOT

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik