Server call for Add/Edit/Delete node in AngularJS

[Devineni]

How to call a remote API for add/edit/delete node when using a parent-child relationship JSON data?

I've created my scenario in dojo. In the example, when click on node, we are getting Add, Edit and delete options.

1. When click on the Add, the add functionality is not working.
2. On Edit, I should be using own view template and over-right the save functionality.
3. On Delete, I should show the confirmation dialog and should call a function to perform the delete operation.

Also, the k-rebind is not working in our scenario. I'm loading the diagram by default with out data. I've a call to the rest to get the data for the diagram. Once I received the data. I want to rebind the diagram. but it is not rebinding.

 Kindly help to resolve the above issues.

 Thanks in advance!

[Daniel]

Hello,

Editing is not currently supported when using HierarchicalDataSource. You need to use flat dataSources for the shapes and the connections as demonstrated in this demo in order for the editing to work.

As for the k-rebind issue - could you provide the code that you are using to update the options or a runnable sample that demonstrates the problem?

Regards,
Daniel
Telerik

 

 

[Devineni]

Hi..

Thank you for u r answer..
Can I get working DOJO example for my question using angular js,and here is my code to get data from remote call and binding to the diagram

 

 budgetFacade.outputTypeActivityMappingsApi.getListWithUrl("getSeq/" + 1).then((data) => {
                $scope.activitySequences = data;

                $scope.showDiagram = true;
                $scope.options = {
                    dataSource: new kendo.data.HierarchicalDataSource({
                        data: $scope.activitySequences,
                        schema: {
                            model: {
                                children: "child"
                            }
                        }
                    }),
                    autoBind: true,
                    layout: {
                        type: "layered"
                    },
                    shapeDefaults: {
                        visual: visualTemplate,
                        editable: {
                            tools: ["createConnection","edit","delete"]
                        }
                    }
                }
            });

and I will be having a button click function,when i click on button I'm pushing the data in to scope variable and trying to rebind the diagram using k-rebind

   $scope.addActivity = (entity) => {
                var outputTypeActivityMapping = new Reactore.Budget.Models.OutputTypeActivityMapping();
                outputTypeActivityMapping.outputTypeId = 1;
                outputTypeActivityMapping.activityId = entity.activityName.id;
                outputTypeActivityMapping.previousOutputTypeActivitySeqMappingId = entity.linkNodeName;
                outputTypeActivityMapping.sequenceConditionId = entity.sequenceConditionId;
                budgetFacade.outputTypeActivityMappingsApi.add(outputTypeActivityMapping).then((responseData) => {
                    if (responseData) {
                        responseData.child = [];
                        responseData.activity = budgetFacade.arrayHelperService.getItemFromArrayById($scope.activities, responseData.activityId);
                        responseData.previousOutputTypeActivitySeqMapping = budgetFacade.arrayHelperService.getItemFromArrayById($scope.activities, responseData.activityId);
                        function getParent(r, a) {
                            return a.id === responseData.previousOutputTypeActivitySeqMappingId ? a : a.child.reduce(getParent, r);
                        }
                        var node = $scope.activitySequences.reduce(getParent, {});
                        if ('child' in node) {
                            node.child.push(responseData);
                        } else {
                            $scope.activitySequences.push(responseData);
                        }
                    }
                });
            };

[Devineni]

Hi...

Can I get a working example for Delete and Create Node with Custom popup options using angular js

[Daniel]

Hello,

The approach with angular will be pretty much the same. I created an example based on the editing demo using angular. 

As for the issue with k-rebind - it will occur because the change will not be detected when using promises. You should assign the scope options field with a timeout in order to avoid it.

Regards,
Daniel
Telerik