I want to change the color of the complete row in grid , when a button that is present in the row is clicked.

Question

In this grid, the column (project name) is a button with dynamic button text . i want to change the background color of the complete row when the button present in the row is clicked.

The column project name consists of button with dynamic text.

the project name is a button and i want that when user click on this , the background color of row should change to green.

Rajapandiyan Settu · Accepted Answer

Hi Abhishek,

Thanks for contacting Syncfusion support.

Based on your requirement, you want to change the background color of the row when the button is clicked. You can achieve your requirement by using the below way.

In the button click event, we dynamically add the custom class to the closest tr element. Using this custom class you can customize the style of the tr element.

columnTemplate: https://ej2.syncfusion.com/react/documentation/grid/columns/column-template/

[index.js]

export class Default extends SampleBase {

template(props) {

var cellValue = props[props.column.field];

// render the button and bind click event

return <button onClick={this.btnClick.bind(this)}>{cellValue}</button>;

}

btnClick(args) {

if (args.target && args.target.closest('tr')) {

args.target.closest('tr').classList.add('customrow'); // add a custom class to the closest tr element

}

render() {

return (

<ColumnDirective

field="CustomerName"

headerText="Customer Name"

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

width="150"

></ColumnDirective>

</ColumnsDirective>

</GridComponent>

</div>

);

}

[index.html]

<style>

// apply css based on custom class

.e-grid .customrow,

.e-grid .customrow td.e-active {

background: green;

}

</style>

Sample: https://stackblitz.com/edit/react-vfxcss?file=index.js

Please get back to us if you need further assistance with this.

Regards,

Rajapandiyan S

Abhishek Rana · Answer

https://stackblitz.com/edit/react-vfxcss?file=index.js can you please Apply this in a function component instead of a class component.

Rajapandiyan Settu · Answer

Hi Abhishek, Thanks for your update.As per your request, we prepared the same sample with
functional component. You can get it from the below link,Sample: https://stackblitz.com/edit/react-xa25ij-3zxv2j?file=component%2Fapp.jsxPlease get back to us if you need further assistance.Regards, Rajapandiyan S

Abhishek Rana · Answer

I tried this method, its changing color on click . but sorry , i forgot to mention that i am using template to redirect on button click , so i cannot apply another template in the same column directive. ( )} /> I want to redirect and change color on same click event.

Rajapandiyan Settu · Answer

Hi Abhishek, Before proceeding with your query, we need few more
information on your requirement.
 Are you want to redirect
     to another page when clicking the button?
 Are you want to perform
     the action like hyperlink?
 Or, are you want to
     render another element on button click?
Regards, Rajapandiyan S

Abhishek Rana · Answer

HI Rajapandiyan,there is a grid on the page  when you click on the button present in the grid ,it divides the page into two equal half, one side having the same grid and other side showing the information on the button click. as shown in the images down.I want a way to highlight the grid row on which the button is clicked , so it can be easily identified that which row data is being watched.P.S. - For the redirection Part , you can refer to URL shown in the screenshots attached.

after clicking button(project name) , it shows details in the right side. I want to highlight the row which button is clicked and also show the details at the same time.

Attachment: AllProjects_867a9097.zip

Abhishek Rana · Answer

I know you guys are super busy and very helpful too. But if possible then try to reply fast.Thank you in advance

Rajapandiyan Settu · Answer

Hi Abhishek, Sorry
for the inconvenience caused. We will try to provide the response as fast as we
can.To provide
a better solution, we need to understand your issue clearly at our end.
 Is the background color removed
     from the row when navigating to another page by history.push?
 What
     are the issues you have faced when navigating to another page?
 Are you able to navigate
     to another page on a button click (inside the Grid)?
 Share the video demo of
     the issue, it will very helpful to understand the issue. (Highly recommended)
Regards, Rajapandiyan S

Abhishek Rana · Answer

Hello!thank you for you fast reply,Here the thing is that only one thing is working , either the row is getting highlighted on the button clicked or the page get redirected . this is happening because i can use only one template in the column directive (either the highlighting one or the redirecting one﻿﻿).I have attached the code file (All Projects) in the previous response  .   Screen Recording (https://drive.google.com/file/d/1Qg3CtSJAJV-Ul30UDhF_K7cqRbkUl3UZ/view?usp=sharing)I have attached the screen recording.Attachment: Rec_1cfccd08.zip

Rajapandiyan Settu · Answer

Hi Abhishek,Thanks for
sharing the details.By analyzing your query, we suspect that the Grid got
refreshed when executing the history.push() method in the button click. We have
to prepare the sample with React Router to analyze this behavior at our end.
So, we will update the further details on or before May 2nd, 2022.We appreciate your patience until then.Regards,Rajapandiyan S

Abhishek Rana · Answer

okay, will be waiting for your response . Reply as soon as possible.Thanks in Advance.

Abhishek Rana · Answer

Hello syncfusion Team, you can close this forum. I was able to achieve the requirement .thank you for assistance.

Rajapandiyan Settu · Answer

Hi Abhishek,We are glad to hear that you have resolved the reported
problem by yourself.Please get back to us if you need further assistance.Regards,Rajapandiyan S