Grid filter

[nikitasoParticipant]

I have a page with grid, all filtering and paging done on server. Usually I load all data when page opens and user can filter data by typing values into filter row textboxes.

But I need, sometimes, to add filter to grid via code.
For example:
Here’s list
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/filterrow.htm

What I want is when user navigates to above page is add filter to grid in code and filter all rows for ‘Cheryl Fuller’ and have value visible in filter textbox, so that user can take it out and view all data.

Preferably to add filter before grid makes first request to server.

I hope I’m being clear 🙂

Thank you!!

[Peter StoevKeymaster]

Hi nikitaso,

It is not possible to add a filter before the Grid makes the first request. Filters can be added once the Grid is loaded. I understand that this is a limitation in the current version and we will improve the API in the future.

Best Regards,
Peter Stoev

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

[nikitasoParticipant]

actually this is what i need! 🙂

Something like that:
if page needs to prefitlered i set filterAdded = true, then “processdata” i added filter data, then in “filter” event i set filterAdded to false and skips processdata (well adding filter)

Now I need to figure out how to populate filter textbox in column header.

filter: function () {
filterAdded = false;
// update the grid and send a request to the server.
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘filter’);
},
sort: function () {
// update the grid and send a request to the server.
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘sort’);
},
root: ‘DataRows’,
processdata: function (data) {
if (filterAdded)
{
console.log(‘processdata’);
data.filterscount = 1;
data.filtervalue0 = ‘@ViewBag.FilterGridValue’;
data.filterdatafield0 = ‘@ViewBag.FilterGridField’;
data.filteroperator0 = ‘and’;
data.filtercondition0 = ‘EQUAL’;
}

},

[nikitasoParticipant]

is it possible to put text into filter textbox after grid is loaded?

[Peter StoevKeymaster]

Hi,

A text in the filter textbox is added by default in the current version when a filter is added.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example illustrates the Grid filtering feature. Enter some data into the Filter Row.</title>
    <link rel="stylesheet" href="http://www.jqwidgets.com/public/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="http://www.jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/public/jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = '';
            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,
                ready: function()
                {
                    var filtergroup = new $.jqx.filter();
                    var filter_or_operator = 1;
                    var filtervalue = 'Beate';
                    var filtercondition = 'contains';
                    var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
                   
                    filtergroup.addfilter(filter_or_operator, filter1);
                    // add the filters.
                    $("#jqxgrid").jqxGrid('addfilter', 'name', filtergroup);
                    // apply the filters.
                    $("#jqxgrid").jqxGrid('applyfilters');
                },
                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');
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
    <input style="margin-top: 10px;" value="Remove Filter" id="clearfilteringbutton" type="button" />
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts