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

Performance issues

Hi all, i have three dropdownlist controls, the second and thrid list depens on the first one, but when i change the valur of the first one, it takes a lot of time to populate the others two and the console shows the following:

L: GC_MAJOR: (LOS overflow) time 23.16ms, stw 23.18ms los size: 1024K in use: 128K
L: GC_MINOR: (LOS overflow) time 0.42ms, stw 0.45ms promoted 0K major size: 8832K in use: 3255K los size: 1024K in use: 128K

Code:

<div class="form-group row">
    <div class="col">
        <label>WorkSpace:</label>
        <SfDropDownList TItem="GenericKeyValuePair" TValue="string" PopupHeight="230px"
                        DataSource="@WorkSpacesList" @bind-Value="@SelectedWorkSpace">
            <DropDownListEvents TValue="string" ValueChange="@OnChangeWorkSpace"></DropDownListEvents>
            <DropDownListFieldSettings Text="Name" Value="Id"></DropDownListFieldSettings>
        </SfDropDownList>
    </div>
    <div class="col">
        <label>Profile</label>
        <SfDropDownList TItem="GenericKeyValuePair" TValue="string" PopupHeight="230px"
                        DataSource="@ProfileList" @bind-Value="@SelectedProfile" Index="0">
            <DropDownListFieldSettings Text="Name" Value="Id"></DropDownListFieldSettings>
        </SfDropDownList>
    </div>
    <div class="col">
        <label>Role:</label>
        <SfDropDownList TItem="GenericKeyValuePair" TValue="string" PopupHeight="230px"
                        DataSource="@RoleList" @bind-Value="@SelectedRole" Index="0">
            <DropDownListFieldSettings Text="Name" Value="Id"></DropDownListFieldSettings>
        </SfDropDownList>
    </div>
</div>

i just changed the code to use plain html selects and those controls works without problems.



14 Replies

SP Sureshkumar P Syncfusion Team May 6, 2020 11:49 AM UTC

Hi Julio, 
 
Greetings from Syncfusion support.  
 
Based on your shared information with code example, we have checked the cascading dropdowns. But we cannot able to replicate the issue from our end. We suspect that you have customized the next two dropdowns in the first components change event.  We have created the sample based on your requirement.  
 
Kindly refer the code example.  
<div class="form-group row"> 
    <div class="col"> 
        <label>WorkSpace:</label> 
        <SfDropDownList TItem="GameFields" TValue="int?" PopupHeight="230px" 
                        DataSource="@Games" @bind-Value="@DropVal"> 
            <DropDownListEvents TValue="int?" ValueChange="@OnChangeWorkSpace"></DropDownListEvents> 
            <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings> 
        </SfDropDownList> 
    </div> 
    <div class="col"> 
        <label>Profile</label> 
        <SfDropDownList TItem="MultiGameFields" TValue="string" PopupHeight="230px" 
                        DataSource="@MultiGames" @bind-Value="@SecondVal"> 
            <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings> 
        </SfDropDownList> 
    </div> 
    <div class="col"> 
        <label>Role:</label> 
        <SfDropDownList TItem="ThirdGameFields" TValue="string" PopupHeight="230px" 
                        DataSource="@ThirdGames" @bind-Value="@ThirdVal"> 
            <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings> 
        </SfDropDownList> 
    </div> 
