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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

151288 Feb 5,2020 10:45 PM UTC Feb 10,2020 04:51 AM UTC Blazor 5
loading
Tags: Dropdown Menu
Alex Jacobson
Asked On February 5, 2020 10:45 PM UTC

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?

Arunkumar Devendiran [Syncfusion]
Replied On 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 


Alex Jacobson
Replied On 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?

Arunkumar Devendiran [Syncfusion]
Replied On 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 


Alex Jacobson
Replied On February 7, 2020 04:31 PM UTC

That fixed it! Thank you so much!

Saranya Dhayalan [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon