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

RadGridView GridViewTemplate

9 Answers 842 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Dilshod
Top achievements
Rank 1
Dilshod asked on 22 Feb 2018, 01:36 PM

Hey guys,

My issue is to show some field value (readonly) from parent object in child view template, so that the first comes parent's field value and below it goes detail rows as usual. 

In my example I had to add unnecessary public List<string> Details { get; } = new List<string>(); property to make second tab. 

Is it possible to add some control to GridViewTemplate without using multiple child views? 

Prepared example:

public sealed class Student
    {
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string AdditionalInfo { get; set; }
        public List<Award> Awards { get; } = new List<Award>();
        public List<string> Details { get; } = new List<string>();
 
        public static List<Student> GenerateList()
        {
            var students = new List<Student>();
            for (int studentIndex = 1; studentIndex <= 5; studentIndex++)
            {
                var student = new Student()
                {
                    Id = studentIndex,
                    FirstName = $"FirstName {studentIndex}",
                    LastName = $"LastName {studentIndex}",
                    AdditionalInfo = $"blah blah blah....  {studentIndex}"
                };
 
                for (int awardIndex = 1; awardIndex <= 5; awardIndex++)
                {
                    var award = new Award()
                    {
                        FundName = $"FundName {awardIndex}",
                        Amount = studentIndex * 100 + awardIndex,
                    };
 
                    student.Awards.Add(award);
                     
                }
 
                student.Details.Add($"unused text {studentIndex}");
 
                students.Add(student);
            }
 
            return students;
        }
    }
 
    public sealed class Award
    {
        public string FundName { get; set; }
        public double Amount { get; set; }
    }
 
public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
 
            radGridView1.ReadOnly = true;
            radGridView1.Columns.Add(new GridViewTextBoxColumn("FirstName"));
            radGridView1.Columns.Add(new GridViewTextBoxColumn("LastName"));
 
            GridViewTemplate childTemplate2 = CreateChildTemplate2();
            GridViewRelation relation2 = new GridViewRelation(this.radGridView1.MasterTemplate, childTemplate2);
            relation2.ChildColumnNames.Add("Details");
            this.radGridView1.Relations.Add(relation2);
 
            GridViewTemplate childTemplate1 = CreateChildTemplate1();
            GridViewRelation relation = new GridViewRelation(this.radGridView1.MasterTemplate, childTemplate1);
            relation.ChildColumnNames.Add("Awards");
            this.radGridView1.Relations.Add(relation);
 
             
 
            this.radGridView1.DataSource = Student.GenerateList();
            radGridView1.AutoGenerateColumns = false;
 
            radGridView1.CellFormatting += RadGridView1_CellFormatting;
            this.radGridView1.TableElement.PageViewMode = PageViewMode.ExplorerBar;
            var aa = this.radGridView1.TableElement.PageViewProvider;
             
        }
 
         
        private void RadGridView1_CellFormatting(object sender, CellFormattingEventArgs e)
        {
            GridViewDataColumn column = e.CellElement.ColumnInfo as GridViewDataColumn;
             
            if (column != null && column.OwnerTemplate.Caption == "aa")
            {
                e.CellElement.TableElement.Visibility = Telerik.WinControls.ElementVisibility.Hidden;
                RadPageViewContentAreaElement content = e.CellElement.TableElement.Parent as RadPageViewContentAreaElement;
 
                RadLabelElement radLabelElement = new RadLabelElement();
 
                if (content.FindDescendant<RadLabelElement>() == null)
                {
                    content.Children.Add(radLabelElement);
                    var row = (GridViewHierarchyRowInfo)e.CellElement.RowInfo.Parent;                         
                           var student = (Student)row.DataBoundItem;
                           radLabelElement.Text = student.AdditionalInfo;
                }
            }
            else
            {
                e.CellElement.TableElement.Visibility = Telerik.WinControls.ElementVisibility.Visible;
                RadPageViewContentAreaElement content = e.CellElement.TableElement.Parent as RadPageViewContentAreaElement;
 
                if (content != null)
                {
                    RadLabelElement el = content.FindDescendant<RadLabelElement>();
 
                    if (el != null)
                    {
                        content.Children.Remove(el);
                        el.Dispose();
                    }
                }
            }
        }
        private GridViewTemplate CreateChildTemplate1()
        {
            GridViewTemplate childTemplate = new GridViewTemplate();
            this.radGridView1.Templates.Add(childTemplate);
            GridViewTextBoxColumn column = new GridViewTextBoxColumn("FundName");
            childTemplate.Columns.Add(column);
            column = new GridViewTextBoxColumn("Amount");
            childTemplate.Columns.Add(column);
            childTemplate.AutoSizeColumnsMode = GridViewAutoSizeColumnsMode.Fill;
            childTemplate.Caption = "11";
            return childTemplate;
        }
        private GridViewTemplate CreateChildTemplate2()
        {
            GridViewTemplate childTemplate = new GridViewTemplate();
            this.radGridView1.Templates.Add(childTemplate);
            GridViewTextBoxColumn column = new GridViewTextBoxColumn();
            childTemplate.Columns.Add(column);
            childTemplate.AutoSizeColumnsMode = GridViewAutoSizeColumnsMode.Fill;
            childTemplate.Caption = "aa";
            return childTemplate;
        }
    }

 

