Data update( by javascript)

[TaeWook Kang]

As you can see from the video, if you change the data in the next pop-up window, the data in the "C" tab should be updated.

We are currently editing the corresponding dropdown list as follows and updated the corresponding data value through the "cellsave" function.

<e-treegrid-columns>

<e-treegrid-column field="SERVICE" headerText="SERVICE" width="180" headerTextAlign="Center" textAlign="Left" edit="@(new { create ="Serv_Create", read ="Serv_Read", destory ="Serv_Destory", write ="Serv_Write" })"></e-treegrid-column>
</e-treegrid-columns>
function Serv_Create(args) {
        Serv_elem = document.createElement('input');
        return Serv_elem;
    }


    function Serv_Read(args) {
        var RevNo = document.getElementById('REV_NO').ej2_instances[0].value;


        var sendData = { "jobNo": JobNo, "BldgNo": BldgNo, "EqName": EqName, "RevNo": RevNo, "SERVICE": Serv_dObj.value, "MODE": " " };


        $.ajax({
            url: "/HvacInform/HD_Service", //render the partial view
            type: "POST",
            data: JSON.stringify(sendData),
            dataType: 'JSON',
            async: false,
            contentType: "application/json",
            success: function (data) {
                SysList = data.reportList;
                AirList = data.list;
                plusList = data.Plusdata;
                MaxList = data.MaxData;
                AirMaxList = data.AirMaxData;
                OthMaxList = data.OthMaxDAta;
            }
        });


        return Serv_dObj.value;
    }


    function Serv_Destory() {
        Serv_dObj.destroy();
    }


    function Serv_Write(args) {
        var RevNo = document.getElementById('REV_NO').ej2_instances[0].value;


        var EqDetailGrid = document.getElementById('EqSelTree').ej2_instances[0];
        EqName = args.rowData.EQ_NM;


        if (EqName != "" || null) {
            var sendData = { "jobNo": JobNo, "BldgNo": BldgNo, "EqName": EqName, "RevNo": RevNo, "SERVICE": "", "MODE": "SelectDropdown" };
            var dataList = [];
            var placeholder = args.rowData["SERVICE"];
            Serv_dObj = new ej.dropdowns.DropDownList({
                dataSource: dataList,
                placeholder: placeholder,
                value: placeholder
            });


            $.ajax({
                url: "/HvacInform/HD_Service", //render the partial view
                type: "POST",
                data: JSON.stringify(sendData),
                dataType: 'JSON',
                contentType: "application/json",
                success: function (data) {
                    SysList = data.reportList;  //AIR SYSTEM DATA
                    AirList = data.list;        //USER가 선택할 SYSTEM NO LIST (Dropdownlist Items)
                    plusList = data.Plusdata;   //USER가 선택할 ROOM NO (Dropdownlist Items)
                    MaxList = data.MaxData;
                    AirMaxList = data.AirMaxData;
                    OthMaxList = data.OthMaxList;


                    if (AirList.length > 0) {
                        if (AirList[0].SYS_NO != undefined && AirList[0].SYS_NO != null) {
                            for (var i = 0; i < AirList.length; i++) {
                                dataList.push(AirList[i]["SYS_NO"]);
                            }
                        }
                        else if (AirList[0].ROOM != undefined && AirList[0].ROOM != null) {
                            for (var i = 0; i < AirList.length; i++) {
                                dataList.push(data.list[i]["ROOM"]);
                            }
                        }


                        if (placeholder == "") {
                            placeholder = dataList[0];


                            Serv_dObj.dataSource = dataList;
                            Serv_dObj.placeholder = placeholder;
                        }


                        Serv_dObj.value = placeholder;
                    }
                    else {
                        alert("HAS NOT AIR SERVICE SYSTEM");
                        EqDetailGrid.refresh();
                    }
                },
                Error: function () {
                    alert("");
                }
            });


            Serv_dObj.appendTo(Serv_elem);
        }
        else {
            alert("PLEASE SELECT 'EQUIP NAME'")
        }
    }

