DropDownButton not rendered correctly in Toolbar

[Laurin S]

Hi,

I want to show a DropDownButton in a toolbar, however the button does not appear correctly, namely the text and the icon of the button are not visible.

I've attached a demo code that shows the problem.

Thanks.

Attachment: reactc816uj_55f05845.zip

[Praveenkumar Narasimhanaidu]

Hi Laurin, 

Greetings from Syncfusion support..! 

We have validated your reported problem “DropDownButton not rendered correctly in Toolbar” at our end and let you know that you can overcome this problem by using the DropDownButton component in ItemDirective tag instead of rendering in Toolbar ItemModel. We have prepared a sample for your reference which can be viewed from the following link. 

Sample: https://stackblitz.com/edit/dropdown-button-inside-ej2-react-toolbar?file=index.js 

Note: we noticed that you didn’t refer to index.css in your shared files. Icons-related CSS values are referred from there only. 

Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 

Praveenkumar 

[Laurin S]

Thanks for the reply.

However, this solution is not possible for me, since I'm adding the DropDownButton to the Scheduler Toolbar using the "actionBegin"-event.

See the following code snippet of my scheduler-actionBegin-event:

const actionBegin = (args?: ActionEventArgs) => {

    if (args) {

      if (args.requestType === "toolbarItemRendering") {

          const extras: ItemModel = {

          align: "Left",

          template: new DropDownButton({

            cssClass: "e-outline border-0",

            content: t("calendar:toolbar.extras"),

            iconCss: "las la-tools",

            items: [

              {

                id: "removeAllContactAppointments",

                iconCss: "las la-user-minus",

                text: `${t("calendar:toolbar.removeAllContactAppointments")}...`

              },

              {

                id: "removeAllAppointments",

                iconCss: "las la-eraser",

                text: `${t("calendar:toolbar.removeAllAppointments")}...`

              },

              {

                id: "removeAllMarkedAppointments",

                iconCss: "las la-calendar-minus",

                text: `${t("calendar:toolbar.removeAllMarkedAppointments")}...`

              },

              {

                id: "removeAllNonDefiniteAppointments",

                iconCss: "las la-calendar-times",

                text: `${t("calendar:toolbar.removeAllNonDefiniteAppointments")}...`

              }

            ],

            select: (args?: MenuEventArgs) => {

              //TODO: api request

            }

          }),

          type: "Input",

          overflow: "Hide",

        };

        items.push(...[extras]);

        args.items = items;

      }

    }

}

Sorry, should have specified that immediately in my opening forum question.

Any other solution?

[Praveenkumar Narasimhanaidu]

Hi Laurin, 

Thanks for your update. 

We have validated your requirement “add the DropDownButton to the Scheduler Toolbar using the actionBegin event.” at our end and prepared a sample using scheduler actionBegin and actionComplete events which can be viewed from following link. 

Sample: https://stackblitz.com/edit/ej2-react-scheduler-with-dropdown-in-header-toolbar?file=index.js 

Index.js 

onActionBegin(args) { 

    if (args.requestType === 'toolbarItemRendering') { 

      let toolbarDropDown = { 

        template: '<input type="text" id="dropDown" />', 

        type: 'Input', 

      }; 

      args.items.push(toolbarDropDown); 

    } 

  } 

  onActionComplete(args) { 

    if (args.requestType === 'toolBarItemRendered') { 

      let toolbarDropDown = document.querySelector('#dropDown'); 

      let dropdown = new DropDownList({ 

        align: 'Left', 

        fields: { text: 'text', value: 'Id', iconCss: 'iconCss' }, 

        dataSource: this.items, 

        placeholder: 'Select Item', 

      }); 

      dropdown.appendTo(toolbarDropDown); 

    } 

  } 

Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 

Praveenkumar 

[Laurin S]

Thanks for the quick reply, however I'm meeting the problem using a DropDownBUTTON.

I tried to modify the suggested solution using a DropDownButton, but it still does not work.

I change the provided solution to the following:

onActionBegin(args) {

    if (args.requestType === 'toolbarItemRendering') {

      let toolbarDropDown = {

        template: '<input type="text" id="dropDown" />',

        type: 'Input',

      };

      args.items.push(toolbarDropDown);

    }

  }

  onActionComplete(args) {

    if (args.requestType === 'toolBarItemRendered') {

      let toolbarDropDown = document.querySelector('#dropDown');

      let dropdown = new DropDownButton({

        content: 'Extras',

        items: [

          {

            text: 'Item 1',

          },

          {

            text: 'Item 2',

          },

        ],

      });

      dropdown.appendTo(toolbarDropDown);

    }

  }

[Nevitha Ravi]

Hi Laurin, 

Thanks for the update. 

We can replicate your reported problem “Dropdown button is not properly rendered in the scheduler” and let you know that you may not include the Dropdown button-related imports in your sample which could be the reason for reported issues. And we have modified our previously shared sample with your shared snippets using the “DropdownButton component”, which can be viewed from the following link. 

Sample: https://stackblitz.com/edit/ej2-react-scheduler-with-dropdown-in-header-toolbar-qedr2k?file=index.js 

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

. 

. 

. 

onActionBegin(args) { 

    if (args.requestType === 'toolbarItemRendering') { 

      let toolbarDropDown = { 

        template: '<button type="text" id="dropDown" />', 

        type: 'text', 

      }; 

      args.items.push(toolbarDropDown); 

    } 

  } 

  onActionComplete(args) { 

    if (args.requestType === 'toolBarItemRendered') { 

      let toolbarDropDown = document.querySelector('#dropDown'); 

      let dropdown = new DropDownButton({ 

        content: 'Extras', 

        items: [ 

          { 

            text: 'Item 1', 

          }, 

          { 

            text: 'Item 2', 

          }, 

        ], 

      }); 

      dropdown.appendTo(toolbarDropDown); 

    } 

  } 

Kindly try the above modified solution and get back to us if you need any further assistance. 

Regards, 

Nevitha