This is a migrated thread and some comments may be shown as answers.

Problems with grid alignment.

2 Answers 44 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 20 Aug 2010, 03:27 PM
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;
}

2 Answers, 1 is accepted

Sort by
0
Chris
Top achievements
Rank 1
answered on 20 Aug 2010, 03:32 PM
Here's a screenshot of what it looks like on page load.
0
Pavlina
Telerik team
answered on 23 Aug 2010, 12:08 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Grid
Asked by
Chris
Top achievements
Rank 1
Answers by
Chris
Top achievements
Rank 1
Pavlina
Telerik team
Share this question
or