jQWidgets Forums

jQuery UI Widgets Forums Grid Trouble using filterrow on a key/value pair drop down column

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 11 years, 10 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • DaveB
    Participant

    I am having some trouble getting the filterrow to work properly with Key/Value dropdown grid columns. I’m close, but it just isn’t working. The filterrow dropdown will populate, but when I check off any of the items it ends up displaying no rows unless Select All was checked. Any thoughts what I am missing in the code example below?

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title id='Description'>In this sample is illustrated how to create a Grid with column which displays values from foreign data source. The DropDownList editor associated to the column is populated from the foreign data source.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.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>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = getDemoTheme();
    var countries = [
    { value: "AF", label: "Afghanistan" },
    { value: "AL", label: "Albania" },
    { value: "DZ", label: "Algeria" },
    { value: "AR", label: "Argentina" },
    { value: "AM", label: "Armenia" },
    { value: "AU", label: "Australia" },
    { value: "AT", label: "Austria" },
    { value: "AZ", label: "Azerbaijan" },
    { value: "BS", label: "Bahamas" },
    { value: "BH", label: "Bahrain" },
    { value: "BD", label: "Bangladesh" },
    { value: "BB", label: "Barbados" },
    { value: "BY", label: "Belarus" },
    { value: "BE", label: "Belgium" },
    { value: "BZ", label: "Belize" },
    { value: "BJ", label: "Benin" },
    { value: "BM", label: "Bermuda" },
    { value: "BR", label: "Brazil" },
    { value: "BN", label: "Brunei" },
    { value: "BG", label: "Bulgaria" },
    { value: "CM", label: "Cameroon" },
    { value: "CA", label: "Canada" },
    { value: "CL", label: "Chile" },
    { value: "CN", label: "China" },
    { value: "CO", label: "Columbia" },
    { value: "CR", label: "Costa Rica" },
    { value: "HR", label: "Croatia (Hrvatska)" },
    { value: "CU", label: "Cuba" },
    { value: "CY", label: "Cyprus" },
    { value: "CZ", label: "Czech Republic" },
    { value: "DK", label: "Denmark" },
    { value: "TP", label: "East Timor" },
    { value: "EC", label: "Ecuador" },
    { value: "EG", label: "Egypt" },
    { value: "ER", label: "Eritrea" },
    { value: "EE", label: "Estonia" },
    { value: "ET", label: "Ethiopia" },
    { value: "FI", label: "Finland" },
    { value: "FR", label: "France" },
    { value: "DE", label: "Germany" },
    { value: "GR", label: "Greece" },
    { value: "HK", label: "Hong Kong" },
    { value: "HU", label: "Hungary" },
    { value: "IS", label: "Iceland" },
    { value: "IN", label: "India" },
    { value: "ID", label: "Indonesia" },
    { value: "IR", label: "Iran" },
    { value: "IQ", label: "Iraq" },
    { value: "IE", label: "Ireland" },
    { value: "IL", label: "Israel" },
    { value: "IT", label: "Italy" },
    { value: "JM", label: "Jamaica" },
    { value: "JP", label: "Japan" },
    { value: "MX", label: "Mexico" },
    { value: "MC", label: "Monaco" },
    { value: "MA", label: "Morocco" },
    { value: "NL", label: "Netherlands" },
    { value: "NZ", label: "New Zealand" },
    { value: "NE", label: "Niger" },
    { value: "NG", label: "Nigeria" },
    { value: "KP", label: "North Korea" },
    { value: "NO", label: "Norway" },
    { value: "PA", label: "Panama" },
    { value: "PE", label: "Peru" },
    { value: "PH", label: "Philippines" },
    { value: "PL", label: "Poland" },
    { value: "PT", label: "Portugal" },
    { value: "RO", label: "Romania" },
    { value: "RU", label: "Russia" },
    { value: "SA", label: "Saudi Arabia" },
    { value: "SK", label: "Slovak Republic" },
    { value: "SI", label: "Slovenia" },
    { value: "ZA", label: "South Africa" },
    { value: "KR", label: "South Korea" },
    { value: "ES", label: "Spain" },
    { value: "SE", label: "Sweden" },
    { value: "CH", label: "Switzerland" },
    { value: "TN", label: "Tunisia" },
    { value: "TR", label: "Turkey" },
    { value: "UA", label: "Ukraine" },
    { value: "AE", label: "United Arab Emirates" },
    { value: "UK", label: "United Kingdom" },
    { value: "US", label: "United States" }
    ];
    var countriesSource =
    {
    datatype: "array",
    datafields: [
    { name: 'label', type: 'string' },
    { name: 'value', type: 'string' }
    ],
    localdata: countries
    };
    var countriesAdapter = new $.jqx.dataAdapter(countriesSource, {
    autoBind: true
    });
    // prepare the data
    var gridSource =
    {
    datatype: "array",
    localdata:
    [
    { countryCode: "UK" },
    { countryCode: "US" },
    { countryCode: "DE" },
    { countryCode: "FR" },
    { countryCode: "IN" },
    { countryCode: "HK" }
    ],
    datafields: [
    // name - determines the field's name.
    // value - the field's value in the data source.
    // values - specifies the field's values.
    // values.source - specifies the foreign source. The expected value is an array.
    // values.value - specifies the field's value in the foreign source.
    // values.name - specifies the field's name in the foreign source.
    // When the adapter is loaded, each record will have a field called "Country". The "Country" for each record comes from the countriesAdapter where the record's "countryCode" from gridAdapter matches to the "value" from countriesAdapter.
    { name: 'Country', value: 'countryCode', values: { source: countriesAdapter.records, value: 'value', name: 'label' } },
    { name: 'countryCode', type: 'string'}
    ],
    };
    var gridAdapter = new $.jqx.dataAdapter(gridSource);
    $("#jqxgrid").jqxGrid(
    {
    width: 400,
    source: gridAdapter,
    theme: theme,
    selectionmode: 'singlecell',
    autoheight: true,
    filterable: true,
    showfilterrow: true,
    editable: true,
    columns: [
    {
    text: 'Country', datafield: 'countryCode', displayfield: 'Country', columntype: 'dropdownlist', filtertype: 'checkedlist',
    createeditor: function (row, value, editor) {
    editor.jqxDropDownList({ source: countriesAdapter, displayMember: 'label', valueMember: 'value' });
    }
    },
    ]
    });
    $("#jqxgrid").on('cellselect', function (event) {
    var column = $("#jqxgrid").jqxGrid('getcolumn', event.args.datafield);
    var value = $("#jqxgrid").jqxGrid('getcellvalue', event.args.rowindex, column.datafield);
    var displayValue = $("#jqxgrid").jqxGrid('getcellvalue', event.args.rowindex, column.displayfield);
    $("#eventLog").html("<div>Selected Cell<br/>Row: " + event.args.rowindex + ", Column: " + column.text + ", Value: " + value + ", Label: " + displayValue + "</div>");
    });
    $("#jqxgrid").on('cellendedit', function (event) {
    var column = $("#jqxgrid").jqxGrid('getcolumn', event.args.datafield);
    if (column.displayfield != column.datafield) {
    $("#eventLog").html("<div>Cell Edited:<br/>Index: " + event.args.rowindex + ", Column: " + column.text + "<br/>Value: " + event.args.value.value + ", Label: " + event.args.value.label
    + "<br/>Old Value: " + event.args.oldvalue.value + ", Old Label: " + event.args.oldvalue.label + "</div>"
    );
    }
    else {
    $("#eventLog").html("<div>Cell Edited:<br/>Row: " + event.args.rowindex + ", Column: " + column.text + "<br/>Value: " + event.args.value
    + "<br/>Old Value: " + event.args.oldvalue + "</div>"
    );
    }
    });
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxWidget'>
    <div id="jqxgrid">
    </div>
    <div style="font-size: 13px; "margin-top: 20px; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;" id="eventLog"></div>
    </div>
    </body>
    </html>

    Peter Stoev
    Keymaster

    Hi DaveB,

    Please, download the latest version. The posted sample works fine on my side with it so I suppose that you use something else.

    Best Regards,
    Peter Stoev

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

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

You must be logged in to reply to this topic.