1. Home
  2. Forum
  3. Blazor
  4. Display value from another control inside text box

Display value from another control inside text box

Hi, 
I have SfComboBox 

<div class="form-group col-md-6">
                                    <SfComboBox ID="DeviceTypeEntryId"   @bind-Value="@((context as Ticket).DeviceTypeEntryId)" Placeholder="Model" AllowFiltering="true" FloatLabelType="@FloatLabelType.Always" TItem="DeviceType" TValue="int?" DataSource="@DeviceTypes">
                                        <ComboBoxTemplates TItem="DeviceType">
                                            <HeaderTemplate>
                                                <span class='head'><span class='name'>Model</span><span class='modelcolor'>Boja</span></span>
                                            </HeaderTemplate>
                                            <ItemTemplate Context="emContext">
                                                <span><span class='name'>@((emContext as DeviceType).DeviceModel)</span><span class='modelcolor'>@((emContext as                                                   DeviceType).DeviceColor)</span></span>
                                            </ItemTemplate>
                                        </ComboBoxTemplates>

                                        <ComboBoxFieldSettings Text="DeviceModel" Value="Id"></ComboBoxFieldSettings>
                                    </SfComboBox>
 </div>


 public class DeviceType
{
      public int Id { get; set; }
      public string DeviceModel { get; set; }
      public string DeviceColor { get; set; }
        
}

which displays DeviceModel from Datasource @DeviceTypes  which is a list of DeviceType model and it works.
My idea is to have a textbox or something similar next to the ComboBox which will display DeviceColor value from selected ComboBox DeviceType so the user can see both. 
Maybe there is some more elegant solution to this.
 


9 Replies 1 reply marked as answer
PM Ponmani Murugaiyan Syncfusion Team July 10, 2020 11:44 AM UTC

Hi Dubravko, 
 
Greetings from Syncfusion support. 
 
As per your requirement we have prepared sample to display the DeviceColor value in Textbox. Please find the code snippet and test sample below for reference. 
 
[Index.razor] 
 
<div id="combobox"> 
    <SfComboBox ID="DeviceTypeEntryId" AllowFiltering="true" TValue="int?" TItem="DeviceType" Placeholder="Select a customer" DataSource="@DeviceTypes"> 
        <ComboBoxTemplates TItem="DeviceType"> 
            <ItemTemplate> 
                <span><span class='name'>@((context as DeviceType).DeviceModel)</span><span class='country'>@((context as DeviceType).DeviceColor)</span></span> 
            </ItemTemplate> 
        </ComboBoxTemplates> 
        <ComboBoxFieldSettings Text="DeviceModel" Value="Id"></ComboBoxFieldSettings> 
        <ComboBoxEvents TValue="int?" ValueChange="ValueChangeHandler"></ComboBoxEvents> 
    </SfComboBox> 
</div> 
<div id="textbox"> 
    <SfTextBox @bind-Value="@DeviceColor"></SfTextBox> 
</div> 
 
 
@code { 
    public string DeviceColor { get; set; } 
    public class DeviceType 
    { 
        public int Id { get; set; } 
        public string DeviceModel { get; set; } 
        public string DeviceColor { get; set; } 
    } 
    List<DeviceType> DeviceTypes = new List<DeviceType> 
{ 
        new DeviceType() { DeviceModel = "Redmi",  DeviceColor = "Red", Id = 1 }, 
        new DeviceType() { DeviceModel = "Sony", DeviceColor = "Blue", Id = 2 }, 
        new DeviceType() { DeviceModel = "Samsung", DeviceColor = "Green", Id = 3 }, 
        new DeviceType() { DeviceModel = "Micromax", DeviceColor = "Orange", Id = 4}, 
    }; 
    public void ValueChangeHandler(Syncfusion.Blazor.DropDowns.ChangeEventArgs<int?> args) 
    { 
        var item = JsonConvert.DeserializeObject<DeviceType>(args.ItemData.ToString()); 
        this.DeviceColor = item.DeviceColor; 
    } 
} 
 
 
Output: 
 
 
 
 
 
 
Kindly check with the above sample. Please get back us if you need further assistance. 
 
Regards,  
Ponmani M 


Marked as answer
DF df July 10, 2020 01:50 PM UTC

Hi Ponmani,

thank you very much, it works. I was thinking about using the property but thought maybe there is a way to directly reference the SfComboBox, but nevermind it works :).
I just made a small change so I check if  args.Itemdata  are not null if user clicks on small X inside the combobox

           if (args.ItemData != null)
            {
                var item = JsonConvert.DeserializeObject<DeviceType>(args.ItemData.ToString());
                this.EntryDeviceColor = item.DeviceColor;

            }
            else
            {
                this.EntryDeviceColor = "/";
            }

On a side note, any suggestion on what is the best way to display this value inside the textbox when dialog form opens, not only after the change in combobox.




