Dynamic generation of columns and rows in datagrid

Question

Hi, SyncfusionteamWe want to dynamically create a column of the datagrid.The formula must be applicable to dynamically generated columns.In addition, the row should be reflected according to the dynamically generated column.The functions mentioned above are essential for future projects.If this function is possible, please reply with a detailed explanation of the method.I've added the image below that contains the explanation.Thank you for your kind reply and update on your request.Attachment: SyncfusionQ_82ef7609.zip

Rajapandi Ravi · Answer

Hi Taewook,Greetings from Syncfusion supportBased on your query we could see that you like to add
row/column dynamically in the Grid. If you like to add row dynamically, the
Grid component has Editing feature options to dynamically insert, delete, and
update records. Please refer the below code example and API documentation for
more information.

addRecord() { //button
  click event
      var obj = {
        OrderID: 100,
        CustomerName: 'Hello',
        OrderDate: new
  Date('1996-09-13'),
        ShippedDate: new
  Date('1996-10-09'),
        Freight: 257.62,
      };
      gridInstance.addRecord(obj); //pass the obj
  in the Grid’s addRecord() method
    }

API: https://ej2.syncfusion.com/documentation/api/grid/#addrecordIf you like to add the Columns dynamically, you can achieve
this requirement by directly pushing the new column to the Grid’s columns
property(which can be accessed using its instance). we suggest you use our Grid
inbuilt methods and call the refreshColumns() method for UI changes.

AddColumn() { //external button click function
       
  var obj = { field:
  "NewColumn", headerText: 'NewColumn', width: 120 }
       grid.columns.push(obj as
  any);   //you can add the
  columns by using the Grid columns method
       grid.refreshColumns();
      }

API: https://ej2.syncfusion.com/documentation/api/grid/#refreshcolumnsRegards,Rajapandi R