Grid Row Border Radius

[Eimantas Baigys]

Hello, I am trying to a border radius to a grid row for first and last columns. 

I noticed that border is set on <Td> elements so logic is pretty simple:

.e-grid .e-gridheader table tr th:first-child { border-radius: 50px 0 0 50px; }

.e-grid .e-gridheader table tr th:last-child { border-radius: 0 50px 50px 0; }

and it works as long as all columns are visible however, I hide first or last column I get this:

what happens here is that e-hide class is applied to column and it dissapears, but it still last column in the table so I still get border radius for a hidden column. Css selectors th:not(.e-hide):first-child, th:not(.e-hide):last-child or  th:first-child :not(.e-hide) , th:last-child :not(.e-hide) ​​does not work here.

Any ideas how I can achieve this for header and content rows?

[Monisha Saravanan]

Hi Elimantas,

Greetings from Syncfusion support.

We would like to inform that while hiding column/rows by applying (e-hide) it will hide the column/rows in CSS only. So if a style is applied to last hidden column will not be reflected in the previous column by default. So before proceeding further with your requirement kindly share the below mentioned details for further validation. So that we will check and update you the possibility of achieving your requirement using JavaScript

1. Share us the entire Grid code snippet.
2. Share us the way you have hide the last /first column. i.e.) By using column chooser or any other methods? If you have used any other methods then kindly share us in detail.
3. Share us the video demonstration of the issue.
4. If possible share us a simple issue reproduceable sample so that we will try to modify the sample as per your request using Javascript.

The above-requested details will be very helpful for us to validate the reported query at our end and provide the solution as early as possible.

Regards,

Monisha