DropDownList Change Event Doesn't Seem to Trigger #3880

9 Answer(s)

• 

  0

  enisn created 2 years ago

  Support Team .NET Developer

  Hi @dev1_premierpoint

  Can you try SelectedValueChanged property instead of onselect?

  For more information you can visit Blazorise DropdownList documentation https://blazorise.com/docs/extensions/dropdownlist

  Save Cancel
• 

  0

  dev1_premierpoint created 2 years ago

  how does this interact with @bind-SelectedValue? Should I instead be using that to define the event's callback function?

  This is how I set up the selectedValueChanged suggested:

  <DropdownList @ref="ddlSpoCred" TItem="SpoCredDto" TValue="int" Data="spoCredentials" TextField="@((item)=>item.AppID)" ValueField="@((item)=>item.Id)" @bind-SelectedValue="@selectedDropValueSPO" SelectedValueChanged=OnSpoCredChange>Select Credential</DropdownList>

  This is the error I get for the new implementation:

  The component parameter 'SelectedValueChanged' is used two or more times for this component. Parameters must be unique (case-insensitive). The component parameter 'SelectedValueChanged' is generated by the '@bind-SelectedValue' directive attribute.

  Save Cancel

  1
• 

  0

  enisn created 2 years ago

  Support Team .NET Developer

  You can use SelectedValueChanged event and manage current selected item manually instead of using binding.

  Or, You can just use a regular encapsulation over your property. You can use setter of the selectedDropValueSPO property.

  I have an example for that:

  Index.razor

  <Card>
      <CardBody>
          <DropdownList @ref="dropdownRef"
              TItem="IndexItem" TValue="Guid"
              Data="IndexItems"
              @bind-SelectedValue="SelectedIndexItemId"
              TextField="@((item)=>item.Name)"
              ValueField="@((item)=>item.Id)"
              >Select Credential</DropdownList>
      </CardBody>
      <CardFooter>
          <p>
              @SelectedIndexItemId
          </p>
      </CardFooter>
  </Card>
  

  Index.razor.cs

  public partial class Index
  {
      protected DropdownList<IndexItem, Guid> dropdownRef;
      private Guid selectedIndexItemId;
  
      public List<IndexItem> IndexItems { get; set; } = new List<IndexItem>
      {
          new IndexItem(Guid.NewGuid(), "Item 1"),
          new IndexItem(Guid.NewGuid(), "Item 2"),
          new IndexItem(Guid.NewGuid(), "Item 3"),
          new IndexItem(Guid.NewGuid(), "Item 4"),
          new IndexItem(Guid.NewGuid(), "Item 5"),
      };
  
      public Guid SelectedIndexItemId
      {
          get => selectedIndexItemId;
          set {
              selectedIndexItemId = value;
              Logger.LogInformation("SelectedIndexItemIdChanged!");
          }
      }
  }
  

  And the result is:

  Save Cancel
• 

  0

  dev1_premierpoint created 2 years ago

  I've been reworking the code to work with manually keeping up with the selected value instead. I was wondering if there was a way to use both the @bind and the selectedValueChanged event?

  Save Cancel
• 

  0

  dev1_premierpoint created 2 years ago

  I guess that's more or less what you answered last time. Thanks for your help

  Save Cancel
