We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid dynamical columns

Thread ID:

Created:

Updated:

Platform:

Replies:

146259 Jul 29,2019 07:22 AM UTC Jul 30,2019 11:55 AM UTC React - EJ 2 1
loading
Tags: Grid
Binu
Asked On July 29, 2019 07:22 AM UTC

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 [Syncfusion]
Replied On July 30, 2019 11:55 AM UTC

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; 


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

Regards, 
Hariharan  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon