Grid dynamical columns

[Binu]

Hi ,

I need to add dynamical columns to grid. But also i should avoid sorting and filter for few columns. How can i so that.

eg: i hve 5 columns, custID,CustName,Address,gender,salary

In this custID should be a checkbox column. I should not allow filter on Address.

I can do using Columndirective attribute, but that will be static data. I should do it dynamically based on some flag.

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

<div className='control-section'>

<GridComponent

dataSource={updatedGridData}

enableHover={isGridHoverable}

allowFiltering={isGridFilterable}

allowSelection={onSelectionChange}

filterSettings={filterChange}

allowSorting={isGridSortable}

id={id}

allowPaging={isGridPaging} columns={gridColumns} toolbar={toolbar} toolbarClick={toolbarClick1}

allowExcelExport={true} >

{

<Inject services={[Sort, Filter, Toolbar, ExcelExport, Page]} />

}

</GridComponent>

</div>

</div>

);

[Hariharan J V]

Hi Binu, 

As per the your requirement, we have created a sample with prevent Filtering and Sorting for some specific column(ShipCity) using allowFiltering and allowSorting is false in columns definition. In the below code example, we have bind the columns and dataSource in dynamically. Please refer the below code example and sample for more information. 

[App.js] 

class App extends Component { 

        constructor(props) { 

            super(props); 

        } 

 

        columns = [ 

            { field: 'OrderID', headerText: 'Order ID', width: 120, type: 'number', editType: "numericedit" }, 

            { field: 'CustomerID', width: 140, hebderText: 'Customer ID', type: 'string'}, 

            { field: 'ShipCity', width: 140, headerText: 'Ship City', allowFiltering: false, allowSorting: false }, 

            { field: 'OrderDate', width: 140, headerText: 'Order Date', type: 'date', format: 'yMd', editType: "datetimepickeredit" } 

        ]; 

 

 

        componentDidMount() { 

    //Dynamically to bind the columns and dataSource in EJ2 Grid 

            this.pGrid.gridInstance.columns = this.columns; 

            this.pGrid.gridInstance.dataSource = orderData; 

       }       

 

        render() { 

 

            return ( 

                <div className="App" > 

                    <Parent ref={g => this.pGrid = g} ></Parent> 

                </div> 

            ); 

        } 

    } 

 

[Parent.js] 

    class Parent extends React.Component { 

        constructor(props) { 

            super(props); 

            this.toolbarOptions = ['ExcelExport', 'PdfExport', 'CsvExport']; 

           this.editOptions = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: "Normal" }; 

        }; 

        render() { 

            return ( 

                <div className="Parent" > 

                    <div className='control-section'> 

                        <GridComponent ref={grid => this.gridInstance = grid} allowFiltering={true} allowPaging={true} allowSorting={true} 

                            toolbar={this.toolbarOptions} allowExcelExport={true} allowPdfExport={true} allowSelection={true} 

                            editSettings={this.editOptions}> 

                            <Inject services={[Filter, Page, Edit, Toolbar, ExcelExport, PdfExport, Sort]} /> 

                        </GridComponent> 

                    </div> 

                </div> 

            ); 

        } 

    } 

 

    export default Parent; 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample-preventFilteringSorting411318332.zip 

Please get back to us, if you need further assistance. 

Regards, 

Hariharan