Change row with javascript code

[Cosimo Carbonelli]

I am using treegrid and I want to perform some operations with javascript code in order to avoid page refresh. For example I want to delete, edit or add a row pogrammatically without refreshing the page. Please can you tell me if it is possible to perform this operations and how can I do them?
Thank you.
Best regards.

[Mahalakshmi Karthikeyan]

Hi Cosimo,

Thanks for using Syncfusion product.

For your kind information, by default Treegrid run from the javascript code behind for the operations like adding, editing or deleting an item. And we can also update the changes to the data base using “EndEdit” and “ActionComplete” client side event. Please refer the below code snippet to achieve this.

   <ej:TreeGrid ID="TreeGrid1" runat="server" AllowSelection="True" //… EndEdit="endEdit" ActionComplete="ActionComplete">

    <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:SelfReferenceConnectionString %>" SelectCommand="SELECT * FROM [GanttData]"></asp:SqlDataSource>

 

    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True" />       

        <script type="text/javascript">

           

            function endEdit(args) {

                var editedRecord = args.data.item;

                //This varible holds the data of the edited record. You can updated it to your remote datasource

                PageMethods.UpdateIt(editedRecord);

            }

 

            function ActionComplete(args) {

                var record = args.data;

                if (args.requestType === 'addNewRow') {

                    //Newly Added Record is obtained here , which can be updated to database

                    addedRecord = args.addedRow;

                    PageMethods.AddIt(addedRecord);

 

                } else if (args.requestType === 'delete') {

                    var data = args.data;

                    var deletedRecord = data.item; //This is the deleted item.

                    PageMethods.DeleteIt(deletedRecord);

                    //If deleted item has child records, we need to delete that too

 

                    if (data.hasChildRecords) {

                        deleteChildRecords(data);

                    }

                }

 

                    // To update the database during editing and update operation

                else if (args.requestType === 'recordUpdate') {

                    var item = args.data.item;

                    PageMethods.UpdateIt(item);

                }

            }

 

            //Delete inner level child records

            function deleteChildRecords(record) {

                var childRecords = record.childRecords,

                    length = childRecords.length,

                    count, currentRecord;

                for (count = 0; count < length; count++) {

                    currentRecord = childRecords[count];

                    var deletedChildRecord = currentRecord.item; //This is the deleted child item.

                    //If the above deleted child record has child records, then we need to delete that too.

                    if (currentRecord.hasChildRecords) {

                        deleteChildRecords(currentRecord);

                    }

                }

            }

        </script>

 

We have also prepared a simple treegrid sample. Please find the sample from the following location.

Sample: http://www.syncfusion.com/downloads/support/forum/119847/ze/TreeGridSample-1862774218

Please let us know if you need further assistance on this.

Regards,

Mahalakshmi K.

[Cosimo Carbonelli]

