UI issues with hierarchical issues

[Sarang]

Hi,

Each level in hierarchical grid starts with empty TD on left hand side. That TD has 1px padding from all sides and has 20px width. Does anyone know how to fix this issue? I am not able to post the image of grid in post.

-Sarang

[Dimo]

Hello Sarang,

We plan to improve the rendering and styling abilities for these table cells for some of our next releases. In the meantime, you can set styles or CSS classes to the table cells, which wrap a DetailTable in ItemCreated:

C#

        protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
        {
            if (e.Item is GridNestedViewItem)
            {
                e.Item.Cells[0].CssClass = "DetailRowCell";
                e.Item.Cells[1].CssClass = "DetailRowCell";
            }
        }


CSS

.DetailRowCell
{
      padding: 0;
}


A similar and more complete example is available here:

http://www.telerik.com/community/code-library/aspnet-ajax/grid/how-to-obtain-reference-to-radgrid-detailtables-containing-rows-and-cells-and-customize-their-appearance.aspx

Regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Sarang]

Thanks a lot! You solution worked perfectly in my case. But I have one more problem. Every TR in the nested detail table starts with empty TD. It comes near the expand and collapse button. Can you please tell me how to add CSS ffor this TD?

Thanks,
Sarang

[Georgi Krustev]

Hello Sarang,

Thank you for getting back to us.

To achieve your goal you need to apply the appropriate CssClass when Grid's PreRender event is raised. Here is a code snippet showing how to achieve this:

    protected void RadGrid1_PreRender(object sender, EventArgs e)
    {
        ApplyStyleToNestedViewRecursive(RadGrid1.MasterTableView);
    }

    public void ApplyStyleToNestedViewRecursive(GridTableView gridTableView)
    {
        GridItem[] nestedViewItems = gridTableView.GetItems(GridItemType.NestedView);
        foreach (var nestedViewItem in nestedViewItems)
        {
            ((TableCell)nestedViewItem.Controls[0]).CssClass = "CssClassName";
            foreach (var nestedView in ((GridNestedViewItem)nestedViewItem).NestedTableViews)
            {
                if (nestedView.HasDetailTables)
                {
                    ApplyStyleToNestedViewRecursive(nestedView);
                }
            }
        }
    }

As you noticed the second method applies the required css class recursive.

Please give it a try and let me know if I can help you further.

Regards,
Georgi Krustev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.