Preselecting items in a checkedlist filter

[mmelnickParticipant]

I’m experimenting with the jqxgrid tool and I’m confronted with filtering the grid based on another control on the webpage.

The ‘parent’ control displays a list of files, each of which has an ID. Contained within each file is a number of curves. The user might want to see all curves for all files in the jqxgrid, or they might select a couple of files in the ‘parent’ control and then want to see the curves for just those files.

To support both workflows with the same jqxgrid, I’ve add the file’s ID to the jqxgrid and have set it up to be a checkedfilter. The trouble is that when the user selects a couple of files and then opens the jqxgrid, getting the grid to preselect those items in the checked list is proving difficult. I can get the grid to filter with the attached code, but the checked list panels are empty and interacting with them (evening just opening and closing them again, having changed nothing) causes the pre-filter to be removed and the entire list shows.

The code I’m using is this:

function showSubGrid() {
    $('#gridDiv').show();
    $('#jqxGrid').jqxGrid({ 
        source: getAdaptor()
    });
}
//
// Sets up the grid's source data and the grid itself. Is called when the page first instantiates and lays in a hidden div until opened
// The data for the grid isn't available to it until its parent div is made visible
//
function initializejqxGrid() {
    $('#jqxGrid').jqxGrid({
        width: 994,
        height: 324,
        source: getAdaptor(),
        columnsresize: true,
        showfilterrow: true,
        filterable: true,
        sorttogglestates: 1,
        theme: 'classic',
        sortable: true,
        altrows: true,
        editable: false,
        selectionmode: 'multiplerows',
        columns: [
            {text: 'TLM ID', dataField: 'UWI', hidden: true},
            {text: 'Source', dataField: 'SOURCE', hidden: true},
            { text: 'File ID', dataField: 'FILE_ID', filtertype: "checkedlist" },
            { text: 'Curve ID', dataField: 'CURVE_ID', filterable: false },
            { text: 'Curve Name', dataField: 'REPORTED_MNEMONIC', filtertype: "checkedlist", width: 100  },
            { text: 'Description', dataField: 'REPORTED_DESC', filterable: false },
            { text: 'Index Type', dataField: 'PRIMARY_INDEX_TYPE', filterable: false, width: 70 },
            { text: 'Max Value', dataField: 'MAX_VALUE', filtertype: "number", width: 80 },
            { text: 'Min Value', dataField: 'MIN_VALUE', filtertype: "number", width: 80 }
        ]
    });
}
//
// Checks the Files control and loads the IDs from it into filter objects for the adaptor object
//
var presetlogidfilter = function () {
    $('#jqxGrid').jqxGrid('clearfilters');
    var fileids = getselectedfileids(); // gets the file IDs from the other control. Strings like "000038010"
    if (fileids != null && fileids.length > 0) {
        var filtergroup = new $.jqx.filter();
        var filter_or_operator = 1;
        var filtercondition = 'equal';
        for (var i = 0; i < fileids.length; i++) {
            var filtervalue = fileids[i];
            var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition); // this pre-filters, but the check lists are empty and as soon as a user opens the selection drop down, the filter is lost
            filtergroup.addfilter(filter_or_operator, filter1);
        }
        // add the filters.                
        $('#jqxGrid').jqxGrid('addfilter', 'FILE_ID', filtergroup);
        // apply the filters.                
        $('#jqxGrid').jqxGrid('applyfilters');
    }
}
//
// I found that re-getting the adaptor when the parent control was available made it possible to refresh the grid and it's filtering checked lists
// 
function getAdaptor() {
    var source = {
        datatype: 'json',
        datafields: [
            { name: 'UWI' },
            { name: 'SOURCE' },
            { name: 'FILE_ID' },
            { name: 'CURVE_ID' },
            { name: 'REPORTED_MNEMONIC' },
            { name: 'REPORTED_DESC' },
            { name: 'PRIMARY_INDEX_TYPE' },
            { name: 'MAX_VALUE', type: 'number' },
            { name: 'MIN_VALUE', type: 'number' }
            ],
        id: 'CURVE_ID',
        root: 'data',
        url: 'RequestHandler.ashx',
        data: { req: 'getcurveslisting', all: '0' },
        type: 'POST'
    };
    return new $.jqx.dataAdapter(source,
        { autoBind: true,
          loadComplete: function () { presetlogidfilter(); } 
    });
}

The showSubGrid() method is called when the user asks to see the grid. The curves are loaded and known on the sever, so when RequestHandler.ashx is called, it already knows what curves to compile into json and send back.

