This is a migrated thread and some comments may be shown as answers.

Server call for Add/Edit/Delete node in AngularJS

4 Answers 50 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Devineni
Top achievements
Rank 1
Devineni asked on 10 Sep 2015, 10:39 AM

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!

4 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 14 Sep 2015, 07:38 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Devineni
Top achievements
Rank 1
answered on 14 Sep 2015, 12:51 PM
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);
                        }
                    }
                });
            };
0
Devineni
Top achievements
Rank 1
answered on 14 Sep 2015, 01:11 PM

Hi...

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

0
Daniel
Telerik team
answered on 16 Sep 2015, 09:25 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Diagram
Asked by
Devineni
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Devineni
Top achievements
Rank 1
Share this question
or