jQWidgets Forums

jQuery UI Widgets › Forums › Lists › ComboBox › ComboBox with Database Paging

Tagged: 

This topic contains 4 replies, has 2 voices, and was last updated by  Peter Stoev 12 years, 11 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    ComboBox with Database Paging Posts
  • June 25, 2012 at 5:31 pm ComboBox with Database Paging #5315

    shimmoril
    Participant

    I was hoping someone could provide an example of how to create a jqxComboBox that works with database paging. I’ve looked through the documentation and can’t find anything. I’ve recently set up a jqxGrid that uses database paging, and I’m hoping to reuse some of the code.

    Thank you.

    Edit: I started setting up the ComboBox based on the XML example, and I’m getting the following error in Firebug:
    $.jqx is undefined
    var dataAdapter = new $.jqx.dataAdapter(source, {async: false});

    My code:

    var theme = '';
    var url = 'url/to/function';

    //get data
    var source = {
    datatype: "xml",
    datafields: [
    {name: 'Name', map: '\\Name'},
    {name: 'ID', map: '\\ID'}
    ],
    root: "Users",
    record: "User",
    id: '\\ID',
    url: url
    };

    var dataAdapter = new $.jqx.dataAdapter(source, {async: false});

    $("##jqxComboBox").jqxComboBox ({
    width: 200,
    height: 25,
    source: dataAdapter,
    selectedIndex: 0,
    displayMember: "Name",
    valueMember: "ID"
    });

    $("##jqxComboBox").bind('select'), function (event) {
    if (event.args) {
    var item = event.args.item;
    if (item) {
    var valueelement = $("

    ");
    valueelement.html("Value: " + item.value);
    var labelelement = $("

    ");
    labelelement.html("Label: " + item.label);
    $("##selectionLog").children().remove();
    $("##selectionLog").append(labelelement);
    $("##selectionLog").append(valueelement);
    }
    }
    }

    As far as I can tell, it’s exactly the same as the example, and I’ve verified that all the jqx.js files are being loaded.

    June 25, 2012 at 8:30 pm ComboBox with Database Paging #5317

    Peter Stoev
    Keymaster

    Hi shimmoril,

    If you are getting $.jqx is undefined, then there is a file which is not loaded or there’s a syntax error in the code.

    Here’s a sample code binding the jqxComboBox to a XML file. 

    <!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.7.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/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
    </head>
    <body>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
                    var theme = getTheme();
                    var url = "../sampledata/customers.xml";
                    // prepare the data
                    var source =
                    {
                        datatype: "xml",
                        datafields: [
                            { name: 'CompanyName', map: 'm\\:properties>d\\:CompanyName' },
                            { name: 'ContactName', map: 'm\\:properties>d\\:ContactName' },
                        ],
                        root: "entry",
                        record: "content",
                        id: 'm\\:properties>d\\:CustomerID',
                        url: url
                    };
                    var dataAdapter = new $.jqx.dataAdapter(source, { async: false });
                    // Create a jqxComboBox
                    $("#jqxWidget").jqxComboBox({selectedIndex: 0, source: dataAdapter, displayMember: "ContactName", valueMember: "CompanyName", width: 200, height: 25, theme: theme });
                });
            </script>
            <div id='jqxWidget'>
            </div>
            <div style="font-size: 13px; font-family: Verdana;" id="selectionlog"></div>
        </div>
    </body>
    </html>

    jqxComboBox does not support paging. It displays the data only as a dropdown list.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    June 25, 2012 at 9:29 pm ComboBox with Database Paging #5318

    shimmoril
    Participant

    Thanks Peter. I was able to get your example working on a fresh page, but when I move the code over to my existing page I continue to get the error. I’ll have to go through and comment stuff out to see what the issue is.

    Regarding the paging, do you have any suggestions for dealing w/ report filters that can have huge amounts of data? In our case the page is a user report. At the top of the page the person running the report can set various filters, including a dropdown containing all users (ie. to see data for only that particular user). As you can imagine, loading a large amount of data into the dropdown is really slowing down our systems.

    June 25, 2012 at 9:45 pm ComboBox with Database Paging #5319

    shimmoril
    Participant

    One other note – when I tried to bind your example to my data, the only thing in the combobox is the text ‘jqxItem’.

    June 27, 2012 at 3:28 am ComboBox with Database Paging #5359

    Peter Stoev
    Keymaster

    Hi shimmoril,

    – The ComboBox displays ‘jqxItem’, when the binding is not successful. If you would like, you can send us a small sample with a small piece of your data, so we can test your application scenario. You can send the sample to support@jqwidgets.com.
    – The ComboBox does not have paging capabilities built-in and I cannot provide you a workaround for that missing functionality.

    Best Regards,
    Peter Stoev

    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.