Dropdown Button not re-rendering when changing order of items that contain it

We have a mechanism where the user can change the order of those blocks, and the order will change onscreen. However, it seems that the DropDownButton widget doesn't really change it's order when it comes to the DropDownButtonEvents. If I start out with a list {Block A, Block B}, and I change it to {Block B, Block A}, then the block that gets passed into the SelectMenuItem callback when I select the Block B dropdown is still Block A! This doesn't happen when I assign that callback to a plain old <button>. And It doesn't change when I call StateHasChanged on the page that contains this chunk of code. What gives?

Hi Alex Jacobson, 

 

We have checked your reported issue and we are unable to reproduce it in our end. We have created the sample for your reference in that we have set the list item (Block B, Block A) on block and get the selected dropdown block item in ItemSelected arguments. Please refer the below code snippet and sample link. 

 

Index.Razor 

 

Sample Link: 

https://www.syncfusion.com/downloads/support/forum/151288/ze/BlazorApp671133023 

 

Could you please check the above sample and let us know whether this is fulfilling your requirement, if not please share us more information regarding this. So, that we can analyze based on that and provide you a better solution. The information provided would be great help for us to proceed further. 

 

Regards, 

Arunkumar D 

If you click on that button, it causes Block 2 to go to the top of the list. But when you click on one of the menu items next to it, it send Block 1 into the callback! Are you able to see this as well?

Hi Alex Jacobson, 

 

Good day to you. 

 

We have checked your reported issue and achieved that by using @Key directive. We have created the sample for your reference in that we have achieved your requirement. Please refer the below code snippet and sample link, 

 

Index.Razor 

@foreach (var block in blocks.OrderBy(e => e.Order))  {      <div>@block.Name</div>      <EjsDropDownButton @key="block" Content="Block Items">          <DropDownButtonEvents ItemSelected="@(e => SelectMenuItem(block, e.Item.Text))"></DropDownButtonEvents>          <DropDownButtonItems>              <DropDownButtonItem Text="Display Logic"></DropDownButtonItem>              <DropDownButtonItem Text="Add Block Above"></DropDownButtonItem>              <DropDownButtonItem Text="Add Block Below"></DropDownButtonItem>              <DropDownButtonItem Text="Delete"></DropDownButtonItem>          </DropDownButtonItems>      </EjsDropDownButton>  }  <Syncfusion.EJ2.Blazor.Buttons.EjsButton OnClick="SwitchBlocks" Content="Switch Block Orders"></Syncfusion.EJ2.Blazor.Buttons.EjsButton>    @code{      List<Block> blocks = new List<Block>();      protected override void OnInitialized()      {          Block blockB = new Block() { Name = "Block 2", Order = 2 };          blocks.Add(blockB);          Block blockA = new Block() { Name = "Block 1", Order = 1 };          blocks.Add(blockA);      }      public void SelectMenuItem(Block block, string text)      {          Block selectedBlock = block;          string selectedtext = text;      }        public void SwitchBlocks()      {          foreach (var block in blocks)          {              if (block.Order == 1)                  block.Order = 2;              else if (block.Order == 2)                  block.Order = 1;          }      }        public class Block      {          public int Order { get; set; }          public string Name { get; set; }      }  }

 

 

Sample link: 

https://www.syncfusion.com/downloads/support/forum/151288/ze/BlazorApp769698656  

 

Please refer the below documentation. 

https://docs.microsoft.com/en-in/aspnet/core/blazor/components?view=aspnetcore-3.1#use-key-to-control-the-preservation-of-elements-and-components 

 

Could you please check the above sample and let us know whether this is fulfilling your requirement or get back to us if you need further assistance. 

 

Regards, 

Arunkumar D