• 

  0

  dev1_premierpoint created 2 years ago

  You can use SelectedValueChanged event and manage current selected item manually instead of using binding.

  Or, You can just use a regular encapsulation over your property. You can use setter of the selectedDropValueSPO property.

  I have an example for that:

  Index.razor

  <Card> 
      <CardBody> 
          <DropdownList @ref="dropdownRef" 
              TItem="IndexItem" TValue="Guid" 
              Data="IndexItems" 
              @bind-SelectedValue="SelectedIndexItemId" 
              TextField="@((item)=>item.Name)" 
              ValueField="@((item)=>item.Id)" 
              >Select Credential</DropdownList> 
      </CardBody> 
      <CardFooter> 
          <p> 
              @SelectedIndexItemId 
          </p> 
      </CardFooter> 
  </Card> 
  

  Index.razor.cs

  public partial class Index 
  { 
      protected DropdownList<IndexItem, Guid> dropdownRef; 
      private Guid selectedIndexItemId; 
   
      public List<IndexItem> IndexItems { get; set; } = new List<IndexItem> 
      { 
          new IndexItem(Guid.NewGuid(), "Item 1"), 
          new IndexItem(Guid.NewGuid(), "Item 2"), 
          new IndexItem(Guid.NewGuid(), "Item 3"), 
          new IndexItem(Guid.NewGuid(), "Item 4"), 
          new IndexItem(Guid.NewGuid(), "Item 5"), 
      }; 
   
      public Guid SelectedIndexItemId 
      { 
          get => selectedIndexItemId; 
          set { 
              selectedIndexItemId = value; 
              Logger.LogInformation("SelectedIndexItemIdChanged!"); 
          } 
      } 
  } 
  

  And the result is:

  I actually do need to be able to using the await keyword in the "onSelectedValueChange" event, or in this case the setter. Any way that I can still do that with this method?

  Save Cancel
• 

  0

  enisn created 2 years ago

  Support Team .NET Developer

  This is a Blazorise limitation. There is no event or async callback for selection change.

  But you can still use your async operation with Task.Run() as a workaround.

  public partial class Index
  {
      private Guid selectedIndexItemId;
      public Guid SelectedIndexItemId
      {
          get => selectedIndexItemId;
          set {
              selectedIndexItemId = value;
              Task.Run(OnDropdownSelected); // 👈
          }
      }
      
      public async Task OnDropdownSelected() // 👈
      {
          await Task.Delay(1000);
          Logger.LogInformation("OnDropdownSelected!");
      }
  }
  

  Save Cancel
• 

  0

  dev1_premierpoint created 2 years ago

  This is a Blazorise limitation. There is no event or async callback for selection change.

  But you can still use your async operation with Task.Run() as a workaround.

  public partial class Index 
  { 
      private Guid selectedIndexItemId; 
      public Guid SelectedIndexItemId 
      { 
          get => selectedIndexItemId; 
          set { 
              selectedIndexItemId = value; 
              Task.Run(OnDropdownSelected); // 👈 
          } 
      } 
       
      public async Task OnDropdownSelected() // 👈 
      { 
          await Task.Delay(1000); 
          Logger.LogInformation("OnDropdownSelected!"); 
      } 
  } 
  

  My only issue with this method is that it doesn't seem to truly wait for the method to finish, or the Dropdownlist is not reloading after the methods return. After a user selects a previously created set of credentials in a dropdown, the programs takes the selected credentials and attempts to grab some information from Sharepoint Online and then populate the next dropdown. When I was able to use the await keyword it would populate correctly, but using Task.Run because await isn't possible in the setter, it doesn't populate on the first credentials selection. It populates if you select the credential a second time, but not the first. Is there any way to reload a dropdown other than StateHasChanged method as this is what Ihave used so far.

  Save Cancel
• 

  0

  dev1_premierpoint created 2 years ago

  My only issue with this method is that it doesn't seem to truly wait for the method to finish, or the Dropdownlist is not reloading after the methods return. After a user selects a previously created set of credentials in a dropdown, the programs takes the selected credentials and attempts to grab some information from Sharepoint Online and then populate the next dropdown. When I was able to use the await keyword it would populate correctly, but using Task.Run because await isn't possible in the setter, it doesn't populate on the first credentials selection. It populates if you select the credential a second time, but not the first. Is there any way to reload a dropdown other than StateHasChanged method as this is what Ihave used so far.

  Seems like it needed to use InvokeAsync(StateHasChanged) to actually have the Dropdown reloaded at the right time.

  Save Cancel