jQWidgets Forums

Tagged: custom, data, getRecordsHierarchy, jqxMenu, json, Menu

This topic contains 5 replies, has 3 voices, and was last updated by mihaisinger 10 years, 11 months ago.

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

Author

How to access extra data in variable from dataAdapter.getRecordsHierarchy Posts

October 18, 2013 at 12:09 am How to access extra data in variable from dataAdapter.getRecordsHierarchy #30856

Hop

Participant

I was successful creating a jqxMenu using source data from a database, but I can’t figure out how to pass extra data that ends up into my variable I create using dataAdapter.getRecordsHierarchy. I included the extra data in my ajax php file, and even included the extra field in the declaration and the menu widget works fine. But while using the example that shows the events, I cannot figure out how to pull that extra data from the records variable I assigned to dataAdapter.getRecordsHierarchy. All I seem to be able to get is the ID and TEXT.

Any advice and help would be greatly appreciated! I will post code again if you wish. I didn’t because I already posted the whole thing in another thread here.

EDIT: Found a linking solution that works, from here but from a google search. http://www.jqwidgets.com/community/reply/reply-to-json-via-php-request/. I still want to know how to access the extra returned data though.

October 18, 2013 at 5:59 am How to access extra data in variable from dataAdapter.getRecordsHierarchy #30983

Dimitar

Participant

Hello Hop,

Here is how to access custom data from a JSON source in jqxMenu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = "";
                var data = [
                {
                    "id": "12",
                    "text": "Frappuccino",
                    "parentid": "-1",
                    "subMenuWidth": '250px',
                    "custom": "c1"
                },
                {
                    "text": "Chocolate Beverage",
                    "id": "1",
                    "parentid": "-1",
                    "subMenuWidth": '250px',
                    "custom": "c2"
                },
                {
                    "id": "2",
                    "parentid": "1",
                    "text": "Hot Chocolate",
                    "custom": "c3"
                },
                {
                    "id": "3",
                    "parentid": "1",
                    "text": "Peppermint Hot Chocolate",
                    "custom": "c4"
                },
                {
                    "id": "4",
                    "parentid": "1",
                    "text": "Salted Caramel Hot Chocolate",
                    "custom": "c5"
                },
                {
                    "id": "5",
                    "parentid": "1",
                    "text": "White Hot Chocolate",
                    "custom": "c6"
                },
                {
                    "id": "6",
                    "text": "Espresso Beverage",
                    "parentid": "5",
                    "subMenuWidth": '200px',
                    "custom": "c7"
                }]
                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'id' },
                        { name: 'parentid' },
                        { name: 'text' },
                        { name: 'subMenuWidth' },
                        { name: 'custom' }
                    ],
                    id: 'id',
                    localdata: data
                };
                // create data adapter.
                var dataAdapter = new $.jqx.dataAdapter(source);
                // perform Data Binding.
                dataAdapter.dataBind();
                // get the menu 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'}], "custom");
                $('#jqxWidget').jqxMenu({ source: records, height: 30, theme: theme, width: '400px' });
                $("#jqxWidget").on('itemclick', function (event) {
                    var id = event.args.id;
                    var custom;
                    var recursion = function (object) {
                        for (var i = 0; i < object.length; i++) {
                            if (id == object[i].id) {
                                custom = object[i].custom;
                                break;
                            } else if (object[i].items) {
                                recursion(object[i].items);
                            };
                        };
                    };
                    recursion(records);
                    $("#eventLog").text("Id: " + event.args.id + ", Text: " + $(event.args).text() + ", Custom: " + custom);
                });
            });
        </script>
        <div id='jqxWidget'>
        </div>
        <div style="margin-top: 50px; font-size: 13px; font-family: Verdana;" id="eventLog">
        </div>
    </div>
</body>
</html>

The recursion is needed for n-level menus. If you only have top-level items, here is an easier way:

