Hello Dhaval,

Thank you for your update. Can you please let me know if there is any specific difference between the grids on which the border is applied and the other on which it is not like  usage of master page or grids are in user control. Also does it help if you force the border with !important attribute? The class you have assigned to every column is ig_header. Is this class defined in a css file which you reference in all the pages? If so can you please confirm that this file is referenced on the pages on which you are facing visual issues. It would be also great appreciated if you can provide a working sample in order to be reproduced the actual behavior. Looking forward to hearing from you.

Sincerely,

Tsanna

Hi Tsanna,

There is already a Header-CssClass to every column and set a border rule .All the web data grid in the application uses same Header-CssClass .

The alignment is broken only for few grids.

Given below is the sample code used for the grid.Border rule is same for both header and data columns.

<LinkGrid:WebDataGrid ID="XXXX" EnableDataViewState="false" Height="0px"

OnInitializeRow="xxxx" OnItemCommand=" XXXXXX "

AltItemCssClass="docGrd_Alternate" ItemCssClass="docGrd_Row" Width="100%" AutoGenerateColumns="false"

CssClass="doc_GridStyle" runat="server" DataKeyFields="XXXX">

<Columns>

<LinkGrid:BoundDataField CssClass="docGrd_Border" DataFieldName="XXXX" DataFormatString="{0:dd-MMM-yyyy}"

Width="10%" Key="XXXX" Header-CssClass="ig_Header">

<Header Text="Date" />

</LinkGrid:BoundDataField>

<LinkGrid:BoundDataField CssClass="docGrd_Border" DataFieldName="XXXX" Width="5%"

Key="XXX" Header-CssClass="ig_Header">

<Header Text="XXXX" />

</LinkGrid:BoundDataField>

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,

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,

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