[Solved] Problems with grid alignment.

[Chris]

Hello,

I'm trying to set up a grid where the rows and columns are dynamically added at runtime, and the user can click the cells in the grid to select individual items. We used text boxes within the grid to do it and it works, but we are having issues with the grid alignment.

The second I turn on UseStaticHeaders="true" the columns are slightly offset to the headers when page is loaded, then if you scroll to the right on the grid and try to resize a column the alignment goes wonky.

Here is my grid code and most of my code behind (simplified down as much as possible to still show the issue)

<telerik:RadGrid ID="RadGridStandard" OnDataBinding="RadGridStandard_DataBinding" 

    runat="server" Skin="WebBlue" GridLines="None" Width="1100px" >

    <MasterTableView EditMode="InPlace" TableLayout="Fixed" CommandItemDisplay="None" >

    </MasterTableView>

    <ClientSettings>

        <Scrolling AllowScroll="True" UseStaticHeaders="true" SaveScrollPosition="True" FrozenColumnsCount="1"  >

        </Scrolling>

        <Resizing AllowColumnResize="True"  EnableRealTimeResize="true"  />

        <ClientEvents  />

    </ClientSettings>

    <SelectedItemStyle BackColor="#FF8080" />

</telerik:RadGrid>

protected void Page_Load(object sender, EventArgs e)
{
    DataTable dt = MapDataFromCollectionToGrid(Constants.SecurityMode.Standard);
    RadGridStandard.PageSize = dt.Rows.Count;
    RadGridStandard.DataSource = dt;
    RadGridStandard.DataBind();
    SetUpKeys(RadGridStandard);
}
protected void RadGridStandard_DataBinding(object sender, EventArgs e)
{
    for (int i = 0; i < RadGridStandard.PageSize; i++)
    {
        RadGridStandard.EditIndexes.Add(i);
    }
}
private void SetUpKeys(RadGrid radGridSecurity)
{
    radGridSecurity.ClientSettings.Scrolling.FrozenColumnsCount = 1;
    radGridSecurity.CellPadding = 0;
    // Attach the event handlers to the client side events of the TextBoxes.
    foreach (GridDataItem item in radGridSecurity.MasterTableView.Items)
    {
        if (item != null)
        {
            for (int i = 2; i < radGridSecurity.MasterTableView.RenderColumns.Length; i++)
            {
                GridColumn column = radGridSecurity.MasterTableView.RenderColumns[i];
                if (item[column.UniqueName].Controls.Count > 0)
                {
                    column.HeaderStyle.Width = 90;
                    item[column.UniqueName].Style["Padding"] = "0";
                    item[column.UniqueName].CssClass = "GridItem";
                    item[column.UniqueName].BorderColor = Color.LightGray;
                    TextBox textBox = (item[column.UniqueName].Controls[0]) as TextBox;
                    if ((textBox != null))
                    {
                        textBox.ReadOnly = true;
                        textBox.Attributes.Add("class", "readOnly");
                        textBox.CssClass = "GridAltRow_WebBlue";
                        textBox.BorderStyle = BorderStyle.None;
                        textBox.Width = 90;
                    }
                }
            }
        }
    }
}
private DataTable MapDataFromCollectionToGrid(string mode)
{
    ApplicationRoleList applicationRoleColl = LoadRoles();
    DataTable dt = new DataTable();
    //Set the columns
    dt.Columns.Add("PageName");
    foreach (ApplicationRoleType appRole in applicationRoleColl)
    {
        dt.Columns.Add(appRole.Name);
    }
    ApplicationPageRoleCollection appPageRoles = LoadPageRoles(mode);
    string laststring = string.Empty;
    //Set the rows has to be sorted by pagename
    foreach (ApplicationPageRoleType d in appPageRoles)
    {
        if (d.PageName != laststring)
        {
            DataRow drGridRow = dt.NewRow();
            dt.Rows.Add(drGridRow);
            drGridRow["PageName"] = d.PageName;
        }
        if (d.RoleName == "")
        {
            d.RoleName = Constants.SecurityMode.Administrator;
        }
        dt.Rows[dt.Rows.Count - 1][d.RoleName] = d.AccessLevel;
        laststring = d.PageName;
    }
    return dt;
}

[Chris]

Here's a screenshot of what it looks like on page load.

[Pavlina]

Hi Chris,

Thanks for the sample code. However, we cannot reproduce the behavior you are describing. I took the sample code you provided and put it in a sample page following a similar scenario you have. I am attaching the page for your reference. Please let me know if you manage to reproduce what you are getting in this project,  and what steps to follow, so that we can test it too.

Regards,
Pavlina
the Telerik team