jQuery UI Widgets Forums Grid jqxGrid filterow checkedlist + filterable issue

This topic contains 2 replies, has 2 voices, and was last updated by  adrenalinedj 8 years, 1 month ago.

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

  • adrenalinedj

    I tried to customize the example “Filter Row & Custom List Items” to be able to “search” a value in the dropdownlist.
    So i used the “createfilterwidget” to add “filterable: true” to the dropdownlist, but i’m facing an issue.

    In the exemple, I added “Cappuccino” in the list in order to have 2 similar values.
    So after clicking the button “Set Filter Items”, I open the dropdown filter, uncheck “Select All” and then type “Ca”.
    It returns 2 items “Caffe Espresso” and “Cappuccino”: everything is OK for now.
    But, I cannot select the first item and when I select the second : it “half-selects” the first.
    It’s like the first checbox remains in the behavior of the “Select All” checkbox.

    Thanks for the help.

    Here is the code to test:

    <!DOCTYPE html>
    <html lang="en">
        <title id='Description'>In this demo jqxGrid uses a virtualized paging which enables you to handle very large data sets without any impact on client side performance.</title>
        <link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
    	<script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js"></script> 
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.pager.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.filter.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.selection.js"></script> 
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {            
                // prepare the data
                var data = new Array();
                var firstNames =
                    "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
                var lastNames =
                    "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
                var productNames =
                    "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
                var priceValues =
                    "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
                // generate sample data.
                var generatedata = function (startindex, endindex) {
                    var data = {};
                    for (var i = startindex; i < endindex; i++) {
                        var row = {};
                        var productindex = Math.floor(Math.random() * productNames.length);
                        var price = parseFloat(priceValues[productindex]);
                        var quantity = 1 + Math.round(Math.random() * 10);
                        row["id"] = i;
                        row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                        row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                        row["productname"] = productNames[productindex];
                        row["price"] = price;
                        row["quantity"] = quantity;
                        row["total"] = price * quantity;
                        data[i] = row;
                    return data;
                var source =
                    datatype: "array",
                    localdata: {},
                    totalrecords: 1000000
                // load virtual data.
                var rendergridrows = function (params) {
                    var data = generatedata(params.startindex, params.endindex);
                    return data;
                var totalcolumnrenderer = function (row, column, cellvalue) {
                    var cellvalue = $.jqx.dataFormat.formatnumber(cellvalue, 'c2');
                    return '<span style="margin: 6px 3px; font-size: 12px; float: right; font-weight: bold;">' + cellvalue + '</span>';
                var dataAdapter = new $.jqx.dataAdapter(source);
                    width: 850,
                    filterable: true,
                    showfilterrow: true,
                    autoheight: true,
                    source: dataAdapter,                
                    virtualmode: true,
                    pageable: true,
                    rendergridrows: rendergridrows,
                    columns: [
                        { text: 'Id', datafield: 'id', width: 50 },
                        { text: 'First Name', datafield: 'firstname', width: 120 },
                        { text: 'Last Name', datafield: 'lastname', width: 120 },
                        { text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 180, createfilterwidget: function (column, columnElement, widget) { widget.jqxDropDownList({ filterable: true }); } },
                        { text: 'Quantity', datafield: 'quantity', width: 100, cellsalign: 'right' },
                        { text: 'Unit Price', datafield: 'price', width: 100, cellsalign: 'right', cellsformat: 'c2' },
                        { text: 'Total', datafield: 'total', cellsrenderer: totalcolumnrenderer, cellsalign: 'right' }
                $("#setFilterItems").click(function () {
                    $("#jqxgrid").jqxGrid('setcolumnproperty', 'productname', 'filteritems', ["Black Tea", "Green Tea", "Caffe Espresso", "Cappuccino"]);
    <body class='default'>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxgrid"></div>
        <button id="setFilterItems">Set Filter Items</button>
    • This topic was modified 8 years, 1 month ago by  adrenalinedj.

    Peter Stoev

    Hi adrenalinedj,

    The behavior you’re trying to implement is not supported and cannot be achieved with our Grid control. This filter widget has Select All option and it is not designed to work in a different way. We still don’t support custom filter row widgets which means that this cannot be achieved.

    Best Regards,
    Peter Stoev

    jQWidgets Team


    Hi Peter,

    Thanks for the answer.
    So, to acheive “having a filterable dropdown with checkbox” to filter a column, I have to create a custom filter panel for this column, right ?

    Thanks for the help.

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

You must be logged in to reply to this topic.