Updating SfMultiSelect's value

[Eduardo]

Greetings, Syncfusion team!

I'm trying to create a Product selector using ID in a dialog.

It should work like this:

     1 - The user inserts the Id of the product in the first field;

     2 - An http request is made using the id inserted

     3 - The request must return a Product, and it's Id will be used to populate the MultiSelect with the name of the product.

The MultiSelect is working fine, I can search and select products, the problem is when I try to update the data in the fields.

Here is the Code:

In orange, you can see what happens when the field Id is Blurred:

1 - I make the request using the product id

2 - I make a request to populate the Multiselect again (I don't think it's necessary, just to be sure)

3 - The variable binded to the Multiselect receives a new value

And last, I used the StateHasChanged() function to refresh the page and update the fields.

It's not working, the variable is changed, but the Multiselect isn't.

When I try to Console.WriteLine() the variable binded to the field, it writes the correct Id of the product, showing that the problem is about updating the Multiselect.

Am I doing something wrong?

I'd appreciate your help!

I'm sending the code in case it helps

Attachment: CadastroPedido_b4fb254c.zip

[Sevvandhi Nagulan]

Hi Consensu, 

Greetings from Syncfusion support. 

We checked your query of “Dynamically changed value not updated to the component”. We would like to let you that since the MultiSelect component accepts multiselection, it supports the TValue for arrays like int[],string[], and So, we suggest that you change the TValue to long[] type rather than long type. Kindly refer the following code. 

long[].  

<SfMultiSelect TValue="long[]" TItem="Produto" AllowFiltering="true" DataSource="@produtos" @bind-Value="produtonome" MaximumSelectionLength="1"> 

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

    <MultiSelectEvents TValue="long[]" TItem="Produto" ValueChange="OnChange"></MultiSelectEvents> 

</SfMultiSelect> 

 

    public long[] produtonome { get; set; } 

 

    async void BuscaProduto(NumericBlurEventArgs<long> args) 

    { 

        produtos = produtos1; 

        produtonome = new long[] { args.Value }; 

        Console.WriteLine(produtonome); 

        StateHasChanged(); 

    } 

Screenshot: 

 

Please find the sample below. 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/MultiSelect_Long[]-1458548556 

Kindly get back to us for further assistance. 

Regards, 

Sevvandhi N 

[Eduardo]

Hello, Sevvandhi Nagulan!

Thank you for the answer,

I was using the wrong component, since that dropbox must accept only one value.

Now I'm using  a SfDropDownList, and it's working better.

But I still can't change it's value based on the value on the other field (and vice-versa).

Notice that I'm binding both fields to the property "pedidoitem.Produto.Id", because both fields should be updated whenever one of the them is changed.

I used the Console.WriteLine() function to see if these properties really changed, and they did, as you can see below:

When the first field is blurred, the function writes in the console the value of the pedidoitem.Produto.Id property, which is binded tho the second field as well.

But when I change the value of the first field, it should change the value of the second field. But it doesn't happen:

The console show that the property received the new value, but it didn't update the DropdownList field.

The same thing happens when I change the DropDownList: the Dropdown is changed, but the fisrt field isn't.

Am I doing something wrong?

I'd appreciate if you could help me!

Best regards!

Attachment: CadastroPedido_d05fc4a2.zip

[Sevvandhi Nagulan]

Hi Consensu, 

Thanks for your update. 

We checked query of “Dynamically changed value not updated to the component”. When analyzing the provided code, initially the value for the dropdownlist component updated from the context value of Grid component. In the code, you have bound the event handler of blur and select inside the Grid’s template and updated the value from the blur event argument to the context of the grid component dynamically. To overcome the issue, we suggest that you to bound the event handler inside the @code section and individually bound the variable to bind-Value attribute of DropDownList component and assign the value from blur event argument to that variable directly.  Kindly refer the following code. 

@using Syncfusion.Blazor.DropDowns; 

@using Syncfusion.Blazor.Inputs; 

 

 

