SfMultiSelect with database mapping table

I am wondering if it's possible to wire up the SfMultiSelect so that the TItem and Datasource is one type but the TValue and bind-Value are another type.


For example, here is a database structure:

CREATE TABLE `customer` (

  `id` int unsigned NOT NULL AUTO_INCREMENT,

  `name` varchar(50) NOT NULL DEFAULT ''

)


CREATE TABLE `customer_newsletter` (

  `id` int unsigned NOT NULL AUTO_INCREMENT,

  `customer_id` INT NOT NULL DEFAULT 0,

  `newsletter_id` INT NOT NULL DEFAULT 0

)


CREATE TABLE `newsletter` (

  `id` int unsigned NOT NULL AUTO_INCREMENT,

  `name` varchar(50) NOT NULL DEFAULT ''

)


There are customers, and newsletters, and a mapping table to hold which newsletters a customer is subscribed to. There are C# classes for these:


public class Customer {

    public int Id { get; set; }

    public string Name { get; set; }

    public List<CustomerNewsletter> Newsletters { get; set; } = new List<CustomerNewsletter>();

}

public class CustomerNewsletter {

    public int Id { get; set; }

    public int CustomerId { get; set; }

    public int NewsletterId { get; set; }

}

public class Newsletter {

    public int Id { get; set; } 

    public string Name { get; set; }

}


I'd like the multi-select to show all of the Newsletters, and have the selected items be stored in the customer's list proerty, like this:


 <SfMultiSelect TValue="List<CustomerNewsletter>" TItem="Newsletter" DataSource="NewsletterList" @bind-Value="customer.Newsletters" FloatLabelType=FloatLabelType.Always Placeholder="Newsletters" AllowCustomValue="false" Mode="VisualMode.Box">

     <MultiSelectFieldSettings Text="Name" Value="Id"></MultiSelectFieldSettings>

 </SfMultiSelect>


code {

   List<Newsletter> NewsletterList = GetAllNewsletters();

   Customer customer = GetCustomer();

}


The problem with the above example is that the customer.Newsletters property is set to null by the multi-select, I believe that is because there is no way for it to translate between the drop down list of type Newsletter and the target list of type CustomerNewsletter. I want the output of the multi-select to be List<CustomerNewsletter>, but the input is List<Newsletter>.


How can this be made to work without adding any other fields or properties?  Is there some event or function that can translate the displayed list selected items into the target type list? Something like the CustomValueSpecifier event where I can do somthing like this:

private void TranslateValueHandler(TranslateValue<Newsletter> args) {

   args.NewType = new CustomerNewsletter() { CustomerID = customer.Id, NewsletterId = args.Value };

 }


1 Reply

UD UdhayaKumar Duraisamy Syncfusion Team April 9, 2024 10:48 AM UTC

Hello Ryan,


In the provided code snippet, the “AllowCustomValue” property is set to false but the CustomValueSpecifier event is used. We would like to inform you that the CustomValueSpecifier event will trigger when AllowCustomValue is set to true and select or tag the typed custom value. Also, the CustomValueSpecifier event argument holds only Cancel, NewData, and Text properties. For further clarification and information, please refer to the documentation provided below:



If there's any misunderstanding regarding the requirement, we kindly request you to provide additional details along with the exact requirement details and a use case scenario. Additionally, if possible, please provide a runnable sample that illustrates the issue you are experiencing. This will help us validate the requirement further and provide you with a more accurate solution.


Best regards,

Udhaya Kumar D.


Loader.
Up arrow icon