How to create very custom element(s) in Grid Toolbar

[JASON HODGES]

I want to add a Material Slider as a custom element in the toolbar.   

I'm on 22.1.25.   I cannot make the documentation code work at all:

<ng-template #toolbarTemplate let-data>
                        <ejs-toolbar (clicked)='clickHandler($event)'>
                            <e-items>
                                <e-item id="collapse" text="Collapse All" prefixIcon="e-chevron-up icon"></e-item>
                                <e-item id="expand" text="Expand All" prefixIcon="e-chevron-down icon"></e-item>
                            </e-items>
                        </ejs-toolbar>
                   </ng-template>

The closest I can get working is using ToolBarItems[] and not using the ng-template & ejs-toolbar component:

  public toolbarOptions: ToolbarItems[] | object = [

    {

      text       : 'Create',

      tooltipText: 'Create',

      prefixIcon : 'e-add',

      id: 'createEvent',

      align: 'left'

    },

    {

      text       : 'Slider Here',

      tooltipText: 'Slider Here',

      prefixIcon : 'e-people',

      id: 'import',

      align: 'right'

  },

    'ColumnChooser',

    'Search'];

I want to add a Material slider where the "slider here" button would appear but am having absolutely no fortune making this work.

My requirements are:   

• Create button
• Material Slider
• Column picker
• Search
  

[Rajapandi Ravi]

Hi Jason,

Greetings from Syncfusion support

After reviewing your query, we could see that you like to render the custom element in the Grid toolbar. You can achieve your requirement by using the toolbar template feature of Grid. We have already discussed about your requirement in our documentation which can be accessed from the below link,

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/tool-bar/custom-tool-bar#render-a-component-or-element-using-the-toolbar-template

                             https://ej2.syncfusion.com/angular/documentation/grid/tool-bar/custom-tool-bar#render-dropdownlist-in-custom-toolbar

                              https://ej2.syncfusion.com/angular/documentation/grid/tool-bar/custom-tool-bar#render-image-with-text-in-custom-toolbar

Regards,

Rajapandi R

[JASON HODGES]

I copy/pasted the example template code into the template.  The toolbar disappears completely.

[Rajapandi Ravi]

Jason,

Based on our shared documentation, we have prepared a sample and tried to reproduce the reported problem, but the toolbar displayed properly at our end. Please refer the below code example and sample for more information.

 

<ejs-grid #grid id='Normalgrid' [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar' (actionBegin)='actionBegin($event)' [allowExcelExport]="true" [allowPdfExport]="true">

            <ng-template #toolbarTemplate let-data>

                <div id='toolbar'>

                    <button id="excelButton" ejs-button cssClass="e-outline" (click)="exportAction($event)">Excel Export</button>

                    <button id="pdfButton" ejs-button cssClass="e-outline" (click)="exportAction($event)">Pdf Export</button>

                    <button id="printButton" ejs-button cssClass="e-outline" (click)="exportAction($event)">Print</button>

                </div>

            </ng-template>

            <e-columns>

                <e-column field='OrderID' headerText='Order ID' width='140' textAlign='Right' isPrimaryKey='true' [validationRules]='orderidrules'></e-column>

                <e-column field='CustomerID' headerText='Customer ID' width='140' [validationRules]='customeridrules'></e-column>

                <e-column field='Freight' headerText='Freight' width='140' format='C2' textAlign='Right' editType='numericedit' [validationRules]='freightrules'></e-column>

                <e-column field='OrderDate' headerText='Order Date' width='120' editType='datetimepickeredit' [format]='formatoptions' textAlign='Right'></e-column>

                <e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit' [edit]='editparams'></e-column>

            </e-columns>

        </ejs-grid>

Sample: K1tptg (forked) - StackBlitz

Screenshot:

So based on following the above code, you can render your custom element in the toolbar template. If still you face the issue, please share any issue reproducible sample or try to reproduce the issue with our shared sample.

[JASON HODGES]

For v22.1.35, this doesn't seem to work...

[Rajapandi Ravi]

Jason,

In your query you have mentioned that you are facing the problem in 22.1.35 version, but while checking at our end we found that there is no 22.1.35 version found in the Grid packages. Please refer the below release notes for more information.

Release notes: https://ej2.syncfusion.com/documentation/release-notes/22.1.34?type=all

