We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
WEBINAR  Visualize Customer Survey Reports Using Our React 3D Circular Charts Control —Thursday, May 02, 10:00 A.M. ET REGISTER NOW
close icon
  1. Home
  2. Forum
  3. Blazor
  4. Dropdown Button not re-rendering when changing order of items that contain it

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

So, I have a structure that looks roughly like this:

foreach (var block in blocksToDisplay.OrderBy(b => b.Order))
            {
                <div>@block.Name</div>
                <EjsDropDownButton CssClass="e-caret-hide float-right e-link" IconCss="select-icon e-icons e-options">
                    <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>
            }

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?

5 Replies
AD Arunkumar Devendiran Syncfusion Team February 6, 2020 04:26 PM UTC

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 
 
@foreach (var block in blocks.OrderBy(e => e.Order)) 
{ 
    <div>@block.Name</div> 
    <EjsDropDownButton 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> 
} 
 
@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 class Block 
    { 
        public int Order { get; set; } 
        public string Name { get; set; } 
    } 
} 
 
 
Sample Link: 
 
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 


AJ Alex Jacobson February 7, 2020 02:02 AM UTC

I think you misunderstood my post. I said that the bug happens when I attempt to reorder the blocks. I actually took your code snippet and added a button that switches around the orders of the blocks, and I was able to reproduce the bug!

@foreach (var block in blocks.OrderBy(e => e.Order))
{
    <div>@block.Name</div>
    <EjsDropDownButton 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; }
    }
}

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?

AD Arunkumar Devendiran Syncfusion Team February 7, 2020 02:26 PM UTC

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: 
 
Please refer the below documentation. 
 
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 


AJ Alex Jacobson February 7, 2020 04:31 PM UTC

That fixed it! Thank you so much!

SD Saranya Dhayalan Syncfusion Team February 10, 2020 04:51 AM UTC

Hi Alex, 
 
Most Welcome… 
 
We are happy to hear that your issue has been resolved. Kindly get back to us if you need any further assistance. 
 
Regards, 
Saranya D 


Loader.
Live Chat Icon For mobile
Up arrow icon