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

Add RadListView to RadGridView Cell

4 Answers 451 Views

GridView

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

Dave asked on 26 Mar 2015, 12:12 AM

rimge.jpg

I have an application where I need to display a small graphic and text in a single RadGridView cell. I thought that since a RadListView can have a graphic in the first column maybe I could create a custom cell type that could contain a list view. I can figure a lot of it out, but I can't figure out how to access and update the list view once the grid is created. The Value options are always strings. I am not binding data, I just want to be able to modify the values. I attached a picture to illustrate what I've done in ASP.NET that I now need to do in WinForms. In the ASP.NET grid it was pretty easy because it's just HTML in a cell.

I thought about using the <html> tag in the cell for the WinForms grid view, but I couldn't figure out how to put in the little graphic (in ASP.NET it's just an image tag).

I think this will be easy once I know how to do it, but I'm kind of stuck so I figured I'd ask.

Thanks in advance for your help.

Tom Serface, Rimage

4 Answers, 1 is accepted

answered on 30 Mar 2015, 12:09 PM

Hi Tom,

Thank you for writing.

The grid also supports displaying an image in cells out of the box. The easiest way to setup this is to use the CellFormatting event. The following example shows how you can set the image and align it to the left like in your attachment:

Image img;

void radGridView1_CellFormatting(object sender, Telerik.WinControls.UI.CellFormattingEventArgs e)

{

e.CellElement.Image = img;

e.CellElement.TextAlignment = ContentAlignment.MiddleRight;

e.CellElement.ImageLayout = ImageLayout.None;

e.CellElement.ImageAlignment = ContentAlignment.MiddleLeft;

}

I hope this information is useful. Let me know if you need further assistance.

Regards,
Dimitar
Telerik

See What's Next in App Development. Register for TelerikNEXT.

answered on 06 Apr 2015, 05:13 PM

canceled.png

working.png

In case anyone is interested this is the sample I came up with based on Dimitar's help. Obviously, this could be fleshed out a lot, but I always use the same size graphics and I'll make the columns wide enough for the max sized text so this works for me. It would be easy to add additional columns or more formatting options if needed. It shows another example of putting a reasonably complex control in a grid cell. It also shows how to change the cell formatting to not show the current cell (highlighted or bordered) and how to update the values in the embedded list view element.

Dimitar was a great help and showed me how it is better to pass data to the control rather than just replacing it since the list view element is larger to keep rebuilding.

Anyway, here's a build-able project just in case this might help someone else format text in a grid. It's in VS 2013. I wanted to just post a .zip file, but unfortunately that doesn't seem to be allowed.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Telerik.WinControls.UI;
using System.Drawing;