So, we tried to reproduce your reported problem in the 22.1.34 version but it was unsuccessful. The toolbarTemplate renders properly at our end. Please refer the below sample for more information.

Sample: https://stackblitz.com/edit/angular-8wnpxh-1qtz8x?file=package.json

If still you face the issue, please share any issue reproducible sample or try to reproduce the issue with our shared sample.

[JASON HODGES]

There is most definitely a version 22.1.35:

On NPM.js, the package for ej2-angular-grids goes up to 22.1.39 (see below).

[Rajapandi Ravi]

JASON,

As per your shared information, we have prepared a sample of Grid in 22.1.35 version and tried to reproduce your reported problem at our end, but it was unsuccessful. Please refer the below code example and sample for more information.

App.component.html

 

<ejs-grid #grid id='Normalgrid' [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar' [allowExcelExport]="true" [allowPdfExport]="true">

  <ng-template #toolbarTemplate let-data>

      <div id='toolbar'>

          <button id="excelButton" ejs-button cssClass="e-outline" (click)="exportAction($event)">Excel Export</button>

          <button id="pdfButton" ejs-button cssClass="e-outline" (click)="exportAction($event)">Pdf Export</button>

          <button id="printButton" ejs-button cssClass="e-outline" (click)="exportAction($event)">Print</button>

      </div>

  </ng-template>

  <e-columns>

      <e-column field='OrderID' headerText='Order ID' width='140' textAlign='Right' isPrimaryKey='true' [validationRules]='orderidrules'></e-column>

      <e-column field='CustomerID' headerText='Customer ID' width='140' [validationRules]='customeridrules'></e-column>

      <e-column field='Freight' headerText='Freight' width='140' format='C2' textAlign='Right' editType='numericedit' [validationRules]='freightrules'></e-column>

      <e-column field='OrderDate' headerText='Order Date' width='120' editType='datetimepickeredit' [format]='formatoptions' textAlign='Right'></e-column>

      <e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit' [edit]='editparams'></e-column>

  </e-columns>

</ejs-grid>

 

Sample:

If still you face the issue, please share any issue reproducible sample or try to reproduce the issue with our shared sample that would be helpful for us to proceed further validation.

Attachment: Angular22.1.35_36075c61.zip

[JASON HODGES]

That example was helpful, thank you.

Here's where I am stuck.   The following configuration gives me 3/4 of what I need.

The last Item I require is a mat-slide-toggle which would display to the left of the ColumnChooser.   I cannot determine how to accomplish this requirement.  

I am using the following which works but doesn't provide a way to add a mat-slide-toggle.  

Can you provide additional guidance?

  public toolbarOptions: ToolbarItems[] | object = [

    {

      text       : 'Create',

      tooltipText: 'Create',

      prefixIcon : 'e-add',

      id: 'createActivity',

      align: 'left'

    },

    'ColumnChooser',

    'Search'

];

[JASON HODGES]



Any additional guidance you could provide would be much appreciated...

The right side of the toolbar we want to appear like the below image (functionality), using the default search, but a custom button next to it.   The right side of the toolbar will be a button (I already have that working)

[Santhosh Iruthayaraj]

Hi Jason,

In response to your request to integrate the mat-slide-toggle with the default Grid toolbar items, we have successfully fulfilled your requirement by obtaining the reference of the mat-slide-toggle button using its ID and passing it to the template property of the custom toolbar item. Below, you'll find the code snippet and a sample for your reference:

[app.component.html]

 

 <div id="toolbar-toggle-btn">

    Show Deleted<mat-slide-toggle (change)="toggle($event)" />

  </div>

 

[app.component.ts]

 

  ngOnInit(): void {

    this.data = data;

    this.toolbarOptions = [

      {

        text: 'Create',

        tooltipText: 'Create',

        prefixIcon: 'e-add',

        id: 'createActivity',

        align: 'left',

      },

      {

        align: 'right',

        template: document.getElementById('toolbar-toggle-btn'),

      },

      'ColumnChooser',

      'Search',

    ];

  }

 

Sample: https://stackblitz.com/edit/6tpjw7?file=src%2Fapp.component.html,src%2Fapp.component.ts

Regards,

Santhosh I

[JASON HODGES]

How does change if I run as a standalone component?

[Rajapandi Ravi]

Jason,

