Dynamically make a new grid on button press

Question

Hi,I was wondering how to create a new grid dynamically in code when a button is pressed? Thanks,Charles

Balaji Sekar · Accepted Answer

Hi Francis, 

Based on your query, you need to export the Grid when render the Grid component dynamically and we suggest you to Inject the ExcelExport module to grid then we can export the Grid dynamically when press a button’s click action and we achieved your requirement in dataBound event of the Grid it will trigger once component rendered. 

Please refer the below code example and sample for more information. 
  




[app.component.ts] 
Grid.Inject(ExcelExport); 
 bindGridJSFn(e) { 
    var grid = new Grid({ 
      allowPaging: true, 
      dataSource: data, 
      allowExcelExport: true, 
      dataBound: function () { 
        grid.excelExport(); 
      }, 
      columns: [ 
        { field: 'OrderID', headerText: 'Order ID', width: 100 }, 
        { field: 'Freight', headerText: 'Freight', width: 100 }, 
        { field: 'CustomerID', headerText: 'Customer Name', width: 100 }, 
      ], 
    }); 
    grid.appendTo('#myGrid'); 
  } 

Sample link: https://stackblitz.com/edit/angular-qisuon-zfcst8?file=app.component.ts 

Regards, 
Balaji Sekar.

Balaji Sekar · Answer

Hi Charles, 

Greetings from the Syncfusion support. 

Query: How to create a new grid dynamically in code when a button is pressed? 
 
Based on your query, we have created a Grid component while button click action. In below code example, we have created a Grid component instance then it will bound to the div element since we can see the Grid component on the UI. 

Please refer the below code example for more information. 





[app.component.ts] 
  bindGridJSFn(e) { 
    var grid = new Grid({ 
      allowPaging: true, 
      dataSource: data, 
      columns: [ 
        { field: 'OrderID', headerText: 'Order ID', width: 100 }, 
        { field: 'Freight', headerText: 'Freight', width: 100 }, 
        { field: 'CustomerID', headerText: 'Customer Name', width: 100 }, 
      ], 
    }); 
    grid.appendTo('#myGrid'); 
  } 
} 

Sample link: https://stackblitz.com/edit/angular-qisuon?file=app.component.ts 

Please get back to us, if you need further assistance. 

Regards, 
Balaji Sekar.

Charles Eichelberger · Answer

Hello,I can confirm this does let me create a new grid, but when trying to export the new grid to excel nothing seems to happen. Below is a screenshot of the code I am using. Thanks,Charles