Hi Mahalakshmi,
Thank you for yuor answer. The problem is that I am developing cut, copy and paste operations and also that I want to edit and add node using a customized popup window. I also have added a customized context menu item for deleting a node. So I update the database and after this I have to update the treegrid. I cannot use the event ActionComplete.
My code is:
 function customMenu( args ) {
   args.contextMenuItems.splice(0, 2);
   args.contextMenuItems.push(
   {
       headerText: getUIResourceString("Resources.Trees.lblDelete"),
       menuId: "mnDelete",
       iconPath: "url(../../images/deletecm.png)",
       eventHandler: deleteMenuClick
   }
   );
   args.contextMenuItems.push(
   {
       headerText: getUIResourceString("Resources.Trees.lblCut"),
       menuId: "mnCut",
       iconPath: "url(../../images/taglia.png)",
       eventHandler: cutMenuClick
   }
   );
   args.contextMenuItems.push(
   {
       headerText: getUIResourceString("Resources.Trees.lblCopy"),
       menuId: "mnCopy",
       iconPath: "url(../../images/copia.png)",
       eventHandler: copyMenuClick
   }
   );

   if (nodeToCopy != '' || nodeToCut != '') {

       args.contextMenuItems.push(
   {
       headerText: getUIResourceString("Resources.Trees.lblPaste"),
       menuId: "mnPaste",
       iconPath: "url(../../images/incolla.png)",
       eventHandler: pasteMenuClick
   }
   );
   }

  function deleteMenuClick(args) {
      alert(args.data.item.nodeID);
      if (args != null && args.data != null && args.data.item != null && args.data.item.nodeID != null)
          removeNodes(args.data.item.nodeID, args.data.index);
  }
  function removeNodes(startNode, index) {
    var treegridObj = $("#treeGrid").data("ejTreeGrid");
    var confirmed = confirm(getUIResourceString("Resources.Globals.msgConfirmDelete"));
    if (!confirmed)
        return;
//    treegridObj.model.dataSource.splice(index, 1);
//    treegridObj.model.ids.splice(index, 1);
//    treegridObj.refresh();
//    treegridObj.refreshContent();
//   
    PIKR.WServices.Tree.RemoveNode(startNode, function (res) {

            if (res != "-1")
            {
               //TODO
            }

        });
    }

In the function RemoveNode I call a webservice to remove the node from the database. Then I have to refresh the treegrid, how can I do this without refreshing the whole page?
Thank you.
Best regards.

[Mahalakshmi Karthikeyan]

Hi Cosimo,

Please find the response for your various queries below,

Query 1: The problem is that I am developing cut, copy and paste operations

Solution: At present there is no support to cut, copy and paste the nodes in TreeGrid control. Can you please share us the purpose of these operation in your project? So that we can give you response appropriately.

Query 2: I want to edit and add node using a customized popup window.

Solution:  We can edit and add a new node to the database in the customized context menu using “addRow” and “deleteRow” and “_editRow” methods, please find the below code snippet to achieve this.

<ej:TreeGrid ID="TreeGrid" runat="server" AllowSelection="True"

//…

ContextMenuOpen="contextmenuopen">

<ContextMenuSettings ShowContextMenu="true" />

//…

<script type="text/javascript">

            function contextmenuopen(args) {

                args.contextMenuItems.splice(0, 3);

                args.contextMenuItems.push({

                    headerText: "Delete",

                    menuId: "mnDelete",

                    iconPath: "url(../../images/deletecm.png)",

                    eventHandler: deleteMenuClick

                });

                args.contextMenuItems.push({

                    headerText: "Add",

                    menuId: "add",

                    iconPath: "url(../../images/deletecm.png)",

                    eventHandler: addMenuClick

                });

                args.contextMenuItems.push({

                    headerText: "Edit",

                    menuId: "update",

                    eventHandler: editMenuClick

                });

            }

            function editMenuClick(args) {

                var treegObj = $("#TreeGrid").data("ejTreeGrid");

                //To update in TreeGrid.               

                var index = treegObj.model.flatRecords.indexOf(args.data);

                var rec = treegObj.model.flatRecords[index];

                treegObj._editRow(index);

                // To update in Database.

                PageMethods.UpdateIt(rec.item);

            }

            function addMenuClick(args) {

                var treegObj = $("#TreeGrid").data("ejTreeGrid");

                var index = treegObj._getNewIndex();

                args.data.index = index;

                args.data.item.TaskId = index;

                //To add in TreeGrid.

                treegObj.addRow(args.data.item, ej.TreeGrid.RowPosition.Below);

                addedRecord = args.data.item;

                // To add in Database.

                PageMethods.AddIt(addedRecord);

            }

            function deleteMenuClick(args) {

                var treegObj = $("#TreeGrid").data("ejTreeGrid");

                //To delete in TreeGrid.

                treegObj.deleteRow();

                var data = args.data;

                var deletedRecord = data.item; //This is the deleted item.

                PageMethods.DeleteIt(deletedRecord);

                //If deleted item has child records, we need to delete that too

                if (data.hasChildRecords) {

                    deleteChildRecords(data);

                }

            }

//Delete inner level child records

            function deleteChildRecords(record) {

                var childRecords = record.childRecords,

                    length = childRecords.length,

                    count, currentRecord;

                for (count = 0; count < length; count++) {

                    currentRecord = childRecords[count];

                    var deletedChildRecord = currentRecord.item; //This is the deleted child item.

                    //If the above deleted child record has child records, then we need to delete that too.

                    if (currentRecord.hasChildRecords) {

                        deleteChildRecords(currentRecord);

                    }

                }

            }

        </script>

We have also prepared a sample based on this, and you find the sample under the following location.

Sample: http://www.syncfusion.com/downloads/support/forum/119847/ze/TreeGridSample-1277417612

We have also logged a feature report for public method support for editRow method. 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 need further assistance on this.

Regards,

Mahalakshmi K.

[Cosimo Carbonelli]

Hi Mahalakshmi,
Thank you for your answer.
Question 1: I want to implement cut, copy and paste feature because the user can copy an entire subtree and paste it in another position. I think I can obtain this with the addRow and deleteRow methods that you showed me in your sample. Is there any documentation about these methods? How can I specify the position in the addrow function?
Question 2: Thank you for your sample. But I don't understand a thing: there is no way to edit a row by code? For example I want to make something like this:
function editMenuClick(args) {
                var treegObj = $("#TreeGrid").data("ejTreeGrid");
                args.data.item.Duration=10;             
                treegObj.editRow(args.data.item);
            }
Thank you.
Best regards.

[Mahalakshmi Karthikeyan]

Hi Cosimo,

Thanks for your update.

Query 1: I want to implement cut, copy and paste feature because the user can copy an entire subtree and paste it in another position. I think I can obtain this with the addRow and deleteRow methods that you showed me in your sample.

Solution:

If your requirement of cut , copy and paste a row or an entire subtree is within a single TreeGrid widget, at present we have row drag and drop feature in TreeGrid , where you can cut a node and paste it another position as sibling above , below or as a child corresponding to another node. Please refer the below code snippet to enable the row drag and drop in TreeGrid.

<ej:TreeGrid ID="TreeGrid" runat="server" AllowSelection="True"

//...

AllowDragAndDrop="true"

ContextMenuOpen="contextmenuopen">

<DragTooltip ShowTooltip="true" />

<ContextMenuSettings ShowContextMenu="true" />

//...

Please find the demo sample in the below location

Demo Sample

Please refer the UG Documentation for row drag and drop from the following location.

http://helpjs.syncfusion.com/js/treegrid/rows

And please refer the API reference from the following location.

API Reference

Query 2: Is there any documentation about these methods? How can I specify the position in the addrow function?

Solution:

Currently we are working in enhancing the online documentation, we will update the documentation with public method information soon . 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

In the addRow method we can specify the position of the new row to be add in the TreeGrid. Please find the below list of possible position can be specify to the addRow method.

·         ej.TreeGrid.RowPosition.Above: to add a new row above to the selected Row.

·         ej.TreeGrid.RowPosition.Below: to add a new row below to the selected row.

·         ej.TreeGrid.RowPosition.Top: to add a new row top of the TreeGrid.

·         ej.TreeGrid.RowPosition.Bottom: to add a new row to the bottom of the TreeGrid.

·         ej.TreeGrid.RowPosition.Child: to add a new row as a child to the selected row.

Please find the below code snippet for details.

<ej:TreeGrid ID="TreeGrid" runat="server" AllowSelection="True"

//…

ContextMenuOpen="contextmenuopen">

<ContextMenuSettings ShowContextMenu="true" />

//…

<script type="text/javascript">

            function contextmenuopen(args) {

                args.contextMenuItems.splice(0, 3);

                args.contextMenuItems.push({

                    headerText: "Add",

                    menuId: "add",

                    iconPath: "url(../../images/deletecm.png)",

                    eventHandler: addMenuClick

                });

            }

            function addMenuClick(args) {

                var treegObj = $("#TreeGrid").data("ejTreeGrid");

                var index = treegObj._getNewIndex();

                args.data.index = index;

                args.data.item.TaskId = index;

                //To add in TreeGrid.

                treegObj.addRow(args.data.item, ej.TreeGrid.RowPosition.Below);

                addedRecord = args.data.item;

                // To add in Database.

                PageMethods.AddIt(addedRecord);

            }

        </script>

For deleteRow(), we just need to select the row to delete and using this method a row can be deleted.

Query 3: Question 2: Thank you for your sample. But I don't understand a thing: there is no way to edit a row by code? For example I want to make something like this:

function editMenuClick(args) {
                var treegObj = $("#TreeGrid").data("ejTreeGrid");
                args.data.item.Duration=10;             
                treegObj.editRow(args.data.item);
            }

Solution:

For your kind information, in our previous update we have provided the code in edit event for enabling the editing for the selected row in context menu edit button click event. But if we want to view the edited changed in the TreeGrid, we have to refresh the row using “refreshRow” public method to refresh the row after the value changed. Please refer the below code snippet for details.

<script type="text/javascript">

            function contextmenuopen(args) {

                //…

                args.contextMenuItems.push({

                    headerText: "Change Duration",

                    menuId: "update",

                    eventHandler: editMenuClick

                });

            }

            function editMenuClick(args) {

                var treegObj = $("#TreeGrid").data("ejTreeGrid");

                //To update in TreeGrid.               

                var index = treegObj.model.flatRecords.indexOf(args.data);

                args.data.item.Duration = "10";

                args.data.Duration = 10;

                treegObj.refreshRow(index);

                // To update in Database.

                PageMethods.UpdateIt(args.data.item);

            }

</script>

Here we passed the row index as the argument to the “refreshRow” method to which row we need to refresh.

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/119847/ze/TreeGridSample-1817637492

Please let us know if you need further assistance on this.

Regards,

Mahalakshmi K.