Server call for Add/Edit/Delete node in AngularJS

5 posts, 0 answers
  1. Devineni
    Devineni avatar
    9 posts
    Member since:
    Aug 2015

    Posted 10 Sep 2015 Link to this post

    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!

  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 14 Sep 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Devineni
    Devineni avatar
    9 posts
    Member since:
    Aug 2015

    Posted 14 Sep 2015 in reply to Daniel Link to this post

    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);
                            }
                        }
                    });
                };
  5. Devineni
    Devineni avatar
    9 posts
    Member since:
    Aug 2015

    Posted 14 Sep 2015 in reply to Devineni Link to this post

    Hi...

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

  6. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 16 Sep 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready