Rank 2
Iron
Iron
Iron
I have a Listview with CustomVisualItem formatting in IconView. When the directional keys are tapped or an item is clicked, the SelectItemChanged event is triggered but the selection highlight does not follow. Since CustomVisualItems are used, do I need to break out the crayons in VisualItemFormatting?
The form contains a RadListView and a RadLabel to display a result.
Thanks!public RadForm1()
{
InitializeComponent();
this.radListView1.EnableKineticScrolling = true;
this.radListView1.KeyboardSearchEnabled = true;
this.radListView1.ViewType = Telerik.WinControls.UI.ListViewType.IconsView;
this.radListView1.SelectedItemChanged += new System.EventHandler(this.radListView_SelectedItemChanged);
this.radListView1.VisualItemCreating += new Telerik.WinControls.UI.ListViewVisualItemCreatingEventHandler(this.radListView1_VisualItemCreating);
this.radListView1.DataSource = JunkData();
}
private void radListView1_VisualItemCreating(object sender, Telerik.WinControls.UI.ListViewVisualItemCreatingEventArgs e)
{
e.VisualItem = new CustomIconVisualItem();
}
private void radListView_SelectedItemChanged(object sender, EventArgs e)
{
RadListViewElement element = sender as RadListViewElement;
ListViewDataItem item = element.SelectedItem;
if (item == null) return;
DataRowView dataRow = (DataRowView)item.DataBoundItem;
if (dataRow == null) return;
DataRow row = dataRow.Row;
radLabel1.Text = row["Title"].ToString();
}
private DataTable JunkData()
{
DataTable dt = new DataTable();
dt.Columns.Add("Title", typeof(string));
dt.Rows.Add("T1");
dt.Rows.Add("T2");
dt.Rows.Add("T3");
return dt;
}
class CustomIconVisualItem : IconListViewVisualItem
{
private LightVisualElement titleElement;
private StackLayoutPanel stackLayout;
protected override void CreateChildElements()
{
base.CreateChildElements();
stackLayout = new StackLayoutPanel();
stackLayout.Orientation = System.Windows.Forms.Orientation.Vertical;
stackLayout.AutoSize = true;
titleElement = new LightVisualElement();
titleElement.NotifyParentOnMouseInput = true;
stackLayout.Children.Add(titleElement);
this.Children.Add(stackLayout);
}
protected override void SynchronizeProperties()
{
this.titleElement.Text = this.Data["Title"].ToString();
}
protected override Type ThemeEffectiveType
{
get
{
return typeof(SimpleListViewVisualItem);
}
}
}1 Answer, 1 is accepted
Hello, David,
The provided sample code snippet is greatly appreciated, It helped me to prepare a sample project on my end.
The important part here is when overriding the SynchronizeProperties method , do not forget to call the base SynchronizeProperties method. Overriding the ThemeEffectiveType property should return the style for the IconListViewVisualItem as well. I have modified the code snippet in the following way:
public RadForm1()
{
InitializeComponent();
new RadControlSpyForm().Show();
this.radListView1.EnableKineticScrolling = true;
this.radListView1.KeyboardSearchEnabled = true;
this.radListView1.SelectedItemChanged += new System.EventHandler(this.radListView_SelectedItemChanged);
this.radListView1.VisualItemCreating += new Telerik.WinControls.UI.ListViewVisualItemCreatingEventHandler(this.radListView1_VisualItemCreating);
this.radListView1.DataSource = JunkData();
this.radListView1.ViewType = Telerik.WinControls.UI.ListViewType.IconsView;
this.radListView1.SelectedIndex = 1;
}
private void radListView1_VisualItemCreating(object sender, Telerik.WinControls.UI.ListViewVisualItemCreatingEventArgs e)
{
if (e.ListViewType == ListViewType.IconsView)
{
e.VisualItem = new CustomIconVisualItem();
}
}
private void radListView_SelectedItemChanged(object sender, EventArgs e)
{
RadListViewElement element = sender as RadListViewElement;
ListViewDataItem item = element.SelectedItem;
if (item == null)
return;
DataRowView dataRow = (DataRowView)item.DataBoundItem;
if (dataRow == null)
return;
DataRow row = dataRow.Row;
radLabel1.Text = row["Title"].ToString();
}
private DataTable JunkData()
{
DataTable dt = new DataTable();
dt.Columns.Add("Title", typeof(string));
dt.Rows.Add("T1");
dt.Rows.Add("T2");
dt.Rows.Add("T3");
return dt;
}
class CustomIconVisualItem : IconListViewVisualItem
{
protected override Type ThemeEffectiveType
{
get
{
return typeof(IconListViewVisualItem);
}
}
private LightVisualElement titleElement;
private StackLayoutPanel stackLayout;
protected override void CreateChildElements()
{
base.CreateChildElements();
stackLayout = new StackLayoutPanel();
stackLayout.Orientation = System.Windows.Forms.Orientation.Vertical;
stackLayout.AutoSize = true;
titleElement = new LightVisualElement();
titleElement.NotifyParentOnMouseInput = true;
titleElement.ShouldHandleMouseInput = false;
stackLayout.NotifyParentOnMouseInput = true;
stackLayout.ShouldHandleMouseInput = false;
stackLayout.Children.Add(titleElement);
this.Children.Add(stackLayout);
}
protected override void SynchronizeProperties()
{
base.SynchronizeProperties();
this.DrawText = false;
this.titleElement.Text = this.Data["Title"].ToString();
}
}I have attached the sample project for your reference which result is illustrated in the gif file.
I hope this information helps. If you need any further assistance please don't hesitate to contact me.
Regards,
Dess | Tech Support Engineer, Principal
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.