Value Chain Create Row

Demonstrates creating a row from JSON.

by Erik Bartlow

HTML

<script src="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic%27"></script>
<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">
<h3 style="width: 100%;">Grouped Event Elements</h3>

<div class="vc-flex vc-element-group">
    <div Id="element1" class="vc-flex vc-flex-right vc-element vc-element-event vc-color-base-border">
        <div class="vc-item-span-clear"></div>
        <div class="vc-element-title">Item Title 1</div>
        <div class="vc-flex-vertical vc-center vc-element-options">
            <div class="vc-icons-18 vc-icon-options-18"></div>
        </div>
        <div class="vc-item-span-clear"></div>
    </div>
    <div Id="element2" class="vc-flex vc-flex-right vc-element vc-element-event vc-color-base-border">
        <div class="vc-item-span-clear"></div>
        <div class="vc-element-title">Item Title 2</div>
        <div class="vc-flex-vertical vc-center vc-element-options">
            <div class="vc-icons-18 vc-icon-options-18"></div>
        </div>
        <div class="vc-item-span-clear"></div>
    </div>
    <div Id="element3" class="vc-flex vc-flex-right vc-element vc-element-event vc-color-base-border">
        <div class="vc-item-span-clear"></div>
        <div class="vc-element-title">Item Title 3</div>
        <div class="vc-flex-vertical vc-center vc-element-options">
            <div class="vc-icons-18 vc-icon-options-18"></div>
        </div>
        <div class="vc-item-span-clear"></div>
    </div>
</div>

JavaScript

$(function () {
    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" } }]');


    $(elements).sort(function (a, b) {
        return parseInt(a.Siblings.before) < parseInt(b.Siblings.before);
    });
    var group = $(".vc-element-group").find(".vc-element");
    alert(group.find(".vc-element")[0]);

    $.each(elements, function (i, x) {
        $(group.find('#element' + x.Id).
        $.each(group, function () {
            if (parseInt($(this).attr("Id")) == parseInt(x.Id)) {

            }
            alert($(this).attr("Id"));
        });

        });

    });