Icons in JSON Built Drag and Drop

[PropKittyParticipant]

Below is the code used to build my JSON-built drag and drop tree I’m using for my site. However, I also need icons. How can I have it build at start with? Everything I see in documentation seems to need to build it as the tree builds for the first time, but I’m not certain how you build the array to do that. I looked at the ‘default’ information, but that doesn’t seem to be working, either. So how do I build this JSON array so it can have icons? Please be aware that there is already a good deal of code already written based on how the array works now, so I’m hoping there’s a more simple solution.

I don’t care if I have to go into the tree script itself and re-write things – I see there’s a data parameter for icons ‘item-icon’ – help! Thanks much!

// creates and manipulates nav tree
$(document).ready(function () {
    // JSON Data Array
    var data = [
    // MAIN THREE BUCKETS
    {
        text: "Visits",
        id: "1",
        parentid: "-1",
        type: "visits",
        icon: "../images/icon-down.png"
    }, {
        text: "Worksheets",
        id: "2",
        parentid: "-1",
        type: "worksheets"
    }, {
        text: "Sections",
        id: "3",
        parentid: "-1",
        type: "sections"
    },

    // VISITS
    {
        text: "Visit 1",
        id: "4",
        parentid: "1",
        type: "visit"
    }, {
        text: "Visit 2",
        id: "5",
        parentid: "1",
        type: "visit"
    },

    // WORKSHEETS
    {
        text: "Worksheet 1",
        id: "6",
        parentid: "2",
        type: "worksheet"
    },
    {
        text: "Worksheet 2",
        id: "7",
        parentid: "2",
        type: "worksheet"
    },

    // SECTIONS
    {
        text: "Section 1",
        id: "8",
        parentid: "3",
        type: "section"
    }, {
        text: "Section 2",
        id: "9",
        parentid: "3",
        type: "section"
    }]
    // prepare the data
    var source =
    {
        datatype: "json",
        datafields: [
            { name: 'id' },
            { name: 'parentid' },
            { name: 'text' },
            { name: 'type' }
        ],
        id: 'id',
        localdata: data
    };

    // create data adapter.
    var dataAdapter = new $.jqx.dataAdapter(source);
    // perform Data Binding.
    dataAdapter.dataBind();
    // get the tree items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents
    // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter
    // specifies the mapping between the 'text' and 'label' fields.
    var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label' }]);
    $('#navTree').jqxTree({
        source: records, width: '100%',
        dragStart: function (item) {
            if (item.label == "Visits" || item.label == "Worksheets" || item.label == "Sections") {
                return false;
            }
            // Just lets console know what you're dragging around, can be deleted later.
            console.log("Drag Start: " + item.label);
        },
        dragEnd: function (item, dropItem, event, action) {
            // Get the type of item being dragged
            for (var i = 0; i < data.length; i++) {
                if (data[i].id === item.id) {
                    draggingType = data[i].type;
                    itemParentID = data[i].parentid;
                    break;
                }
            }
            // get the type and parent ID of where item being dragged is dropped
            for (var i = 0; i < data.length; i++) {
                if (data[i].id === dropItem.id) {
                    dropItemType = data[i].type;
                    break;
                }
            }

            // Making rules about what can and can't be dragged into one another
            // visits
            if (draggingType === "visit") {
                console.log("I'm a visit!");
                // letting a visit be dropped into main visits bucket
                if (dropItemType === "visits") {
                    return true;
                }
                    // dealing with sorting among visits
                else if (dropItemType === "visit") {
                    switch (action) {
                        case 'inside':
                            return false;
                            break;
                        default:
                            return true;
                            break;
                    }
                }
                // if trying to drop into anything else, no go
                else {
                    return false;
                }
            }
            // worksheets
            else if (draggingType === "worksheet") {
                console.log("I'm a worksheet!");
                // letting a worksheet be dropped into main worksheets bucket
                if (draggingType === dropItemType && dropItemType === "worksheets") {
                    return true;
                }
                // dealing with if it's anything but main worksheets bucket
                else if (draggingType === dropItemType && dropItemType !== "worksheets") {
                    switch (action) {
                        case 'inside':
                            return false;
                            break;
                        default:
                            return true;
                            break;
                    }
                }
                // if trying to drop into a section, no go
                else if (dropItemType === "sections" || dropItemType === "section") {
                    return false;
                }
                // letting it child to visits
                else {
                    return true;
                }
            }
            // sections
            else {
                console.log("I'm a section!");
                // letting a section be dropped into main sections bucket
                if (draggingType === dropItemType && dropItemType === "sections") {
                    return true;
                }
                // dealing with if it's anything but main sections bucket
                else if (draggingType === dropItemType && dropItemType !== "sections") {
                    switch (action) {
                        case 'inside':
                            return false;
                            break;
                        default:
                            return true;
                            break;
                    }
                }
                // letting it child to anything not a section
                else {
                    return true;
                }
            };
        }
    });
});

[HristoParticipant]

Hello PropKitty,

Could you provide us more detailed information about problem.
We test this code and looks work correct. One sample of that code from JSON array:

}, {
       text: "Visit 2",
       id: "5",
       parentid: "1",
       type: "visit",
       icon: "tick.png"
},

I would like to propose your attention on icon path.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts