1. Home
  2. Forum
  3. React - EJ 2
  4. Creating a template format in the grid dinamically.

Creating a template format in the grid dinamically.

Dear all,
we have a requirement to create custom template columns in the grid for allowing a modal, i.e. a button.


We have crafted the following function

   static createButtonElement(id, buttonId, clickCallback)
    {

        let createButtonClassNode = React.createElement('i', {class:'small material-icons'}, 'search')
        let button = React.createElement('button', {'id': buttonId, 'class':'small material-icons' ,'onclick': clickCallback}, [createButtonClassNode])
        let scriptNode = React.createElement('script', {'id':id, 'type':'text/x-template'},button);
        return scriptNode;
    }
We put that in this.selections
But for somewhat reason we are not able to show it directly to the grid. And we create an array this.realCols
where we put the real directives.



const Selections = ({ selections }) => (
    <div>
    {
        selections.map(item => (
        <div>{item}</div>
        ))}
</div>
);

 
   createSelectColFromJson(col, callback)
    {
    
        if (col.Fields.length > 0) {
            let field = col.Fields[0]
            let selectedValues = field.SelectionValues
            let item = null
            if (selectedValues != null) {

                console.log("Columnas :" + col.Id)
                let refColId = "#col" + col.Id
               console.log("creating template id " + refColId)
                item = React.createElement(ColumnDirective,
                    {
                        field: field.Name,
                        template: refColId,
                        headerText: col.Header,
                        type: "string"
                    });
                console.log('createdSelectColFromJson')
                if (callback != null)
                    callback('Done')
            }
            return item
        } 
    }
  render() {
        return (
        <div className='control-pane'>
            <div className='control-section'>
                <div className='col-md-9'>
                <Selections selections={this.selectionNodes} />
            <GridComponent dataSource={this.state.data}
                        allowFiltering={true}
                        filterSettings={this.filterSettings}
                        ref={grid => this.gridInstance = grid}
                        toolbar={this.toolbarOptions}
                        allowPaging={true}
                        editSettings={this.editSettings}
                        pageSettings={this.pageSettings}
                        actionBegin={this.actionBegin.bind(this)}>
                        <ColumnsDirective children={this.realCols}>
                        </ColumnsDirective>
                        <Inject services={[Page, Toolbar, Filter, Edit]} />
                    </GridComponent>
                </div>
             </div>
        </div>);
    }


Any suggestions?



3 Replies
PS Pavithra Subramaniyam Syncfusion Team October 8, 2019 12:27 PM UTC

Hi Giorgio, 
 
Thanks for contacting Syncfusion support, 
 
We have validated your query with provided the information and we have created a sample with bind a button on Grid Column using column template feature. Please refer the below code example, Documentation and sample for more information. 
 
[Parent.js] 
import './App.css'; 
import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; 
.   .    .    . 
class Parent extends React.Component { 
    constructor(props) { 
        super(props); 
        .    .    .     . 
    }; 
    gridTemplate(props) { 
       // We have bnd the button on template column 
        return (<div className='custId'> 
            <ButtonComponent cssClass='e-primary' content={props.CustomerID} onClick={this.templateBtnClk} ></ButtonComponent> 
        </div>); 
    } 
    columns = [ 
        .   .    .    . 
    ]; 
 
    templateBtnClk(args) { 
    
   // you can bind the Modal pop-up here 
 
    } 
 
    componentDidMount() { 
        this.gridInstance.columns[3].template = this.gridTemplate.bind(this); // Define the template column for dynamic columns scenario 
   } 
    
    render() { 
        return ( 
            <div className="Parent" > 
                <div className='control-section'> 
                    <GridComponent ref={grid => this.gridInstance = grid} dataSource={orderData} allowFiltering={true} allowPaging={true} allowSorting={true} 
                        toolbar={this.toolbarOptions} allowSelection={true} 
                        editSettings={this.editOptions} columns={this.columns}> 
                        <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, 
Pavithra S. 


GI Giorgio October 14, 2019 10:13 AM UTC

Hello,
on the same line i have a small issue when use checkbox columns.
let coldef = {"field":"Included","headerText":"Included","allowEditing":true,"type":"boolean","editType":"boolean","displayAsCheckBox":"true"}

This is the definitions in columns. It is fine in non edit mode, but in edit mode i have the following problem:


I would like to see the checkbox checked in tyhe included y not trye.



PS Pavithra Subramaniyam Syncfusion Team October 15, 2019 08:57 AM UTC

Hi Giorgio, 
 
For rendering “CheckBox” component while editing, you can set editType as “booleanedit”. Please refer to the below code example and documentation link for more information.   
 
 
let coldef = {"field":"Included","headerText":"Included","allowEditing":true,"type":"boolean","editType":"booleanedit","displayAsCheckBox":"true"} 
 
 
 
Please get back to us if you need any further assistance on this. 
 
Regards, 
Pavithra S. 


Loader.
Up arrow icon