Creating a template format in the grid dinamically.

[Giorgio]

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?

[Pavithra Subramaniyam]

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; 

 

 

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

 

Help Documentation: https://ej2.syncfusion.com/react/documentation/grid/columns/?no-cache=1#column-template 

 

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

 

Regards, 

Pavithra S. 

[Giorgio]

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.

[Pavithra Subramaniyam]

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"} 

 

 

Documentation: https://ej2.syncfusion.com/react/documentation/grid/edit/#cell-edit-type-and-its-params 

 

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

 

Regards, 

Pavithra S.