This is a migrated thread and some comments may be shown as answers.

Custom Filter Dropdown Options Angular

12 Answers 226 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Dakota
Top achievements
Rank 1
Dakota asked on 14 Nov 2016, 08:40 PM

Hey guys,

I'm trying to apply a "dropdown" option for a few different columns in my table. Using the standard "string" and "number" operators if fine, but I want to apply specific dataset options to each of my particular dropdown filters. Examples similar to ["yes", "no"], or days of the week are the simple type of selections I want in the dropdown to then be applied as the filter for the column.

Using angular.

------------------------------------------------------------------

            $scope.GridOptions = {

                dataSource: new kendo.data.DataSource({

------------------------------------------------------------------

Above -how my grid is being created for reference purposes.

My grid has a {schema: {model: fields: {...}}} section, currently specifying the "type" of each column.

As well as a {filterable: {operators: {}}] area where I'm specifying the search options/order.

And finally the "columns" area where the specifics of each field are being specified.

 

I haven't been able to find an angular reference with a custom dropdown filter being used - I've only seen JQuery/javascript.

12 Answers, 1 is accepted

Sort by
0
Dakota
Top achievements
Rank 1
answered on 14 Nov 2016, 08:45 PM

The functionality for "city" in this demo.

http://demos.telerik.com/kendo-ui/grid/filter-menu-customization

0
Stefan
Telerik team
answered on 15 Nov 2016, 03:04 PM
Hello Dakota,

The same result can be achieved in AngularJS using a similar approach. The main difference is that the function which is used to initialize the DropDown have to be set before the Grid options.

Please refer to the Dojo example demonstrating this implementation:

http://dojo.telerik.com/IreNu

I hope this will help to achieve the desired result.

Regards,
Stefan
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
0
Dakota
Top achievements
Rank 1
answered on 15 Nov 2016, 09:03 PM

Thank you, this does achieve the desired effect.

I would like to expand on this same situation.

I need the drop down to only contain distinct values, for which I have applied a map to find the distinct values. I found this functionality online from a stackoverflow answer, and claim no ownership.

------------------------------------------------------

            var unique = {};
            var distinct = [];
            for (var i in $scope.localData) {
                if (typeof (unique[$scope.localData[i].myColumnName]) == "undefined") {
                    distinct.push($scope.localData[i].myColumnName);
                }
                unique[$scope.localData[i].myColumnName] = 0;
            }

-------------------------------------------

I then assign this "distinct" array to my kendoDropDownList datasource option. This is working as intended for this specific column.

But, I Intended to apply this functionality across multiple column filters in my grid, and making a copy of this function and substituting hard-coded columnNames for each clearly doesn't make sense.

So, my thought is to pass in a argument to the:

-----------------------------------------------

filterable: {

          ui: $scope.dropDownFilter(here)

}

------------------------------------------------

section of the specified field. I keep running into errors and am not sure how to achieve the desired affect. Assuming I can get this to work, I then need to find a way to insert the passed in field into the mapping section which is contained in my $scope.dropDownFilter function.

0
Stefan
Telerik team
answered on 17 Nov 2016, 10:17 AM
Hello Dakota,

The desired result can be achieved using the currying technique to pass the field name parameter to the function:

https://www.sitepoint.com/currying-in-functional-javascript/

Please check the Dojo example demonstrating this implementation. The example shows how to send and then access the field name and the data in the dataSource:

http://dojo.telerik.com/OKajE

Regards,
Stefan
Telerik by Progress
Kendo UI is ready for Visual Studio 2017 RC! Learn more.
0
Dakota
Top achievements
Rank 1
answered on 23 Nov 2016, 02:28 AM

Thank you Stefan, that was exactly what I was looking for!

One final note to complete my desired result - I switched the kendoDropDown to kendoMultiSelect, and applying the filter does work! The only issue I'm having is that the MultiSelect filter is only working for when a single value is being filtered for. For example, if I sort on "dog", it works exactly as inteded, but if I add "cat" I'm not getting results returned - I'm assuming because the default specification is AND'ing the values, and not OR'ing. I have found a reference to applying the OR filter logic for Jquery, but I haven't been able to translate it over for angular. I would be unbelievably satisfied if there is a simple solution.

CURRENT IMPLEMENTAITON

-----------------------------------------------

        $scope.multiSelectFilter = function (element, fieldName) {

// Logic to determine list of distinct values here

            element.kendoMultiSelect({
                dataSource: distinct,
                optionLabel: "--Select Value--",
            });
        }

 

Thanks again for your time!

0
Dakota
Top achievements
Rank 1
answered on 23 Nov 2016, 03:20 AM

EDIT: I have since tried adding this:

---------------

                change: function(e){
                    var filter = { name: fieldName, logic: "or", filters: [] };
                    var values = this.value();
                    $.each(values, function(i, v) {
                        filter.filters.push({field: fieldName, operator: "eq", value: v });
                    })}

----------------------------

Below the OptionLabel, and the console log of the "filter" and "filter.filters" objects look exactly as I would expect them, with "filter" having the logic: "or" as intended. But still no dice.

 

0
Dakota
Top achievements
Rank 1
answered on 23 Nov 2016, 03:46 AM

I GOT IT!

I simply had to "push" the filters into the dataSource filter options, which was resolved by adding:

-----------------------------------------

                    $scope.myGrid.dataSource.filter(filter);
-----------------------------------------------------
after the Jquery Each loop.

 

ONE FINAL QUESTION:

I'd really prefer not to have to use the jquery $each, so is there an alternative (angular) way to do it?

0
Dakota
Top achievements
Rank 1
answered on 23 Nov 2016, 03:53 AM

NEVERMIND I GOT IT!

When i tried substituting a standard for loop in previously, I was passing in the wrong value to value:, and once I was passing in the values[i] it worked perfectly! Solution completed.

0
Dakota
Top achievements
Rank 1
answered on 23 Nov 2016, 03:54 AM
GOT IT
Was passing in the wrong value to "value:" when I tried implementing a for loop, once I realized that error a standard loop worked as expected (: solution completed.
0
Dakota
Top achievements
Rank 1
answered on 23 Nov 2016, 04:38 AM

CRAP

So the filtering functionality is working, but the filter changes are being applied as soon as the change event resolves, but I want it to resolve only once the "filter" button is selected on the dropdown. Help?

0
Dakota
Top achievements
Rank 1
answered on 23 Nov 2016, 04:20 PM

Nevermind, I got it.

Just needed to explicitly control the filter button click to say when to update the datasource filter.

-------------------

                    form.find("[type='submit']").click(function (e) {
                        $scope.myGrid.dataSource.filter(filter);   
                    })

-----------------------

0
Stefan
Telerik team
answered on 24 Nov 2016, 09:56 AM
Hello Dakota,

Depending on the last response, I can assume that the issue is resolved.

If additional assistance is needed with this request, I will be happy to assist.

Regards,
Stefan
Telerik by Progress
Kendo UI is ready for Visual Studio 2017 RC! Learn more.
Tags
Grid
Asked by
Dakota
Top achievements
Rank 1
Answers by
Dakota
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or