Devextreme-reactive: Custom components inside the Toolbar

[omarwagih]

Is there a straightforward way to get a component inside the toolbar?
I'd like to have an icon button component next to the column visibility icon in the toolbar.

[omarwagih]

Solved using the Plugin component. This example implements a button that toggles the filter row in the header.

import React from 'react';
import PropTypes from 'prop-types';

import {
  Template, TemplatePlaceholder, Plugin, TemplateConnector,
} from '@devexpress/dx-react-core';


import IconButton from 'material-ui/IconButton';
import Tooltip from 'material-ui/Tooltip';
import FilterListIcon from 'material-ui-icons/FilterList';
import ClearIcon from 'material-ui-icons/Clear';



function FilterToggle(props){
  const { toggleFilter } = props;

  return (
    <Plugin name="FilterToggle">
      <Template name="toolbarContent">
        <TemplatePlaceholder />
        <TemplateConnector>
          {({}) => (
            <React.Fragment>
              <Tooltip title='Toggle filter' placement='bottom' enterDelay={300}>
                <IconButton onClick={toggleFilter}>
                  <FilterListIcon />
                </IconButton>
              </Tooltip>

            </React.Fragment>
          )}
        </TemplateConnector>
      </Template>
    </Plugin>
  );
}

[fondberg]

@omarwagih Can you please share the complete example? I tried with the above but I couldn't get the FilterListIcon to show...

[fondberg]

I solved it. <FilterToggle needs to be after the <Toolbar in the jsx decleration.
I vote for having this functionality native to the library. I bet a lot of people want it

[FGCorp]

@fondberg can you share an example of your useage.i try the above code but cant figure out where to use FilterToggle.

[aurigajamesparry]

Any suggestions in order to remove the default flexible div in the default toolbar

[christianjoun]

you can achieve this by creating a plugin "x" that uses the template 'toolbarContent' and omit the

Oddly enough, this plugin will remove the default flexible div and insert myFlexibleDiv.

    <Plugin name="ToolbarPushRight">
      <Template name="toolbarContent">
        <TemplateConnector>
          {({}) => (
            <div id="myFlexibleDiv" style={{ flex: '0 0 0px', marginLeft: 'auto' }}></div>
          )}
        </TemplateConnector>
      </Template>
     </Plugin>

[slava-lu]

This Plugins solution does Not place a " ..component next to the column visibility icon in the toolbar." It replaces the column visibility. How can I have both myComponent and ColumnChooser inside the toolbar?

[ushkal]

@slava-lu I can't reproduce the issue on my side. Would you please modify this sample to reproduce it?

[slava-lu]

@ushkal After playing with your sandbox I figured out that the problem was in react-i18next. After wrapping my custom component into translate(), it for some weird reason disappears from the Toolbar.
It would be cool if you could have a look at this compatibility issue since react-i18next is a de factor standard for translation now and I would like to keep using it.
I can help you to build a demo if you want.

[MaximKudriavtsev]

@yotamberk

To render custom markup inside the left side of the Toolbar, you should create a custom plugin.
 
See the example.

[lock[bot]]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests.