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

It's imposible to edit and update TreeGrid's parent elements, if they have more than 5 children.

Hello.

I've caught a problem while working with TreeGrid. If i try to change and then update a record (exactly parent element), I get next error in Crome's console: "Error: Connection disconnected with error 'Error: Server returned an error on close: Connection closed with an error.'." And then nothing is happening with the recodr, it stay in edit mode and also "OnBegin" not calling.

I have such code:

<EjsTreeGrid @ref="@TreeGrid" DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1" AllowFiltering="true" AllowSorting="true"
                 Toolbar="@(new List<Object>() { "Edit", new ItemModel() { Type=ItemType.Separator }, "Update", "Cancel" })">
        <TreeGridEvents OnActionBegin="@OnBegin" TValue="BusinessObject"></TreeGridEvents>
        <TreeGridEditSettings AllowEditing="true" Mode="Syncfusion.EJ2.Blazor.TreeGrid.EditMode.Row"></TreeGridEditSettings>
        <TreeGridColumns>
            <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80" TextAlign="Syncfusion.EJ2.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
            <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="160"></TreeGridColumn>
            <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="Syncfusion.EJ2.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
            <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" TextAlign="Syncfusion.EJ2.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
            <TreeGridColumn Field="Priority" HeaderText="Priority" Width="80"></TreeGridColumn>
        </TreeGridColumns>
    </EjsTreeGrid>

@code{

    public class BusinessObject
    {
        public int TaskId { get; set; }
        public string TaskName { get; set; }
        public int Duration { get; set; }
        public int Progress { get; set; }
        public string Priority { get; set; }
        public int? ParentId { get; set; }
    }

    public List<BusinessObject> TreeData = new List<BusinessObject>();
    private EjsTreeGrid<BusinessObject> TreeGrid;

    protected override void OnInitialized()
    {
        TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, ParentId = null, Priority = "High" });
        TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child Task", Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" });
        TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child task 1", Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" });
        TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Child Task 2", Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" });
        TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 3", Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" });
        TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 4", Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" });
        TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 2", Duration = 6, Progress = 77, ParentId = null, Priority = "Low" });
        TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 5", Duration = 9, Progress = 25, ParentId = 7, Priority = "Normal" });
        TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 6", Duration = 9, Progress = 7, ParentId = 8, Priority = "Normal" });
        TreeData.Add(new BusinessObject() { TaskId = 10, TaskName = "Parent Task 3", Duration = 4, Progress = 45, ParentId = null, Priority = "High" });
        TreeData.Add(new BusinessObject() { TaskId = 11, TaskName = "Child Task 7", Duration = 3, Progress = 38, ParentId = 10, Priority = "Critical" });
        TreeData.Add(new BusinessObject() { TaskId = 12, TaskName = "Child Task 8", Duration = 7, Progress = 70, ParentId = 10, Priority = "Low" });

        TreeData.Add(new BusinessObject() { TaskId = 13, TaskName = "Child Task 5", Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" });
        TreeData.Add(new BusinessObject() { TaskId = 14, TaskName = "Child Task 6", Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" });
        TreeData.Add(new BusinessObject() { TaskId = 15, TaskName = "Child Task 7", Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" });
        TreeData.Add(new BusinessObject() { TaskId = 16, TaskName = "Child Task 8", Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" });
        TreeData.Add(new BusinessObject() { TaskId = 17, TaskName = "Child Task 9", Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" });

        TreeData.Add(new BusinessObject() { TaskId = 18, TaskName = "Child Task 7", Duration = 9, Progress = 7, ParentId = 8, Priority = "Normal" });
        TreeData.Add(new BusinessObject() { TaskId = 19, TaskName = "Child Task 8", Duration = 9, Progress = 7, ParentId = 8, Priority = "Normal" });
        TreeData.Add(new BusinessObject() { TaskId = 20, TaskName = "Child Task 9", Duration = 9, Progress = 7, ParentId = 8, Priority = "Normal" });
        TreeData.Add(new BusinessObject() { TaskId = 21, TaskName = "Child Task 10", Duration = 9, Progress = 7, ParentId = 8, Priority = "Normal" });
        TreeData.Add(new BusinessObject() { TaskId = 22, TaskName = "Child Task 11", Duration = 9, Progress = 7, ParentId = 8, Priority = "Normal" });
        TreeData.Add(new BusinessObject() { TaskId = 23, TaskName = "Child Task 12", Duration = 9, Progress = 7, ParentId = 8, Priority = "Normal" });
    }

    public void OnBegin(ActionEventArgs<BusinessObject> args)
    {
        if (args.RequestType == Syncfusion.EJ2.Blazor.Grids.Action.Save)
        {
            var data = (BusinessObject)args.Data;
            var changedData = TreeData.Where(f => f.TaskId == data.TaskId).FirstOrDefault();

            changedData.TaskName = data.TaskName;
            changedData.Duration = data.Duration;
            changedData.Progress = data.Progress;
            changedData.Priority = data.Priority;

            TreeGrid.Refresh();
        }
    }
}


3 Replies

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team February 3, 2020 01:16 PM UTC

Hi Ilya, 

Thanks for contacting Syncfusion Support. 

Query#:- If i try to change and then update a record (exactly parent element), I get next error in Crome's console: "Error: Connection disconnected with error 'Error: Server returned an error on close: Connection closed with an error.'." And then nothing is happening with the recodr, it stay in edit mode and also "OnBegin" not calling. 
 
We can reproduce the reported problem at our end while using large number of child Records. In Blazor application, they(Microsoft) have limited the message size (32KB) which will be sent from server to JSInterop to increase the performance. When we use large number of child Records, its size will exceed the 32KB and the reported issue occur. To workaround the problem, we suggest you to include the below highlighted code into your startup.cs file. 

public void ConfigureServices(IServiceCollection services) 
        { 
            services.AddRazorPages(); 
            services.AddServerSideBlazor(); 
            services.AddSingleton<WeatherForecastService>(); 
            services.AddSignalR(e => 
            { 
                e.MaximumReceiveMessageSize = 102400000; 
            }); 
        } 

We have increased the Maximum Message Receive size. Please get back to us if you have further queries. 

Regards, 
Farveen sulthana T. 



IS Ilya Shamin February 4, 2020 02:26 AM UTC

This solution fixed my problem.

Thank you very much.


FS Farveen Sulthana Thameeztheen Basha Syncfusion Team February 4, 2020 05:17 AM UTC

Hi Ilya,  

Thanks for your update. Please get back to us if you need any further assistance on this. 

Regards, 
Farveen sulthana T 


Loader.
Live Chat Icon For mobile
Up arrow icon