jQuery UI Widgets Forums Navigation Tree Icons in JSON Built Drag and Drop

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 8 years, 7 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Icons in JSON Built Drag and Drop #78210

    PropKitty
    Participant

    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;
                    }
                };
            }
        });
    });
    Icons in JSON Built Drag and Drop #78237

    Hristo
    Participant

    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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.