namespace _920856
{
class ListViewCellInfo
{
// Can add more list view settings to here if they need to be changed at runtime
public List<ListViewRowDataItem> Items;
public int Height { get; set; }
public int Width { get; set; }
public String ThemeRole { get; set; }
public ListViewCellInfo()
{
Height = 20; // Default used for ItemSize setting
Width = 100;
Items = new List<ListViewRowDataItem>();
}
}

class ListViewRowDataItem
{
public String Text { get; set; }
public Image Image { get; set; }
public Color ForeColor { get; set; }

public ListViewRowDataItem()
{
Text = "";
Image = null;
ForeColor = Color.Black;
}

public ListViewRowDataItem(String _text, Image _image)
{
Text = _text;
Image = _image;
ForeColor = Color.Black;
}
}

public class ListViewColumn : GridViewDataColumn
{
public ListViewColumn(String _name)
: base(_name)
{
this.DataType = typeof(ListViewCellInfo);
}

public override Type GetCellType(GridViewRowInfo row)
{
if (row is GridViewDataRowInfo)
return typeof(ListViewCell);
return base.GetCellType(row);
}
}

class ListViewCell : GridDataCellElement
{
public RadListViewElement listView;
public ListViewCell(GridViewColumn column, GridRowElement row)
: base(column, row)
{
}

protected override void CreateChildElements()
{
base.CreateChildElements();
listView = new RadListViewElement();
listView.SelectedIndex = -1;
listView.AutoSizeMode = Telerik.WinControls.RadAutoSizeMode.Auto;
listView.ViewType = ListViewType.DetailsView;
listView.ShowColumnHeaders = false;
listView.AutoSize = true;
listView.ThemeRole = "Desert";
listView.VisualItemFormatting += listView_VisualItemFormatting;
listView.Columns.Add("Graphic");
listView.Columns["Graphic"].Width = 40; // Width of graphics used
listView.Columns.Add("Text");
listView.Columns["Text"].Width = 100; // Text width
Children.Add(listView);
}

public int GetHeight()
{
return listView.ItemSize.Height * listView.Items.Count;
}

void listView_VisualItemFormatting(object sender, ListViewVisualItemEventArgs e)
{
BaseListViewVisualItem lvi = e.VisualItem as BaseListViewVisualItem;
lvi.DrawBorder = false; // Don't want list view borders
lvi.DrawFill = false; // Don't want list view highlighting
}

protected override void SetContentCore(object value)
{
// base.SetContentCore(value);
ListViewCellInfo info = value as ListViewCellInfo;
listView.Items.Clear();
int height = info.Height;
foreach (ListViewRowDataItem item in info.Items)
{
ListViewDataItem row = new ListViewDataItem();
listView.Items.Add(row);
row.Text = ""; // Text is shown in next column
row.Image = item.Image;

row["Text"] = item.Text;
row.ForeColor = item.ForeColor;
row.TextAlignment = ContentAlignment.MiddleLeft;
row.TextImageRelation = System.Windows.Forms.TextImageRelation.ImageBeforeText;
}
listView.ItemSize = new Size(info.Width, info.Height);
listView.SelectedItem = null;
}

protected override Type ThemeEffectiveType
{
get
{
return typeof(GridDataCellElement);
}
}

public override bool IsCompatible(GridViewColumn data, object context)
{
return data is ListViewColumn && context is GridDataRowElement;
}
}
}

using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Data;

using System.Drawing;

using System.Linq;

using System.Text;

using System.Windows.Forms;

using Telerik.WinControls.UI;

namespace _920856

