1. Home
  2. Forum
  3. React - EJ 2
  4. How to customize custom Template value with a function

How to customize custom Template value with a function

Hi, I am using React Syncfusion Grid's custom template for customizing  my column.

My Question is How can I use my own components and functions to customize the column?

default

column=[{template:`<button>${value}</button>`,width:3000}]

I want to use 

column=[{ template:`<myComponentButton>${myfunction(value)}</myComponentButton>` }]

I was also not able to pass a function to template -{template:templateFunc} to achieve the above functionality .

Any help is appreciated

Thankyou 


5 Replies
RS Rajapandiyan Settu Syncfusion Team June 24, 2021 01:16 PM UTC

Hi YM, 
 
Thanks for contacting Syncfusion support. 
 
Based on your requirement, you want to render custom component in the column using column template feature. 
 
In EJ2 Grid, you can also bind the element in Htmlstring format to the column template. The Grid component converts this Htmlstring into Html element and it will be shown in the Grid. But it only works with default html elements. If you want to bind your custom component in the column template refer to the below documentation and code example. 
 
 
[index.js] 
 
 
export class Default extends SampleBase { 
  constructor(props) { 
    super(props); 
  } 
  template(args) { 
    console.log(args); 
    // return your custom component as you want 
    return ( 
      <div> 
        {args.EmployeeID} - <MyComponentButton btnvalue={args.CustomerID} /> 
      </div> 
    ); 
  } 
  columns = [ 
    { 
      field: 'OrderID', 
      headerText: 'Order ID', 
      width: 150 
    }, 
    { 
      field: 'CustomerID', 
      headerText: 'Customer ID', 
      template: this.template, 
      width: 150 
    }, 
    { field: 'Freight', headerText: 'Freight', width: 150 }, 
    { field: 'ShipCity', headerText: 'Ship City', width: 150 } 
  ]; 
  render() { 
    return ( 
      <div className="report-master-form"> 
        <GridComponent 
          dataSource={hierarchyOrderdata} 
          columns={this.columns} 
          height={315} 
        /> 
      </div> 
    ); 
  } 
} 
 
 
 
We have prepared a sample for your reference. You can get it from the below link. 
 
 
Please get back to us if you need further assistance with this. 
 
Regards, 
Rajapandiyan S 


YM ym July 5, 2021 05:12 PM UTC

Hi  Rajapandiyan,

Thanks a lot for this solution. This solved my problem.




Regards,

YM


RS Rajapandiyan Settu Syncfusion Team July 6, 2021 03:27 AM UTC

Hi YM, 

You’re welcome. We are glad that the provided solution resolved your requirement. 
 
Regards, 
Rajapandiyan S 


YM ym July 6, 2021 04:50 PM UTC

Hi Rajapandiyan,

Thankyou for your previous response. I have another question. I am using React-TypeScript for this project. This is how I used custom Templates.


customTemplate=(props:any)=>{

return()

}


columns= column=[{ template: customTemplate }]


I am getting a TypeScript warning for using (props:any) .

I am also getting the following warning for using a template literal-

"Invalid type "any" of template literal expression"

What Datatype Should I use for props and template?


Thankyou


RS Rajapandiyan Settu Syncfusion Team July 7, 2021 11:02 AM UTC

Hi YM, 
 
Thanks for your update. 
 
We have validated your requirement. You can use the columnTemplate arguments type as Object. Please find the below code example for your reference. 
 
[App.tsx] 
 
export default class App extends React.Component<{}, {}>{ 
 
    template(props: Object) { 
      console.log(props); 
      return ( 
        <div> 
          {props["EmployeeID"]}  
        </div> 
      ); 
    } 
    public columns: Object[] = [ 
      { 
        field: 'OrderID', 
        headerText: 'Order ID', 
        width: 150 
      }, 
      { 
        field: 'CustomerID', 
        headerText: 'Customer ID', 
        template: this.template, 
        width: 150 
      }, 
      { field: 'Freight', headerText: 'Freight', width: 150 }, 
      { field: 'ShipCity', headerText: 'Ship City', width: 150 } 
    ]; 
    public render(){ 
      return <GridComponent 
      dataSource={data} 
      columns={this.columns} 
      height={315} 
    /> 
    } 
}; 
 
 
  
Please get back to us if you need further assistance with this. 
 
Regards, 
Rajapandiyan S 


Loader.
Up arrow icon