Panel Bar How to Structure the Item to horizontal

[Sio]

https://demos.telerik.com/kendo-ui/html5-diagram-sample-app

i wanna to create something that like his page, the panel bar with horizontal item.

[Ivan Danchev]

Hello Sio,

See the following stackblitz example which demonstrates an approach you can consider using. The PanelBar has a template configured:

template: "# if (item.text != 'Root1' && item.text != 'Root2') { # <span class='shapeItem' data-shape='{'path':'M 60,0 L120,44 L97,114 L23,114 L0,44 z'}<span>#: item.text #</span> # } else { # <span>#: item.text #</span> # } #",

and the elements in the template can be further customized through CSS:

#panelbar {
  width: 300px;
}

#panelbar .shapeItem {
  display: inline-block;
}

#panelbar span {
  text-align: center;
  display: block;
}

#panelbar  .k-panel .k-item {
  display: inline-block;
  width: 50%;
}

.shapeItem {
  margin-top: 10px;
  display: inline-block;
  width: 60px;
  height: 60px;
  background-image: url(https://demos.telerik.com/kendo-ui/content/integration/diagram/images/diagram-toolbox.png);
  background-size: auto 100%;
}

I hope the example is helpful and points you in the right direction with regard to implementing the desired PanelBar appearance.

Regards,
Ivan Danchev
Progress Telerik