Customize cell style in grid

[Carlo]

Greetings. I'd like to reduce the grid cell padding and the row height (so that more content is displayed in the same space) by setting a custom css class. I'd like to set this up so that I only have to override the properties that I want to change. I've checked out the following post:

https://www.syncfusion.com/forums/117510/customizing-the-default-css-theme

the only problem with this approach is that the file "custombutton.css" contains a lot more css than the part which is being overridden, which should be just this:

.redButton.ejinputtext {

  background-color: white;

  border: 1px solid #bbbcbb;

  color: #5c5c5c;

  outline: medium none;

}

..instead, there's a lot more in that "custombutton.css"

For the sake of testing, I tried to follow that approach, doing the following:

1) added this to my grid declaration: .CssClass("myTest")

2) added this to the head of the page, so that my custom css file is loaded: <link rel='nofollow' href="@Url.Content("~/Content/custom/test.css")" rel="stylesheet" />

3) inside test.css I've put the following:

    .myTest.e-rowcell {

background-color: green;

}

Unfortunately this doesn't seem to work. Maybe, like in the button example, I have to put some other lines in my test.css file? Which lines should I add? 

Thanks a lot for your kind help

p.s. I'm using syncfusion 2015 vol 3 13.3.0.7

[Ragavee U S]

Hi Carlo,

Query #1: I'd like to reduce the grid cell padding and the row height (so that more content is displayed in the same space) by setting a custom css class

We analyzed your requirement to customize the grid appearance using custom CSS. We have discussed on this topic in our below Knowledge base links.

https://www.syncfusion.com/kb/4266/how-to-modify-the-grid-row-height

https://www.syncfusion.com/kb/5172/how-to-customize-grid-appearance-using-custom-css

Please refer to the above links in order to achieve your requirement.

Query #2: Unfortunately this doesn't seem to work. Maybe, like in the button example, I have to put some other lines in my test.css file? Which lines should I add? 

If you defining the custom CSS externally using a separate css file, then we suggest you to refer this css file after referring our syncfusion css files such that our classes will be overridden by your custom css. By this way, it will be convenient for you even if you make any changes to the layout or the themes to override css of our controls.

Regards,
Ragavee U S.

[Carlo]

Thanks for the tips. Following your advices I've been partly able to customize the grid to suit my needs. I've run into a problem though:

-> I'm in a master-detail grid scenario, and my task is to reduce the row height as much as possible (both for parent and child grid), so that more rows are displayed in the same space. So, I've prepared this custom style:

    <style type="text/css">

.e-grid .e-rowcell {

line-height: 20px;

    font-size: 12px;

    padding: 0px 2px 0px 2px;

}

.e-grid .e-headercelldiv{ 

    font-weight:bold;

    font-size: 12px;

}

    </style>

The problem with this is that child rows have the correct size, while parent rows are higher. If I comment out the child grid, then the parent rows are displayed correctly. In this scenario parent rows don't have the expand arrow (because, of course, I've commented out the child grid), and that is pretty much the only difference. So, maybe I have to set some css properties for the expand arrow in order to make it resize to the correct height? I've included a couple of screenshots to help you better understand my scenario.

Attachment: wrong_parent_row_height_2890d810.zip

[Saravanan Arunachalam]

Hi Carlo,

The cause of the issue can be the height of expand and collapse button is overwrite on the parent Grid cells. So, overwrite the CSS of expand and collapse button of parent Grid control. Please refer to the below code example.

.e-grid .e-icon.e-gdiagonalnext,

.e-grid .e-icon.e-gnextforward{

    margin-top: 2px;               

}

.e-grid .e-recordpluscollapse>div,

.e-grid .e-detailrowcollapse>div,

.e-grid .e-recordplusexpand>div,

.e-grid .e-detailrowexpand>div{

   height:8px;

}

Regards,

Saravanan A.

[Carlo]

Excellent! The solution you proposed worked right out of the box. One last thing, which I couldn't find how to fix is the following:

in this parent-child grid scenario, the child grid has a double border on the left. I want the outer border on the left to be removed. It's much easier to explain through a picture, so I included 2 pics: wrong and right:

wrong.png -> shows the current layout and the left outer border which I want to remove

right.png -> shows the layout which I'm trying to achieve.

