Setting Image in Hierarchical Grid View

[Muhammad]

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)

[Hristo]

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