Adding Columns Programmatically

[Panji Aryaputra]

Hi all, is there a way to add columns to the grid programmatically? If yes, at which event? My case is that there are some fixed columns (always in the data) and there are some dynamic columns (may or may not be in the data). So I would prefer to be able to always display the fixed columns and then add additional ones (for the dynamic columns) on the fly, as needed.

Thank you.

[Hariharan J V]

Hi Panji, 

 

Thanks for contacting Syncfusion support. 

 

Query: Is there a way to add columns to the grid programmatically? If yes, at which event? My case is that there are some fixed columns (always in the data) and there are some dynamic columns (may or may not be in the data). So I would prefer to be able to always display the fixed columns and then add additional ones (for the dynamic columns) on the fly, as needed. 

 

We have validated your query and you can achieve your requirement by using below method. We have added column dynamically by using button click event. Here, first we have defined column object and push into grid. Then we have refresh columns by using refreshColumns method. 

 

[code example] 

export class Default extends SampleBase { 

        show() { 

            var gObj = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 

            var colObj = { headerText: "Ship City", field: "ShipCity", width: 120 };    //define column object 

            gObj.columns.push(colObj);                                                  //push into grid 

            gObj.refreshColumns();                                                      //refresh columns 

        } 

        render() { 

            return (<div className='control-pane'> 

                <div className='control-section'> 

                    <ButtonComponent value='Show' cssClass='e-flat' onClick={this.show.bind(this)}>Show Column</ButtonComponent> 

                    <GridComponent dataSource={orderDetails} height='350'> 

                        <ColumnsDirective> 

                            ... 

                            ... 

                       </ColumnsDirective> 

                    </GridComponent> 

                </div> 

            </div>); 

        } 

    } 

 

We have prepared a simple sample based on your requirement. Please find the sample in below link. 

 

Sample link: https://stackblitz.com/edit/react-jjwaeh-ulfbju?file=index.js 

Please get back to us if you need further assistance on this. 

Regards, 

Hariharan 

[Panji Aryaputra]

Hi Hariharan, thank you for your prompt reply. I was able to derive a solution based on your sample code.

Thanks again.

Panji

[Hariharan J V]

Hi Panji, 

Thanks for your update. We are happy to hear that your problem has been resolved. 

 

Regards,  

Hariharan