CODEWITHSUNDEEP
javascriptjquerycsskendo-grid
user2091061
user2091061

Reputation: 877

Show Vertical gridlines in column headers of hierarchical Kendo Ui Grid only

enter image description here

My requirement is something like as shown in the image. Every hierarchical grid contains the actual data and its header "Nancy" corresponds to the name of the client whose data is being shown. Main headers also show the same column name as shown in each hierarchical grid. I have so far accomplished this but the problem is that I am not able to remove the vertical gridlines only from the top main header. It is still coming as shown in figure below :

enter image description here

I want to remove the gridlines in the columns where client's name comes. If I use the following code, then it removes gridlines from the inner grids as well.

.k-grid td {border-width: 0;}

I want to hide the gridlines only in the header of each hierarchical grid where the client name appears ("Nancy")

On using the above style, it has started coming as : enter image description here

It has removed gridlines from every grid which is not what I want.

Upvotes: 0

Views: 2370

Answers (2)

dimodi
dimodi

Reputation: 4139

It is possible to remove the master row borders, as shown by HemantD, but is recommended to keep the cells' vertical border widths in the header and data area consistent, otherwise you may observe misalignment in Internet Explorer. The same applies for side cell paddings. That's why I would suggest changing the cell border color only:

.k-grid .k-master-row > td {
    border-color: transparent;
}

You can even do that only for the left borders:

.k-grid .k-master-row > td {
    border-left-color: transparent;
}

Upvotes: 1

Hemant D
Hemant D

Reputation: 192

try with below css

.k-grid tr.k-master-row td {border-width: 0;}

Upvotes: 1

Related Questions