Value Chain Create Row

Demonstrates creating a row from JSON.

by Erik Bartlow

HTML

<link rel="stylesheet" href="http://thebartlows.com/scripts/iconsprite/vc-clear.css">
<link rel="stylesheet" href="http://thebartlows.com/scripts/iconsprite/vc-viewer.css">
<link rel="stylesheet" href="http://thebartlows.com/scripts/iconsprite/vc-theme-main.css">
<script src="//thebartlows.com/scripts/iconsprite/vc-viewer.js"></script>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic%27&amp;.css">
<h3 style="width: 100%;">Dynamically Created Row</h3>
<div id="content"></div>

JavaScript

$(function () {
    var rows = $.parseJSON('[{"Id":"1","Name":"Value Chain Relationship","Type":"time","Siblings": {"before":"0","after":"1"}},{"Id":"2","Name":"Business Process Area","Type":"area","Siblings": {"before":"1","after":"3"}},{"Id":"3","Name":"Social and Environmental Responsibility (SER)","Type":"event","Siblings": {"before":"2","after":"0"}}]');

    var elements = $.parseJSON('[{ "Id": "1", "Name": "Title 1", "Type": "area", "Parent": "0", "Siblings": { "before": "3", "after": "0" } }, { "Id": "2", "Name": "Title 2", "Type": "area", "Parent": "0", "Siblings": { "before": "0", "after": "3" } }, { "Id": "3", "Name": "Title 3", "Type": "area", "Parent": "0", "Siblings": { "before": "2", "after": "1" } }]');

var templates = {
        contextMenu: function () {
            var ctx = $( '<div />', {
                class: 'vc-element-menu',
                id: 'ctxMenu'
            } );
            var ctxMenuHtml = [
                '    <div class="vc-menu-header">Item Options</div>',
                '    <ul class="vc-menu-items">',
                '        <li class="vc-flex">',
                '            <div class="vc-icons-18 vc-icon-delete-18"></div><span>Delete</span>',
                '        </li>',
                '        <li class="vc-flex">',
                '            <div class="vc-icons-18 vc-icon-reoccurring-18"></div><span>Set as Reoccurring</span>',
                '        </li>',
                '        <li class="vc-flex vc-menu-item-sep">',
                '            <div class="vc-icons-18 vc-icon-blank-18"></div><span></span>',
                '        </li>',
                '        <li class="vc-flex">',
                '            <div class="vc-icons-18 vc-icon-start-group-18"></div><span>Start Item Group</span>',
                '        </li>',
                '        <li class="vc-flex">',
                '            <div class="vc-icons-18 vc-icon-end-group-18"></div><span>End Item Group</span>',
          ...