Kendo UI toolbar datasource REACT

[Kara]

Hi, I couldn't find a Kendo UI for React forum so I thought I might try to post this here. I am trying to create a toolbar with multiselect dropdowns that have a remote datasource. The intent is to give options for custom filtering for a grid. I tried to go off the examples available but there are no dataSource examples for React for a dropdown/multiselect template in a toolbar. I've tried doing a basic local dataSource example to get started and even that isn't working. Can someone help? 

Here is an excerpt from my code of how I define and render the toolbar. The end goal is to replace the dataSource with a remote dataSource.

...

const toolbarOptions = {

items: [

    { template: "<label for='dropdown'>Materials:</label>"},
    {
          template: "<select id='material-dropdown' style='width: 150px;' />",
          dataSource: [{ item: "Item 1", value: 1 }, { item: "Item 2", value: 2 }],
          dataTextField: "item",
          dataValueField: "value",
          overflow: "never"
    }

 ]

}

 

return(

   <div className="toolbar">

         <ToolBar {...toolbarOptions}/>

   </div>

)

...

[Stefan]

Hello, Kara,

This Kendo UI forum currently can be used for a React and Vue questions as well.

The Kendo UI ToolBar currently does not support the provided configurations in the code snippet. Please check its available options:

https://docs.telerik.com/kendo-ui/api/javascript/ui/toolbar

In this scenario, I can suggest saving the data from the remote service in a variable and then pass that variable to the menuButtons which will create a DropDownList:

http://dojo.telerik.com/iGILu

Also, the native React ToolBar should support placing another component(in this case MultiSelect) inside its template, but the release date for the native ToolBar is not confirmed.

Regards,
Stefan
Progress Telerik