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

About Dynamic Updates of TreeGrid

Thread ID:

Created:

Updated:

Platform:

Replies:

143815 Apr 5,2019 04:49 PM UTC Jun 10,2019 06:29 PM UTC ASP.NET MVC - EJ 2 6
loading
Tags: TreeGrid
Pylori
Asked On April 5, 2019 04:49 PM UTC

Hi,


I want to dynamically update TreeGrid in units of one row.
For example, I want to dynamically update it like Grid of the following URL.

I am developing on ASP.NET MVC and want to use SignalR to add, delete and update TreeGrid records.
I could implement the update but not add or delete.

Please let me know if there is any good way.
Also, I set GridLines to "Both", but the vertical lines were not displayed. Please tell me how to display vertical lines.

The source code is described below.

@(Html.EJS().TreeGrid("TreeGrid")
    .DataSource(Model)
    .Columns(col =>
    {
        col.Field("ContextId").IsPrimaryKey(true).Visible(false).Add();
        col.Field("DisplayInfo1").HeaderText("Info1").Add();
        col.Field("DisplayInfo2").HeaderText("Info2").Add();
        col.Field("DisplayInfo3").HeaderText("Info3").Add();
    })
    .AllowFiltering()
    .AllowSorting()
    .AllowSelection(false)
    .AllowTextWrap()
    .DataBound("dataBound")
    .EditSettings(edit => edit.AllowAdding(true).AllowDeleting(true).Mode(Syncfusion.EJ2.TreeGrid.EditMode.Cell))
    .FilterSettings(filter => filter.Mode(Syncfusion.EJ2.Grids.FilterBarMode.Immediate).ImmediateModeDelay(500).HierarchyMode(Syncfusion.EJ2.TreeGrid.FilterHierarchyMode.Both))
    .GridLines(Syncfusion.EJ2.Grids.GridLine.Both)
    .IdMapping("GroupName")
    .ParentIdMapping("ParentGroupName")
    .SortSettings(sort => sort.Columns(sortColumns))
    .Render()
)

<script>
    $(function () {
        $.connection.copyTradeHub.client.addTradeInfo = function (data) {
            data = JSON.parse(data);
            var treeGrid = document.getElementById("TreeGrid").ej2_instances[0];
            ???
        };
        $.connection.copyTradeHub.client.updateTradeInfo = function (data) {
            data = JSON.parse(data);
            var treeGrid = document.getElementById("TreeGrid").ej2_instances[0];
            treeGrid.setRowData(data["ContextId"], data);
        };
        $.connection.copyTradeHub.client.deleteTradeInfo = function (data) {
            data = JSON.parse(data);
            var treeGrid = document.getElementById("TreeGrid").ej2_instances[0];
            ???
        };
        $.connection.hub.start();
    });
</script>


Regards,
Pylori.

Vignesh Natarajan [Syncfusion]
Replied On April 8, 2019 01:21 PM UTC

Hi Pylori, 
 
Thanks for contacting Syncfusion forums. 
 
Query1: “I could implement the update but not add or delete. 
 
From your query we understand that, you need to perform add and delete action using EJ2 TreeGrid. We suggest you to achieve your requirement using addRecord and deleteRecord method of TreeGrid.  
 
Refer our API document section for your reference 
 
 
 
Query: “Also, I set GridLines to "Both", but the vertical lines were not displayed. Please tell me how to display vertical lines. 
 
We have validated the defect you have initiated with us. Thank you for the taking the time to report the issue ad helping us improve our product. At Syncfusion we are committed to fixing all the validated defect (subject to technological feasibility and Product Development Life Cycle) and including the defect fix in out subsequent 2019 Volume 1 Service pack 1 release. You can track the current status of your request, review the resolution timeline and contact us for any further inquiries through this link.  
  
  
Till then we appreciate your patience. 
 
Regards, 
Vignesh Natarajan. 
 
 
 
 


Pylori
Replied On April 9, 2019 09:49 AM UTC

Hi,


Thank you for answering.
I acknowledge the GridLines.

With regard to the title in question, I corrected it with the content that I was told by you and it worked.
However, when filtering or sorting, the display of data does not go well.

For example,
1. There were 2 rows of TreeGrid when I loaded the page.
2. SignalR caused 1 row update and 1 row addition.
3. I clicked on a column and performed a sort.

Then, the change by SignalR is undone. It will be just after loading the page.
I want to use the sorting function and the filter function while keeping the contents changed by SignalR.
Is there a solution?

Here is the source code:

--- Model ---
@model List<ProjectA.Models.TradeInfoViewModel>

--- SortColumns ---
List<object> sortColumns = new List<object>();
sortColumns.Add(new { field = "DisplayInfo1", direction = "Ascending" });

