How to remove collapse and expand button column in kendo react grid UI

[Nitin]

As I shown in the attached jpg file, I want to remove the first column which is showing the expand button (+) using Kendo React. As I'm a new to kendo react I have tried by setting this column width to zero but the css is not applying it. Then I have tried to apply width using the query selector but that was also not worked. I also tried by applying "display: none" to .k-hierarchy-cell, its working and hiding that first column but it is shrinking the next column to its size. Please guide me on this for expanded rows. 

[Konstantin Dikov]

Hi Nitin,

In order to hide the column you can just remove the onExpandChange event handler and there should be no auto-generated expand/collapse column. In the following example you can see how a custom column is used for expanding/collapsing and the default one is not visible (due to the removed onExpandChange):

• https://stackblitz.com/edit/react-eh2ndd-7jskr9?file=app%2Fmain.jsx,index.html

As for removing the expand column with CSS, here is an example demonstrating this approach:

• https://stackblitz.com/edit/react-eh2ndd?file=index.html

            <style>
            .k-grid th:nth-child(1),
            .k-grid col:nth-child(1),
            .k-grid td:nth-child(1){
                display: none;
            } 

You can add custom class name to the Grid and include it in the CSS selectors, so it can be applied to that particular Grid only. 

Hope this helps.

 

Regards,
Konstantin Dikov
Progress Telerik

[Nitin]

thanks @Konstantin Dikov it's working.