CardView - Deleting items and change display names

[Xavier]

Hi,

I created a user control containing only a RadCardView (for easy re-usability) and databound it to an ObservableCollection. Generally it works pretty well but some things need to be adjusted.

I noticed the ItemRemoved event with the "Delete key" thing, but i can't find the way to activate this feature to be able to remove items (with buttons or right click)

Also, I want to change the displayed names, so I changed the text property for each cardViewItem and set DrawText to false for some, but when I launch my application, only FieldName properties appear and DrawText is ignored.

Any help on how to achieve this two things would be appreciated,

Best regards.

[Xavier]

Edit : Just find the way to change displayed name using the property Text (or cardViewItem.CardField.HeaderText) and make DrawText work by setting them during CardViewItemFormatting event.

[Hristo]

Hi Xavier,

Thank you for writing.

Indeed handling the formatting event is the appropriate place for altering the visual appearance as well as the displayed text for the CardViewItems.

Pressing the delete key while having a selection in RadCardView actually removes an item from its Items collection. Please note, however, that the ItemRemoved event is only raised when you perform this operation from the UI. 

In order to delete an item, programmatically you would need to access the Items collection. Please check my code snippet below: 

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();

        this.radCardView1.CardViewItemFormatting += radCardView1_CardViewItemFormatting;
    }

    private void radCardView1_ItemRemoved(object sender, ListViewItemEventArgs e)
    {
    }

    private void radCardView1_CardViewItemFormatting(object sender, Telerik.WinControls.UI.CardViewItemFormattingEventArgs e)
    {
        CardViewItem item = e.Item as CardViewItem;
        if (item != null)
        {
            if (item.FieldName == "EmployeeID")
            {
                item.Text = "Id";
            }
        }
    }

    private void Form1_Load(object sender, EventArgs e)
    {
        this.employeesTableAdapter.Fill(this.nwindDataSet.Employees);
    }

    private void radButton1_Click(object sender, EventArgs e)
    {
        if (this.radCardView1.Items.Count > 0)
        {
            this.radCardView1.Items.RemoveAt(0);
        }
    }
}

I hope this helps. Should you have further questions please do not hesitate to write back.

Regards,
Hristo Merdjanov
Telerik

[Xavier]

Thanks for your answer,

Nonetheless, I encountered some issues with the RadCardView control :

- First, I don't know if it's due to the use of User control or if it's general, but the designer goes crazy and "erases" the layout in design mode, thus I can't customize the template nor see what is inside of the RadCardView. This bug occurs no matter if it's in bound or unbound mode. However when launching my app, the layout appear correctly.

I found a solution by doing the whole thing programatically, but I think it's preferable to report this issue.

- Secondly, I added a LayoutControlLabelItem to serve as a clickable link to delete an item, but when I try to click on it nothing happen ... The Click event isn't raised.

- Thirdly, by default, I don't want all items expanded, so I set IsExpanded property of CardViewGroupItems to false inside the CardViewItemCreatingEvent. The first item is ok, but others are partially expand : content is correctly hidden but the item take the space like if it's expanded.

Here is a sample code :

#region Fields - RadCardView Components
// All CardViewItem, LayoutControlTabbedGroup and CardViewGroupItem declared here.
// Except RadCardView and his default cardViewGroupItem1 declared with designer.
#endregion

public CardViewUserControl()
{
   InitializeComponent();
   InitializeCardViewLayout();
   this.radCardView1.AllowEdit = false;
   this.radCardView1.CardViewItemCreating += radCardView1_CardViewItemCreating;
   this.radCardView1.CardViewItemFormatting += radCardView1_CardViewItemFormatting;
   this.radCardView1.ItemRemoved += radCardView1_ItemRemoved;
}

private void InitializeCardViewLayout()
{
    // Instanciate all Components, setting Name, FieldName
    // Designing layout...(Size, Bounds, Items.Add ect...)
}

private void radCardView1_CardViewItemCreating(object sender, CardViewItemCreatingEventArgs e)
{
   LayoutControlLabelItem label = e.NewItem as LayoutControlLabelItem;
   if (label != null)
   {
      label.Click += layoutControlLabelItemDeleteLink_Click;
   }

   CardViewGroupItem group = e.NewItem as CardViewGroupItem;
   if (group != null)
   {
      if (group.FieldName == "Title")
         group.IsExpanded = false;
   }
}

private void radCardView1_CardViewItemFormatting(object sender, CardViewItemFormattingEventArgs e)
{
    // Code to replace Text property of CardViewItems
}

private void layoutControlLabelItemDeleteLink_Click(object sender, EventArgs e)
{
     if (this.radCardView1.Items.Count > 0)
     {
        this.radCardView1.Items.RemoveAt(radCardView1.SelectedIndex);
        OnCardViewItemRemoved(new ListViewItemEventArgs(radCardView1.SelectedItem));
     }
     //Or replace with that, maybe it can simulate normal process of radCardView and raise ItemRemoved ?
     // OnKeyDown(new KeyEventArgs(Keys.Delete));
}

public event ListViewItemEventHandler CardViewItemRemoved;

protected void OnCardViewItemRemoved(ListViewItemEventArgs e)
{
   var handler = CardViewItemRemoved;
   if (handler != null)
      handler(this, e);
}

[Xavier]

Errrr forgot the source part, my bad

public void SetCardViewSource(ObservableCollection<ContactCardViewModel> source)
{
    this.radCardView1.DataSource = source;
}

Best Regards,

Xavier

 

[Hristo]

Hi Xavier,

Thank you for writing.

There are certain cases at which RadCardView will clear its serialized items. For example, this may happen if the data source of the control is changed. In case you keep experiencing the design time issue, could you please send me your form and user control and let me know what I need to do on my end in order to reproduce the issue.

Now regarding your second question, the LayoutControlLabelItems have their ShouldHandleMouseInput property set to false, disabling the mouse notifications. Could you please try handling the CardViewItemCreating event this way: 

private void radCardView1_CardViewItemCreating(object sender, CardViewItemCreatingEventArgs e)
{
    LayoutControlLabelItem label = e.NewItem as LayoutControlLabelItem;
    if (label != null)
    {
        label.ShouldHandleMouseInput = true;
        label.Click += layoutControlLabelItemDeleteLink_Click;
    }
}

The reported behavior with the IsExpanded property of the CardViewGroupItems seems to be an issue and I have logged it in our feedback portal. You can track its progress, subscribe for status changes and add your vote/comment to it on the following link - feedback item. I have also updated your Telerik points. For the time being please set the IsExpanded property in the CardViewItemFormatting event: 

private void radCardView1_CardViewItemFormatting(object sender, CardViewItemFormattingEventArgs e)
{
    CardViewGroupItem group = e.Item as CardViewGroupItem;
    if (group != null && group.Tag == null && group.Parent != null && group.Parent.Parent != null && group.Parent.Parent is CardListViewVisualItem)
    {
        group.IsExpanded = false;
        group.Tag = "Processed";
    }
}

I hope this helps. Should you have further questions please do not hesitate to write back.

Regards,
Hristo Merdjanov
Telerik