{

public partial class RadForm1 : Telerik.WinControls.UI.RadForm

{

public RadForm1()

{

InitializeComponent();

radGridView1.TableElement.RowHeight = 120;

// Add Columns

ListViewColumn Col1 = new ListViewColumn("Devices");

Col1.Width = 200;

radGridView1.Columns.Add(Col1);

ListViewColumn Col2 = new ListViewColumn("Bins");

Col2.Width = 200;

radGridView1.Columns.Add(Col2);

ListViewColumn Col3 = new ListViewColumn("Printer");

Col3.Width = 200;

radGridView1.Columns.Add(Col3);

// Add Rows

Telerik.WinControls.UI.GridViewDataRowInfo row1 = new Telerik.WinControls.UI.GridViewDataRowInfo(this.radGridView1.MasterView);

row1.Height = 65;

row1.AllowResize = false;

row1.Cells["Devices"].Value = CreateDeviceList(20, 30, Properties.Resources.working, Properties.Resources.canceled, Color.Black);

row1.Cells["Bins"].Value = CreateBinsList(300, 210, 182, Properties.Resources.working, Properties.Resources.working, Properties.Resources.working, Color.Black);

row1.Cells["Printer"].Value = CreatePrintList(44, 340, Properties.Resources.canceled, Properties.Resources.working, Color.Black);

radGridView1.Rows.Add(row1);

Telerik.WinControls.UI.GridViewDataRowInfo row2 = new Telerik.WinControls.UI.GridViewDataRowInfo(this.radGridView1.MasterView);

row2.Height = 65;

row2.AllowResize = false;

row2.Cells["Devices"].Value = CreateDeviceList(15, 30, Properties.Resources.canceled, Properties.Resources.canceled, Color.Black);

row2.Cells["Bins"].Value = CreateBinsList(234, 232, 223, Properties.Resources.working, Properties.Resources.working, Properties.Resources.working, Color.Black);

row2.Cells["Printer"].Value = CreatePrintList(33, 20, Properties.Resources.canceled, Properties.Resources.working, Color.Black);

radGridView1.Rows.Add(row2);

Telerik.WinControls.UI.GridViewDataRowInfo row3 = new Telerik.WinControls.UI.GridViewDataRowInfo(this.radGridView1.MasterView);

row3.Height = 65;

row3.AllowResize = false;

row3.Cells["Devices"].Value = CreateDeviceList(25, 12, Properties.Resources.working, Properties.Resources.canceled, Color.Black);

row3.Cells["Bins"].Value = CreateBinsList(124, 32, 232, Properties.Resources.working, Properties.Resources.working, Properties.Resources.canceled, Color.Black);

row3.Cells["Printer"].Value = CreatePrintList(99, 222, Properties.Resources.canceled, Properties.Resources.working, Color.Black);

radGridView1.Rows.Add(row3);

radGridView1.Rows[0].IsCurrent = true;

}

private ListViewCellInfo CreateDeviceList(int _value1, int _value2, Image _image1, Image _image2, Color _color)

{

ListViewCellInfo info = new ListViewCellInfo();

ListViewRowDataItem item1 = new ListViewRowDataItem();

item1.ForeColor = _color;

item1.Image = _image1;

item1.Text = String.Format("Device1 ({0})", _value1);

info.Items.Add(item1);

ListViewRowDataItem item2 = new ListViewRowDataItem();

item2.Image = _image2;

item2.ForeColor = _color;

item2.Text = String.Format("Device2 ({0})", _value2);

info.Items.Add(item1);

return info;

}

private ListViewCellInfo CreateBinsList(int _value1, int _value2, int _value3, Image _image1, Image _Image2, Image _Image3, Color _color)

{

ListViewCellInfo info = new ListViewCellInfo();

ListViewRowDataItem item1 = new ListViewRowDataItem();

item1.ForeColor = _color;

item1.Image = _image1;

item1.Text = String.Format("Bin1 ({0})", _value1);

info.Items.Add(item1);

ListViewRowDataItem item2 = new ListViewRowDataItem();

item2.Image = _Image2;

item2.ForeColor = _color;

item2.Text = String.Format("Bin2 ({0})", _value2);

info.Items.Add(item2);

ListViewRowDataItem item3 = new ListViewRowDataItem();

item3.Image = _Image3;

item3.ForeColor = _color;

item3.Text = String.Format("Bin3 ({0})", _value3);

info.Items.Add(item3);

return info;

}

private ListViewCellInfo CreatePrintList(int _value1, int _value2, Image _image1, Image _Image2, Color _color)

{

ListViewCellInfo info = new ListViewCellInfo();

ListViewRowDataItem item1 = new ListViewRowDataItem();

item1.Image = _image1;

item1.Text = String.Format("Printer ({0})", _value1);

item1.ForeColor = _color;

info.Items.Add(item1);

ListViewRowDataItem item2 = new ListViewRowDataItem();

item2.Image = _Image2;

item2.Text = String.Format("Ink ({0})", _value2);

item2.ForeColor = _color;

info.Items.Add(item2);

return info;

}

private void radButton1_Click(object sender, EventArgs e)

{

radGridView1.Rows[radGridView1.CurrentRow.Index].Cells["Devices"].Value = CreateDeviceList(10, 40, Properties.Resources.canceled, Properties.Resources.working, Color.Red);

radGridView1.Rows[radGridView1.CurrentRow.Index].Cells["Bins"].Value = CreateBinsList(220, 153, 232, Properties.Resources.canceled, Properties.Resources.working, Properties.Resources.canceled, Color.Red);

radGridView1.Rows[radGridView1.CurrentRow.Index].Cells["Printer"].Value = CreatePrintList(33, 44, Properties.Resources.canceled, Properties.Resources.working, Color.Red);

}

private void radButton2_Click(object sender, EventArgs e)

{

radGridView1.Rows[radGridView1.CurrentRow.Index].Cells["Devices"].Value = CreateDeviceList(20, 30, Properties.Resources.working, Properties.Resources.canceled, Color.Black);

radGridView1.Rows[radGridView1.CurrentRow.Index].Cells["Bins"].Value = CreateBinsList(300, 210, 180, Properties.Resources.working, Properties.Resources.canceled, Properties.Resources.working, Color.Black);

radGridView1.Rows[radGridView1.CurrentRow.Index].Cells["Printer"].Value = CreatePrintList(120, 330, Properties.Resources.working, Properties.Resources.canceled, Color.Black);

}

private void radButton3_Click(object sender, EventArgs e)

{

for(int i = 0; i < 10; ++i)

{

radButton1_Click(null, null);

Application.DoEvents();

System.Threading.Thread.Sleep(10);

radButton2_Click(null, null);

Application.DoEvents();

System.Threading.Thread.Sleep(10);

}

private void radGridView1_CellFormatting(object sender, CellFormattingEventArgs e)

{

ListViewCell cell = (ListViewCell)e.CellElement;

e.CellElement.DrawBorder = false; // Don't want border on selected cell

e.CellElement.DrawFill = false; // Don't want selected cell to change color

}

namespace _920856

{

partial class RadForm1

{

/// <summary>

/// Required designer variable.

/// </summary>

private System.ComponentModel.IContainer components = null;

/// <summary>

/// Clean up any resources being used.

/// </summary>

/// <param name="disposing">true if managed resources should be disposed; otherwise, false.</param>

protected override void Dispose(bool disposing)

{

if (disposing && (components != null))

{

components.Dispose();

}

base.Dispose(disposing);

}

#region Windows Form Designer generated code

/// <summary>

/// Required method for Designer support - do not modify

/// the contents of this method with the code editor.

/// </summary>

private void InitializeComponent()

{

this.radGridView1 = new Telerik.WinControls.UI.RadGridView();

this.desertTheme1 = new Telerik.WinControls.Themes.DesertTheme();

this.radButton1 = new Telerik.WinControls.UI.RadButton();

this.radButton2 = new Telerik.WinControls.UI.RadButton();

this.radButton3 = new Telerik.WinControls.UI.RadButton();

this.radPanel1 = new Telerik.WinControls.UI.RadPanel();

this.radPanel2 = new Telerik.WinControls.UI.RadPanel();

((System.ComponentModel.ISupportInitialize)(this.radGridView1)).BeginInit();

((System.ComponentModel.ISupportInitialize)(this.radGridView1.MasterTemplate)).BeginInit();

((System.ComponentModel.ISupportInitialize)(this.radButton1)).BeginInit();

((System.ComponentModel.ISupportInitialize)(this.radButton2)).BeginInit();

((System.ComponentModel.ISupportInitialize)(this.radButton3)).BeginInit();

((System.ComponentModel.ISupportInitialize)(this.radPanel1)).BeginInit();

this.radPanel1.SuspendLayout();

((System.ComponentModel.ISupportInitialize)(this.radPanel2)).BeginInit();

this.radPanel2.SuspendLayout();

((System.ComponentModel.ISupportInitialize)(this)).BeginInit();

this.SuspendLayout();

//

// radGridView1

//

this.radGridView1.AutoScroll = true;

this.radGridView1.Dock = System.Windows.Forms.DockStyle.Fill;

this.radGridView1.Location = new System.Drawing.Point(0, 0);

//

// radGridView1

//

this.radGridView1.MasterTemplate.AllowAddNewRow = false;

this.radGridView1.MasterTemplate.AllowDeleteRow = false;

this.radGridView1.MasterTemplate.AllowDragToGroup = false;

this.radGridView1.MasterTemplate.AllowEditRow = false;

this.radGridView1.MasterTemplate.AutoSizeColumnsMode = Telerik.WinControls.UI.GridViewAutoSizeColumnsMode.Fill;

this.radGridView1.MasterTemplate.ShowFilteringRow = false;

this.radGridView1.MasterTemplate.ShowRowHeaderColumn = false;

this.radGridView1.Name = "radGridView1";

this.radGridView1.Padding = new System.Windows.Forms.Padding(1);

this.radGridView1.ReadOnly = true;

this.radGridView1.ShowCellErrors = false;

this.radGridView1.ShowGroupPanel = false;

this.radGridView1.Size = new System.Drawing.Size(899, 429);

this.radGridView1.TabIndex = 0;

this.radGridView1.Text = "radGridView1";

this.radGridView1.ThemeName = "Desert";

this.radGridView1.CellFormatting += new Telerik.WinControls.UI.CellFormattingEventHandler(this.radGridView1_CellFormatting);

//

// radButton1

//

this.radButton1.Location = new System.Drawing.Point(21, 15);

this.radButton1.Name = "radButton1";

this.radButton1.Size = new System.Drawing.Size(110, 24);

this.radButton1.TabIndex = 1;

this.radButton1.Text = "Update 1";

this.radButton1.ThemeName = "Desert";

this.radButton1.Click += new System.EventHandler(this.radButton1_Click);

//

// radButton2

//

this.radButton2.Location = new System.Drawing.Point(21, 57);

this.radButton2.Name = "radButton2";

this.radButton2.Size = new System.Drawing.Size(110, 24);

this.radButton2.TabIndex = 2;

this.radButton2.Text = "Update 2";

this.radButton2.ThemeName = "Desert";

this.radButton2.Click += new System.EventHandler(this.radButton2_Click);

//

// radButton3

//

this.radButton3.Location = new System.Drawing.Point(21, 98);

this.radButton3.Name = "radButton3";

this.radButton3.Size = new System.Drawing.Size(110, 24);

this.radButton3.TabIndex = 3;

this.radButton3.Text = "Flash Row";

this.radButton3.ThemeName = "Desert";

this.radButton3.Click += new System.EventHandler(this.radButton3_Click);

//

// radPanel1

//

this.radPanel1.Controls.Add(this.radGridView1);

this.radPanel1.Dock = System.Windows.Forms.DockStyle.Fill;

this.radPanel1.Location = new System.Drawing.Point(0, 0);

this.radPanel1.Name = "radPanel1";

this.radPanel1.Size = new System.Drawing.Size(899, 429);

this.radPanel1.TabIndex = 4;

this.radPanel1.Text = "radPanel1";

//

// radPanel2

//

this.radPanel2.Controls.Add(this.radButton1);

this.radPanel2.Controls.Add(this.radButton2);

this.radPanel2.Controls.Add(this.radButton3);

this.radPanel2.Dock = System.Windows.Forms.DockStyle.Bottom;

this.radPanel2.Location = new System.Drawing.Point(0, 291);

this.radPanel2.Name = "radPanel2";

this.radPanel2.Size = new System.Drawing.Size(899, 138);

this.radPanel2.TabIndex = 5;

//

// RadForm1

//

this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);

this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;

this.ClientSize = new System.Drawing.Size(899, 429);

this.Controls.Add(this.radPanel2);

this.Controls.Add(this.radPanel1);

this.Name = "RadForm1";

//

this.RootElement.ApplyShapeToControl = true;

this.Text = "Grid Try 3";

this.ThemeName = "Desert";

((System.ComponentModel.ISupportInitialize)(this.radGridView1.MasterTemplate)).EndInit();

((System.ComponentModel.ISupportInitialize)(this.radGridView1)).EndInit();

((System.ComponentModel.ISupportInitialize)(this.radButton1)).EndInit();

((System.ComponentModel.ISupportInitialize)(this.radButton2)).EndInit();

((System.ComponentModel.ISupportInitialize)(this.radButton3)).EndInit();

((System.ComponentModel.ISupportInitialize)(this.radPanel1)).EndInit();

this.radPanel1.ResumeLayout(false);

((System.ComponentModel.ISupportInitialize)(this.radPanel2)).EndInit();

this.radPanel2.ResumeLayout(false);

((System.ComponentModel.ISupportInitialize)(this)).EndInit();

this.ResumeLayout(false);

}

#endregion

private Telerik.WinControls.UI.RadGridView radGridView1;

private Telerik.WinControls.Themes.DesertTheme desertTheme1;

private Telerik.WinControls.UI.RadButton radButton1;

private Telerik.WinControls.UI.RadButton radButton2;

private Telerik.WinControls.UI.RadButton radButton3;

private Telerik.WinControls.UI.RadPanel radPanel1;

private Telerik.WinControls.UI.RadPanel radPanel2;

}

Tom Serface, Rimage

Accepted