Collapse grouped rows at initial render in React Grid component(with captionTemplate)

[sohyeonbak]

Hi,

I referred below link to implement collapsed group row in initial renderer.

https://ej2.syncfusion.com/react/documentation/grid/how-to/collapse-grouped-rows-at-initial-render

Since I was getting requests for async data, I changed it to the code below.

Also, when selecting the second row among the grouped rows, captionTemplate of group options were used to move to the corresponding page.

the whole code:

However, inside the library it is calling these errors.

error:

If I delete the captionTemplate, it works fine.

I want one of two solutions.

I want to be able to perform some action(routing) when a grouped row is selected, or to not receive the above error even when using databound and captionTemplate together.

waiting for your answer

thanks

[Dineshnarasimman Muthu]

Hi Sohyeonbak,

Query:  Collapse grouped rows at initial render in React Grid component(with captionTemplate)

We have analyzed your query about "Collapse grouped rows at initial render with CaptionTemplate and DataBound" and we have achieved your requirement.

We have attached the sample for your reference.

 

  const groupOptions: GroupSettingsModel = {

     columns: ['ShipCity'],

      captionTemplate:(props:any)=>routing(props),  

    };

   const routing=(props:any)=>{

    if(props.field==="ShipCity")

    {

      console.log(props.items[0].ShipCity);

      return(

        <span style={{cursor:"pointer"}} >ShipCity - {props.items[0].ShipCity} </span>

      )

    }

   }

  let gridObj: Grid | null;

 

  const dataBound = (): void => {

    if (gridObj && initial === true) {

      gridObj.groupModule.collapseAll();

      initial = false;

    }

  }

 

Output: 

Please use this sample to render your code and if you need extra validation,  please provide us the information listed below. This will assist us to quickly respond with a better solution.

• Issue Demonstration
• Full Grid rendering code
• Syncfusion Grid Package Version
• Sample data
• Issue Reproducible sample if possible

Regards,

Dineshnarasimman

Attachment: myapp_548eccb1.zip