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.
