jQWidgets Forums

This topic contains 4 replies, has 2 voices, and was last updated by Hristo 9 years, 5 months ago.

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

Author

Get Additional Parameter Posts

November 11, 2015 at 2:46 pm Get Additional Parameter #78001

Participant

I have a bunch of different items in my JSON array that have a parameter “type”, like below:

"text": "Worksheet 1",
 "id": "6",
 "parentid": "2",
 "type": "worksheet"

I have it as a datafield in my source:

var source =
    {
        datatype: "json",
        datafields: [
            { name: 'id' },
            { name: 'parentid' },
            { name: 'text' },
            { name: 'type' }
        ],
        id: 'id',
        localdata: data
    };

However, I can’t do the follow:

dragStart: function (item) { console.log(item.type); }

Why doesn’t item.type let me pull the data from type? Even more confusing when item.parentId works to let me get the parentid!

November 11, 2015 at 3:17 pm Get Additional Parameter #78003

PropKitty

Participant

P.S. – I went to add this but the edit vanished so…

var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label' }]);

Also assuming this has something to do with it.

November 12, 2015 at 12:33 pm Get Additional Parameter #78037

Hristo

Participant

Hello PropKitty,

In this case dragStart: function (item) are only available item.label, item.value and item.id.
If you want to take a concrete different property could use dataAdapter.getrecords();
Please take a look example below:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Catch all records and each properties.</title>

    <link href="../../libs/jqwidgets-ver3.9.0/jqwidgets/styles/jqx.base.css" rel="stylesheet" />

    <script src="../../libs/jquery-1.11.3.js"></script>
    <script src="../../libs/jqwidgets-ver3.9.0/jqwidgets/jqx-all.js"></script>
</head>
<body>
    <script>
        $(document).ready(function () {
            var data = [
                {
                    "text": "DisWorksheet 1",
                    "id": "6",
                    "parentid": "2",
                    "type": "sheet"
                },
                {
                    "text": "Worksheet 2",
                    "id": "1",
                    "parentid": "2",
                    "type": "homework sheet"
                },
                {
                    "text": "Worksheet 12",
                    "id": "2",
                    "parentid": "5",
                    "type": "worksheet"
                },
                {
                    "text": "Worksheet 10",
                    "id": "3",
                    "parentid": "5",
                    "type": "paper"
                },
                {
                    "text": "Worksheet 11",
                    "id": "4",
                    "parentid": "5",
                    "type": "worksheet"
                },
                {
                    "text": "Worksheet 5",
                    "id": "5",
                    "parentid": "-1",
                    "type": "sheet"
                },
            ];

            var source = {
                datatype: "json",
                datafields: [
                    { name: 'id' },
                    { name: 'parentid' },
                    { name: 'text' },
                    { name: 'value', map: 'type' }
                ],
                id: 'id',
                localdata: data
            };

            var dataAdapter = new $.jqx.dataAdapter(source);
            dataAdapter.dataBind();
            var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label' }]);
            console.log(records);

            $('#tree').jqxTree({
                width: 400,
                height: 400,
                source: records
            });

            $("#tree").jqxTree({
                dragStart: function (item) {
                    var allRecords = dataAdapter.getrecords();

                    console.log(
                        'Label: ' + item.label +
                        ';\n - id: ' + item.id +
                        ';\n - type: ' + item.value);

                    var specialType = item.value; // 'document';
                    for (var rec in allRecords) {
                        // Take a concrete property
                        var currentType = allRecords[rec]['value'];
                        if (specialType === currentType) {
                            console.log('Has same type.');
                        } else {
                            console.log('Different type.');
                        }
                    }

                    // disable dragging of item with type 'sheet'.
                    if (specialType == 'sheet')
                        return false;

                    // enable dragging for the item.
                    return true;
                }
            });
        })
    </script>
    <div id="tree"></div>
</body>
</html>

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

November 12, 2015 at 1:12 pm Get Additional Parameter #78040

PropKitty

Participant

Hristo,

I think that’s definitely in the right direction! However, I’m not certain what we would do if we need more than just the one ‘extra’ thing. Is there no way for more than just the four items to be pulled in for use?

November 13, 2015 at 10:32 am Get Additional Parameter #78099

Hristo

Participant

Hi PropKitty,

Sorry if I confused you. Please take a look this code (updated):


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Catch all records and each properties.</title>

    <link href="../../libs/jqwidgets-ver3.9.0/jqwidgets/styles/jqx.base.css" rel="stylesheet" />

    <script src="../../libs/jquery-1.11.3.js"></script>
    <script src="../../libs/jqwidgets-ver3.9.0/jqwidgets/jqx-all.js"></script>
</head>
<body>
    <script>
        $(document).ready(function () {
            var data = [
                {
                    "text": "DisWorksheet 1",
                    "id": "6",
                    "parentid": "2",
                    "type": "sheet",
                    "custum": "additional"
                },
                {
                    "text": "Worksheet 2",
                    "id": "1",
                    "parentid": "2",
                    "type": "homework sheet",
                    "custum": "test - additional"
                },
                {
                    "text": "Worksheet 12",
                    "id": "2",
                    "parentid": "5",
                    "type": "worksheet",
                    "custum": "text"
                },
                {
                    "text": "Worksheet 10",
                    "id": "3",
                    "parentid": "5",
                    "type": "paper",
                    "custum": "additional text"
                },
                {
                    "text": "Worksheet 11",
                    "id": "4",
                    "parentid": "5",
                    "type": "worksheet",
                    "custum": "additional worksheet"
                },
                {
                    "text": "Worksheet 5",
                    "id": "5",
                    "parentid": "-1",
                    "type": "sheet",
                    "custum": "parent"
                },
            ];

            var source = {
                datatype: "json",
                datafields: [
                    { name: 'id' },
                    { name: 'parentid' },
                    { name: 'text' },
                    { name: 'value', map: 'type' },
                    { name: 'custum' }
                ],
                id: 'id',
                localdata: data
            };

            var dataAdapter = new $.jqx.dataAdapter(source);
            dataAdapter.dataBind();
            var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label' }]);
            console.log(records);

            $('#tree').jqxTree({
                width: 400,
                height: 400,
                source: records
            });

            $("#tree").jqxTree({
                dragStart: function (item) {
                    var allRecords = dataAdapter.getrecords();
                    //var skipItem = false;

                    for (var i = 0; i < allRecords.length; i++) {
                        if (allRecords[i].id === item.id) {
                            console.log(allRecords[i].custum)
                            //...
                            break;
                        }
                    }

                    //if (skipItem) {
                    //    // disable dragging for the item.
                    //    return false;
                    //} else {
                    //    // enable dragging for the item.
                    //    return true;
                    //}

                }
            });
        })
    </script>
    <div id="tree"></div>
</body>
</html>

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.