Thanks

9 Answers, 1 is accepted

Sort by
0
Hristo
Telerik team
answered on 26 Feb 2018, 04:16 PM
Hello Dilshod,

Thank you for writing. 

If you only need to display some text above the main child template, you can also achieve this by handling the ViewCellFormatting event. The text can be set straight to the detail cell, then you will also need to set is TextAlignment property and as well apply a margin to the table element of the template: 
private void RadGridView1_ViewCellFormatting(object sender, CellFormattingEventArgs e)
{
    GridDetailViewCellElement detailCell = e.CellElement as GridDetailViewCellElement;
    if (detailCell != null)
    {
        detailCell.Text = "Test";
        detailCell.TextAlignment = ContentAlignment.TopLeft;
        detailCell.Children[0].Margin = new Padding(0, 25, 0, 0);
    }
}

I am also attaching a screenshot showing the result on my end.

Regards,
Hristo
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Dilshod
Top achievements
Rank 1
answered on 01 Mar 2018, 06:27 PM

Hello Hristo, thank you for reply.

placing text is not bad, but I was looking for an answer if it is possible to place UI control there. In my case I am planning to place RadCollabsiblePanel with some additional Rad controls in it.

Thanks!

0
Hristo
Telerik team
answered on 02 Mar 2018, 04:02 PM
Hello Dilshod,

Since you need to add a separate element you will need to use an approach similar to your initial code snippet. 

Let me know if you have other questions.

Regards,
Hristo
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Dilshod
Top achievements
Rank 1
answered on 02 Mar 2018, 10:44 PM

Hello Hristo,

To approach what I need, I am using TableElement.PageViewMode as PageViewMode.ExplorerBar;

 And trying to remove the headers of Page view and it's pages and show both pages as expanded. Is that possible?

Please see attached screenshot.

0
Hristo
Telerik team
answered on 05 Mar 2018, 12:41 PM
Hello Dilshod,

The page view main header position can be adjusted by setting its Visibility to Collapsed, this way it will not occupy any space.  The other elements can also be accessed as children of the detail cell. Collapsing them, however, will not help because this will also collapse the content area so you can try specifying a MaxSize for them: 
private void RadGridView1_ViewCellFormatting(object sender, CellFormattingEventArgs e)
{
    GridDetailViewCellElement detailCell = e.CellElement as GridDetailViewCellElement;
    if (detailCell != null)
    {
        RadPageViewLabelElement header = detailCell.FindDescendant<RadPageViewLabelElement>();
        if (header != null)
        {
            header.Visibility = ElementVisibility.Collapsed;
        }
 
        IList<RadElement> items = detailCell.GetDescendants(d => d is RadPageViewExplorerBarItem, TreeTraversalMode.BreadthFirst);
        foreach (RadPageViewExplorerBarItem explorerBarItem in items)
        {
            explorerBarItem.IsExpanded = true;
            explorerBarItem.MaxSize = new Size(0, 1);
            explorerBarItem.Margin = new Padding(-2);
        }
    }
}

