Problems with DataAdaptor as Menu Source

[Gopre400Participant]

Hi, I’ve created a SQL table to store Menu Items, the table has three fields (ProjectMenuID, MenuText, and ParentMenuID). I retrieve data from table using a Webservice like this…

var contractorsource =
                    {
                        datatype: "xml",
                        contentType: "application/json; charset=utf-8",
                        datafields: [
                        	    { name: 'ProjectMenuID' },
                                { name: 'MenuText' },
                                { name: 'ParentMenuID' }
                            ],
                        async: false,
                        record: 'Table',
                        id: 'ProjectMenuID',
                        url: "CNSTWebService.asmx/GetCNSTProjectMenu"
                    };

Then I use a dataAdaptor to bind the data to a Menu

`var dataAdapter = new $.jqx.dataAdapter(contractorsource);
dataAdapter.dataBind();
var records = dataAdapter.getRecordsHierarchy(‘ProjectMenuID’, ‘ParentMenuID’, ‘items’, [{ name: ‘MenuText’, map: ‘label’}]);
$(‘#jqxWidget’).jqxMenu({ source: records, mode: ‘horizontal’, width: ‘300px’ });
$(“#jqxWidget”).on(‘itemclick’, function (event) {
alert(event.args.id);
});’

The problem I am having is the dataAdaptor doesn’t appear to be binding the data because the menu doesn’t display. However, I added a combobox using the same dataAdaptor as source then the dataAdaptor binds the data, creates the combo, and creates the menu.
What am I doing wrong?

[DimitarParticipant]

Hello Gopre400,

You also need to map the fields “ProjectMenuID” and “ParentMenuID” to id and parentid respectively as you have already done for “MenuText” and label.

Best Regards,
Dimitar

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

[Gopre400Participant]

Thank you Dimitar?
Like this?
var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{name: 'ProjectMenuID', map: 'id'},{name: 'ParentMenuID', map: 'parentid'},{ name: 'MenuText', map: 'label'}]);

or this?

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

Neither way worked.

[Gopre400Participant]

It appears to be a problem with the dataAdaptor and/or getting data from Webservice…I took out the Menu to just focus on the dataAdaptor and an error is being thrown…”Internal Server Error.” I’m not sure why…is there a problem with the source (it work as a source of combobox)?

 var contractorsource =
                    {
                        datatype: "xml",
                        contentType: "application/json; charset=utf-8",
                        datafields: [
                        	    { name: 'ProjectMenuID' },
                                { name: 'MenuText' },
                                { name: 'ParentMenuID' }
                            ],
                        async: false,
                        record: 'Table',
                        id: 'ProjectMenuID',
                        url: "CNSTWebService.asmx/GetCNSTProjectMenu"
                    };

                var dataAdapter = new $.jqx.dataAdapter(contractorsource, {
                    loadComplete: function () {
                        // get data records.
                        var records = dataAdapter.records;
                        // get the length of the records array.
                        var length = records.length;
                        alert(length);
                        // loop through the records and display them in a table.
                        var html = "<table border='1'><tr><th align='left'>ProjectMenuID</th><th align='left'>MenuText</th>";
                        for (var i = 0; i < 10; i++) {
                            var record = records[i];
                            html += "<tr>";
                            html += "<td>" + record.ParentMenuID + "</td>";
                            html += "<td>" + record.MenuText + "</td>";
                            html += "</tr>";
                        }
                        html += "</table>";
                        $("#table").html(html);
                    },
                    loadError: function (jqXHR, status, error) {
                        alert(error); 
                    },
                    beforeLoadComplete: function (records) {
                    }
                });
                
                dataAdapter.dataBind();

[Gopre400Participant]

I got it…

var source =
                    {
                        datatype: "xml",
                        datafields: [
                                { name: 'ProjectMenuID'},
                                { name: 'MenuText' },
                                { name: 'ParentMenuID' }, 
                            ],
                        async: false,	
                        record: 'Table',
                        url: "CNSTWebService.asmx/GetCNSTProjectMenu"
                    };

                    var dataAdapter = new $.jqx.dataAdapter(source,	
                        {
                            contentType: 'application/json; charset=utf-8'
                        }
                    );
                    dataAdapter.dataBind();
                    var records = dataAdapter.getRecordsHierarchy('ProjectMenuID', 'ParentMenuID', 'items', [{ name: 'ProjectMenuID', map: 'id'},{ name: 'MenuText', map: 'label'}]);
                    $('#jqxWidget').jqxMenu({ source: records, mode: 'horizontal', width: '300px' });

                    $("#jqxWidget").on('itemclick', function (event) {
                        alert(event.args.id);
                    });

                });

[Author]

Posts