By changing the service column as in the video, I hope the values will be updated by automatically updating the service column when changing the tab rather than reflecting the data changed earlier.

Please check it and I look forward to a good answer.

I would appreciate it if you could give me an accurate answer as much as it needs to be solved.

[TaeWook Kang]

This is the e-mail address that sent the attached video.

[email protected]

regards.

[TaeWook Kang]

This is a reference image.

[TaeWook Kang]

This is a reference image.

[TaeWook Kang]

[Farveen Sulthana Thameeztheen Basha]

Hi TaeWook Kang,

From your provided video Demo and code example, we understood that you need to reflect the changes on another TreeGrid which is done on firstGrid when navigate over the Tabs.

The data will be changed only on your provided service not on TreeGrid on another Tab. If you want the changes to be reflected in service into the TreeGrid you need to call the Refresh method on Tab selecting event.

API link:- https://ej2.syncfusion.com/documentation/api/treegrid/#refresh

After following the above suggestion still faced issue, please get back to us with further details.

Regards,

Farveen sulthana T

[TaeWook Kang]

Thank you for your answer.

However, the value of the cell needs to be updated through Function, which changes the DropdownList rather than by "refresh".

This method requires a function that can be accessed after all data is bound to the grid.

(To find and change the drop-down list of each row after all data is bound)

Is there a function for data to be accessed after binding to the grid is completed?

regards.

[TaeWook Kang]

Please check the point.

The key point I'm talking about is the process of updating the cell of the column once again after the data is bound to the column coded in the following form.

I expect to activate the "cellsave" function if this process is successful.

function Serv_Create(args) {

            Serv_elem = document.createElement('input');
            return Serv_elem;
        }


        function Serv_Read(args) {
            var RevNo = document.getElementById('REV_NO').ej2_instances[0].value;


            var sendData = { "jobNo": JobNo, "BldgNo": BldgNo, "EqName": EqName, "RevNo": RevNo, "SERVICE": Serv_dObj.value, "MODE": " " };


            $.ajax({
                url: "/HvacInform/HD_Service", //render the partial view
                type: "POST",
                data: JSON.stringify(sendData),
                dataType: 'JSON',
                async: false,
                contentType: "application/json",
                success: function (data) {
                    SysList = data.reportList;
                    AirList = data.list;
                    plusList = data.Plusdata;
                    MaxList = data.MaxData;
                    AirMaxList = data.AirMaxData;
                    OthMaxList = data.OthMaxDAta;
                }
            });


            return Serv_dObj.value;
        }


        function Serv_Destory() {
            Serv_dObj.destroy();
        }


        function Serv_Write(args) {
            var RevNo = document.getElementById('REV_NO').ej2_instances[0].value;


            var EqDetailGrid = document.getElementById('EqSelTree').ej2_instances[0];
            EqName = args.rowData.EQ_NM;


            if (EqName != "" || null) {
                var sendData = { "jobNo": JobNo, "BldgNo": BldgNo, "EqName": EqName, "RevNo": RevNo, "SERVICE": "", "MODE": "SelectDropdown" };
                var dataList = [];
                var placeholder = args.rowData["SERVICE"];
                Serv_dObj = new ej.dropdowns.DropDownList({
                    dataSource: dataList,
                    placeholder: placeholder,
                    value: placeholder
                });


                $.ajax({
                    url: "/HvacInform/HD_Service", //render the partial view
                    type: "POST",
                    data: JSON.stringify(sendData),
                    dataType: 'JSON',
                    contentType: "application/json",
                    success: function (data) {
                        SysList = data.reportList;  //AIR SYSTEM DATA
                        AirList = data.list;        //USER가 선택할 SYSTEM NO LIST (Dropdownlist Items)
                        plusList = data.Plusdata;   //USER가 선택할 ROOM NO (Dropdownlist Items)
                        MaxList = data.MaxData;
                        AirMaxList = data.AirMaxData;
                        OthMaxList = data.OthMaxList;


                        if (AirList.length > 0) {
                            if (AirList[0].SYS_NO != undefined && AirList[0].SYS_NO != null) {
                                for (var i = 0; i < AirList.length; i++) {
                                    dataList.push(AirList[i]["SYS_NO"]);
                                }
                            }
                            else if (AirList[0].ROOM != undefined && AirList[0].ROOM != null) {
                                for (var i = 0; i < AirList.length; i++) {
                                    dataList.push(data.list[i]["ROOM"]);
                                }
                            }


                            if (placeholder == "") {
                                placeholder = dataList[0];


                                Serv_dObj.dataSource = dataList;
                                Serv_dObj.placeholder = placeholder;
                            }


                            Serv_dObj.value = placeholder;
                        }
                        else {
                            alert("HAS NOT AIR SERVICE SYSTEM");
                            EqDetailGrid.refresh();
                        }
                    },
                    Error: function () {
                        alert("");
                    }
                });


                Serv_dObj.appendTo(Serv_elem);
            }
            else {
                alert("PLEASE SELECT 'EQUIP NAME'")
            }
        }

