DropDownButton in custom Toolbar renders arrow 2 times

[Harald Stapfer]

Hello,

I have added a DropDownButton in my Toolbar like this:

 const renderComplete = () => {

        var dropDownButton = new DropDownButton({items: items, select: handleDropDownButtonSelection});

        if (grid && (grid.dataSource instanceof Array && grid.dataSource.length <= 1)) {

            setCulture("de");

            grid.dataSource = new DataManager({

                adaptor: new RemoteSaveAdaptor,

                json: DataUtil.parse.parseJson(jsonData),

                url: '/api/contacts/handler'

            });

        }

        hideColumns();

        dropDownButton.appendTo("#ddlelement")

    }

    const toolbarOptions = ['Add', 'Search', 'Update', 'Cancel', 'Delete', {template: '<div id="ddldiv"><button id="ddlelement">Ansicht</button></div>'}];

                        <GridComponent key={key} gridLines="Both" id="ContactsGrid" allowResizing={true} height="100%" width="100%" rowSelected={handleSelection} rowDeselected={handleSelection} loadingIndicator={loadingIndicator} infiniteScrollSettings={infiniteScrollSettings} queryCellInfo={tooltip} toolbarClick={toolbarClick} allowMultiSorting={true} actionComplete={reloadAfterChanges} allowSelection={true} allowSorting={true} actionBegin={beginAction} commandClick={commandClick} selectionSettings={settings} className={styles.GridComponent} allowFiltering={true} editSettings={editOptions} toolbar={toolbarOptions} filterSettings={filterOptions} ref={g => grid = g} dataBound={renderComplete} enableInfiniteScrolling={true} pageSettings={pageSettings}>

                            <ColumnsDirective>

                                <ColumnDirective headerText='Aktionen' commands={commands} filter={false} width={110} isFrozen={true} />

                                <ColumnDirective type='checkbox' width={50} />

                                <ColumnDirective visible={setVisibility("Id", false)} field='id' headerText='CAE-DB ID' width={150} isPrimaryKey />

                                <ColumnDirective visible={setVisibility("Geschlecht", true)} field="sex" headerText='Geschlecht' editType='dropdownedit' width="150" edit={{ params: { query: new Query(), dataSource: sexes, fields: { value: 'sex', text: 'sex' } } }} />

                                <ColumnDirective visible={setVisibility("Titel", true)} field='title' headerText='Titel' allowEditing={true} width={125} />

                                <ColumnDirective visible={setVisibility("Name", true)} field='firstname' headerText='Name' validationRules={{ required: true }} allowEditing={true} width={125} />

                                <ColumnDirective visible={setVisibility("Nachname", true)} field='surname' headerText='Nachname' validationRules={{ required: true }} allowEditing={true} width={150} />

                                <ColumnDirective visible={setVisibility("Telefonnummer", true)} field='phone' headerText='Telefonnummer' allowEditing={true} width={175} validationRules={{ regex: /^[+]+[0-9]+\s+[0-9]/gm }} />

                                <ColumnDirective visible={setVisibility("Fax", true)} field='fax' headerText='Fax' allowEditing={true} width={175} />

                                <ColumnDirective visible={setVisibility("Mobiltelefonnummer", true)} field='mobilephone' headerText='Mobiltelefonnummer' allowEditing={true} width={200} />

                                <ColumnDirective visible={setVisibility("Email", true)} field='email' headerText='Email' allowEditing={true} width={200} />

                                <ColumnDirective visible={setVisibility("Geschäftspartner", true)} field='contacts_has_businesspartners.0.businesspartners.name' headerText='Geschäftspartner' allowEditing={false} type='string' width={250} />

                                <ColumnDirective visible={setVisibility("Abteilung", true)} field='department' headerText='Abteilung' allowEditing={true} width={175} />

                                <ColumnDirective visible={setVisibility("Position", true)} field='position' headerText='Position' allowEditing={true} width={175} />

                                <ColumnDirective visible={setVisibility("Kontakt Beschreibung", true)} field='firstcontact' headerText='Kontakt Beschreibung' allowEditing={true} width={200} />

                                <ColumnDirective visible={setVisibility("Bemerkung", true)} field='remark' headerText='Bemerkung' allowEditing={true} width={175} />

                                <ColumnDirective visible={setVisibility("Geburtsdatum", true)} field='birthdate' headerText='Geburtsdatum' editType='DatePickerEdit' type='date' format="dd.MM.yyyy" edit={{ params: { format: 'dd/MM/yyyy', type: 'date' } }} width={175} />

                            </ColumnsDirective>

                            <Inject services={[Freeze, Edit, Toolbar, Filter, Sort, Search, InfiniteScroll, CommandColumn, Resize]} />

                        </GridComponent>

My problem is that the arrow gets rendered 2 times after an action.

The grid has a Key that gets handled with a UseState, after an action is completed the Key gets updated so the Grid renders again. But with this, the DropDownButton gets 2 arrows instead of 1.

This is before an action gets completed:

This is after an action gets completed:

How can I fix this?

[Santhosh Iruthayaraj]

Hi Harald Stapfer,

We apologize for the delayed response.

Regarding your query, we recommend utilizing the React "DropDownButtonComponent" instead of the JavaScript "DropDownButton" within a toolbar template function to achieve the desired functionality. Below is the code snippet and sample for your reference:

[index.js]

 

import { DropDownButtonComponent } from '@syncfusion/ej2-react-splitbuttons';

 

function DataGrid() {

 

  function toolbarDDBtnTemplate() {

    let items = [

      {

        text: 'Cut',

      },

      {

        text: 'Copy',

      },

      {

        text: 'Paste',

      },

    ];

    return (

      <DropDownButtonComponent id="ddlelement" items={items}>

        Ansicht

      </DropDownButtonComponent>

    );

  }

 

  const toolbarOptions = [

    {

      template: toolbarDDBtnTemplate,

    },

    'Search',

  ];

.  .  .  .  .

 

Sample: https://stackblitz.com/edit/react-grid-toolbar-template-v1

React DropDownButtonComponent: https://ej2.syncfusion.com/react/documentation/drop-down-button/getting-started

If you require further assistance or have additional questions, please feel free to contact us.

Regards,

Santhosh I