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

Creating a template format in the grid dinamically.

Thread ID:

Created:

Updated:

Platform:

Replies:

148132 Oct 7,2019 04:28 PM UTC Oct 15,2019 08:57 AM UTC React - EJ 2 3
loading
Tags: Grid
Giorgio
Asked On October 7, 2019 04:28 PM UTC

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 [Syncfusion]
Replied On 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. 


Giorgio
Replied On 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.



Pavithra Subramaniyam [Syncfusion]
Replied On 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. 


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