</div> 
 
 
@code 
{ 
    SfDropDownList<int?, GameFields> DDLObject; 
 
    public int? DropVal { get; set; } = 2; 
 
    public string SecondVal { get; set; } 
 
    public string ThirdVal { get; set; } 
 
    public class GameFields 
    { 
        public int ID { get; set; } 
        public string Text { get; set; } 
    } 
    private ObservableCollection<GameFields> Games = new ObservableCollection<GameFields>() { 
        new GameFields(){ ID= 1, Text= "American Football" }, 
        new GameFields(){ ID= 2, Text= "Badminton" }, 
        new GameFields(){ ID= 3, Text= "Basketball" }, 
        new GameFields(){ ID= 4, Text= "Cricket" }, 
        new GameFields(){ ID= 5, Text= "Football" }, 
        new GameFields(){ ID= 6, Text= "Golf" }, 
        new GameFields(){ ID= 7, Text= "Hockey" } 
     }; 
 
    public class MultiGameFields 
    { 
        public string ID { get; set; } 
        public string Text { get; set; } 
    } 
    private List<MultiGameFields> MultiGames; 
 
    public class ThirdGameFields 
    { 
        public string ID { get; set; } 
        public string Text { get; set; } 
    } 
    private List<ThirdGameFields> ThirdGames; 
 
    public void OnChangeWorkSpace(Syncfusion.Blazor.DropDowns.ChangeEventArgs<int?> args) 
    { 
        if (args.Value > 4) 
        { 
            this.MultiGames = new List<MultiGameFields>() 
            { 
                new MultiGameFields(){ ID= "Game1", Text= "American Football" }, 
                new MultiGameFields(){ ID= "Game2", Text= "Badminton" }, 
                new MultiGameFields(){ ID= "Game3", Text= "Basketball" }, 
                new MultiGameFields(){ ID= "Game4", Text= "Cricket" }, 
                new MultiGameFields(){ ID= "Game5", Text= "Football" } 
            }; 
        } else 
        { 
            this.ThirdGames = new List<ThirdGameFields>() 
            { 
                new ThirdGameFields(){ ID= "Game11", Text= "American Football" }, 
                new ThirdGameFields(){ ID= "Game21", Text= "Badminton" }, 
                new ThirdGameFields(){ ID= "Game31", Text= "Basketball" }, 
                new ThirdGameFields(){ ID= "Game41", Text= "Cricket" }, 
                new ThirdGameFields(){ ID= "Game51", Text= "Football" } 
            }; 
        } 
    } 
} 
 
 
 
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. 
1.     If possible, to replicate the issue in above attached sample and revert us with detailed issue replication procedure.  
2.     Share the first dropdown components change event code block.  
 
These details to help us to provide exact solution as earlier as possible.  
 
Regards, 
Sureshkumar P 



JA julio Avellaneda May 6, 2020 03:51 PM UTC

Sureshkuma, thank you for your answer, the provided example works great, but it uses blazor server side, I copy and paste to a blazor webassembly project and the performance is really bad! I think the issue is with client side in this case. I did a short example replicating my case, i have some tabs also on the project.

I'm attaching the example.

Attachment: BlazorAppClientDemo_c8e9f2c9.rar


JA julio Avellaneda May 10, 2020 05:41 PM UTC

Hello all, any update on this?

Thanks,


SP Sureshkumar P Syncfusion Team May 11, 2020 03:26 AM UTC

Hi Julio,  
 
Sorry for the delayed response.  
 
We can replicate the reported issue. We will validate and update in two business days (May 13th, 2020). We appreciate your patience.   
 
Regards, 
Sureshkumar P 



SP Sureshkumar P Syncfusion Team May 13, 2020 12:03 PM UTC

Hi Julio, 
 
We are glad to announce that our Essential Studio 2020 Volume 1 SP release v18.1.0.52 is rolled out and is available for download under the following link. 
 
 
We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 
 
Regards,            
Sureshkumar P 



JA julio Avellaneda May 13, 2020 10:08 PM UTC

Hi Sureshkuma, i just updated the project to lastest syncfusion blazor, and i can see a better performance, but i'm getting again some warnings messages on the console, and algo the dropdownlist takes some time to reflect the changes (with the syncfusion blazor server controls) i do not have that delay, do you know if there is something planned about performance for Syncfusion blazor wasm?


I'm attaching the demo updated.

Attachment: BlazorAppClientDemo_583ec3c6.rar


SP Sureshkumar P Syncfusion Team May 14, 2020 07:45 AM UTC

Hi Julio, 
 
Thanks for your update.  
 
Based on your shared screenshot with sample, we suspect that you have facing the warning message with loading time delay of second and third dropdownlist component. In your attached sample you have used foreach loop to add the datasource to second and third component with first components change event. That is the reason you have facing some delay to load the data to other components.  we suggest you load the datasource directly to the component without using foreach loop to resolve the loading issue.  
 
Kindly refer the below code example. 
<div class="form-group row"> 
    <div class="col"> 
        <label>WorkSpace:</label> 
        <SfDropDownList TItem="GenericKeyValuePair" TValue="int?" PopupHeight="230px" 
                        DataSource="@FirstDdl" @bind-Value="@DropVal"> 
            <DropDownListEvents TValue="int?" ValueChange="@OnChangeWorkSpace"></DropDownListEvents> 
            <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings> 
        </SfDropDownList> 
    </div> 
    <div class="col"> 
        <label>Profile</label> 
        <SfDropDownList TItem="GameFields" TValue="int?" PopupHeight="230px" 
                        DataSource="@SecondDdl" @bind-Value="@SecondVal"> 
            <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings> 
        </SfDropDownList> 
    </div> 
    <div class="col"> 
        <label>Role:</label> 
        <SfDropDownList TItem="GameFields" TValue="int?" PopupHeight="230px" 
                        DataSource="@ThridDdl" @bind-Value="@ThirdVal"> 
            <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings> 
        </SfDropDownList> 
    </div> 
