Typescript: Grid Column Template -> use a Function as value

[Laurin S]

Hi, I'm using the Grid component with React Typescript. Better said, i have migrated my React project from JS to Typescript. But now I have a problem which I can't manage to migrate successfully to TS. I'm setting my grid columns dynamically using the "columns" property of the Grid. In some columns I have my own template. I defined these templates as functions since they behave differently depending on the current record/cell value. But now with Typescript I am no longer able to assign these functions as value for the "template" property of the columns. I can only pass a string as template. What am I doing wrong?

  const checkboxTemplate = (record: object) => {

      return (

        <CheckBoxComponent

          checked={record["done"]}

          change={(e?: ChangeEventArgs) => {

              const data = { ...record, ["done"]: e!.checked };

              grid.editModule.updateRow(record["index"], data);

          }}

          cssClass="e-small"

        />

      );

  };

  grid.columns = [

    { field: "done", headerText: "Done", template: checkboxTemplate, type: "boolean" },

    { field: "description", headerText: "Description", width: "10%", type: "string" },

  ];

Before I was migrating to TS I could perfectly set a function as value for the "template" property. Now, with TS, I'm only allowed to set a string as template (both for Column and ColumnModel types). What do I have to change to have a dynamic column template? In other words, how can I still use functions for the template property of a column?

[Manivel Sellamuthu]

Hi Laurin, 

Sorry for the delay getting back to you. 

From your query we can understand that you want to use functions for the template property for the dynamic column. So we suggest you to use type as any for this requirement.  

Please refer the below code example and sample for more information. 

export default class App extends React.Component {  

  public checkboxTemplate = (record: any) => { 

    return ( 

      <CheckBoxComponent 

        checked={record["done"]} 

        change={(e?: ChangeEventArgs) => { 

          const data = { ...record, ["done"]: e!.checked }; 

          debugger 

          (this as any).gridInstance.editModule.updateRow(record["index"], data); 

        }} 

        cssClass="e-small" 

      /> 

    ); 

  }; 

 

  public columns = [ 

    { field: 'ProductName',isPrimaryKey: true, headerText: 'Product Name', width: 150 }, 

    { 

        field: 'Discontinued', headerText: 'Discontinued', width: 150, 

        template: (this as any).checkboxTemplate, type: 'boolean' 

    } 

  ]; 

  public editSettings = {allowEditing: true, allowAdding: true, allowDeleting: true}; 

   

 

  render() { 

    return ( 

      <div className='col-lg-9 control-section row'> 

        <GridComponent dataSource={categoryData} editSettings={this.editSettings} columns={this.columns} 

         allowPaging={true} ref={grid => (this as any).gridInstance = grid}> 

          <Inject services={[Edit, Page]} /> 

        </GridComponent> 

      </div> 

    ); 

  } 

} 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/React_sample_-_159620-1083418439.zip 

Please let us know, if you need further assistance. 

Regards, 

Manivel