Please also note that the proper place to do this is the ViewCellFormatting event. I am also attaching a screenshot showing the result on my end.

Regards,
Hristo
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Dilshod
Top achievements
Rank 1
answered on 08 Mar 2018, 11:11 AM

Hello Hristo,

I trying to add RadCollapsiblePanel to RadPageViewContentAreaElement and having next issues:

1. RadPageViewContentAreaElement requires RadElement as child. I created an instance from RadCollapsiblePanelElement class, but its constructor requires an RadCollapsiblePanel control. Please advice how to handle this.

2. I created RadCollapsiblePanel element and set it as owner to RadCollapsiblePanelElement in constructor. RadCollapsiblePanelElement is appearing but not working as needed, collapsiblity feature is not working as expected.

Here is my code:

private void RadGridView1_ViewCellFormatting(object sender, CellFormattingEventArgs e)
        {
            GridViewDataColumn column = e.CellElement.ColumnInfo as GridViewDataColumn;
            RadPageViewContentAreaElement content = e.CellElement.TableElement.Parent as RadPageViewContentAreaElement;
            if (content != null)
            {
                if (column != null && column.OwnerTemplate.Caption == "aa")
                {
                    e.CellElement.TableElement.Visibility = ElementVisibility.Hidden;
 
                    if (content.FindDescendant<RadCollapsiblePanelElement>() == null)
                    {
                        RadCollapsiblePanel radCollapsiblePanel = new RadCollapsiblePanel();
                        radCollapsiblePanel.Height = 100;
                        radCollapsiblePanel.Dock = DockStyle.Top;
                        radCollapsiblePanel.IsExpanded = false;
                        RadCollapsiblePanelElement radCollapsiblePanelElement = new RadCollapsiblePanelElement(radCollapsiblePanel);
                        RadLabelElement radLabelElement = new RadLabelElement();
                        content.Children.Add(radCollapsiblePanelElement);
 
                        var row = (GridViewHierarchyRowInfo)e.CellElement.RowInfo.Parent;
                        var student = (Student)row.DataBoundItem;
                        radLabelElement.Text = student.AdditionalInfo;
                        radCollapsiblePanelElement.LayoutElement.Children.Add(radLabelElement);
                    }
                }               
            }
 
            GridDetailViewCellElement detailCell = e.CellElement as GridDetailViewCellElement;
            if (detailCell != null)
            {
                RadPageViewLabelElement header = detailCell.FindDescendant<RadPageViewLabelElement>();
                if (header != null)
                {
                    header.Visibility = ElementVisibility.Collapsed;
                }
 
                IList<RadElement> items = detailCell.GetDescendants(d => d is RadPageViewExplorerBarItem, TreeTraversalMode.BreadthFirst);
                foreach (RadPageViewExplorerBarItem explorerBarItem in items)
                {
                    explorerBarItem.IsExpanded = true;
                    explorerBarItem.MaxSize = new Size(0, 1);
                    explorerBarItem.Margin = new Padding(-2);
                }
            }
        }

 

Attached screenshot for details

Thanks

0
Dilshod
Top achievements
Rank 1
answered on 08 Mar 2018, 11:28 AM
Also, why details table's font differs from master table's font?
0
Accepted
Hristo
Telerik team
answered on 08 Mar 2018, 01:52 PM
Hi Dilshod,

The RadCollapsiblePanelElement is designed to be working with the RadCollapsiblePanel which is a control. Using the element as in your code snippet is not supported and may lead to unexpected results. I can suggest checking our demo application and the Row Details example. Additional information on how custom cells and rows can be created is available here: 
As to font of the template, we are not currently aware of an issue resulting in a similar behavior. Please open a support ticket and send us a sample project reproducing the issue and please also specify:
  • the version of the controls
  • exact Windows version
  • Windows scaling
  • is your application DPI-aware or not

Should you have further questions please do not hesitate to write back.

Regards,
Hristo
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Dilshod
Top achievements
Rank 1
answered on 12 Mar 2018, 10:51 AM
Hristo, thank you for answers. Hope it will be available in future versions.
Tags
GridView
Asked by
Dilshod
Top achievements
Rank 1
Answers by
Hristo
Telerik team
Dilshod
Top achievements
Rank 1
Share this question
or