This is a migrated thread and some comments may be shown as answers.

Kendo UI toolbar datasource REACT

1 Answer 190 Views
Toolbar
This is a migrated thread and some comments may be shown as answers.
Kara
Top achievements
Rank 1
Kara asked on 13 Nov 2017, 09:05 PM

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>

)

...

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 15 Nov 2017, 12:11 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Toolbar
Asked by
Kara
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or