jQuery UI Widgets Forums Navigation Menu, Context Menu Problems with DataAdaptor as Menu Source

This topic contains 4 replies, has 2 voices, and was last updated by  Gopre400 9 years, 1 month ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Problems with DataAdaptor as Menu Source #65711

    Gopre400
    Participant

    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?

    Problems with DataAdaptor as Menu Source #65725

    Dimitar
    Participant

    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/

    Problems with DataAdaptor as Menu Source #65786

    Gopre400
    Participant

    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.

    Problems with DataAdaptor as Menu Source #65790

    Gopre400
    Participant

    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();
    Problems with DataAdaptor as Menu Source #65796

    Gopre400
    Participant

    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);
                        });
    
                    });
    
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.