Binding integer value and displaying text of the selected value problems

[Özgür ALTUNSÖGÜT]

Hello everyone,

I have two major problems on combobox control for Blazor server app.

Firstly I want to Bind an integer value as an Id value for the combobox, but it is a big problem to bind an integer value.

<SfComboBox TValue="string" TItem="MachineGroupDto" Value="_mDto.IdStr" Placeholder="-- Please select --" AllowFiltering="true" DataSource="@_machineGroupList">

      <ComboBoxFieldSettings Text="GroupName" Value="Id"></ComboBoxFieldSettings>

 </SfComboBox>

If I make TValue = "int", I can't bind the control. Solution is making int to int? 

But I can't do it because I use this dto in my data, business projects. This is a foreign key of a table and it cannot be null. Why I have to do it int?

I made a string version of my Id value as IdStr to solve this problem. and Transfer this IdStr value to real foreign key field when I save dto to database.

But it has to be easy to bind an integer value as a value parameter. I hope on the next version, Syncfusion can make an improvement about this issue.

My second problem is display text of the selected item on the combobox text area.

Imagine my machine group table is like below;

1: Group 1

2: Group 2

3: Group 3

...

when I sent 3 as IdStr value, component display 3 on the text. but I should display Group 3 as a text value of combobox.

So what should I do?

Thanks.

Regards.

 

[Sevvandhi Nagulan]

Hi Özgür,  

Greetings from Syncfusion support.  

We have checked the reported requirement.  

Query 1: I have two major problems on combobox control for Blazor server app.  

Firstly I want to Bind an integer value as an Id value for the combobox, but it is a big problem to bind an integer value.  

  

<SfComboBox TValue="string" TItem="MachineGroupDto" Value="_mDto.IdStr" Placeholder="-- Please select --" AllowFiltering="true" DataSource="@_machineGroupList">  

      <ComboBoxFieldSettings Text="GroupName" Value="Id"></ComboBoxFieldSettings>  

 </SfComboBox>  

  

If I make TValue = "int", I can't bind the control. Solution is making int to int?   

But I can't do it because I use this dto in my data, business projects. This is a foreign key of a table and it cannot be null. Why I have to do it int?  

I made a string version of my Id value as IdStr to solve this problem. and Transfer this IdStr value to real foreign key field when I save dto to database.  

But it has to be easy to bind an integer value as a value parameter. I hope on the next version, Syncfusion can make an improvement about this issue.  

  

  

Solution:   

 We provided the int? support because of the below reasons.  

 

ComboBox component is editable. So we can delete the value using clear button and delete key. At that time, the value becomes null. To handle that case we have provided the TValue as nullable.   

Also we can provide the TValue as int if you are not going to clear the input value using delete key or ShowClearButton. Also, we can use the TValue as int by disabling the ShowClearButton.    

 

Query 2: My second problem is display text of the selected item on the combobox text area.  

Imagine my machine group table is like below;  

1: Group 1  

2: Group 2  

3: Group 3  

...  

  

when I sent 3 as IdStr value, component display 3 on the text. but I should display Group 3 as a text value of combobox.  

  

So what should I do?  

  

  

Solution:    

  

By default while passing the id then, corresponding text property will be shown in the component. We suspect that you have bind the dataSource’s value property as int and binded the TValue as string. Else, if loaded the data asynchronously, then set the value property after the dataSource has been loaded.  

If you want to get the selected value’s text property from the component’s instance in the change or select event. Kindly refer the below code,  

 

<SfComboBox @ref="comboboxObj" TValue="int" TItem="Countries" ShowClearButton="false"Placeholder="e.g. Australia" Value="@ComboVal" DataSource="@Country">  

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

    <ComboBoxEvents TValue="int" ValueChange="onChange"></ComboBoxEvents>  

</SfComboBox>  

 public int ComboVal = 1; 

public void onChange(ChangeEventArgs<int> e)  

    {  

        text = this.comboboxObj.Text;  

    }  

 

Please find the sample below,  

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1753973344  

  

Regards,  

Sevvandhi N  

[Özgür ALTUNSÖGÜT]

Hello,

I changed my components codes as you said. It's working in a direct url (http://localhost:5000/machines/new). But if I try to open it in a dialog in a different url (http://localhost:5000/machines) , I got the error below.