$("#jqxWidget").on('itemclick', function (event) {
    var id = event.args.id;
    var custom;
    for (var i = 0; i < records.length; i++) {
        if (id == records[i].id) {
            custom = records[i].custom;
            break;
        };
    };
    $("#eventLog").text("Id: " + event.args.id + ", Text: " + $(event.args).text() + ", Custom: " + custom);
});

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

October 18, 2013 at 11:18 pm How to access extra data in variable from dataAdapter.getRecordsHierarchy #31032

Hop

Participant

It’s brilliant Dimitar, and beautifully written. I don’t know why I didn’t think of that. Rusty at my programming roots I’m afraid. I totally forgot about recursion to iterate through a tree structure.

This solution is perfect, and perfectly understandable, thank you. Oh, it also works!!! THANK YOU!!

October 19, 2013 at 12:53 am How to access extra data in variable from dataAdapter.getRecordsHierarchy #31033

Hop

Participant

Hey Dimitar, I have an off topic question that came up trying to trouble shoot the issue you fixed for me. I placed alerts in my code so I could see variable data, or placed in code at intervals to see what worked and didn’t at whatever line, and none of the alerts fired at all.

The code you helped me with is in an included PHP file on my server. Is that the problem? Weird because the javascripting works ok, otherwise the menu widget wouldn’t work. So if the javascripting works, why not fire the alerts?

By alerts of course, as an example, I mean alert(“I made it to line 10”); in javascript.

I haven’t found a good IDE yet. I thought I had it with Eclipse, and a few other IDE options. None of them worked for me, and I am sure it is probably how I have them set up. With Eclipse, I got it to open/run my project in a tab on my Chrome browser, but the results were buggy compared to opening a tab to my server with the project I am writing. For example… same code, same structure… opened/executed in eclipse, I had my page rendered as expected with the CSS, but the calendar widget had garbage for the date, and nothing else worked. Same code, addressed from my LAMP server in the same browser worked just fine.

Finally, I did discover that my customized SciTE editor actually offers PHP intellisense! I never knew that! But I do not have that with javascripting…. yet.

Currently, I write my code, save it (in SciTE), and then refresh my tab in my browser to see the results. My clues are when a widget disappears, I know my code has an error. It is very med-evil and very VERY non-productive. Without feedback, it’s hard to know what has gone wrong.

What do you guys use? What do javascripting authors use? I love the language and jQWidgets and want to be productive with my code authoring. Debugging has always been good to me working with Visual Studio working with C, C++, C#, VB, VBS, VBA. My dearest dream is to be able to do that with PHP and JS.

Anything you offer as far as advice would be so greatly appreciated!
And again, thank you for helping me over a major stumbling block. I appreciate your time!

May 29, 2014 at 7:08 pm How to access extra data in variable from dataAdapter.getRecordsHierarchy #55097

mihaisinger

Participant

Hello Dimitar and Hop
I’m having the same problem and was trying your solution described here… I even copied and pasted your code in a new web page, but it just won’t work when I add the custom field to the following line
var records = dataAdapter.getRecordsHierarchy(‘id’, ‘parentid’, ‘items’, [{ name: ‘text’, map: ‘label’}], “custom”);
the whole menu won’t render at all. The only way to make it render again is to remove the “custom” and let the function take only its four regular arguments, as in
var records = dataAdapter.getRecordsHierarchy(‘id’, ‘parentid’, ‘items’, [{ name: ‘text’, map: ‘label’}]);
Can you suggest anything to fix that? (btw, I’m using jqWidgets 3.1.0).
Thank you.

Regards
Mihai

May 29, 2014 at 7:23 pm How to access extra data in variable from dataAdapter.getRecordsHierarchy #55098

mihaisinger

Participant

OK, I just figured it out.
the “custom” in the getRecordsHierarchy is indeed incorrect and will cause the menu to fail to render. However, the whole concept just works without it. The custom value can be accessed successfully while using the default getRecordsHierarchy call.

Regards
Mihai

Author

Posts

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

You must be logged in to reply to this topic.