[Solved] Horizontal align checkbox in self hierarchy grid

[Mattias]

Hi, I can't figure out why the checkboxes doesn't align correct. Can you help me?
See printscreen

<telerik:RadGrid ID="radGridDivisions" runat="server" AllowPaging="false"
            AllowSorting="false" AutoGenerateColumns="False" GridLines="Horizontal"
            oninsertcommand="radGridDivisions_InsertCommand"
            onupdatecommand="radGridDivisions_UpdateCommand"
            ondeletecommand="radGridDivisions_DeleteCommand"
            onitemdatabound="radGridDivisions_ItemDataBound"
            onneeddatasource="radGridDivisions_NeedDataSource"
            OnColumnCreated="radGridDivisions_ColumnCreated"
            OnItemCreated="radGridDivisions_ItemCreated"
            Skin="Default" ShowHeader="true">
            <ClientSettings AllowExpandCollapse="true" />
            <mastertableview commanditemdisplay="Top" datakeynames="ID, ParentID"
                editmode="EditForms" name="Master" nomasterrecordstext="Det finns inga divisioner"
                HierarchyDefaultExpanded="true" HierarchyLoadMode="Client">
                <SelfHierarchySettings ParentKeyName="ParentID" KeyName="ID" />

            <commanditemsettings addnewrecordtext="Lägg till" refreshtext="Uppdatera" />
            <Columns>
                <telerik:GridBoundColumn UniqueName="ID" DataField="ID" HeaderText="Id" Visible="false" />
                <telerik:GridBoundColumn UniqueName="ParentID" DataField="ParentID" HeaderText="Parent Id" Visible="false" />
                <telerik:GridBoundColumn UniqueName="Name" Headertext="Division" DataField="Name" />
                <telerik:GridCheckBoxColumn UniqueName="IsEnabled" HeaderText="Aktiverad" DataField="IsEnabled" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" />
                <telerik:GridDateTimeColumn DataField="CreateDate" DataFormatString="{0:g}"
                    HeaderStyle-HorizontalAlign="Right" HeaderText="Skapad"
                    ItemStyle-HorizontalAlign="Right" ReadOnly="true" UniqueName="CreateDate" SortExpression="e.CreateDate">
                    <HeaderStyle HorizontalAlign="Right" />
                    <ItemStyle HorizontalAlign="Right" />
                </telerik:GridDateTimeColumn>

                <telerik:GridEditCommandColumn CancelText="Avbryt" EditText="Ändra" InsertText="Spara" UpdateText="Spara" ButtonType="ImageButton" UniqueName="EditCommandColumn">
                    <HeaderStyle HorizontalAlign="Right" Width="20" />
                    <ItemStyle HorizontalAlign="Right" Width="20" />
                </telerik:GridEditCommandColumn>
                <telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Delete"
                ConfirmText="Är du säker på att du vill radera denna division?"
                ConfirmTitle="Delete" ItemStyle-HorizontalAlign="Right" ItemStyle-Width="20px"
                Text="Radera" UniqueName="DeleteColumn">
                    <ItemStyle HorizontalAlign="Right" Width="20px" />
                </telerik:GridButtonColumn>
            </Columns>
            </mastertableview>
        </telerik:RadGrid>