Is my use of ‘stringfilter’ during the filtergroup.createfilter the correct choice? I perused through the minified jqxgrid.filter.js and found ‘custom’, ‘booleanfilter’, ‘datefilter’, ‘stringfilter’ and ‘numericfilter’. I tried booleanfilter, but that resulted in a null exception in the jqxgrid.filter.js. Probably because it’s not a boolean field.

If it’s ‘custom’ I’m not clear on how to feed the filtervalue back to the checkboxes in the checkedlist.

I couldn’t find any examples of pre-filtering a jqxgrid with known checkedlist values. If you have an example, that’d help a tonne!

[DimitarParticipant]

Hello mmelnick,

Here is an example, based on the demo Filter Row and using your presetlogidfilter function. The example works fine on our side.

<!DOCTYPE html>
<html lang="en">
<head>
    <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/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.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.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            var data = generatedata(500);
            var source =
            {
                localdata: data,
                datafields:
                [
                    { name: 'name', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'date', type: 'date' },
                    { name: 'quantity', type: 'number' }
                ],
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 685,
                source: dataAdapter,
                showfilterrow: true,
                filterable: true,
                theme: theme,
                selectionmode: 'multiplecellsextended',
                columns: [
                  { text: 'Name', columntype: 'textbox', filtertype: 'textbox', filtercondition: 'starts_with', datafield: 'name', width: 115 },
                  {
                      text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 220
                  },
                  { text: 'Available', datafield: 'available', columntype: 'checkbox', filtertype: 'bool', width: 67 },
                  { text: 'Ship Date', datafield: 'date', filtertype: 'date', width: 210, cellsalign: 'right', cellsformat: 'd' },
                  { text: 'Qty.', datafield: 'quantity', filtertype: 'number', cellsalign: 'right' }
                ]
            });
            $('#clearfilteringbutton').jqxButton({ height: 25, theme: theme });
            $('#clearfilteringbutton').click(function () {
                $("#jqxgrid").jqxGrid('clearfilters');
            });
            var presetlogidfilter = function () {
                $('#jqxgrid').jqxGrid('clearfilters');
                var fileids = ["Espresso con Panna", "Caramel Latte"]; // gets the file IDs from the other control. Strings like "000038010"
                if (fileids != null && fileids.length > 0) {
                    var filtergroup = new $.jqx.filter();
                    var filter_or_operator = 1;
                    var filtercondition = 'equal';
                    for (var i = 0; i < fileids.length; i++) {
                        var filtervalue = fileids[i];
                        var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition); // this pre-filters, but the check lists are empty and as soon as a user opens the selection drop down, the filter is lost
                        filtergroup.addfilter(filter_or_operator, filter1);
                    }
                    // add the filters.                
                    $('#jqxgrid').jqxGrid('addfilter', 'productname', filtergroup);
                    // apply the filters.                
                    $('#jqxgrid').jqxGrid('applyfilters');
                };
            };
            $("#presetlogidfilterButton").click(function () {
                presetlogidfilter();
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
    <input style="margin-top: 10px;" value="Remove Filter" id="clearfilteringbutton"
        type="button" />
    <button id="presetlogidfilterButton">
        Filter Product column</button>
</body>
</html>

On a side note, please make sure you use the latest version of jQWidgets (2.8).

Best Regards,
Dimitar

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

[mmelnickParticipant]

Hi Dimitar,

Thanks for the speedy reply. It seems I must have something wrong with my implementation then. I’ll have to go through it more carefully to see if I can find my mistake. I was hoping I was just using the wrong type.

I did notice an issue with the demo (when running against v2.7, so this might be fixed in v2.8) that will have an impact on the work flow once I get the pre-filtering working. And that is, a pre-filtered column doesn’t stick when the user manually applies a second filter. In your example, try these steps and you’ll see what I mean

1. Click on “Filter Product column” – the two pre-decided products are all that shows and the column is shaded to indicate it’s filtered
2. Enter the name Martin in the name filter – the product column ceases to be shaded and the product filtering is removed. The Name column is shaded and only Martins show in that column.

Now try it manually.

1. Remove Filter – all columns return to white
2. In the “Product Name” checked list filter, manually untick “All” and then tick two products from the checked list – column is greyed and filtered correctly
3. Now enter Martin in the name filter – both name and product remain greyed and filtered correctly. This is what I would assume the behaviour would be in the first workflow, so it seems that something isn’t quite the same when pre-filtering

I’ll try updating jqxgrid to 2.8 and trying the demo again.

Thanks again for your help!

[mmelnickParticipant]

Hi Dimitar,

I figured out what was causing the filter not to work in my implementation. As mentioned in the comments in the sample code up top, the File IDs had the format of 00038010. It appears that javascript engine was interpreting that as a number when I added a stringfilter to it, it would de whacky things. In my code sample up top, I changed the data fields to this:

datafields: [            { name: 'UWI' },            { name: 'SOURCE' },            { name: 'FILE_ID', type: 'string' },            { name: 'CURVE_ID' },            { name: 'REPORTED_MNEMONIC' },            { name: 'REPORTED_DESC' },            { name: 'PRIMARY_INDEX_TYPE' },            { name: 'MAX_VALUE', type: 'number' },            { name: 'MIN_VALUE', type: 'number' }            ],

The change was to add type: ‘string’ to the FILE_ID field and bam, it filters!

Also, I tried out the demo above with jqxgrid v2.8 and that behaviour of losing the programmatically applied filter when a manual filter is added doesn’t show up.

Thanks again for your help!!

[nikitasoParticipant]

Hi Dimitar,

Here’s slightly modified code, I added virtualmode and made it pageable.

Now issue is when you add custom filter, it “check” two fields – only one.

<!DOCTYPE html>
<html lang="en">
<head>
        <link rel="stylesheet" href="/scripts/jqwidgets-2-9-3/styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="/scripts/jqwidgets-2-9-3/styles/jqx.axeomblue.css" type="text/css" />
        <script src="/scripts/jquery-1.10.1.min.js" type="text/javascript"></script>
        <script src="/scripts/jquery-ui.js" type="text/javascript"></script>
        <script type="text/javascript" src="/scripts/jqwidgets-2-9-3/jqx-all.js"></script>
    <script src="gettheme.js" type="text/javascript"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            var data = generatedata(500);
            var source =
            {
                localdata: data,
                datafields:
                [
                    { name: 'name', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'date', type: 'date' },
                    { name: 'quantity', type: 'number' }
                ],
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 685,
                source: dataAdapter,
                showfilterrow: true,
                filterable: true,
                theme: theme,
                pageable: true,
                virtualmode: true,
                editable: true,
                pagesize: 50,
                rendergridrows: function(obj) {
                    return obj.data;
                },
                columns: [
                  { text: 'Name', columntype: 'textbox', filtertype: 'textbox', filtercondition: 'starts_with', datafield: 'name', width: 115 },
                  {
                      text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 220
                  },
                  { text: 'Available', datafield: 'available', columntype: 'checkbox', filtertype: 'bool', width: 67 },
                  { text: 'Ship Date', datafield: 'date', filtertype: 'date', width: 210, cellsalign: 'right', cellsformat: 'd' },
                  { text: 'Qty.', datafield: 'quantity', filtertype: 'number', cellsalign: 'right' }
                ]
            });
            $('#clearfilteringbutton').jqxButton({ height: 25, theme: theme });
            $('#clearfilteringbutton').click(function () {
                $("#jqxgrid").jqxGrid('clearfilters');
            });
            var presetlogidfilter = function () {
                $('#jqxgrid').jqxGrid('clearfilters');
                var fileids = ["Espresso con Panna", "Caramel Latte"]; // gets the file IDs from the other control. Strings like "000038010"
                if (fileids != null && fileids.length > 0) {
                    var filtergroup = new $.jqx.filter();
                    var filter_or_operator = 1;
                    var filtercondition = 'equal';
                    for (var i = 0; i < fileids.length; i++) {
                        var filtervalue = fileids[i];
                        var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition); // this pre-filters, but the check lists are empty and as soon as a user opens the selection drop down, the filter is lost
                        filtergroup.addfilter(filter_or_operator, filter1);
                    }
                    // add the filters.                
                    $('#jqxgrid').jqxGrid('addfilter', 'productname', filtergroup);
                    // apply the filters.                
                    $('#jqxgrid').jqxGrid('applyfilters');
                };
            };
            $("#presetlogidfilterButton").click(function () {
                presetlogidfilter();
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
    <input style="margin-top: 10px;" value="Remove Filter" id="clearfilteringbutton"
        type="button" />
    <button id="presetlogidfilterButton">
        Filter Product column</button>
</body>
</html>

[nikitasoParticipant]

Nevermind comment about “virtualmode”.

Seems like your sample only ticks one value in dropdown.

Thanks.
Nikita.

[nikitasoParticipant]

So is it a bug?

[Author]

Posts