Kendo UI toolbar datasource REACT

2 posts, 0 answers
  1. Kara
    Kara avatar
    3 posts
    Member since:
    Sep 2017

    Posted 13 Nov Link to this post

    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>

    )

    ...

  2. Stefan
    Admin
    Stefan avatar
    1394 posts

    Posted 15 Nov Link to this post

    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.
Back to Top