I'm guessing that there's probably some CSS setting to do this, but I couldn't find it..

Thanks a lot for your kind help!

Attachment: outerBorder_20e29594.zip

[Seeni Sakthi Kumar Seeni Raj]

Hi Carlo,

To hide the outer border of the Child Grid, please refer to the following code example and screenshot. It will override the detailcell padding and border style given.

<style>

        .e-grid .e-detailcell {

            padding: 0px;

            border-top-style: none;

        }
    </style>

Regards,
Seeni Sakthi Kumar S.

[Carlo]

Thanks for the fix, it works as intended. Sorry for the late answer but in the last few weeks I've been assigned to a different project but now I'm back on this one which uses syncfusion components so stay tuned for more questions =) Have a nice day

[Alan Sangeeth S]

Hi Carlo,

Thanks for the update.

Please let us know if you need any further assistance. We will be happy to help you.

Regards,
Alan Sangeeth S

[Carlo]

Hi Carlo,

Thanks for the update.

Please let us know if you need any further assistance. We will be happy to help you.

Regards,
Alan Sangeeth S

Well, there's one more requirement which I've been asked to met, regarding the grid aesthetic appeareance: I need to add some top and bottom margin in the detail grid of each row, so that the difference between master and detail rows is more explicit. I've included 2 pics so that it will be easier for you to exactly figure out my requirement. I've taken a look here (https://www.syncfusion.com/kb/5172/how-to-customize-grid-appearance-using-custom-css) but I couldn't find any css class specific for each child grid.

As always, thanks for your kind help.

Attachment: top_bottom_margin_detailgrid_in_masterdetail_b95aad39.7z

[Saravanan Arunachalam]

Hi Carlos,

We have analyzed your screenshot and achieved your requirement by overriding the CSS of “e-detailindentcell” class and refer to the below code example.

.e-grid .e-detailindentcell{

                border-top-width: 1px;

               border-top-style: solid;

               border-top-color: #c8c8c8

   

  }

  .e-grid .e-detailindentcell{

             border-right-width: 0px;

  }

Regards,

Saravanan A.

[Carlo]

Greetings. I tried the proposed solution, but unfortunately it doesn't work. I tried to add other properties to the css class you pointed out, just to see if they had any kind of effect, but it looks like they are doing absolutely nothing. To help you figure out what's wrong, here's the custom css which I'm currently using for the grid (it provides other visual customizations which I need, and it works):

@section StyleSection{

    <style type="text/css">

.e-grid .e-rowcell {

line-height: 20px;

    font-size: 12px;

    padding: 0px 2px 0px 2px;

}

.e-grid .e-headercelldiv{ 

    font-weight:bold;

    font-size: 12px;

}

.e-grid .e-icon.e-gdiagonalnext,

.e-grid .e-icon.e-gnextforward{

    margin-top: 2px;               

}

.e-grid .e-recordpluscollapse>div, 

.e-grid .e-detailrowcollapse>div, 

.e-grid .e-recordplusexpand>div, 

.e-grid .e-detailrowexpand>div{

   height:8px;

}

.e-grid .e-detailcell {

    padding: 0px;

    border-top-style: none;

}

    </style>

    }

[Saravanan Arunachalam]

Hi Carlos,

We are sorry for the inconvenience.

We have analyzed the provided CSS code and we have achieved your requirement by modifying the CSS of detailcell (.e-grid .e-detailcell) class and also include the CSS provided in our previous update which we updated on 15^th December 2015. Please refer to the below code example.

      /*Modified CSS*/

      .e-grid .e-detailcell {

                padding: 13px;

                border-top: 1px;

                border-top-color: #c8c8c8;

                border-top-style: solid;

      }

      /*CSS in our previous update*/

         .e-grid .e-detailindentcell{

          border-top-width: 1px;

          border-top-style: solid;

          border-top-color: #c8c8c8;

          border-right-width: 0px;

      }

Regards,

Saravanan A.

[Carlo]

excellent! your proposed fix is working exactly as intended! thanks a lot for your effort, have a nice day my friend!

[Saravanan Arunachalam]

Hi Carlos,

Thanks for your update.          

We are happy that the provided information helped you.

Regards,

Saravanan A.