protected void Page_Load(object sender, EventArgs e)
        {
            radGridDivisions.MasterTableView.FilterExpression = "ParentID.Equals(Guid.Empty)";

        }


        public void Page_PreRenderComplete(object sender, EventArgs e)
        {
            HideExpandColumnRecursive(radGridDivisions.MasterTableView);
        }

        public void HideExpandColumnRecursive(GridTableView tableView)
        {
            GridItem[] nestedViewItems = tableView.GetItems(GridItemType.NestedView);
            foreach (GridNestedViewItem nestedViewItem in nestedViewItems)
            {
                foreach (GridTableView nestedView in nestedViewItem.NestedTableViews)
                {
                    nestedView.Style["border"] = "0";

                    Button MyExpandCollapseButton = (Button)nestedView.ParentItem.FindControl("MyExpandCollapseButton");
                    if (nestedView.Items.Count == 0)
                    {
                        if (MyExpandCollapseButton != null)
                        {
                            MyExpandCollapseButton.Style["visibility"] = "hidden";
                        }
                        nestedViewItem.Visible = false;
                    }
                    else
                    {
                        if (MyExpandCollapseButton != null)
                        {
                            MyExpandCollapseButton.Style.Remove("visibility");
                        }
                    }

                    if (nestedView.HasDetailTables)
                    {
                        HideExpandColumnRecursive(nestedView);
                    }
                }
            }
        }


        protected void radGridDivisions_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
        {
            //int recordCount;
            string search = textBoxSearch.Text.Trim();

            //foreach (Division d in DivisionService.GetDivisions())
              //  Response.Write(d.Name);

            radGridDivisions.DataSource = DivisionService.GetDivisions();//.GetDivisions(null, search, "", 0, 0, out recordCount);
            //radGridDivisions.VirtualItemCount = recordCount;
        }


        protected void radGridDivisions_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
        {
            if (e.Column is GridExpandColumn)
            {
                e.Column.Visible = false;
            }
            else if (e.Column is GridBoundColumn)
            {
                //e.Column.HeaderStyle.Width = Unit.Pixel(100);
            }
        }

        protected void radGridDivisions_ItemCreated(object sender, GridItemEventArgs e)
        {
            //CreateExpandCollapseButton(e.Item, "Name");

            //Response.Write(e.Item.GetType().ToString() + "<br />");
            if ((e.Item is GridHeaderItem || e.Item is GridCommandItem) && e.Item.OwnerTableView != radGridDivisions.MasterTableView)
            {
                e.Item.Style["display"] = "none";
            }
            /*
            if (e.Item is GridHeaderItem && e.Item.OwnerTableView != radGridDivisions.MasterTableView)
            {
                e.Item.Style["display"] = "none";
            }
            */
            if (e.Item is GridNestedViewItem)
            {
                e.Item.Cells[0].Visible = false;
            }




        }


        public void CreateExpandCollapseButton(GridItem item, string columnUniqueName)
        {
            if (item is GridDataItem)
            {
                if (item.FindControl("MyExpandCollapseButton") == null)
                {
                    Division division = (Division)item.DataItem;

                    Button button = new Button();
                    button.Click += new EventHandler(button_Click);
                    button.CommandName = "ExpandCollapse";
                    button.CssClass = (item.Expanded) ? "rgCollapse" : "rgExpand";
                    button.ID = "MyExpandCollapseButton";

                    if (item.OwnerTableView.HierarchyLoadMode == GridChildLoadMode.Client)
                    {
                        string script = String.Format(@"$find(""{0}"")._toggleExpand(this, event); return false;", item.Parent.Parent.ClientID);

                        button.OnClientClick = script;
                    }

                    int level = item.ItemIndexHierarchical.Split(':').Length;
                    if (level > 1)
                    {
                        button.Style["margin-left"] = level + 10 + "px";
                    }

                    TableCell cell = ((GridDataItem)item)[columnUniqueName];
                    cell.Controls.Add(button);
                    cell.Controls.Add(new LiteralControl("&nbsp;"));
                    cell.Controls.Add(new LiteralControl(division.Name));
                    //cell.Controls.Add(new LiteralControl(((GridDataItem)item).GetDataKeyValue("ID").ToString()));
                }
            }
        }

        void button_Click(object sender, EventArgs e)
        {
            ((Button)sender).CssClass = (((Button)sender).CssClass == "rgExpand") ? "rgCollapse" : "rgExpand";
        }


        protected void radGridDivisions_ItemDataBound(object sender, GridItemEventArgs e)
        {

            CreateExpandCollapseButton(e.Item, "Name");

            GridDataItem gridItem;
            GridEditFormItem gridEditItem;
            Division division;


            switch (e.Item.OwnerTableView.Name)
            {
                case "Master":

                    if (e.Item is GridDataItem)
                    {
                        gridItem = (GridDataItem)e.Item;
                        division = (Division)gridItem.DataItem;




                    }

                    break;
            }


        }

[Mattias]

Hmm, I see that your demo has the same problem!
http://demos.telerik.com/aspnet-ajax/grid/examples/hierarchy/selfreferencing/defaultcs.aspx
If you look at the border in the second row, there is one or two pixels wrong compare to row one.

And it gets even worse when editing a row! :(
Maybe it isn't possible to align the columns in a straight line?  

[Dimo]

Hello Mattias,

You can align the columns perfectly in the online demo by adding the following CSS rule:

.RadGrid  td
{
        padding: 0 ;
}


The small misalignment is caused by the default padding of 1px, which is applied by the browser to the table cells that hold the detail tables. The above CSS rule will reset this padding.

From this point on, you should make sure that the TableLayout of the MasterTableView is set to "Fixed" and all master and detail columns have the same column widths specified (using HeaderStyle-Width, not ItemStyle-Width). Alternatively, no column widths should be specified at all, as in the online demo.

Greetings,
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.

[Mattias]

Hi,
Now I have come a little bit further!
The grid looks good when loading the page. But when editing/adding a row the design crashes.
Do you have a nice fix for this?
You can see whats happens on the print screens:
http://www.svenskwebbhandel.se/print1.gif
http://www.svenskwebbhandel.se/print2.gif

Regards,
Mattias

[Mattias]

Fixed it! :)

.selfHierarchyTable .rgExpandCol
{
    display:none !important;
}