--- TreeGrid ---
@(Html.EJS().TreeGrid("TreeGrid")
    .DataSource(Model)
    .Columns(col =>
    {
        col.Field("ContextId").IsPrimaryKey(true).Add();
        col.Field("DisplayInfo1").HeaderText("DisplayInfo1").Add();
        col.Field("DisplayInfo2").HeaderText("DisplayInfo2").Add();
        col.Field("DisplayInfo3").HeaderText("DisplayInfo3").Add();
    })
    .AllowFiltering()
    .AllowSorting()
    .AllowSelection(false)
    .AllowTextWrap()
    .DataBound("dataBound")
    .EditSettings(edit => edit.AllowAdding(true).AllowDeleting(true).AllowEditing(true))
    .FilterSettings(filter => filter.Mode(Syncfusion.EJ2.Grids.FilterBarMode.Immediate).ImmediateModeDelay(500).HierarchyMode(Syncfusion.EJ2.TreeGrid.FilterHierarchyMode.Both))
    .GridLines(Syncfusion.EJ2.Grids.GridLine.Both)
    .IdMapping("GroupName")
    .ParentIdMapping("ParentGroupName")
    .SortSettings(sort => sort.Columns(sortColumns))
    .Render()
)

--- script ---
<script>
    function dataBound(args) {
        var treeGrid = document.getElementById("TreeGrid").ej2_instances[0];
        Object.assign(treeGrid.grid.filterModule.filterOperators, { startsWith: 'contains' });
    }
</script>

@section Scripts
{
    <script>
        $(function () {
            $.connection.copyTradeHub.client.addTradeInfo = function (data) {
                data = JSON.parse(data);
                var treeGrid = document.getElementById("TreeGrid").ej2_instances[0];
                treeGrid.addRecord(data);
            };
            $.connection.copyTradeHub.client.updateTradeInfo = function (data) {
                data = JSON.parse(data);
                var treeGrid = document.getElementById("TreeGrid").ej2_instances[0];
                treeGrid.setRowData(data["ContextId"], data);
            };
            $.connection.copyTradeHub.client.deleteTradeInfo = function (data) {
                data = JSON.parse(data);
                var treeGrid = document.getElementById("TreeGrid").ej2_instances[0];
                treeGrid.deleteRecord("ContextId", data);
            };
            $.connection.hub.start();
        });
    </script>
}


Regards,
Pylori.

Vignesh Natarajan [Syncfusion]
Replied On April 10, 2019 12:08 PM UTC

Hi Pyori, 
 
Thanks for acknowledging. 
 
Query1: “I acknowledge the GridLines. 
 
Fix for the issue “gridlines defined as both is not working properly in MVC platform for TreeGrid” will be included in our next patch release scheduled on 17th April 2019. Till then kindly use the workaround using the dataBound event of TreeGrid.  
 
Refer the below code example 
 
function dataBound(args) {
            var treegrid = document.getElementById("Editing").ej2_instances[0];
            treegrid.gridLines = "Both";

        }
 
 
 
Please let us know if you have any queries. 
 
Query2: “I want to use the sorting function and the filter function while keeping the contents changed by SignalR. 
 
We have validated the defect you have initiated with us. Thank you for the taking the time to report the issue and helping us improve our product. At Syncfusion we are committed to fixing all the validated defect (subject to technological feasibility and Product Development Life Cycle) and including the defect fix in our subsequent 2019 Volume 1 Service pack 1 release. And also fix for the issue will be included in our patch release on 24th April 2019. You can track the current status of your request, review the resolution timeline and contact us for any further inquiries through this link.  

https://www.syncfusion.com/feedback/5723/when-sorting-a-column-newly-added-record-is-not-displayed-in-treegrid

Note: To view the above feedback, kindly login into your account.
  
Till then we appreciate your patience. 
 
 
Regards, 
Vignesh Natarajan.

 


Pylori
Replied On April 14, 2019 02:53 PM UTC

Hi,


Thank you for answering.
Thanks for telling me the solution for GridLines. OK.

I also understood the sort and filter issues.
I look forward to your patch releases.


Regards,
Pylori.

Vignesh Natarajan [Syncfusion]
Replied On April 15, 2019 10:40 AM UTC

Hi Pylori,  
 
Thanks for update.  
 
Please follow our website for weekly releases.  
 
Also Kindly get back to us, if you have any other queries. 
  
Regards, 
Vignesh Natarajan.  


Pavithra Subramaniyam [Syncfusion]
Replied On June 10, 2019 06:29 PM UTC

Hi  Pylori, 

Thanks for your patience. 

We are glad to announce that  we have included the fix  for the issue “When sorting a column,newly added record is not displayed in TreeGrid” in our patch release (v17.1.44).  
 
Regards, 
Pavithra S. 


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