Please watch the video one more time and answer.

In summary, when changing the tap of the dropdownlist generated like the code above, we want to activate the "cellsave" function by coding the task of changing the item in the dropdownlist as shown in the video.

I would appreciate it if you could give me a quick answer as it is a problem that must be solved.

re

[TaeWook Kang]

Please check the point.

The key point I'm talking about is the process of updating the cell of the column once again after the data is bound to the column coded in the following form.

I expect to activate the "cellsave" function if this process is successful.

function Serv_Create(args) {

            Serv_elem = document.createElement('input');
            return Serv_elem;
        }


        function Serv_Read(args) {
            var RevNo = document.getElementById('REV_NO').ej2_instances[0].value;


            var sendData = { "jobNo": JobNo, "BldgNo": BldgNo, "EqName": EqName, "RevNo": RevNo, "SERVICE": Serv_dObj.value, "MODE": " " };


            $.ajax({
                url: "/HvacInform/HD_Service", //render the partial view
                type: "POST",
                data: JSON.stringify(sendData),
                dataType: 'JSON',
                async: false,
                contentType: "application/json",
                success: function (data) {
                    SysList = data.reportList;
                    AirList = data.list;
                    plusList = data.Plusdata;
                    MaxList = data.MaxData;
                    AirMaxList = data.AirMaxData;
                    OthMaxList = data.OthMaxDAta;
                }
            });


            return Serv_dObj.value;
        }


        function Serv_Destory() {
            Serv_dObj.destroy();
        }


        function Serv_Write(args) {
            var RevNo = document.getElementById('REV_NO').ej2_instances[0].value;


            var EqDetailGrid = document.getElementById('EqSelTree').ej2_instances[0];
            EqName = args.rowData.EQ_NM;


            if (EqName != "" || null) {
                var sendData = { "jobNo": JobNo, "BldgNo": BldgNo, "EqName": EqName, "RevNo": RevNo, "SERVICE": "", "MODE": "SelectDropdown" };
                var dataList = [];
                var placeholder = args.rowData["SERVICE"];
                Serv_dObj = new ej.dropdowns.DropDownList({
                    dataSource: dataList,
                    placeholder: placeholder,
                    value: placeholder
                });


                $.ajax({
                    url: "/HvacInform/HD_Service", //render the partial view
                    type: "POST",
                    data: JSON.stringify(sendData),
                    dataType: 'JSON',
                    contentType: "application/json",
                    success: function (data) {
                        SysList = data.reportList;  //AIR SYSTEM DATA
                        AirList = data.list;        //USER가 선택할 SYSTEM NO LIST (Dropdownlist Items)
                        plusList = data.Plusdata;   //USER가 선택할 ROOM NO (Dropdownlist Items)
                        MaxList = data.MaxData;
                        AirMaxList = data.AirMaxData;
                        OthMaxList = data.OthMaxList;


                        if (AirList.length > 0) {
                            if (AirList[0].SYS_NO != undefined && AirList[0].SYS_NO != null) {
                                for (var i = 0; i < AirList.length; i++) {
                                    dataList.push(AirList[i]["SYS_NO"]);
                                }
                            }
                            else if (AirList[0].ROOM != undefined && AirList[0].ROOM != null) {
                                for (var i = 0; i < AirList.length; i++) {
                                    dataList.push(data.list[i]["ROOM"]);
                                }
                            }


                            if (placeholder == "") {
                                placeholder = dataList[0];


                                Serv_dObj.dataSource = dataList;
                                Serv_dObj.placeholder = placeholder;
                            }


                            Serv_dObj.value = placeholder;
                        }
                        else {
                            alert("HAS NOT AIR SERVICE SYSTEM");
                            EqDetailGrid.refresh();
                        }
                    },
                    Error: function () {
                        alert("");
                    }
                });


                Serv_dObj.appendTo(Serv_elem);
            }
            else {
                alert("PLEASE SELECT 'EQUIP NAME'")
            }
        }

