ejTreeGrid - not saving changes to db after edit

[Falko Royal]

Hi,

I know the ejTreeGrid is not officially supported in Lightswitch HTML client. But fortunately it works quite well for me despite one little issue I'm not getting worked out.

I have a simple browse ProductHierarchy screen. ProductHierarchy is a self referencing entity with the following fields:

ID

ParentID

Name

Description

The screen is quite simple as it only contains the ejCollectionControl (bound to the ProductHierarchies dataMember in screen Designer) which has one row layout group that contains the four fields of which both ID and ParentID fields are flagged as not visible.

Now the thing is that adding and deleting works like a charm, but when the edit screen returns I can see in the debugger that the changes made it to selectedData, but nothing happens on the database and also there is no update of the grid.

My code looks like this:

myapp.BrowseProductHierarchies.ProductHierarchies_render = function (element, contentItem) {
    // Write code here.
    var itemTemplate = $("
").attr('id', 'ProductHierarchy')
 
    // Append the div element to screen 
    itemTemplate.appendTo($(element));
 
    contentItem.value.oncollectionchange = function () {
 
        if (itemTemplate.hasClass('e-treegrid')) {
            itemTemplate.ejTreeGrid('destroy');
        }
 
        var first = contentItem.children[0], fieldname = [];
        for (i = 0; i < first.children.length; i++) {
            fieldname[i] = { field: first.children[i].valueModel.name };
        }
        
        var dataMgr = ej.DataManager({
            json: contentItem.value.data,
            offline: true
        });

	var table = contentItem.children[0];

        itemTemplate.ejTreeGrid({
            treeColumnIndex: 1,
            idMapping: table.children[0].valueModel.name,
            parentIdMapping: table.children[1].valueModel.name,
            enableVirtualization: true,
	    rowSelected: function (args) {
                selectedData = args.data;
            },
	    toolbarClick: function (args) {
                switch (args.itemName) {
                    case "Add":
                        args.Cancel = true;
                        myapp.showScreen("AddEditProductHierarchy", null, {
                            beforeShown: function (addScreen) {
                                var ph = new myapp.ProductHierarchy();
                                addScreen.ProductHierarchy = ph;
                            },
                            afterClosed: function (addScreen) {
                                myapp.applyChanges();
                                contentItem.screen.ProductHierarchies.load();
                            }
                        });                        
                        break;
		    case "Delete":
                        contentItem.value.selectedItem = selectedData;
                        try {
                            contentItem.value.deleteSelected();
                        }
                        catch (err) {
                            alert(err);
                        }
                        myapp.applyChanges();
                        break;
		    case "Edit":
                        if (!($.isEmptyObject(selectedData))) {
                            args.cancel = true;
                            myapp.showScreen("AddEditProductHierarchy", [selectedData], {
                                afterClosed: function (editScreen, navigationAction) {
				    if (navigationAction === msls.NavigateBackAction.commit) {
                                        myapp.applyChanges();
                                    }
				}
                            });
                        }
                        break;
		}
            },
            
            editSettings: {
                allowEditing: true,
                allowAdding: true,
                allowDeleting: true
            },
	
	    toolbarSettings: {
                showToolbar: true,
                toolbarItems: [
                        ej.Grid.ToolBarItems.Add,
                        ej.Grid.ToolBarItems.Edit,
                        ej.Grid.ToolBarItems.Delete,
                        ej.Grid.ToolBarItems.Update,
                        ej.Grid.ToolBarItems.Cancel
                ]
            },
 
            dataSource: dataMgr,
            columns: [
                    { field: "ID", visible: false, isPrimaryKey: true },
                    { field: "Name" },
                    { field: "Description"}
                ],
        });
    }
}

I have another screen with the normal ejGrid control (just a different entity) where the same toolbarclick event works even without having to call any save method or applyChanges(). Here is the snipped of the working edit event of ejGrid:
...

			case "Edit":
                            if (!($.isEmptyObject(selectedData))) {
                                args.cancel = true;
                                myapp.showScreen("AddEditInfoObjectFilter", [selectedData], {
                                    afterClosed: function (editScreen) {
                                        $(itemTemplate).ejGrid("refreshContent");
                                    }
                                });
                            }
                            break;
...

Maybe I'm just missing something in the afterClosed function?

Any feedback is very much appretiated :)

Best regards,

Falko Royal

[Mahalakshmi Karthikeyan]

Hi Falko,

We have analyzed the code you have provided, and came to know that you are trying update the changes in the toolbarClick  event. And we would like to share you that we wont get the added or modified data at the time of toolbar click. So we recommend you to do the update action in the actionComplete and endEdit client side events. When we attempt to add any new row or Delete the selected row, actionComplete client side event will be fired with the requestType as “addNewRow” and “delete”. And EndEdit client side event will be fired when we edit any data on TreeGrid. With the help of these events we can update the table from TreeGrid. Please refer the below code example for details.

myapp.ClientsGridTemplate.Client_render = function (element, contentItem) {

//…

itemTemplate.ejTreeGrid({

    //…

    endEdit: function (args) {

        var editedData = args.data;

        // code to update the changes to table when TreeGrid data are edited

    },

    actionComplete: function (args) {

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

            var NewRow = args.addedRow

            //code to add new row to table

        }

        if (args.requestType == "delete") {

            var data = args.data;

            // code to delete the selected row from table

        }

    },

});//…

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

Regards,

Mahalakshmi K.

[Falko Royal]

Hi Mahalakshmi,

thank you for your response. Maybe I'm wrong but as you can see in my code example I'm opening an AddEditScreen in the click event with the currently selected data. The screen opens fine and shows correct data. My problem is that in the afterClosed event of the AddEditScreen I can see that the changes made on that screen are visible in the selectedData variable. But somehow I'm not able to reflect this changed data back into the database. How is it possible to flag the selected item with the changed values as modified? I know this might be a stupid question that is not directly related to the ejTreeGrid control but currently I'm lost.

I'm missing the // code to update the changes to table

Thanks and best regards,

Falko

[Mahalakshmi Karthikeyan]

Hi Falko,

As we said in our previous update we cannot get the modified data at the time of toolbar click. We have to use “endEdit” client side event to update the modified data to the table. Please find the below code example for details.

itemTemplate.ejTreeGrid(

        {

endEdit: function (args) {

               

var modifiedData = args.data ? args.data : args.currentValue;

                data["Freight"] = modifiedData["Freight"];

                data["EmployeeID"] = modifiedData["EmployeeID"];

                data["City"] = modifiedData["City"];

                data["OrderID"] = modifiedData["OrderID"];

                myapp.activeDataWorkspace.ApplicationData.saveChanges().then($.proxy(function () {

                    this.refresh();

                }, this));

                myapp.applyChanges();

            },

        });

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/directtrac/general/ze/local-lightswitch1683951089

If you still face any issue please get back to us by modifying this sample along with the replication procedure to reproduce it.

Regards,

Mahalakshmi K.