jQWidgets Forums

This topic contains 12 replies, has 2 voices, and was last updated by Peter Stoev 9 years, 6 months ago.

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

Author

Use filter callback of jqxgrid->source Posts

December 10, 2015 at 6:44 am Use filter callback of jqxgrid->source #79155

Participant

Dear all

I have a filterable jqx-grid bound to a local array of data with a filterrow. I need to implement a custom filter function for jqx-grid to implement more tolerant text matching than the default provides. Since I have to manage german texts, there are a lot of texts containg the german special letter ß, which can also be expressed by ‘ss’. So what I need to achieve is, that if we enter some text in the filter row containg ‘ss’, it would also match ‘ß’.
Therefore, I think that I need to program my own filter callback of the ‘source’ object of my grid. Right?
If I look in the doc, I just find:

filter - callback function called when a filter is applied or removed.

filter: function(filters, recordsArray)
{
}

However, there is no description, what these parameters contain nor are there any samples adressing this kind of custom filtering (there are plenty of examples showing how custum filter widgets work – but that is not what I need).

Could someone provide an example? Probably for this use case?
Thanks in advance!

December 10, 2015 at 7:58 am Use filter callback of jqxgrid->source #79162

Peter Stoev

Keymaster

Hi jqxfriend,

You may look at the PHP, ASP .NET or JSP demos how the server filtering is implemented, but If it’s local Array, you should return new Array from that function.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

December 12, 2015 at 4:12 pm Use filter callback of jqxgrid->source #79234

jqxfriend

Participant

Dear Peter

Thank you for your information. I tried, what you have written:


filter: function (filtergroups, recordsArray) {
    var data = [];
    recordsArray.forEach(function (record) {
        var add = true;
        if (angular.isArray(filtergroups)) {
            filtergroups.forEach(function (filtergroup) {
                if (angular.isArray(filtergroup.filter.getfilters())) {
                    filtergroup.filter.getfilters().forEach(function (filter) {
                        add = false;
                        var cell = record[filtergroup.datafield];
                        if (angular.isString(cell)) {
                            cell = cell.toLowerCase();
                            if (cell.indexOf(filter.value.toLowerCase()) > -1)
                                add = true;
                            var szValue = filter.value.toLowerCase().replace(/ss/g, '\u00DF');
                            if (cell.indexOf(szValue) > -1)
                                add = true;
                        }
                    })
                }
            });
        }
        if (add)
            data.push(record);
    });

    return data;
}

The grid (with enabled filterrow) bahves correctly and displays excatly the matching columns. But if I select a row, I get a wrong row item in the selectrow(event) callback of the grid: If I e.g. select the first row of the grid after filtering, event.args.row of the selectrow(event) callback is the same item as if I would have no filtering (i.e. the first row of my data array instead of the first in my array returned in the filter function).
What is wrong?

December 15, 2015 at 6:39 am Use filter callback of jqxgrid->source #79297

jqxfriend

Participant

Dear all
I would be very happy to get help on this, since I am blocked and have no idea, what I can do to fix this problem. Thank you in advance!

December 19, 2015 at 4:19 pm Use filter callback of jqxgrid->source #79546

jqxfriend

Participant

I still have no idea, what is wrong. I made a minimal example and a video showing the error in the hope that someone will check it out.

