jQWidgets Forums

This topic contains 9 replies, has 2 voices, and was last updated by korvuss 10 years, 8 months ago.

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

Author

Jqxgrid filter list issue Posts

September 15, 2014 at 3:15 pm Jqxgrid filter list issue #59518

Participant

I am having trouble with my filter list on a server sided grid. It is a list of countries but its only pulling in the countries
on the first page of the dataset, I assume this is due to the pageination being server side and not client side. So Im wondering
if there is any way around this or some way to pull the list of countries and pass it to the filter via ajax?

Any help on this would be much appriciated.

September 15, 2014 at 6:15 pm Jqxgrid filter list issue #59530

Peter Stoev

Keymaster

Hi korvuss,

You can set the column’s filteritems property to an Array of items to be displayed in the Filter’s List.

Best Regards,
Peter Stoev

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

September 16, 2014 at 7:44 am Jqxgrid filter list issue #59546

korvuss

Participant

Hi Peter,

Thanks for the response. Can that be loaded dynamically with the distinct values for the filter?

September 16, 2014 at 8:28 am Jqxgrid filter list issue #59550

Peter Stoev

Keymaster

Hi korvuss,

To dynamically update the filteritems property, you can use the Grid’s “setcolumnproperty” method.

Example:

         $("#jqxgrid").jqxGrid('setcolumnproperty', 'productname', 'filteritems', ["Black Tea", "Green Tea", "Caffe Espresso"]);

Hope this helps.

Best Regards,
Peter Stoev

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

September 16, 2014 at 9:56 am Jqxgrid filter list issue #59559

korvuss

Participant

Hi Peter,

It doesnt seem to work for server side filtering saddly. Im not sure if im doing somethign wrong here.

September 16, 2014 at 9:59 am Jqxgrid filter list issue #59560

Peter Stoev

Keymaster

Hi korvuss,

The list applies a filter, on the server you have to write code which takes the filter’s value and filters your DB results. You can check our working online demos about server filtering.

Best Regards,
Peter Stoev

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

September 16, 2014 at 10:20 am Jqxgrid filter list issue #59562

korvuss

Participant

I have server side filtering implemented using the documentaition and working the issue is that the drop down list doesnt pick up on all possible values for the column which is my issue. I was thinking of possibly passing just the countries via json and forcing them into the filter but this to me seems like a dirty way of doing it.

September 16, 2014 at 10:21 am Jqxgrid filter list issue #59563

korvuss

Participant

I should note that im using pagination and I think this is where the issue lays.

September 16, 2014 at 3:19 pm Jqxgrid filter list issue #59574

Peter Stoev

Keymaster

Hi korvuss,

The list is populated with the items which you set in the column’s filteritems property. You can do this dynamically or statically during the initialization of your Grid.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <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="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.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/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>

    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../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);

            $("#jqxgrid").jqxGrid(
            {
                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: 'list', datafield: 'productname', width: 180 },
                    { 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"]);
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid"></div>
    </div>
    <button id="setFilterItems">Set Filter Items</button>
</body>
</html>

Best Regards,
Peter Stoev

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

September 17, 2014 at 2:48 pm Jqxgrid filter list issue #59653

korvuss

Participant

Hi Peter,

I managed to get around it actually by passing another ajax call and overwriting the filter options using read:function() inside the jqxGrid initialisation.

Thanks anyways,

Korvuss

Author

Posts

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

You must be logged in to reply to this topic.