PM Ponmani Murugaiyan Syncfusion Team July 13, 2020 01:06 PM UTC

Hi Dubravko, 
 
Thanks for the update. 
 
We would like to inform you that the value will be updated in Textbox only when the ComboBox value get changed. As per your requirement, if you have set the preselect value in the ComboBox component, you can update the Textbox with the corresponding field value to find the value inside the textbox when dialog opens.  
 
Please find the code snippet and test sample below for reference. 
 
[Index.razor] 
 
<SfButton @onclick="@OnClicked">Open Modal Dialog</SfButton> 
<SfDialog @bind-Visible="@IsVisible" Width="350px" IsModal="true"> 
    <DialogEvents OnOverlayClick="OnOverlayclick"> 
    </DialogEvents> 
    <DialogTemplates> 
        <Content> 
            <div id="combobox"> 
                <SfComboBox ID="DeviceTypeEntryId" AllowFiltering="true" Index="2" TValue="int?" TItem="DeviceType" Placeholder="Select a customer" DataSource="@DeviceTypes"> 
                    <ComboBoxTemplates TItem="DeviceType"> 
                        <ItemTemplate> 
                            <span><span class='name'>@((context as DeviceType).DeviceModel)</span><span class='country'>@((context as DeviceType).DeviceColor)</span></span> 
                        </ItemTemplate> 
                    </ComboBoxTemplates> 
                    <ComboBoxFieldSettings Text="DeviceModel" Value="Id"></ComboBoxFieldSettings> 
                    <ComboBoxEvents TValue="int?" ValueChange="ValueChangeHandler"></ComboBoxEvents> 
                </SfComboBox> 
            </div> 
            <div id="textbox"> 
                <SfTextBox @bind-Value="@DeviceColor"></SfTextBox> 
            </div> 
        </Content> 
    </DialogTemplates> 
</SfDialog> 
 
@code { 
    ... 
   public string DeviceColor { get; set; } = "Green"; 
} 
 
 
Kindly check with the above sample. If issue still exists in your end or if we misunderstood the query. Please provide the below details which will be helpful for us to provide you the solution at earliest. 
 
  1. Provide video demonstration or issue reproducing sample.
 
Regards,  
Ponmani M 


DF df July 15, 2020 02:04 PM UTC

Hi Ponmani,
sorry for the delay in reply. Thank you for the sample, it's similar what I had in mind,  DeviceTypeEntryId ComboBox already has the value 
from the underlying grid row inside the grid populated by some data, no need to set it manually.
What I wanted to ask you is, when the dialog opens I want to read what is the DeviceColor value of the data inside the ComboBox, and to display it in
text box. 
In your first sample, you got the value of  the DeviceColor by:
var item = JsonConvert.DeserializeObject<DeviceType>(args.ItemData.ToString()); 
his.DeviceColor = item.DeviceColor; 
inside ValueChange event of the ComboBox which is great,
but how to get the same value if there is no event involved on the ComboBox,
something like:

var item = .....ComboBox 

in short how to read the value of some bound control on the page, w/o any event or change of that control.


 


PM Ponmani Murugaiyan Syncfusion Team July 16, 2020 03:00 PM UTC

Hi Dubravko, 

Thanks for the update. 

Query: But how to get the same value if there is no event involved on the ComboBox. 

As per your requirement without the ComboBox event, you can get the device color of the respective model using the bind-value. While change the value in the comboBox the corresponding model color will be updated with the value field mapped with DeviceColor. Please find the below code snippet for reference. 

[Index.razor] 
 
SfButton @onclick="@OnClicked">Open Modal Dialog</SfButton> 
<SfDialog @bind-Visible="@IsVisible" Width="350px" IsModal="true"> 
    <DialogEvents OnOverlayClick="OnOverlayclick"> 
    </DialogEvents> 
    <DialogTemplates> 
        <Content> 
            <div id="combobox"> 
                <SfComboBox ID="DeviceTypeEntryId" AllowFiltering="true" Index="2" @bind-Value="@DeviceColor" TValue="string" TItem="DeviceType" Placeholder="Select a customer" DataSource="@DeviceTypes"> 
                    <ComboBoxTemplates TItem="DeviceType"> 
                        <ItemTemplate> 
                            <span><span class='name'>@((context as DeviceType).DeviceModel)</span><span class='country'>@((context as DeviceType).DeviceColor)</span></span> 
                        </ItemTemplate> 
                    </ComboBoxTemplates> 
                    <ComboBoxFieldSettings Text="DeviceModel" Value="DeviceColor"></ComboBoxFieldSettings> 
                </SfComboBox> 
            </div> 
            <div id="textbox"> 
                <SfTextBox @bind-Value="@DeviceColor"></SfTextBox> 
            </div> 
        </Content> 
    </DialogTemplates> 