blazor.server.js:15 [2020-04-03T12:10:16.215Z] Error: System.InvalidCastException: Null object cannot be converted to a value type.

   at System.Convert.ChangeType(Object value, Type conversionType, IFormatProvider provider)

   at Syncfusion.Blazor.BaseComponent.ChangeType(Object value, Type conversionType, Boolean isClientChange)

   at Syncfusion.Blazor.DropDowns.SfDropDownList`2.getItemData()

   at Syncfusion.Blazor.DropDowns.SfDropDownList`2.setValue()

   at Syncfusion.Blazor.DropDowns.SfDropDownList`2.updateValues(Dictionary`2 props)

   at Syncfusion.Blazor.DropDowns.SfDropDownList`2.initValue(Dictionary`2 props)

   at Syncfusion.Blazor.DropDowns.SfDropDownList`2.InitialRendered()

   at Syncfusion.Blazor.BaseComponent.InitComponent()

   at Syncfusion.Blazor.BaseComponent.OnAfterRenderAsync(Boolean firstRender)

   at Syncfusion.Blazor.DropDowns.DropDownBase`1.OnAfterRenderAsync(Boolean firstRender)

   at Syncfusion.Blazor.DropDowns.SfDropDownList`2.OnHybridAfterRender(Boolean firstRender)

   at Syncfusion.Blazor.DropDowns.SfDropDownList`2.OnAfterRenderAsync(Boolean firstRender)

   at Syncfusion.Blazor.DropDowns.SfComboBox`2.OnAfterRenderAsync(Boolean firstRender)

   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

My code is below;

<SfComboBox TValue="int" TItem="MachineGroupDto" ShowClearButton="false" Placeholder="Please select" @bind-Value="@ComboVal" DataSource="@MachineGroupList">

<ComboBoxFieldSettings Text="GroupName" Value="Id"></ComboBoxFieldSettings>

</SfComboBox>

Regards.

[Sevvandhi Nagulan]

Hi Özgür, 

We checked the reported requirement in our end by placing the ComboBox component inside dialog also outside of dialog component. We could not replicate the issue in our end. We suspect that you have dynamically assigned the null values to the value property of the component. This might be the cause of the issue. Also you have mentioned that, (“But if I try to open it in a dialog in a different url “).  Can you please provide the details about navigation? 

 

1. Whether the issue occurs when navigating to the other page or with in the component navigation?
2. If possible provide the video demonstration of the issue.
3. Provide sufficient code to replicate the issue.

Please find the sample below, 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-2035772479 

Regards, 

Sevvandhi N 

[Özgür ALTUNSÖGÜT]

Hello,

imagine that I have Component A and Component B. 

Component B is calling in component A in a SfDialog. When I enter the page url of component A, initialization codes of component B also works and I got the error which I wrote before.

If I directly write the page url of component B, everything works fine.

Some of the codes of component A is below;

<SfDialog @bind-Visible="isVisible" ShowCloseIcon="true" IsModal="true">

    <DialogTemplates>

        <Header>

            <span class="fa fa-edit" style="padding-right:3px"></span>Edit

        </Header>

        <Content>

            @OpenDialog()

        </Content>

    </DialogTemplates>

    <DialogAnimationSettings Effect="@DialogEffect.FadeZoom"></DialogAnimationSettings>

</SfDialog>

<SfToast @ref="ToastObj" TimeOut=2000 Content="@ToastContent">

    <ToastPosition X="Right" Y="Bottom"></ToastPosition>

</SfToast>

    [Parameter] public bool isVisible { get; set; }

    [Parameter] public EventCallback<bool> DialogClosed { get; set; }

    [Parameter] public int Id { get; set; }

    public T child;

    SfToast ToastObj;

    string ToastContent { get; set; } = "Saved";

    RenderFragment OpenDialog() => builder =>

    {

        builder.OpenComponent(0, typeof(T));

        builder.AddAttribute(1, "Parent", this);

        builder.AddAttribute(2, "Id", Id);

        builder.CloseComponent();

    };

Some of the codes of the component B is below;

                    <SfComboBox TValue="int" TItem="MachineGroupDto" ShowClearButton="false" Placeholder="Please select" AllowFiltering="true"

                                @bind-Value="@ComboValue" DataSource="@MachineGroupList">

                        <ComboBoxFieldSettings Text="GroupName" Value="Id"></ComboBoxFieldSettings>

                    </SfComboBox>

@code {

    [Parameter] public int Id { get; set; }

    [Parameter] public A<B> Parent { get; set; }

    public ICollection<MachineroupDto> MachineGroupList = new List<MachinegroupDto>();

    public int ComboValue;

    protected override async Task OnInitializedAsync()

    {

        await ListMachineGroups();

    }

    async Task ListMachineGroups()

    {

        MachineGroupList = await MachineGroupService.GetAsync($"machinegroup/list");

    }

}

[Sevvandhi Nagulan]

Hi Özgür, 

We have checked the reported issue. The cause of the issue is, the null value set to the ComboValue  somewhere in the code. Since TValue is int, it throwing error for the null case.  So in the renderFragment function check whether the combobox is null or not, if it is null, then assign 0 to the ComboValue before opening the component.  

Please check this solution in your end and let us know if you need any other further assistance. 

Regards, 

Sevvandhi N 

[Özgür ALTUNSÖGÜT]

Hello,

I made ComboValue as a [Parameter] and set 0 in the RenderFragment function. But still I got same error.

By the way, ComboValue is an integer variable and it should be zero as default value.

Regards.

[Sevvandhi Nagulan]

Hi Özgür, 

Thanks for the update.  

We checked the reported requirement in our end. We could not proceed the issue with the provided code. So can you  please provide any of the below details to proceed further? 

1. Issue reproducing sample
2. Modify the previously given sample to replicate the issue
3. Provide the sufficient code reproduce the issue (Full code of component A and  B without)

Regards, 

Sevvandhi N