Hi Harry,
Thanks for using Syncfusion Products.
We would like to let you know that, while updating the value of the particular cell in TreeGrid, we can update other values of the row content. Here as per your requirement, we have prepared a TreeGrid sample with “%Column” and “$$Column” with help of “EndEdit” client side event and “refreshRow” public method. In this while updating the value of “%Column” the corresponding value of “$$Column” will be updated automatically.
Please refer the following code snippets for more details.
Code snippets:
<body style="position: static; margin: 0px; padding: 2px">
@(Html.EJ().TreeGrid("TreeGridContainer")
//...
ClientSideEvents(eve => { eve.EndEdit("EndEdit"); eve.ActionComplete("ActionComplete"); }). Datasource(ViewBag.dataSource) )
@(Html.EJ().ScriptManager()) <script type="text/javascript">
function EndEdit(args) { var editedRecord = args.data.item, treegridObj = $("#TreeGridContainer").data("ejTreeGrid"); if (args.columnName == "Progress" && args.previousValue != args.value) { var newValue = args.data.item.Progress, index = args.data.index; args.data.item.Cost = newValue * 100; args.data.Cost = newValue * 100; treegridObj.refreshRow(index); //To reflect the changes in TreeGrid view } //You can update it to your remote datasource $.ajax({ type: "POST", url: "/TreeGrid/Update", //Update is Server side method data: editedRecord, dataType: "json" }); }
//...
</script> </body> |
Please find the sample in the following location.
Sample Link: http://www.syncfusion.com/downloads/support/forum/119791/ze/MVCsampleSQL1671473614
Please let us know if you have any questions about this.
Regards,
John R
Hi Harry,
Sorry for the inconvience caused.
Please find the response below.
Query 1: Everything works well except the line "treeGridObj.refreshRow(index);" Since in debugger, I can see args.data.item.ForecastMonth and args.data.ForecastMonth all got updated, but it seems the refreshRow method did not work for me, and the value of column "ForecastMonth" in the treegrid did not get updated automatically.
Solution: For your kind information, the success method in the AJAX Post call will just return the value from the server. So we must change the server side update method type to string if need to get the data in the AJAX success method. So if we doing calculation in success method, then we have to call the AJAX post method again to made the changes in data base. Please refer the below code snippet for details.
[Controller.cs] [HttpPost()] public string Update(TaskData Task) { //… return Task.Cost.ToString(); } |
[CSHTML]
<script type="text/javascript"> function EndEdit(args) { $.ajax({ type: "POST", data: editedRecord, dataType: "json", url: "/TreeGrid/Update", success: function (data) { var treeGridObj = $("#TreeGridContainer").data("ejTreeGrid"); var newValue = args.data.item.Progress, index = args.data.index; var index = args.data.index; args.data.item.Cost = newValue * 100; args.data.Cost = newValue * 100; treeGridObj.refreshRow(index); $.ajax({ type: "POST", data: args.data.item, dataType: "json", url: "/TreeGrid/Update", }); }, }); } //… </script> |
Query 2: When I change the value in parent row (such as the value 16,000 in previous images), I 'd like to update children's value (1,600 and 3,200 in the image) automatically.
Solution: We can change the corresponding child values if we changed the parent item value using the “EndEdit” client side event. Please refer the below code snippet to achieve this.
<script type="text/javascript"> function EndEdit(args) { var editedRecord = args.data.item; var treeGridObj = $("#TreeGridContainer").data("ejTreeGrid"); treeGridObj.refreshRow(args.data.index); $.ajax({ type: "POST", data: args.data.item, dataType: "json", url: "/TreeGrid/Update", }); if (args.data.hasChildRecords) { for (var i = 0; i < args.data.childRecords.length; i++) { index = args.data.index; childData = args.data.childRecords[i]; childData[args.columnName] = args.value; childData.item[args.columnName] = args.value; treeGridObj.refreshRow(index + i + 1); $.ajax({ type: "POST", data: childData.item, dataType: "json", url: "/TreeGrid/Update", }); } } } </script> |
We have also prepared a sample based on this and you can find the sample under the following location.
Sample: http://www.syncfusion.com/downloads/support/forum/119791/ze/MVCsampleSQL-351515759
Please let us know if you need further assistance on this.
Regards,
Mahalakshmi K.
Hi Harry,
We have analyzed the scenario that you have shared and came to know that there is some return type mismatch in the server side method. If we need to return the object type data from the server, we need to declare and define the corresponding server method in “ActionResult” type and return the object data using “Json(Task, JsonRequestBehavior.AllowGet)” like this to get the processed server data in AJAX success method. Please refer the below code snippet for details.
[CS] [HttpPost()] public ActionResult Update(TaskData Task) { Task.Cost = Int32.Parse(Task.Progress) * 100; //… return Json(Task, JsonRequestBehavior.AllowGet); } |
[CSHTML] <script type="text/javascript"> function EndEdit(args) { $.ajax({ type: "POST", data: editedRecord, dataType: "json", url: "/TreeGrid/Update", success: function (data) { var treeGridObj = $("#TreeGridContainer").data("ejTreeGrid"); var index = args.data.index; args.data.item.Cost = data.Cost; args.data.Cost = data.Cost; treeGridObj.refreshRow(index); }, }); } </script> |
We have also prepared a sample based on this and you can find the sample under the following location.
Sample: http://www.syncfusion.com/downloads/support/forum/119791/ze/MVCsampleSQL-1699160830
Please let us know if you need further assistance on this.
Regards,
Mahalakshmi K.
Hi Harry,
Sorry for the inconvenience caused.
For your kind information, we are unable to reproduce the issue you have reported from our side. Could you please modify our sample to reproduce the issue along with replication procedure to assist you better? And also please share your browser version you are using to ensure from our side.
We have also modified our sample to highlight the automatic update column using “QueryCellInfo” client side event for the better understanding.
Please find the sample from the following location.
Sample: http://www.syncfusion.com/downloads/support/forum/119791/ze/MVCsampleSQL-1155624082
We have also recorded the video of the sample in the runnable state which we have sent. Please find the video from the following location.
File location: http://www.syncfusion.com/downloads/support/forum/119791/ze/video2073529197
Please let us know if you need further assistance on this.
Regards,
Mahalakshmi K.
Hi Harry,
Sorry for the inconvenience caused.
We are able reproduce the issue while refreshing the row in virtualization mode with large data. Currently we are working on this we will let you know the status of the solution within one business day {07/08/2015}. A support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.
https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents
Please let us know if you require further assistance on this.
Regards,
Mahalakshmi K.