Add row not working programmatically in angular grid.

[Vaishnav]

Hi Syncfusion team,

I am trying to add an extra button on the toolbar and have same functionality as that of an 'Add' button in toolbar.

I have parent and child tabs. The grid is placed inside the child tab. My toolbar is:

@ViewChild('dataGrid') public dataGrid: GridComponent;

   

editSettings: EditSettingsModel = { allowAdding: true, allowEditing: true, allowDeleting: true, mode: 'Normal' };

    toolbar = ['Add', { text: 'Add Group', tooltipText: 'Add Group', prefixIcon: 'e-circle-add', id: 'addGroup',

align: 'Left' }, 'Edit', 'Delete', 'Update', 'Cancel', 'ExcelExport'];

    toolbarClick(args) {

        if (args.item.id === 'addGroup') {

            console.log(this.dataGrid);

            console.log(this.dataGrid.editModule);

            this.dataGrid.editModule.addRecord();

        }

if(args.item.id === 'dataGrid_excelexport') {

            this.dataGrid.excelExport();

        }

    }

But, the new row is not getting initialized and 'dataGrid.editModule' is coming as undefined even though 'this.dataGrid' shows grid properties.

I'm also trying to ExcelExport the data in grid.  But the exporting is not happening.

In both cases, there are no console error and both seem to work fine if I place the grid in parent tab.

Thanks in advance,

Vaishnav

[Dineshnarasimman Muthu]

Hi Vaishnav,

Greetings from Syncfusion Support. 

We have reviewed your query about implementing custom add function in the grid toolbar and the addRecord and facing issue. As you have also mentioned that the excelExport is also not working properly in the toolbarClick event of the grid and the this.dataGrid(instance of the grid) contains the grid properties. We tried replicate the issue from our end by implementing the functionalities you have mentioned. Unfortunately, we cannot replicate the issue from our end. The sample have been attached for your reference.

Sample: https://stackblitz.com/edit/angular-e1jlkf-zpqa78?file=src%2Fapp.component.html,src%2Fapp.component.ts,data.ts

Mapping the reference variable in the ViewChild

 

<ejs-grid

#dataGrid

id="dataGrid"

[dataSource]="data"

allowPaging="true"

[pageSettings]="pageSettings"

[editSettings]="editSettings"

[allowExcelExport]="true"

[toolbar]="toolbar"

(toolbarClick)="toolbarClick($event)"

> 

 

We understand that you are facing this issue in your application, can you please provide the following information which will help us to validate further.

• Can you please ensure whether you have mapped the correct reference variable in the grid component like the one we mentioned in the code snippet.

• Can you please provide the complete grid rendering code, which will help us to analyze and identify the issue and provide appropriate solution.

• Can you please provide the image of the console with the same code you have attached in the previous update along with the console.log(this.dataGrid).

• If possible, can you please provide us the issue replicating sample or can you please replicate the issue in the sample which we have provided.

Regards,

Dineshnarasimman M

[Vaishnav]

Hi Dineshnarasimman,

Sorry for the late reply.

Thanks to you, the issue got sorted after referring to the demo solution provided.

But still I'm facing some issues with the grid :

*1. I want to enable/disable the extra button based on condition.

*2. Facing issue while pdf export(pls refer to the below screen shot). The issue seems to be occurring only with pdf export and not with the excel export.

*3. I want to add a dropdown inside a dropdown button in the toolbar.

I tried to assign a new item as a template as follows. I am initializing the parent dropdown on the created event of grid.

public dropDownItems = [{ text: "Action1" }, { text: "Action2" },

    {

        text: "Inner Dropdown",

        template: new DropDownButton(

            {

                content: "Inner Dropdown",

                items: this.items

            },

            '#btn'

        )

    }

    ];

onCreated(grid: any) {

        var dropdownBtn = new DropDownButton(

            {

                content: 'Options',

                items: this.dropDownItems,

                select(args) {

                    if (args.item.text == "Inner Dropdown") {

                        new DropDownButton(

                            {

                                content: "Inner Dropdown",

                                items: this.items

                            },

                            '#btn'

                        );

                    }

                }

            },

            '#optionsButton'

        );

    }