You will see that before filtering, selecting a row will correctly display the selected entry. But as soon as I set a filter, the select event provides a wrong row as selected.

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <title id="Description">jqxGrid Binding to JSON using AngularJS</title>
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css"/>
    <script type="text/javascript" src="../../scripts/angular.min.js"></script>
    <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/jqx-all.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);

        demoApp.controller("demoController", function ($scope, $http) {
            $scope.createWidget = false;
            $http({
                method: 'get',
                url: '../sampledata/beverages.txt'
            }).success(function (data, status) {
                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        {name: 'name', type: 'string'},
                        {name: 'type', type: 'string'},
                        {name: 'calories', type: 'int'},
                        {name: 'totalfat', type: 'string'},
                        {name: 'protein', type: 'string'}
                    ],
                    id: 'id',
                    localdata: data,

                    filter: function (filtergroups, recordsArray) {
                        var data = [];
                        recordsArray.forEach(function (record) {
                            var add = true;
                            if (angular.isArray(filtergroups)) {
                                filtergroups.forEach(function (filtergroup) {
                                    if (angular.isArray(filtergroup.filter.getfilters())) {
                                        filtergroup.filter.getfilters().forEach(function (filter) {
                                            add = false;
                                            var cell = record[filtergroup.datafield];
                                            if (angular.isString(cell)) {
                                                cell = cell.toLowerCase();
                                                if (cell.indexOf(filter.value.toLowerCase()) > -1)
                                                    add = true;
                                                var szValue = filter.value.toLowerCase().replace(/ss/g, '\u00DF');
                                                if (cell.indexOf(szValue) > -1)
                                                    add = true;
                                            }
                                        })
                                    }
                                });
                            }
                            if (add)
                                data.push(record);
                        });

                        return data;
                    }
                };

                var dataAdapter = new $.jqx.dataAdapter(source);

                $scope.gridSettings =
                {
                    width: 940,
                    height: 300,
                    source: dataAdapter,
                    columnsresize: true,
                    altrows: true,
                    groupable: true,
                    showgroupsheader: false,
                    sortable: true,
                    filterable: true,
                    showfilterrow: true,
                    columnsresize: true,
                    columnsreorder: true,
                    autoshowfiltericon: true,
                    columnsmenu: false,
                    enabletooltips: true,

                    columns: [
                        {text: 'Name', datafield: 'name', width: 250},
                        {text: 'Beverage Type', datafield: 'type', width: 250},
                        {text: 'Calories', datafield: 'calories', width: 180},
                        {text: 'Total Fat', datafield: 'totalfat', width: 120},
                        {text: 'Protein', datafield: 'protein', minwidth: 120}
                    ],

                    rowselect: function (event) {
                        $scope.item = event.args.row;
                    }

                };

                // now create the widget.
                $scope.createWidget = true;
            }).error(function (data, status) {
                // Some error occurred
            });
        });
    </script>
</head>
<body>
<div ng-controller="demoController">
    <jqx-grid jqx-create="createWidget" jqx-settings="gridSettings"></jqx-grid>
    <br>
    <div ng-show="item">
        {{item.name}}, {{item.type}}, {{item.calories}}, {{item.totalfat}}, {{item.protein}}
    </div>
</div>
</body>
</html>

Thanks in advance for your help!

December 22, 2015 at 9:49 am Use filter callback of jqxgrid->source #79644

jqxfriend

Participant

Dear jqWidgets team
I still hope that somebody helps me on this. Is it possible to get help before christmas? I would really apreciate it to come a step further in my project.
Many thanks!

December 22, 2015 at 10:59 am Use filter callback of jqxgrid->source #79654

Peter Stoev

Keymaster

You can use getrowdata to get a row’s data, too. This methodi is documented here: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-api.htm

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

December 22, 2015 at 8:37 pm Use filter callback of jqxgrid->source #79678

jqxfriend

Participant

Dear Peter

Thanks for your hint. I tried it with getrowdata; but the problem is, that the rowindex in the select event is wrong:
I observe a different behavior of jqx-grid:
A) if an own filter method is provided in the source object, event.args.rowindex in the rowselect event is the index of the selected row out of the filtered rows only
B) if the grid performs the filtering itself (i.e. uncomment my filter method), event.args.rowindex in the rowselect event is the index of the selected row out of all records

So I see no way to use getrowdata in the usecase A) (own filter method) to retrieve the right row. Why is the behavior between these two filterings different?

December 23, 2015 at 7:36 am Use filter callback of jqxgrid->source #79691

Peter Stoev

Keymaster

See: http://jsfiddle.net/2os4j6fL/. We don’t see any issue here.

Btw, it is not necessary to post topics from different accounts

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

December 23, 2015 at 12:52 pm Use filter callback of jqxgrid->source #79713

jqxfriend

Participant

Dear Peter
Thanks for your jsfiddle. But it does not proove, what I discribed as problem. You did not implement an own filter function in the source object.
Please check this one out here: http://jsfiddle.net/2os4j6fL/6/ and you will see that something is wrong with the index as I described.

Btw, it is not necessary to post topics from different accounts

Why not? I am working for two different projects and want to strictly separate even the questions here…

Many thanks for your efforts!

December 23, 2015 at 1:11 pm Use filter callback of jqxgrid->source #79714

Peter Stoev

Keymaster

Well, I suppose that you should implement your filter function only if you have Server Filtering.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

December 23, 2015 at 7:48 pm Use filter callback of jqxgrid->source #79739

jqxfriend

Participant

What does your answer mean? Does it mean that due to a bug in jqxGrid / jqxDataAdapter we can currently not do what the filter function would have been for? – In the doc is absolutely nothing written that the filter function of source property can only be used for server side filtering.
For the current project, it is impossible to use server filtering – I wrote at the beginning that the data is a local array.

I hope that this issue will be solved soon. Thank you very much!

December 24, 2015 at 5:45 am Use filter callback of jqxgrid->source #79745

Peter Stoev

Keymaster

There’s no issue. That’s what this function seems to be implemented for and it seems that it would not be possible to use it for local array. You will have to use the built-in filtering.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.