</SfDialog> 
 
@code { 
    private bool IsVisible { get; set; } = true; 
    public string DeviceColor { get; set; } 
    ... 
} 

 
Kindly check with the above sample. Please get back us if you need further assistance. 

Regards, 
Ponmani M

DF df July 16, 2020 04:14 PM UTC

Hi Ponmani,

maybe we misunderstood each other, let me go back to my original question and ComboBox:

<div class="form-group col-md-6">
     <SfComboBox ID="DeviceTypeEntryId" @bind-Value="@((context as Ticket).DeviceTypeEntryId)" Placeholder="Model" AllowFiltering="true" FloatLabelType="@FloatLabelType.Always" 
TItem="DeviceType" TValue="int?" DataSource="@DeviceTypes">
            <ComboBoxTemplates TItem="DeviceType">
                  <HeaderTemplate>
                      <span class='head'><span class='name'>Model</span><span class='modelcolor'>Color</span></span>
                  </HeaderTemplate>
                      <ItemTemplate Context="emContext">
                           <span><span class='name'>@((emContext as DeviceType).DeviceModel)</span><span class='modelcolor'>@((emContext as DeviceType).DeviceColor)</span></span>
                      </ItemTemplate>
             </ComboBoxTemplates>
             <ComboBoxFieldSettings Text="DeviceModel" Value="Id"></ComboBoxFieldSettings>
     </SfComboBox>
 </div>

This combo box is part of the larger edit form which comes from the DataGrid edit template and the context of that grid is List<Ticket>.  

To simplify that Ticket class:

public class Ticket 
{
     public int Id {get;set;}
     public string Name {get;set;}
     public int DeviceTypeEntryId {get;set;}
}


as you can see combo box pulls the value of  @bind-Value="@((context as Ticket).DeviceTypeEntryId)" and displays the corresponding DeviceType  by that DeviceTypeEntryId, per your example that would be equivalent of pulling data per Id
 new DeviceType() { DeviceModel = "Redmi",  DeviceColor = "Red",Id = 1}
 
so I can't have this: @bind-Value="@DeviceColor"

because combo box is bind to DeviceTypeEntryId of the Ticket class over Id of the DeviceType (DeviceTypeEntryId stores Id value of the DeviceType class for that record), 
 <ComboBoxFieldSettings Text="DeviceModel" Value="Id"></ComboBoxFieldSettings>

and displays  DeviceModel and DeviceColor properties of DeviceType class with help of ItemTemplate
<ItemTemplate Context="emContext">
    <span><span class='name'>@((emContext as DeviceType).DeviceModel)</span><span class='modelcolor'>@((emContext as DeviceType).DeviceColor)</span></span>
</ItemTemplate>

To summarize, if I put a button on the form and click on it how can I read the value of the DeviceColor of the currently selected item inside the combo box, or even
better how to get the whole DeviceType object as we did in ValueChangeHandler from args.ItemData:
var item = JsonConvert.DeserializeObject<DeviceType>(args.ItemData.ToString());
string currentDeviceColor = item.DeviceColor;
something like:
var item = JsonConvert.DeserializeObject<DeviceType>(combobox.ItemData.ToString());
string currentDeviceColor = item.DeviceColor;

is it possible to get current selected object by maybe id of the combo box  <SfComboBox ID="DeviceTypeEntryId"


Sorry if I maybe missed the correct answer along the way.


PM Ponmani Murugaiyan Syncfusion Team July 20, 2020 03:45 AM UTC

Hi Dubravko, 

Thanks for the update. 

Yes, you can get the DeviceType object on button click as like below screenshot. Please find the test sample below for reference. 

 

 
Kindly check with the above sample. Please get back us, if you need further assistance. 

Regards, 
Ponmani M 


DF df July 20, 2020 08:12 AM UTC

Hi Ponmani,
thx for the demo. Yes this is what I wanted but with:

var device = this.ComboboxObj.Datasource;

you get the whole list, in our case List<DeviceType> but not the selected object. inside the combo box. In your screenshot, you can see Count = 4

by using:

var device = this.ComboboxObj.Value;

I will get 3 if I select Samsung Green because that is the Id value.

I don't see anywhere that you can get currently selected value as DeviceType object.

Sure, one way of getting DeviceColor is

var deviceColorSelected = this.ComboboxObj.DataSource.Single(x => x.Id == this.ComboboxObj.Value).DeviceColor

Was thinking maybe there is a more direct approach, but if not this will suffice.





PM Ponmani Murugaiyan Syncfusion Team July 22, 2020 03:35 AM UTC

Hi Dubravko, 

Thanks for the update. 

Yes, you can use the same to get the DeviceColor of the selected item in order to achieve your requirement through button click. Please get back us, if you need further assistance. 

Regards, 
Ponmani M 


Loader.
Up arrow icon