I tried giving template as html button element, but that also seems to fail.

public dropDownItems = [{ text: "Action1" }, { text: "Action2" },

    {

        text: "Inner Dropdown",

        template: '<button id="btn"></button>'

    }

    ];

My Syncfusion Version : 19.3.56

Thanks,

Vaishnav

[Dineshnarasimman Muthu]

Hi Vaishnav,

Query 1: Disable the external button,

We understand that you need to disable/enable or disable the external button. We have prepared a sample where the external button is disabled/enabled based on the check state of the checkbox. The code snippet and sample have been attached for your reference.

[app.component.html]

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

                Disable the button <ejs-checkbox (change)="toggle($event)" />

              </div>

  

[app.component.ts]

 

toggle(args) {

    if (args.checked) {

      (document.getElementById('externalButton') as any).disabled =

        !args.checked;

    } else {

      (document.getElementById('externalButton') as any).disabled =

        !args.checked;

    }

  }

 

Sample: https://stackblitz.com/edit/angular-4kgf1u-i8tymf?file=src%2Fapp.component.ts,src%2Fapp.component.html

Query 2: Error when exporting grid to PDF export

Based on the error which you have attached, we suspect that the error is due to special characters in the grid.

By default, the EJ2 Grid's PDFExport supports only ASCII characters. So, we need to use our own custom fonts to export the Non-ASCII characters in the grid. We can draw the text with Non-ASCII characters in each cell using PdfTrueTypeFont. To achieve this, we need to use the Custom font in Base64String format.

You can change the default font of the Grid header, content, and caption cells in the exported document by using the pdfExportProperties.theme property. Please refer to the documentation below for more information.

Documentation for custom font exporting in PDF: 

https://ej2.syncfusion.com/angular/documentation/grid/pdf-export/pdf-export-options#add-custom-font

In the above documentation, we used Algeria font family (in base64 string format) to achieve this. This is used only for reference purpose. 

You can choose any kind of font family based on your requirement. Follow the below steps to achieve this. 

• Download the required font family (TTF file) by using this link ( https://www.fontsquirrel.com/fonts/list/language).
• Then convert the TTF file into base64 string by using this link ( https://www.giftofspeed.com/base64-encoder/).
• By using this custom font, you can achieve the exporting in Grid.

Sample: https://stackblitz.com/edit/github-jb45w2-7sxr6p?file=src%2Fapp.component.ts

Note: The provided true type font family should support the character to draw in PDF document. Else it shows empty spaces in the pdf document.  

Query 3: Need to add a dropdown inside a dropdown button in the toolbar.

Based on the query we understand that you need to implement a dropdown button inside a dropdown button in the toolbar template of the grid. We have achieved this requirement using the toolbar template of the grid and the beforeItemRender of the dropdownbutton component. The code snippet and sample have been attached for your reference.

 [app.component.html]

 

  <ng-template #dropdownTemplate>

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

        <button ejs-dropdownbutton [items]="items" 

          (beforeItemRender)='beforeItemRender($event)'content="options"></button>

      </div>

  </ng-template>

 

[app.component.ts]

 

 ngAfterViewInit() {

    setTimeout(() => {

      this.toolbar = [

        'Add',

        'Delete',

        'Update',

        {

          align: 'right',

          template: this.dropdownTemplate,

        },

        'ColumnChooser',

        'Search',

      ];

    });

  }

 

 

beforeItemRender(args) { inner dropdown button

    if (args.item.text === 'Display') {

      args.element.innerHTML = '';

      let items: ItemModel[] = [

        {text: 'Cut',},

        {text: 'Copy',},

        {text: 'Paste',},

      ];

     let drpDownBtn: DropDownButton = new DropDownButton({

        items: items,

        content: 'InnerButton',

        cssClass: 'e-caret-hide',

      });

      drpDownBtn.appendTo(args.element);

    }

  }

 

 

Sample: https://stackblitz.com/edit/angular-3yzsyb-qqwems?file=src%2Fapp.component.ts,src%2Fapp.component.html

Please let us know if you need any further assistance.

Regards,

Dineshnarasimman M