<SfNumericTextBox @bind-Value="pedidoitem" ShowSpinButton=false> 

    <NumericTextBoxEvents TValue="long" Blur="BuscaProduto"></NumericTextBoxEvents> 

</SfNumericTextBox> 

 

<SfDropDownList TValue="long" TItem="Produto" AllowFiltering="true" DataSource="@produtos" @bind-Value="produtonome"> 

    <DropDownListFieldSettings Text="Nome" Value="Id"></DropDownListFieldSettings> 

    <DropDownListEvents TValue="long" TItem="Produto" OnValueSelect="OnSelect"></DropDownListEvents> 

</SfDropDownList> 

 

@code { 

 

    public class Produto 

    { 

        public string Nome { get; set; } 

        public long Id { get; set; } 

    } 

 

    public void OnChange(MultiSelectChangeEventArgs<long[]> args) 

    { 

 

    } 

 

    public List<Produto> produtos = new List<Produto>() 

    { 

        new Produto(){Nome="Australia",Id= 10}, 

        new Produto() {Nome="Bermuda",Id= 9}, 

    }; 

    public List<Produto> produtos1 = new List<Produto>() 

    { 

        new Produto() {Nome = "Canada",Id=7} 

    }; 

    public long produtonome { get; set; } 

 

    public long pedidoitem { get; set; } 

 

    async void BuscaProduto(NumericBlurEventArgs<long> args) 

    { 

        produtos = produtos1; 

        produtonome =  args.Value ; 

        Console.WriteLine(produtonome); 

        StateHasChanged(); 

    } 

    void OnSelect(SelectEventArgs<Produto> args) 

    { 

        //pedidoitem.Produto.Id = args.ItemData.Id; 

        //Console.WriteLine(pedidoitem.Produto.Id); 

        //StateHasChanged(); 

    } 

} 

 

 

Additionally, after updating the value property in the blur event, call the PreventRender method of the grid component to prevent the grid component from refreshing. Kindly refer the below code. 

<SfGrid @ref="GridRef" AllowPaging="true" DataSource="@GridData" ShowColumnChooser="true" Toolbar="@(new List<string>() { "Add","Edit","Delete","Update","Cancel" })"> 

</SfGrid> 

 

async void BuscaProduto(NumericBlurEventArgs<long> args) 

    { 

        produtos = produtos1; 

        produtonome =  args.Value ; 

        GridRef.PreventRender(false); 

        Console.WriteLine(produtonome); 

        StateHasChanged(); 

    } 

Kindly get back to us for further assistance. 

Regards, 

Sevvandhi N 

[Eduardo]

Hello again, Sevvandhi Nagulan

I'm sorry, but I'm still having trouble with this case.

I'll show some prints to explain what my code is doing now:

I'm using variables binded to the field as you suggested, but I must do it in the Template context, because only there I can access the 

pedidoitem object and it's values.

If I try to do it inside @code "pedidoitem" is not recognized. Besides, I must set it's value Dynamically for each item present in the grid.

When the user blurs the Id field, I tried to do as you showed me

I notice that the  "GridRef.PreventRender()" works if I use it's argument as "true" (I think you showed it as "false" by mistake, right?)

The problem is that the Dropdown still doesn't update when the variable is changed. I'll show some prints to explain it's behavior.

Initially, the values are loaded correctly into the fields

When I insert a new value (an Id of a product that I know that is present in our database), the value still the old one:

I close the dialog and opened the same product again, it rendered again, and now the Id field has the old value and the Dropdown show only the product which Id I inserted in the Id field before:

It happens because the variable binded to the Dropdown is not reseted when the component renders.

So, my questions are:

1 - How can I update the value of the Dropdown field?

2 - Do I need to populate the Dropdown list as you showd before? (inserting a list with only the desired values)

3 - What am I doing wrong?

Attachment: CadastroPedido_c78800f4.zip

[Sevvandhi Nagulan]

Hi Consensu, 

We have created an incident under your direct trac account. We request you to follow that incident to further details about this issue. 

Regards, 

Sevvandhi N