How to use multi select in card
I have used grid control to select multiple record using checkbox in grid(grid.selectrecordasync method).It works fine but I would like to know how to do same logic in card view.
Hi KINS,
The Blazor Card is primarily designed as a container-based user interface control to display organized content. It does not offer any public methods. However, we would like to understand your specific requirements better in order to provide the most suitable solution for your needs.
Could you please provide us with more details? For example, if you are looking to render a card instead of a checkbox inside each grid row, we would like to know more about the desired functionality and any specific customization you require. Additionally, if you can share any image or video illustrations to help us visualize your requirements, it would greatly assist us in finding the best solution.
Demo: https://blazor.syncfusion.com/demos/card/basic-card?theme=fluent
Documentation: https://blazor.syncfusion.com/documentation/card/getting-started
Regards,
Buvana S
Please check attached file (screenshot) for your reference...
Awaiting for reply
Hi KINS,
Thank you for reaching out to us. We apologize for any inconvenience you may have experienced.
Regarding your query about the SfCard component, we would like to clarify that the SfCard is a container-based component and not a data source-based component. On the other hand, the SfGrid component is specifically designed to work with data sources. Therefore, if you would like to achieve the behavior of selecting a card similar to the Grid component, you will need to manually implement the required code in your application.
To assist you further, we have prepared a code snippet and a sample that demonstrate how to render checkboxes in each card and retrieve the information of the selected card through the CheckedCard variable. You can find the code and sample below:
|
<SfCard ID="@card.Id.ToString() <CardContent Content="@card.Content" /> @if (@card.IsChecked && !CheckedCard.Contains(@card.Id.ToString())) { CheckedCard.Add(@card.Id.ToString()); } <SfCheckBox @bind-Checked="@card.IsChecked" @onchange="((args)=>OnChange(args, card.Id))">Checkbox: @card.IsChecked</SfCheckBox> </SfCard> @code{ private void OnChange(Microsoft.AspNetCore.Components.ChangeEventArgs args, int id) { var isChecked = args.Value.ToString(); if (isChecked == "False" && CheckedCard.Contains(id.ToString())) { CheckedCard.Remove(id.ToString()); } } } |
Regards,
Buvana S
Attachment: BlazorApp1_(6)_9fb14f81.zip
- 5 Replies
- 2 Participants
-
KI KINS
- Jun 7, 2023 03:37 PM UTC
- Jul 19, 2023 08:57 AM UTC
