[Solved] Rad Grid Alignment

[Gagan Garg]

Hi

I am attaching a capture.jpg file in which a snap shot of rad grid is exist.

In the Attachment i have grid header alignment issue.
can any one gives a solution.

Thanks is advance.

[Princy]

Hi,

Try setting the  TableLayout property of the MasterTableView to true. This will adjust the width of the columns based on the content . Also set the MastertableView width to a fixed value.

Thanks,
Princy

[Gagan Garg]

thanks your reply

i already tried table Layout propety is set to fixed.

my problem is that

I have a rad grid in which we have 10 columns.
Initially 3 columns are visible to the user.
We are hiding and showing columns at client side.
then the grid alignmnet does not appear consistantly.

Plz see the attached pics 

[Dimo]

Hello Gagan Garg,

When scrolling with static headers is used, the columns may not expand to the right edge of the control. This depends on the vertical scrollbar, control configuration and browser. The background image at the top-right RadGrid area is intended to fill the empty area, which has no header cells. However, this background image cannot expand vertically to match any header height - it is always as high as a single-row header. If the RadGrid header has a different height in your case, you have the following alternative options:

1) Remove the misaligned image by setting a rgNoScrollImage CSS class to RadGrid
2) Apply a two-row background image by setting a rgTwoLines CSS class to RadGrid - this will work if you have not changed the header font-size, line height or vertical cell paddings
3) Create an image, which matches the header height in your case (e.g. from a screenshot) and apply it to the outer RadGrid <div>. At the same time, you have to set the CSS class from (1).

div.RadGrid_SkinName
{
        background: repeat-x  0  0  url(.........) ;
}


Sincerely yours,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Gagan Garg]

How to Remove the misaligned image by setting a rgNoScrollImage CSS class to RadGrid

and second problem looks like this please see the attachment

[Gagan Garg]

attachment

[Dimo]

Hi Gagan Garg,

Well, how do you set a CSS class to a server control? By using the CssClass property.

<telerik:RadGrid  CssClass="rgNoScrollImage"  />

As for the second problem, it looks like you are using a Fixed TableLayout for the MasterTableView and have specified widths to only some of the columns. Please set column widths for all columns, or remove all column widths, or set TableLayout="Auto". Depending on the RadGrid configuration, TableLayout cannot be set to "Auto" in some cases, so I recommend you to set appropriate column widths.

Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Gagan Garg]

Thanks your reply

Yes I set table layout propertyof master table view is fixed.

but i did't define any width of any column.

Than how to handle it.

I have 15 columns at design time but when first time load grid only show's three column as in earlier attachment.

[Dimo]

Hello Gagan Garg,

I did a couple of tests and indeed it seems that the RadGrid control your scenario is not behaving as expected. We will need to research and fix that for some of our next releases. Sorry about the inconvenience.

In the meantime, you can use the following workaround - subscribe to the RadGrid's OnColumnShown and OnColumnHidden client event handlers and modify the MasterTableView's width, so that the column widths are OK. Here is a simple example:

<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    Skin="Office2007"
    AutoGenerateColumns="false"
    EnableHeaderContextMenu="true"
    OnNeedDataSource="RadGrid_NeedDataSource">
    <MasterTableView TableLayout="Fixed" HeaderStyle-Width="100px">
        <Columns>
            <telerik:GridBoundColumn DataField="Column1" HeaderText="Column1" />
            <telerik:GridBoundColumn DataField="Column2" HeaderText="Column2" />
            <telerik:GridBoundColumn DataField="Column3" HeaderText="Column3" />
            <telerik:GridBoundColumn DataField="Column4" HeaderText="Column4" Display="false" />
            <telerik:GridBoundColumn DataField="Column5" HeaderText="Column5" Display="false" />
            <telerik:GridBoundColumn DataField="Column6" HeaderText="Column6" Display="false" />
            <telerik:GridBoundColumn DataField="Column7" HeaderText="Column7" Display="false" />
            <telerik:GridBoundColumn DataField="Column8" HeaderText="Column8" Display="false" />
        </Columns>
    </MasterTableView>
    <ClientSettings>
        <Scrolling AllowScroll="true" UseStaticHeaders="true" />
        <ClientEvents OnColumnShown="MyColumnShown" />
    </ClientSettings>
</telerik:RadGrid>

<script type="text/javascript">

function MyColumnShown(sender, args)
{
    var tblHead = sender.get_masterTableViewHeader().get_element();
    tblHead.style.width = tblHead.offsetWidth + 100 + "px";

    var tbl = sender.get_masterTableView().get_element();
    tbl.style.width = tbl.offsetWidth + 100 + "px";
}

</script>

protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    DataTable dt = new DataTable();
    DataRow dr;
    int colsNum = 10;
    int rowsNum = 15;
    string colName = "Column";

    for (int j = 1; j <= colsNum; j++)
    {
        dt.Columns.Add(String.Format("{0}{1}", colName, j));
    }

    for (int i = 1; i <= rowsNum; i++)
    {
        dr = dt.NewRow();

        for (int k = 1; k <= colsNum; k++)
        {
            dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);
        }
        dt.Rows.Add(dr);
    }

    (sender as RadGrid).DataSource = dt;
}

Regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.