After reviewing your query, we suspect that you are trying to implement the Toolbar component as standalone component inside the toolbar template. So based on your query we have prepared a sample and we suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information.

App.component.html

 

<ejs-grid

    [dataSource]="data"

    allowPaging="true"

    [toolbar]="toolbarOptions"

    showColumnChooser="true"

    width="700"

  >

  <ng-template #toolbarTemplate let-data>

 

    <div id='toolbar'>

 

      <ejs-toolbar>

        <e-items>

           <e-item type='Input'>

            <ng-template #template>

              <div id="toolbar-toggle-btn">

                Show Deleted <mat-slide-toggle (change)="toggle($event)" />

              </div>

            </ng-template>

           </e-item>

        </e-items>

      </ejs-toolbar>

 

    </div>

 

</ng-template>

    <e-columns>

      <e-column

        field="OrderID"

        headerText="Order ID"

        width="120"

        textAlign="Right"

      ></e-column>

      <e-column

        field="CustomerName"

        headerText="Customer Name"

        width="150"

      ></e-column>

      <e-column

        field="OrderDate"

        headerText="Order Date"

        width="130"

        format="yMd"

        textAlign="Right"

      ></e-column>

      <e-column

        field="Freight"

        headerText="Freight"

        width="120"

        format="C2"

        textAlign="Right"

      ></e-column>

      <e-column

        field="ShippedDate"

        headerText="Shipped Date"

        width="130"

        format="yMd"

        textAlign="Right"

      ></e-column>

      <e-column

        field="ShipCountry"

        headerText="Ship Country"

        width="150"

      ></e-column>

    </e-columns>

  </ejs-grid>

 

Sample: https://stackblitz.com/edit/6tpjw7-p1q46e?file=package.json,src%2Fapp%2Fapp.module.ts,src%2Fapp.component.ts,src%2Fapp.component.html

Documentation: https://ej2.syncfusion.com/angular/documentation/toolbar/item-configuration#input

If you still face any issue, please share any issue reproducible sample or try to reproduce the issue with our shared sample that would be helpful for us to provide better solution.

[JASON HODGES]

Thanks for the response! 

Two questions:

1) in your last example where toolbar is standalone, how would the column chooser and search be added?

2) I am creating a component that contains the entire grid as a standalone component.   In your above example, this means that app.component would be a the standalone component.

So, take this example from a previous response ( https://stackblitz.com/edit/6tpjw7?file=src%2Fapp.component.html,src%2Fapp.component.ts )   and make app component a standalone component. 

[Rajapandi Ravi]

Jason,

Before we start providing solution to your query, we need some more information for our clarification. So please share the below details that would be helpful for us to provide better solution.

1)          Share your complete Grid rendering code (ts and html files), we would like to check your implementation and based on that we are providing suggestion.

2)          Share your package.json file.

3)          If possible, please share any issue reproducible sample or try to reproduce the issue with our shared sample that would be helpful for us to provide better solution.

[JASON HODGES]

I have successfully upgraded to v24.1.46.

Please see the attached example where the material slider does not integrate into the toolbar as expected.

Note that "grid-component" is an angular standalone component.

Attachment: gridstandaloneexample_5a5b0bd.zip

[Rajapandi Ravi]

JASON,

We have checked your shared standalone application and we could see that you are defined the template definition in the toolbarOptions before the component was rendered in the DOM. So only the template element was not rendered in the Toolbar, and it was the cause of the problem. We have modified your shared application and we defined the toolbarOptions inside the ngOnit and achieved your requirement. Please refer the below code example and modified sample for more information.

grid-component.component.ts

 

export class GridComponentComponent {

  public toolbarOptions: any;

 

 

  ngOnInit(): void {

    this.toolbarOptions = [

      {

        text       : 'Create',

        tooltipText: 'Create',

        prefixIcon : 'e-add',

        id: 'create',

        align: 'left'

      },

      {

        align: 'right',

        template: document.getElementById('toolbar-toggle-btn') ,

      },

      'ColumnChooser',

      'Search'];

    this.initData(); 

    }

}

 

Sample:

Screenshot:

Attachment: 186580sample_a5391625.zip

[JASON HODGES]

This has successfully resolved my issue!

Thank you!!!

[Rajapandi Ravi]

Jason,

We are happy to hear that our provided solution was helpful to resolve the problem at your end.

Please get back to us if you require any further assistance.