Hi Please find the attached screenshot

Hello Dhaval,

If you inspect the header element through the developer tools of the browser, you can see that it has an inline width style set and in addition also the HeaderCaptionCssClass has a padding property which causes the border offset towards the rest of the columns. In this case I suggest to use the CssClass property to every column and set its width to that equivalent with the header. For your reference is attached a sample which demonstrates similar scenario. If you have any further questions, please feel free to contact me.

Sincerely,

Tsanna

Hi,

There is no HeaderCaptionCssClass used in grid. I have used only   Header-CssClass.I tried to remove pading using developer tools of the browser.But it does not make any difference.Also all the data columns have CssClass. pading removed for these columns using  developer tools of the browser.I could not see any change in the UI.

Thanks,

Albert

Hello Dhaval,

In this case I was referring to the HeaderCaptionCssClass which is applied by default to headers and has it's padding attribute set. You can look through the default styles of the WebDataGrid by inspecting its particular elements through the browser developer tools. As I suggested earlier, you can use the CssClass property to every column and set its width to the width of the header element, which you can see by inspecting the header element through the browser developer tools. Please refer to the previous attached sample which illustrates similar scenario. If you need more assistance, feel free to contact me.

Sincerely,

Tsanna

Hi Tsanna,

As per our discussion, I hace supplied  HeaderCaptionCssClass  which has the same attribute set of other headers.But it does not make any difference in the alignment.

But the alignment found to be set fine,

When I  selected the HTML code part of the header using developer tool  ,the inline style  width is given  in  px.

When I selected the HTML code part of the data column using developer tool ,the inline style width is given in percentage.

when I reduced the width in px ,alignment became correct.

But in the aspx page , the width of all column are specified in percentage. is there any alternate to solve this issue?

Thanks,

Hello Dhaval,

When you specify the width of the columns in percentage, then the width of the header is calculated automatically through the server and is rendered in pixels. Please note also that the header and the data columns are nested in separate tables, which causes the discrepancy between them. In this case if you want to correct the alignment between the header and the data columns, then you can set a Header-CssClass to every column and set a border rule which has to be equal to the border rule in the tbody.igg_Item>tr>td default class of the grid control. For instance is attached a sample with similar scenario. If you have any further questions regarding this matter please feel free to contact me.

Sincerely,

Tsanna

Hi Tsanna,

I am using IE9 browser

Thanks,

Hi Tsanna,

I am using IE9 browser.

Thanks,

Hello Dhaval,

Could you please provide me information about under which browser/browser mode/browser version you're facing this issue in order we are able to reproduce it. Looking forward to your reply.

Sincerely,

Tsanna

Hello Dhaval,

Thank you for the provided sample. I'm currently investigating this scenario and keep you posted of any available information. Please let me know for any additional questions in the meantime.

Sincerely,

Tsanna

i Tsanna,

The page does not use master page and grid is not inside user control.Also important attribute has been used in css class.

I have attached working sample with the css classes used in grid.

Thanks,