Conditional template rendering

[Lejay julien]

Hi, 

I have a grid component with a custom header, that I would like to use only if my state is true.

I am using a class component.

What is the best way to proceed ?

  gridHeaderTemplate() {

    return (

      <>

        <p>directives</p>

        {console.log("header")}

        <div id="default">

          <CheckBoxComponent checked={true} label="Customer Name" id="name" />

        </div>

      </>

    );

  }

                <ColumnDirective

                  field="DirectiveFile"

                  headerText={i18n.t("Description")}

                  width="250"

                  headerTemplate={this.state,printing?this.gridHeaderTemplate.bind(this):null}

                  template={this.renderDescription.bind(this)}

                ></ColumnDirective>

Thank you for your help.

Attachment: ProjectDetailScreen_f623f82.rar

[Vignesh Sivagnanam]

Hi Lejay  

Greetings from Syncfusion support 

Based on your query you want to render the headerTemplate based on the value of state. So, we have prepared a sample by rendering the header template when the state value is true. 

Please refer the below Code example and sample for your reference, 

constructor(props) { 

    super(props); 

    this.template = this.gridTemplate; 

    this.state = { isValid: true }; 

  } 

 

 

gridTemplate(props) { 

    if (this.state.isValid === true) { 

      return ( 

        <> 

          <CheckBoxComponent checked={true} label="Customer Name" id="name" /> 

        </> 

      ); 

    } 

  } 

<GridComponent dataSource={employeeData} width="auto" ref={grid => (this.gridInstance = grid)} 

          > 

            <ColumnsDirective> 

              ………………………………………….. 

              <ColumnDirective field="FirstName" headerText="Name" headerTemplate={this.template.bind(this)} 

                width="120" /> 

              …………………………………………… 

            </ColumnsDirective> 

</GridComponent> 

Sample : https://stackblitz.com/edit/react-jddzzn-8frdke?file=index.js 

If we misunderstood your requirement, please share the screenshot or video demonstration of an requirement which will help us to provide the prompt solution. 

Regards 

Vignesh Sivagnanam 

[Jeff Voigt]

I don't understand how this would work using functions.  When I do the following below, it will override all cells for the 'typeDisplay' column BUT all other cells are blank because it doesn't know to revert back to whatever the default template or "no" template is:

    const testTemplateExe = (row) => {

        if (row.column.field === 'typeDisplay')

            return (<>TYPE OVERRIDE</>);

    }

    return (<>

        {meta &&

            <GridComponent dataSource={rows} >

                <ColumnsDirective>

                    <ColumnDirective field='id' visible={false} isPrimaryKey={true} />

                    {visibleColumns(meta.columns).map(col => {

                        return (

                            <ColumnDirective

                                headerText={col.headerText}

                                template={testTemplateExe}

                            />);

                    }

                    )}

                </ColumnsDirective>

            </GridComponent>

        }

    </>);

[Rajapandi Ravi]

Hi Lejay,

Greetings from Syncfusion support

Based on your query we could see that you like to render the template elements for all columns. In your shared code snippet, we found that you are returning only for the typeDisplay column. So only other coulmns are empty. To resolve the problem, we suggest you use the else part to return the elements for the other column. Please refer the below code example and sample for more information.

 

const testTemplateExe = (args: any) => {

    if (args.column.field === 'ShipName')

        return (<p>Hello</p>)

    else {

      return (<p>{args[args.column.field]}</p>)

    }

}

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/1646211552423386.zip

Regards,

Rajapandi R