[Grid] How to apply css to expanded rows of detail template?

[ONG YU FENG]

Hi there

I am creating a datagrid using grid component. I used detail template to show more information when the user click on the collapse/expand arrow.

Just want to check is there any way to apply css to rows that are currently expanded? i have create a sample image below:

Thank you

Regards

Yu Feng

[Ajith Govarthan]

Hi ONG YU FENG, 

Thanks for contacting Syncfusion support. 

Query: Just want to check is there any way to apply css to rows that are currently expanded? i have create a sample image. 

 

Bases on your query you want to apply some custom CSS for currently expanded rows in your Grid application. So, we have prepared sample in that we have used the detailDatabound event and detail-state-change internal event to apply and remove the styles for the currently expanded rows. For your convenience we have attached the sample, please refer them for your reference. 

Code Example: 

Index.js 

detailDataBound(args) { 

    args.detailElement.parentElement.previousSibling.classList.add( 

      'c-expanded' 

    );   // this event will be triggered only the first time when you expand the rows 

  } 

  onLoad() { 

    this.gridInstance.on('detail-state-change', args => { 

      if (args.isExpanded) {  // this event will be triggered everytime when you expand and collapse       //except the first time 

        args.detailElement.parentElement.classList.add('c-expanded'); 

      } else { 

        args.detailElement.parentElement.classList.remove('c-expanded'); 

      } 

    }); 

  } 

  render() { 

    return ( 

      <div className="control-pane"> 

        <div className="control-section"> 

          <GridComponent 

            enableHover={false} 

            ref={grid => (this.gridInstance = grid)} 

            dataSource={employeeData} 

            created={this.onLoad.bind(this)} 

            detailDataBound={this.detailDataBound.bind(this)} 

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

            width="auto" 

          > 

            <ColumnsDirective> 

              <ColumnDirective 

                field="FirstName" 

                headerText="First Name" 

                width="110" 

              /> 

              <ColumnDirective 

                field="LastName" 

                headerText="Last Name" 

                width="110" 

              /> 

              <ColumnDirective field="Title" headerText="Name" width="150" /> 

              <ColumnDirective 

                field="Country" 

                headerText="Country" 

                width="110" 

              /> 

            </ColumnsDirective> 

            <Inject services={[DetailRow]} /> 

          </GridComponent> 

        </div> 

      </div> 

    ); 

  } 

} 

Index.css 

.e-grid .c-expanded td { 

  background-color: aqua; 

} 

.c-rowcell { 

  background-color: rgb(91, 247, 156); 

} 

Sample Link: https://stackblitz.com/edit/react-5vs99q?file=index.js 

Please get back to us if you need further assistance. 

Regards, 

Ajith G. 

[ONG YU FENG]

Hi Ajith

The solution is working great! thank you for your assistance 

Regards

Y

[Ajith Govarthan]

Hi ONG YU FENG, 

Thanks for the update. 

Query: The solution is working great! thank you for your assistance 

 

We are happy to hear that the provided solution resolved your reported issue. 

Please get back to us if you need further assistance. 

Regards, 

Ajith G. 

[Can]

Hello,

I also have the exact requirement; I achieved this using the provided example. Thanks for your response and detailed explanation!

There is only one issue left on my side. I'm using typescript and looking for a way to provide typing support on the classList property.

  const detailDataBound = (args: DetailDataBoundEventArgs) => {

    args?.detailElement?.parentElement?.previousSibling?.classList.add("c-expanded");

  };

The error is: Property 'classList' does not exist on type 'ChildNode'.

And I'm also looking for the argument type of the second parameter of gridRef.current.on method which is args:any at the moment.

  const onLoad = () => {

    if (gridRef && gridRef.current)

      gridRef.current.on("detail-state-change", (args: any) => {

        if (args.isExpanded) {

          args.detailElement.parentElement.classList.add("c-expanded");

        } else {

          args.detailElement.parentElement.classList.remove("c-expanded");

        }

      });

  };

[Joseph Christ Nithin Issack]

Hi Can,

  Greetings from Syncfusion support.

  Based on your query, you want to add the type of the args of the `detail-state-change` event and also add type to the `args?.detailElement?.parentElement?.previousSibling?.classList`. Please refer the below code example for more details.

 

 

const detailDataBound = (args: DetailDataBoundEventArgs) => {

  (

    args?.detailElement?.parentElement?.previousSibling as Element

  )?.classList.add('c-expanded');

};

 

const onLoad = () => {

  if (gridRef && gridRef.current)

  gridRef.current.on(

      'detail-state-change',

      (args: {

        data: object;

        childGrid: GridModel;

        detailElement: Element;

        isExpanded: Boolean;

      }) => {

        if (args.isExpanded) {

          args.detailElement.parentElement.classList.add('c-expanded');

        } else {

          args.detailElement.parentElement.classList.remove('c-expanded');

        }

      }

    );

};

 

Regards,

Joseph I.