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
  1. Home
  2. Forum
  3. ASP.NET MVC
  4. update some cell content without refreshing whole page in treegrid

update some cell content without refreshing whole page in treegrid

Hi, I am using treegrid to display hierarchical data. After editing some cell (such as changing 10.00 to 15.00 in % column, please see attached images) and click update(making ajax call to server side method), I'd like to see the content in the $$ column automatically updated. Right now I have to refresh whole page to display the updated content in $$ column.
I know it probably needs some function after ajax call succeeds, just do not how to write that function in treegrid.
Thank you,

Harry

Attachment: HZ20150731_acfccb52.rar

11 Replies
JR John Rajaram Syncfusion Team August 3, 2015 11:19 AM UTC

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


HZ Harry Zheng August 3, 2015 04:14 PM UTC

Hi John,

Thank you for your solution. Your sample works well. However, when I adapted it to my code, it did not work.

I have my code here:

 function endEdit(args)
    {
        var editedRecord=args.data.item;  
       
        $.ajax({          
            type:"POST",
            url: "/Forecast/UpdateForecast",
            data: editedRecord,
            dataType: "json",
            success: function(data){  
                var treeGridObj=$("#ForecastGrid").data("ejTreeGrid");       
                var index=args.data.index;            
                args.data.item.ForecastMonth=data.ForecastMonth;
                args.data.ForecastMonth=data.ForecastMonth;
                treeGridObj.refreshRow(index);
            }
        });
    }

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.
Do you have any idea about this problem?
Thank you,

Harry

HZ Harry Zheng August 3, 2015 06:55 PM UTC

I also have another related question.
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. 
How can I achieve this?
Thank you,

Harry

MK Mahalakshmi Karthikeyan Syncfusion Team August 4, 2015 11:29 AM UTC

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.


HZ Harry Zheng August 4, 2015 01:19 PM UTC

Hi Mahalakshmi,

Thank you for your reply.
For Query 1: I understand what you mean, but in my case, the calculation is done in server method, so when I made change in "%column", ajax will call "/Forecast/UpdateForecast" method, which will do calculation and update the value of both "$$column" and "%column" in database. Then I get updated value from server method and I want to use that value from server method to update the value of "$$column" in the treegrid view. If I refresh whole page, it gets updated correctly, which means I got everything right except the row is not updated automatically.  I also find if I double click the value of "$$column"(pretending to edit that value), it does  get updated, but again, it is still not automatic as in your sample.
I still think there is something not right for my refreshRow method, could you give me more information about this method?

Thank you,

Harry

MK Mahalakshmi Karthikeyan Syncfusion Team August 5, 2015 12:03 PM UTC

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.


HZ Harry Zheng August 5, 2015 09:02 PM UTC

Hi Mahalakshmi,

Thank you for your reply. I tried your solution. It still did not work.
I can get processed server data in AJAX success method correctly.  But the value is just not updated automatically, unless I double click that value in treegrid, then it gets updated.
So I think mostly likely it's due to some reason in front end. In my case, it seems you need another event to trigger refreshRow method (in my case, I have to double click that value to get it updated).

Thank you,

Harry



MK Mahalakshmi Karthikeyan Syncfusion Team August 6, 2015 12:08 PM UTC

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.


HZ Harry Zheng August 6, 2015 02:49 PM UTC

Hi Mahalakshmi,

Thank you for your message. I have modified your sample and reproduce the same problem. Please see attached modified sample and video.
Please note that I am using Syncfusion 13.1.0.30 version, which is different from the version in your sample, so I had to migrate your sample to 13.1.0.30 version.
I also modified the code by adding some treegrid properties, not sure if those contribute to the problem.
In video, you can see when I change the value in %column, the value in %column did not update until I double click that value.
Please note the first row always works well, but those rows below do not. I also found in my project, the first 10 rows works well, but not those rows after (I have hundreds rows in the treegrid).
If possible, could you populate your sample with more rows of data and you will see the problem more clearly.

Thank you,

Harry

Attachment: HZ20150806_a4b3efac.rar

HZ Harry Zheng August 6, 2015 02:51 PM UTC

There is a mistake:

"In video, you can see when I change the value in %column, the value in $$column did not update until I double click that value."

MK Mahalakshmi Karthikeyan Syncfusion Team August 7, 2015 05:11 PM UTC

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.


Loader.
Live Chat Icon For mobile
Up arrow icon