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

Setting Image in Hierarchical Grid View

1 Answer 26 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Muhammad
Top achievements
Rank 1
Muhammad asked on 08 Jan 2015, 02:27 PM
I am creating a self-referencing Hierarchical Grid View. I checked the sample and it is setting image in CellFormatting event by accessing 

GridDataCellElement dataCell = e.CellElement as GridDataCellElement;
...........................................................
dataCell.ImageAlignment = ContentAlignment.MiddleLeft;
dataCell.Image = this.imageList1.Images[2]; 
dataCell.TextImageRelation = TextImageRelation.ImageBeforeText;


I want to attach image at the time of inserting the rows into the grid. How can I do that?

Another related question, how can I know if a row has child rows (nodes)

1 Answer, 1 is accepted

Sort by
0
Hristo
Telerik team
answered on 13 Jan 2015, 11:59 AM
Hi Muhammad,

Thank you for writing.

My example is using a DataTable as a DataSource of the grid. You can add the image resources as data objects of an image column of the DataTabe while you are adding the rows.  After setting the DataSource property of the grid you should hide this column.

Then in the CellFormatting event you can use the already added image and set it as an Image property of a GridDataCellElement by your choice. Please see my code snippet below:
public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
 
        this.radGridView1.CellFormatting += radGridView1_CellFormatting;
 
        Random rand = new Random();
        DataTable dt = new DataTable();
        dt.Columns.Add("Id", typeof(int));
        dt.Columns.Add("ParentId", typeof(int));
        dt.Columns.Add("Name", typeof(string));
        dt.Columns.Add("Picture", typeof(Image));
        for (int i = 1; i < 5; i++)
        {
            dt.Rows.Add(i, 0, "Parent" + i, Properties.Resources.folder);
 
        }
 
        for (int j = 5; j < 30; j++)
        {
            dt.Rows.Add(j, rand.Next(1, 5), "Child" + j, Properties.Resources.document);
        }
 
        this.radGridView1.Relations.AddSelfReference(this.radGridView1.MasterTemplate, "Id", "ParentId");
        this.radGridView1.DataSource = dt;
 
        this.radGridView1.Columns["Id"].IsVisible = false;
        this.radGridView1.Columns["ParentId"].IsVisible = false;
        this.radGridView1.Columns["Picture"].IsVisible = false;
        this.radGridView1.BestFitColumns(BestFitColumnMode.AllCells);
 
        this.CheckForChildRows();
    }
 
    private void radGridView1_CellFormatting(object sender, Telerik.WinControls.UI.CellFormattingEventArgs e)
    {
        GridDataCellElement dataCell = e.CellElement as GridDataCellElement;
 
        if (dataCell.ColumnInfo.Name == "Name")
        {
            DataRowView rowView = e.Row.DataBoundItem as DataRowView;
 
            GridViewDataRowInfo dataRow = dataCell.RowInfo as GridViewDataRowInfo;
            if (dataRow != null)
            {
                dataCell.ImageAlignment = ContentAlignment.MiddleLeft;
 
                if (rowView != null)
                {
                    dataCell.Image = (Image)rowView.Row["Picture"];
 
                }
                else
                {
                    e.CellElement.ResetValue(LightVisualElement.ImageProperty, ValueResetFlags.Local);
                }
               
 
                dataCell.TextImageRelation = TextImageRelation.ImageBeforeText;
            }
        }
    }
}

As for you second question, you could iterate the rows of the grid and perform the following check:
private void CheckForChildRows()
{
    foreach (GridViewRowInfo rowInfo in radGridView1.Rows)
    {
        if (rowInfo.ChildRows.Count > 0)
        {
            //Do something with the row
        }
    }
}

I am also sending you a .gif file showing how the grid looks on my side.

I hope this information is useful. Should you have further question please do not hesitate to write back.

Regards,
Hristo
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
GridView
Asked by
Muhammad
Top achievements
Rank 1
Answers by
Hristo
Telerik team
Share this question
or