CRUD.cshtml

@using Syncfusion.EJ2.Diagrams;
@using Syncfusion.EJ2.Inputs;

@section ControlsSection{
    <div class="control-section">
        <div style="width: 100%;height: 10%">
            @*Initializes ToolBar control.*@
            <ejs-toolbar id="toolbar" clicked="toolbarClick" created="toolbarCreate">
                <e-toolbar-items>
                    <e-toolbar-item id="Add" tooltipText="Add" prefixIcon="e-ddb-icons e-add" text="Add"></e-toolbar-item>
                    <e-toolbar-item type="Separator"></e-toolbar-item>
                    <e-toolbar-item id="Edit" tooltipText="Edit" prefixIcon="e-ddb-icons e-update" text="Edit"></e-toolbar-item>
                    <e-toolbar-item type="Separator"></e-toolbar-item>
                    <e-toolbar-item id="Delete" tooltipText="Delete" prefixIcon="e-ddb-icons e-delete" text="Delete"></e-toolbar-item>
                    <e-toolbar-item type="Separator"></e-toolbar-item>
                </e-toolbar-items>
            </ejs-toolbar>
        </div>
        <div style="width: 100%;height: 80%;border-width: 0 1px 1px 1px; border-style: solid; border-color:#D7D7D7">
            <div id="diagram-space" class="sb-mobile-diagram">
                @*Initializes Diagram control.*@
                <ejs-diagram id="diagram" dataSourceSettings="ViewBag.DataSourceSettings" width="100%" height="600px" getNodeDefaults="ViewBag.nodeDefaults" getConnectorDefaults="ViewBag.connectorDefaults" selectionChange="selectionChange" sourcePointChange="connectionChange" targetPointChange="connectionChange" setNodeTemplate="ViewBag.setNodeTemplate">
                    <e-diagram-snapsettings constraints="None"></e-diagram-snapsettings>
                    <e-diagram-layout type="HierarchicalTree" verticalSpacing="40"></e-diagram-layout>
                </ejs-diagram>
            </div>
        </div>
    </div>
   @*Initialize Dialog control*@
    <ejs-dialog id="editDialog" width="300px" visible="false" isModal="true" showCloseIcon="true">
        <e-content-template>
            <div class="showLabel">
                @*Initialize Textbox control*@
                <ejs-textbox id="Description" placeholder="Enter Description"></ejs-textbox>
            </div>
            <div class="showLabel" style="padding-top: 14px">
                @*Initialize Textbox control*@
                <ejs-textbox id="Color" placeholder="Enter Color"></ejs-textbox>
            </div>
            <div class="showDropdown">
                @*Initialize Dropdownlist control to display an sourceNodes in diagram.*@
                <ejs-dropdownlist id="SourceId" placeholder="select sourceId" created="sourceDropdownCreate" popupHeight="220px" change="sourceDropdownChange">
                    <e-dropdownlist-fields text="Label" value="Name"></e-dropdownlist-fields>
                </ejs-dropdownlist>
            </div>
            <div class="showDropdown" style="padding-top: 14px">
                @*Initialize Dropdownlist control to display an targetNodes in diagram.*@
                <ejs-dropdownlist id="TargetId" placeholder="select targetId" created="targetDropdownCreate" popupHeight="220px" change="targetDropdownChange">
                    <e-dropdownlist-fields text="Label" value="Name"></e-dropdownlist-fields>
                </ejs-dropdownlist>
            </div>
        </e-content-template>
        <e-dialog-buttons>
            @*Initialize Button control to update the node label and node color.*@
            <e-dialog-dialogbutton buttonModel="ViewBag.button" click="dlgButtonClick"></e-dialog-dialogbutton>
        </e-dialog-buttons>
    </ejs-dialog>
    <style>
        @@font-face {
            font-family: 'e-ddb-icons';
            src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
            font-weight: normal;
            font-style: normal;
        }

        .e-ddb-icons {
            font-family: 'e-ddb-icons';
            speak: none;
            font-size: 55px;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .e-add::before {
            content: "\e705";
        }

        .e-update::before {
            content: "\e703";
        }

        .e-delete::before {
            content: "\e701";
        }

        .material .e-add::before {
            content: "\e704";
        }

        .material .e-update::before {
            content: "\e702";
        }

        .material .e-delete::before {
            content: "\e707";
        }

        .bootstrap .e-add::before {
            content: "\e706";
        }

        .bootstrap .e-update::before {
            content: "\e708";
        }

        .bootstrap .e-delete::before {
            content: "\e700";
        }

        .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
            padding: 3px;
        }

        .showDropdown {
            display: none;
        }
    </style>
    <script type="text/javascript">
        var diagram;
        var dialog;
        var toolbarObj;
        var sourceDropdown;
        var targetDropdown;
        var sourceID;
        var targetID;
        var nodeData = [];
        @*custom code start*@
        function dlgButtonClick(args) {
            diagram = document.getElementById('diagram').ej2_instances[0];
            dialog = document.getElementById("editDialog").ej2_instances[0];
            var dialogHeader = dialog.header;
            var description = document.getElementById("Description").value;
            var color = document.getElementById("Color").value;
            var selectedItem;
            if (diagram.selectedItems.nodes.length > 0) {
                selectedItem = diagram.selectedItems.nodes[0];
            }
            if (diagram.selectedItems.connectors.length > 0) {
                selectedItem = diagram.selectedItems.connectors[0];
            }
             //Add new node and connector in diagram at runtime.
            if (dialogHeader === "Add") {
                var node = {
                    id: 'node' + ej.diagrams.randomId(), style: { fill: color }, Description: description, Color: color, Id: Math.floor((Math.random() * 1000) + 100),
                };
                var connector = {
                    id: 'connector' + ej.diagrams.randomId(), sourceID: selectedItem.id, targetID: node.id, Id: Math.floor((Math.random() * 1000) + 100),
                };
                diagram.add(node);
                diagram.add(connector);
                diagram.doLayout();
                //Insert newly added elements into the database.
                diagram.insertData();
                nodeData.push({ Name: node.id, Label: description });
            }
            else {
                if (selectedItem instanceof ej.diagrams.Connector) {
                    //Update sourceNode and targetNode at runtime.
                    selectedItem.sourceID = sourceID ? sourceID : selectedItem.sourceID;
                    selectedItem.targetID = targetID ? targetID : selectedItem.targetID;
                    diagram.dataBind();
                    diagram.doLayout();
                }
                else {
                    //update an node text and node bgColor.
                    selectedItem.Description = description;
                    selectedItem.Color = color;
                    selectedItem.annotations[0].content = description;
                    selectedItem.style.fill = color;
                    diagram.dataBind();
                }
                diagram.updateData();
            }
            dialog.hide();
        };
        @*custom code end*@
        //Set node default properties.
        function nodeDefaults(obj, diagram) {
            obj.width = 100;
            obj.height = 50;
            obj.shape = { type: 'Basic', shape: 'Rectangle' };
            obj.style = { strokeWidth: 1, strokeColor: '#DDDDDD' };
            return obj;
        }

        //Set connector default properties.
        function connectorDefaults(connector, diagram) {
            connector.type = 'Orthogonal';
            connector.style.fill = '#707070';
            connector.style.strokeColor = '#707070';
            connector.targetDecorator = {
                style: {
                    strokeColor: '#707070',
                    fill: '#707070'
                },
            };
            return connector;
        }
        @*custom code start*@
         //Displays nodes name in dropdown.
        function sourceDropdownCreate(args) {
            var sourceDropdown = document.getElementById('SourceId').ej2_instances[0];
            sourceDropdown.dataSource = getDataSource();
            sourceDropdown.dataBind();
        }

        //Displays nodes name in dropdown.
        function targetDropdownCreate(args) {
            var targetDropdown = document.getElementById('TargetId').ej2_instances[0];
            targetDropdown.dataSource = getDataSource();
            targetDropdown.dataBind();
        }

        //Set an sourceId of an selected Connector.
        function sourceDropdownChange(args) {
            sourceID = args.value;
        }

        //Set an targetId of an selected Connector.
        function targetDropdownChange(args) {
            targetID = args.value;
        }

        //Disable toolbar icon at initial rendering.
        function toolbarCreate(args) {
            enableToolbarItems(false);
        }
        @*custom code end*@
        //Disable or Enable the toolbar items based on element selection.
        function selectionChange(args) {
            if (args.state === 'Changing') {
                toolbarObj = document.getElementById("toolbar").ej2_instances[0];
                if (args.newValue.length > 0) {
                    if (args.newValue[0] instanceof ej.diagrams.Node) {
                        enableToolbarItems(true);
                    }
                    else {
                        toolbarObj.enableItems(document.getElementById(toolbarObj.items[0].id).parentElement, false);
                        toolbarObj.enableItems(document.getElementById(toolbarObj.items[2].id).parentElement, true);
                        toolbarObj.enableItems(document.getElementById(toolbarObj.items[4].id).parentElement, false);
                    }
                }
                else {
                    enableToolbarItems(false);
                }
            }
        }
        @*custom code start*@
        //Enable or disable the toolbar items.
        function enableToolbarItems(isEnableItem) {
            toolbarObj = document.getElementById("toolbar").ej2_instances[0];
            toolbarObj.enableItems(document.getElementById(toolbarObj.items[0].id).parentElement, isEnableItem);
            toolbarObj.enableItems(document.getElementById(toolbarObj.items[2].id).parentElement, isEnableItem);
            toolbarObj.enableItems(document.getElementById(toolbarObj.items[4].id).parentElement, isEnableItem);
        }
        @*custom code end*@
        function connectionChange(args) {
            if (args.state === 'Completed') {
                if (!args.connector.targetID || !args.connector.sourceID) {
                    args.cancel = true;
                }
            }
        }

        //Set an label for each node.
        function setNodeTemplate(obj) {
            obj.annotations = [{ style: { color: 'black' } }];
            obj.annotations[0].content = obj.Description;
            obj.style = { fill: obj.Color };
            if (obj.Id === 1) {
                //Restrict Delete Constraints for root node.
                obj.constraints = ej.diagrams.NodeConstraints.Default & ~ej.diagrams.NodeConstraints.Delete;
            }
        }
        @*custom code start*@
        //Opens a dialog with textbox and dropdown control based on toolbar clicked items.
        function toolbarClick(args) {
            diagram = document.getElementById('diagram').ej2_instances[0];
            var selectedItem;
            if (diagram.selectedItems.nodes.length > 0) {
                selectedItem = diagram.selectedItems.nodes[0];
            }
            if (diagram.selectedItems.connectors.length > 0) {
                selectedItem = diagram.selectedItems.connectors[0];
            }
            if (selectedItem) {
                switch (args.item.tooltipText) {
                    case 'Add':
                        openDialog("Add", "", "", true);
                        break;
                    case 'Edit':
                        if (selectedItem instanceof ej.diagrams.Connector) {
                            var sourceNode = diagram.getObject(selectedItem.sourceID);
                            var targetNode = diagram.getObject(selectedItem.targetID);
                            openDialog("Edit", sourceNode.Description, targetNode.Description, false);
                        }
                        else {
                            openDialog("Edit", selectedItem.Description, selectedItem.Color, true);
                        }
                        break;
                    case 'Delete':
                        diagram.remove(selectedItem);
                        diagram.doLayout();
                        diagram.removeData();
                        var element = { Name: selectedItem.id, Label: selectedItem.Description };
                        var index = nodeData.indexOf(element);
                        nodeData.splice(index, 1);
                }
            }
        }

        //Show or Hide the Textbox and Dropdown in dialog control
        function hideClassElement(className, display) {
            var i;
            var showDropdown = document.querySelectorAll(className);
            for (i = 0; i < showDropdown.length; i++) {
                showDropdown[i].style.display = display;
            }
        }

        
        function openDialog(title, description, color, isNode) {
            dialog = document.getElementById("editDialog").ej2_instances[0];
            dialog.header = title;
            if (isNode) {
                hideClassElement('.showDropdown', 'none');
                hideClassElement('.showLabel', 'block');
                document.getElementById("Description").value = description;
                document.getElementById("Color").value = color;
            }
            else {
                hideClassElement('.showDropdown', 'block');
                hideClassElement('.showLabel', 'none');
                document.getElementById("SourceId").value = description;
                document.getElementById("TargetId").value = color;
            }
            dialog.show();
        }
        @*custom code end*@
        //Returns an node text collection in diagram.
        function getDataSource() {
            diagram = document.getElementById('diagram').ej2_instances[0];
            var i;
            nodeData = [];
            for (i = 0; i < diagram.nodes.length; i++) {
                var node = diagram.nodes[i];
                var element = { Name: node.id, Label: node.Description };
                nodeData.push(element);
            }
            return nodeData;
        }
    </script>
}
@section ActionDescription{
    <p>
        This sample demonstrates generating a diagram by reading data from the database, and updating it with newly inserted/updated/deleted nodes and connectors through web services.
    </p>
}
@section Meta{
    <meta name="description" content="This sample demonstrates generating a diagram by reading data from the database, and updating it with newly inserted/updated/deleted nodes and connectors." />
}

@section Description{
 <p>
    This example shows how the user reads the data source and performs add, edit, delete of data in the data source
    at runtime. The <code>crudAction</code> property of the <code>dataSourceSettings</code> and <code>crudAction</code> property of the
    <code>connectionDataSource</code> allow you to define the server-side method name for <code>create</code>, <code>read</code>, <code>update</code>, and
    <code>delete</code> operations.
</p>
<p>
    The <code>insertData</code> method is used to send the newly added/inserted data from client to server side. Likewise,
    <code>updateData</code> and <code>removeData</code> are used to send the updated and deleted diagram elements to the server.
</p>
<br>
}