Expanding and collapsing a card when item source changed

1 Answer 32 Views
CardView
Peter
Top achievements
Rank 2
Iron
Iron
Veteran
Peter asked on 28 Feb 2022, 02:13 PM

Hello,

I want programmatically expand/collapse cards when the item source of the card view changed.

Can you advise me an event to do that?

regards,

Tobias

1 Answer, 1 is accepted

Sort by
1
Accepted
Stenly
Telerik team
answered on 02 Mar 2022, 11:30 AM

Hello Tobias,

The RadCardView control's API does not provide an event, which occurs when the ItemsSource property is changed. However, you could achieve the desired result, by adding an additional event handler to the ItemsSource property. For example, this logic could be implemented inside the Loaded event of the RadCardView control. In it, the ItemsSource property could be retrieved by using the GetProperties static method of the TypeDescriptor class. On the returned PropertyDescriptor class, utilize its AddValueChanged method, and as a first parameter pass the RadCardView control instance, and for the second, an event in which the expand and collapse logic could be implemented.

The following code snippets show the Loaded event as well as the newly added event handler's implementation:

public MainWindow()
{
    InitializeComponent();
    this.cardView.Loaded += CardView_Loaded;
}

private void CardView_Loaded(object sender, RoutedEventArgs e)
{
    var cardViewSender = (RadCardView)sender;
    var itemsSourceProperty = TypeDescriptor.GetProperties(cardViewSender)["ItemsSource"];
    itemsSourceProperty.AddValueChanged(cardViewSender, new EventHandler(CardView_ItemsSourceChanged));
}
private void CardView_ItemsSourceChanged(object sender, EventArgs e)
{
    if (this.cardView.ItemsSource != null)
    {
        foreach (var item in this.cardView.ItemsSource as ObservableCollection<CardInfo>)
        {
            this.cardView.Collapse(item);
        }
    }
}

With that said, I have attached a sample project, so, could you give it a try?

Regards,
Stenly
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Peter
Top achievements
Rank 2
Iron
Iron
Veteran
commented on 03 Mar 2022, 08:24 AM

That works, thanks!

Another thing: Is there an event when the user expands/collapses a card?

Stenly
Telerik team
commented on 08 Mar 2022, 07:56 AM

Hello Tobias,

The RadCardView control does not expose events for when a RadCardViewItem element is either getting collapsed or expanded. However, you could still achieve the desired result and one way of doing so is by extracting the default control template of the RadCardViewItem element. Inside of the control template, the CardViewDataForm, which represents the data, is hosted inside a RadExpander element, which exposes the Expanded and Collapsed events. You could utilize these events, in order to achieve the desired result. Finally, create a new Style with TargetType="RadCardViewItem", and set the modified control template to the Template property, via a Setter.

The following code snippet shows the extracted control template from the Office_Black theme (if another theme is used, you would need to extract it from there):

<ControlTemplate x:Key="RadCardViewItemTemplate" TargetType="telerik:RadCardViewItem">
    <telerik:RadExpander
    Header="{TemplateBinding Header}"
    BorderBrush="{TemplateBinding BorderBrush}"
    Background="{TemplateBinding Background}"
    BorderThickness="{TemplateBinding BorderThickness}"
    HeaderTemplate="{TemplateBinding HeaderTemplate}"
    Style="{StaticResource CardViewItemExpanderStyle}"
    Expanded="OnCardArrowClicked"
    Collapsed="OnCardArrowClicked"
    IsExpanded="{Binding IsExpanded, RelativeSource={RelativeSource Mode=TemplatedParent}, Mode=TwoWay}">
        <telerik1:CardViewDataForm x:Name="PART_CardViewDataForm" BorderThickness="0" Background="Transparent" BorderBrush="Transparent" FocusVisualStyle="{x:Null}" CurrentItem="{Binding Data}"/>
    </telerik:RadExpander>
</ControlTemplate>

Sample event implementation, which is set to both the Expanded and Collapsed events:

private void OnCardArrowClicked(object sender, Telerik.Windows.RadRoutedEventArgs e)
{
    var expander = (RadExpander)sender;

    if (expander.IsExpanded)
    {
        MessageBox.Show("Expanded");
    }
    else
    {
        MessageBox.Show("Collapsed");
    }
}

The Style's implementation:

<!--If the NoXaml version of the assemblies: BasedOn="{StaticResource RadCardViewItemStyle}"-->
<Style TargetType="telerik:RadCardViewItem">
    <Setter Property="Template" Value="{StaticResource RadCardViewItemTemplate}"/>
</Style>

With that said, I have modified the sample project from my previous reply, so, could you give it a try?

Regards,
Stenly
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
CardView
Asked by
Peter
Top achievements
Rank 2
Iron
Iron
Veteran
Answers by
Stenly
Telerik team
Share this question
or