Please watch the video again and answer.

In summary, when changing the tap of the dropdownlist generated like the code above, we want to activate the "cellsave" function by coding the task of changing the item in the dropdownlist as shown in the video.

I would appreciate it if you could give me a quick answer as it is a problem that must be solved.

regards.

[Farveen Sulthana Thameeztheen Basha]

Hi TaeWook Kang,

From your query and video demo we suspect that you need to update particular cell value without refreshing the entire TreeGrid. To achieve this, we suggest to use setCellValue method which updates particular cell value based on the given primary key value. After saving the data in the first Tab data we suggest to call setCellValue method to update the cell value in the next Tab.

Refer to the code below:-

function actionBegin(args)

        {

            if (args.type === 'save') {

                var primaryKey = args.rowData.taskID; //get the primaryKey value of Data of second Tab

                var updatedValue = args.rowData.firstName; 

                updatedValue = 'newVal'; //modified value

                this.treegridObj.setCellValue(primaryKey, 'fieldName', updatedValue);  //update using setCellValue method of TreeGrid in second tab

 

            }

        }

For Example we have shown actionBegin event, you can use setCellValue method after updating the record on First Tab

API link:- https://ej2.syncfusion.com/documentation/api/treegrid/#setcellvalue

If we misunderstood your query, please share more details to procieed further.

Regards,

Farveen sulthana T

[TaeWook Kang]

Please take a closer look at the provided video and previous comments again.

