Bind existing values with Multiselect Control - checkbox mode

[Tarannum Choujar]

<div class="form-control">
                    <SfMultiSelect Value="mylist" TValue="string[]" TItem="MyModel" ShowSelectAll=true SelectAllText="@Loc["DropdownSelectAll"]" UnSelectAllText="@Loc["DropdownUnSelectAll"]" Mode="VisualMode.CheckBox" Placeholder="@Loc["PlaceHolderSelectProductionMeans"]" DataSource="@MyDatasource" AllowFiltering="true">
                        <MultiSelectFieldSettings Text="Description" Value="Id"></MultiSelectFieldSettings>
                        <MultiSelectEvents TValue="string[]" TItem="MyModel" ValueChange="OnChangeVal" ></MultiSelectEvents>
                    </SfMultiSelect>
                </div>
    
@code{
 private List<MyModel> MyDatasource;
 private string[] mylist = new string[] { };
  protected override async Task OnInitializedAsync()
    {
        MyDatasource = await MyDataService.GetRecordKeepingChemicals();
        mylist = new string[] { "1", "2" };
    }
}

Here the value that I am setting in the mylist is not shown by the control. Please let me know  a solution for this. Also is there a possibility to show the selected values as tags with the checkbox mode and select all button. I saw an existing thread for the selected values as tags with the checkbox mode but it did not have the select all option.

Thanks

[Sevvandhi Nagulan]

Hi Tarannum, 

Greetings from Syncfusion support. 

Query 1: Here the value that I am setting in the mylist is not shown by the control. Please let me know  a solution for this. 

We checked your query. We could not reproduce the reported issue when making the sample using provided code snippet. Meanwhile, we suggest to you change the Value property to @bind-Value attribute and ensure the reported issue. For your reference we have prepared the sample and attached it below. Refer to the code below, 

<div class="form-control"> 

        <SfMultiSelect @bind-Value="mylist" TValue="string[]" TItem="MyModel" ShowSelectAll=true SelectAllText="@selectAll" UnSelectAllText="@unSelectAll" Mode="VisualMode.CheckBox" Placeholder="@placeholder" DataSource="@MyDatasource" AllowFiltering="true"> 

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

            <MultiSelectEvents TValue="string[]" TItem="MyModel"></MultiSelectEvents> 

        </SfMultiSelect> 

    </div> 

 

 

@code { 

 

    private List<MyModel> MyDatasource; 

    private string[] mylist = new string[] { }; 

 

 

    protected override async Task OnInitializedAsync() 

    { 

        MyDatasource = await ownservice.GetRecordKeepingChemicals(); 

        mylist = new string[] { "1", "2" }; 

    } 

 

} 

Query 2: Also is there a possibility to show the selected values as tags with the checkbox mode and select all button. I saw an existing thread for the selected values as tags with the checkbox mode but it did not have the select all option. 

We would like to inform that, in the checkbox mode we will display the selected values using delimiter operator without the chip. This is default behavior of component. Also, we could not access the DOM elements in blazor since we provided the strongly typed API support for multiselect component. So we suggest to use the box mode for the requested requirement. If that does not help you, could you please let us know the use case scenario about the requested requirement. 

Regards, 

Sevvandhi N 

[Tarannum Choujar]

Hi 

Thanks for the quick response. I tried with @bind-Value="mylist" but that doesn't seem to work. I am using Syncfusion version 18.4.0.30. The variable mylist is updated with 2 array values but the change event (ValueChange="OnChangeVal" ) is not triggered which is why the values are never shown as selected in the multiselect. Please let me know a resolution. 

[Tarannum Choujar]

Hi Sevvandhi N

Please ignore the previous message

It worked! Thanks I was binding string[] instead of int[]. But the problem now is it shows values as below:

Instead of the actual values. Once I click on the filed the multiselect shows the values. Can I default it to show selected values?

[Sevvandhi Nagulan]

Hi Tarannum, 

 

 

Thanks for the update. 

 

 

We checked your query. We can reproduce the reported issue in our end. If you rendered the component inside dialog component, then we suggest to render the MultiSelect component after the dialog component has been rendered using Boolean variable. Please refer to the below code, 

 

 

<SfDialog Width="250px" ShowCloseIcon="true" IsModal="true" @bind-Visible="@IsVisible"> 

    <DialogEvents OnOpen="Open"></DialogEvents> 

    <DialogTemplates> 

        <Content> 

            @if (shouldShow) 

            { 

                <SfMultiSelect @ref="multiselectObj" Placeholder="e.g. Australia" @bind-Value="@MultiVal" DataSource="@Country" Mode="VisualMode.CheckBox"> 

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

                </SfMultiSelect> 

            } 

        </Content> 

    </DialogTemplates> 

    <DialogButtons> 

        <DialogButton Content="OK" IsPrimary="true" OnClick="@CloseDialog" /> 

        <DialogButton Content="Cancel" OnClick="@CloseDialog" /> 

    </DialogButtons> 

</SfDialog> 

 

@code { 

    SfMultiSelect<string[],Countries> multiselectObj { get; set; } 

 

    public string[] MultiVal { get; set; } = new string[] {"AU","BM" }; 

 

    public Boolean shouldShow { get; set; } = false; 

 

 

    private bool IsVisible { get; set; } = false; 

 

    public void Open() 

    { 

        shouldShow = true; 

    } 

 

 

 

Please find the sample below, 

 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/MultiSelect-2005587909 

 

 

Please check the above sample and get back to us if you need further assistance. 

 

 

Regards, 

Sevvandhi N