It's possible to generate toolbar item based on array of object as below sample? I try but I hit v-for & v-if not allowed to use together.
[
{
id: 0,
type: "buttonGroup",
text: "group1",
icon: "",
enabled: "true",
togglable: "false",
overflow: "auto",
items: [
{
text: "G1button1",
icon: "",
title: "button1",
enabled: "true",
togglable: "true",
},
{
text: "G1button2",
icon: "",
title: "button2",
enabled: "true",
togglable: "true",
},
],
},
{
id: 1,
type: "splitButton",
text: "splitButton1",
icon: "",
enabled: "true",
togglable: "false",
overflow: "auto",
items: [
{
text: "Insert above",
icon: "insert-up",
title: "Insert above",
enabled: "true",
togglable: "true",
},
{
text: "Insert between",
icon: "insert-middle",
title: "Insert between",
enabled: "true",
togglable: "true",
},
{
text: "Insert below",
icon: "insert-down",
title: "Insert below",
enabled: "true",
togglable: "true",
},
],
},
{
id: 2,
type: "button",
text: "Button1",
icon: "",
enabled: "true",
togglable: "true",
overflow: "auto",
items: [],
},
{
id: 3,
type: "separator",
text: "",
icon: "",
enabled: "true",
togglable: "false",
overflow: "auto",
items: [],
},
{
id: 4,
type: "button",
text: "Button2",
icon: "",
enabled: "false",
togglable: "true",
overflow: "always",
items: [],
},
]
1 Answer, 1 is accepted
0
Hi WH,
The targeted functionality can be achieved using the Kendo UI for Vue Native ToolBar component.
Here is a StackBlitz example demonstrating how we can build a ToolBar from an array of data.
Check the linked example and let me know if you have questions about the suggested implementation.
Regards,
Petar
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.