As can be seen from the following code, I update the dropdownlist item of a specific cell in the bound grid after the tab is changed.

 function Serv_Create(args) {

        Serv_elem = document.createElement('input');
        return Serv_elem;
    }


    function Serv_Read(args) {
        var RevNo = document.getElementById('REV_NO').ej2_instances[0].value;


        var sendData = { "jobNo": JobNo, "BldgNo": BldgNo, "EqName": EqName, "RevNo": RevNo, "SERVICE": Serv_dObj.value, "MODE": " " };


        $.ajax({
            url: "/HvacInform/HD_Service", //render the partial view
            type: "POST",
            data: JSON.stringify(sendData),
            dataType: 'JSON',
            async: false,
            contentType: "application/json",
            success: function (data) {
                SysList = data.reportList;
                AirList = data.list;
                plusList = data.Plusdata;
                MaxList = data.MaxData;
                AirMaxList = data.AirMaxData;
                OthMaxList = data.OthMaxDAta;
            }
        });


        return Serv_dObj.value;
    }


    function Serv_Destory() {
        Serv_dObj.destroy();
    }


    function Serv_Write(args) {
        var RevNo = document.getElementById('REV_NO').ej2_instances[0].value;


        var EqDetailGrid = document.getElementById('EqSelTree').ej2_instances[0];
        EqName = args.rowData.EQ_NM;


        if (EqName != "" || null) {
            var sendData = { "jobNo": JobNo, "BldgNo": BldgNo, "EqName": EqName, "RevNo": RevNo, "SERVICE": "", "MODE": "SelectDropdown" };
            var dataList = [];
            var placeholder = args.rowData["SERVICE"];
            Serv_dObj = new ej.dropdowns.DropDownList({
                dataSource: dataList,
                placeholder: placeholder,
                value: placeholder
            });


            $.ajax({
                url: "/HvacInform/HD_Service", //render the partial view
                type: "POST",
                data: JSON.stringify(sendData),
                dataType: 'JSON',
                contentType: "application/json",
                success: function (data) {
                    SysList = data.reportList;  //AIR SYSTEM DATA
                    AirList = data.list;        //USER가 선택할 SYSTEM NO LIST (Dropdownlist Items)
                    plusList = data.Plusdata;   //USER가 선택할 ROOM NO (Dropdownlist Items)
                    MaxList = data.MaxData;
                    AirMaxList = data.AirMaxData;
                    OthMaxList = data.OthMaxList;


                    if (AirList.length > 0) {
                        if (AirList[0].SYS_NO != undefined && AirList[0].SYS_NO != null) {
                            for (var i = 0; i < AirList.length; i++) {
                                dataList.push(AirList[i]["SYS_NO"]);
                            }
                        }
                        else if (AirList[0].ROOM != undefined && AirList[0].ROOM != null) {
                            for (var i = 0; i < AirList.length; i++) {
                                dataList.push(data.list[i]["ROOM"]);
                            }
                        }


                        if (placeholder == "") {
                            placeholder = dataList[0];


                            Serv_dObj.dataSource = dataList;
                            Serv_dObj.placeholder = placeholder;
                        }


                        Serv_dObj.value = placeholder;
                    }
                    else {
                        alert("HAS NOT AIR SERVICE SYSTEM");
                        EqDetailGrid.refresh();
                    }
                },
                Error: function () {
                    alert("");
                }
            });


            Serv_dObj.appendTo(Serv_elem);
        }
        else {
            alert("PLEASE SELECT 'EQUIP NAME'")
        }
    }

You should use the "cellsave" function.

However, the 'setCellVlaue' you provided cannot do that.

Thank you again for reviewing everything in detail and replying.

Thank you for your always kind reply.

This question is a bit tricky, but please give me a detailed answer.

regards.

[TaeWook Kang]

If you look at the next test code, you can give the cell's value to '0' and update the item I want again

I thought I could apply the "create, write, read, destroy" function and use the cellsave function.

var testtestgrid = document.getElementById('EqSelTree').ej2_instances[0];

        var aa = testtestgrid.grid.currentViewData[0]["SERVICE"];
        testtestgrid.grid.currentViewData[0]["SERVICE"] = 0;




        testtestgrid.updateCell(0, "SERVICE", aa);

However, just because you updated Cell, the following tasks did not happen.

I would appreciate it if you could check again if there is a way to apply this and give me an answer.

[Farveen Sulthana Thameeztheen Basha]

Hi TaeWook Kang,

Thanks for your details.

Query#:- I thought I could apply the "create, write, read, destroy" function and use the cellsave function.

From your query we suspect that you need to handle Create,write,destroy function by calling any of the methods. By calling updateCell or setCellValue method doesn’t triggers these functions. It will trigger when dropdownlist renders while on Editing. So we suggest to use your own custom Logic after performing the actions in first Tab. There is no certain methods to trigger the actions.

Regards,

Farveen sulthana T