Custom Filter Dropdown Options Angular

[Dakota]

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.

[Dakota]

The functionality for "city" in this demo.

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

[Stefan]

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

[Dakota]

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.

[Stefan]

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

[Dakota]

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!

[Dakota]

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.

 

[Dakota]

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?

[Dakota]

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.

[Dakota]

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.

[Dakota]

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?

[Dakota]

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);   
                    })

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

[Stefan]

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