</div> 


 
@code 
{ 
    public ObservableCollection<GameFields> SecondDdl { get; set; } = new ObservableCollection<GameFields>(); 
 
    public ObservableCollection<GameFields> ThridDdl { get; set; } = new ObservableCollection<GameFields>(); 
 
    public class GameFields 
    { 
        public int ID { get; set; } 
        public string Text { get; set; } 
    }     
    public void OnChangeWorkSpace(ChangeEventArgs<int?> args) 
    { 
        SecondDdl = new ObservableCollection<GameFields>(); 
        ThridDdl = new ObservableCollection<GameFields>(); 
 
        var item = ComplexGames.First(c => c.ID == DropVal.Value); 
 
        SecondDdl = item.Games; 
        ThridDdl = item.Games; 
 
        //foreach (var game in item.Games) 
        //{ 
        //    SecondDdl.Add(new GenericKeyValuePair 
        //    { 
        //        ID = game.ID, 
        //        Text = game.Text 
        //    }); 
 
        //    ThridDdl.Add(new GenericKeyValuePair 
        //    { 
        //        ID = game.ID, 
        //        Text = game.Text 
        //    }); 
        //} 
    } 
} 
 
 
 
Also, the console message was default message when loading the web assembly project. This is the behavior of the web assembly applications. And we did not face any warning message when loading your given sample. Please find the screen shot here 
 
 
 
We have modified the sample based on your requirement. please find the sample here: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorAppClientDemo_583ec3c6-1193828696  
 
 
 
Regards, 
Sureshkumar P 



JA julio Avellaneda May 14, 2020 08:47 PM UTC

Sureshkumar thank you, i changed again the implementation but again, I cannot feel a good flow with the dropdownlist controls, I was testing with another suite of controls just to compare the performance, and i can feel that telerik dropdownlist works better than syncfusion controls, but.. i want to use syncfusion :)

I just published 2 simple web sites so if you can take a look would be great:

- https://syncfusiondemoddl.azurewebsites.net/ (syncfusion)
- https://telerikdemoddl.azurewebsites.net/ (telerik)

Regards,


SP Sureshkumar P Syncfusion Team May 18, 2020 12:22 PM UTC

Hi Julio/ Edward, 
 
Thanks for your detailed update. 
 
We have validated your requirement in the specified scenario. We will update further details in two business days May 20th, 2020.  We appreciate your patience.  
 
Regards, 
Sureshkumar P 



SP Sureshkumar P Syncfusion Team May 21, 2020 02:43 AM UTC

Hi Julio/ Edward,, 
 
Thanks for your patience.  
 
We confirmed this as bug in our end and include the fix in the next week patch release, which is scheduled on May 27th ,2020. You can track the status of the bug in the below feedback link. We appreciate your patience until then  
 
 
Regards, 
Sureshkumar P 



JA julio Avellaneda May 21, 2020 12:55 PM UTC

Hi Sureshkuma, really good news, a lot of thanks!

Regards,


SP Sureshkumar P Syncfusion Team May 22, 2020 05:04 AM UTC

Hi Julio, 
 
Thanks for your update.  
 
As per our previous update, we will update the fix with our next week patch release. We appreciate your patience until then.  
 
Regards, 
Sureshkumar P 



EK Edward Kagan May 22, 2020 03:18 PM UTC

Good news.  There are a couple of critical areas where I had to replace the dropdown list with a regular <select> element as the dropdown would hang for 5-6 seconds on every selection.  Looking forward to having this fixed.


PM Ponmani Murugaiyan Syncfusion Team June 3, 2020 01:30 PM UTC

Hi All,  
   
We are glad to announce that our patch release v18.1.55 has been rolled out. We thank you for your support and appreciate your patience in waiting for this release. The fix for the reported issue is included in the above release, kindly upgrade to the latest version to get rid of the reported issue.  
   
   
Please get in touch with us if you would require any further assistance.  
   
Regards,  
Ponmani M 



Loader.
Up arrow icon