Create custom filter menu on filter initialization

[Niloofar]

i want to create a custom filter as shown in the screenshot, once the user click on the filter (on filter initialization ), i want to add a list of unique values to the default filter and users will be able to select multi items. I was wondering how it can be done.

[Marin]

Hello,

You can customize the menu by using the filterable->ui option and specify there a function to use for customization:

columns: [
        {
         field: "Title",
             filterable: {
                ui: customFilter
            }
        },

function cityFilter(element) {
        element.kendoDropDownList({
              dataSource: cities,
             optionLabel: "--Select Value--"
        });
    }

More information can be found here:
http://demos.telerik.com/kendo-ui/grid/filter-menu-customization


Regards,
Marin
Telerik

 

 

[Niloofar]

Thank you for your reply, I was following the instructions in this link: http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/checkbox-filter-menu. In filterinitialization, after the ajax response I try to change the default filter options, but the filter wont be loaded properly at first as shown in the attached file. After few seconds it will be shown properly. I was wondering how i can fix this issue.

 

  var removeFiltersForField = function (expression, field) {
                if (expression.filters) {
                    expression.filters = $.grep(expression.filters, function (filter) {
                        removeFiltersForField(filter, field);
                        if (filter.filters) {
                            return filter.filters.length;
                        } else {
                            return filter.field != field;
                        }
                    });
                }
            };

            var initializedFilterMenu = function (e) {
                var popup = e.container.data("kendoPopup");
                var dataSource = _this.dataSource;
                var field = e.field;
                var filteUrl = (JSON.parse(JSON.stringify(gridUrl)));
                filteUrl.targetTable += '?field=' + field;

                var success = function (response) {
                    var helpTextElement = e.container.children(":first").children(":first");
                    var element = $("<div class='checkbox-ontainer'></div>").insertAfter(helpTextElement).kendoListView({
                        dataSource: response,
                        template: "<div><input type='checkbox' value='#:" + field + "#'/>#:" + field + "#</div>"
                    });
                    e.container.find("[type='submit']").click(function (e) {
                        e.preventDefault();
                        e.stopPropagation();
                        var filter = dataSource.filter() || { logic: "and", filters: [] };
                        var fieldFilters = $.map(element.find(":checkbox:checked"), function (input) {
                            return {
                                field: field,
                                operator: "eq",
                                value: input.value
                            };
                        });
                        if (fieldFilters.length) {
                            removeFiltersForField(filter, field);
                            filter.filters.push({
                                logic: "or",
                                filters: fieldFilters
                            });
                            dataSource.filter(filter);
                        }
                        popup.close();
                    });

                };

                var error = function (xhr, status, error) {
                    Ember.Logger.error('Fail response: ' + xhr.responseText + ' (status=' + xhr.status + ' ' + error + ')');
                };
                _this.get('PopulateGridData')(filteUrl, success, error, {}, 'GET', false, true);
            };


            var dataSource = {
                transport: {
                    read: function (options) {
                        var success = function (response) {
                            options.success(response);
                        };

                        var error = function (xhr, status, error) {
                            Ember.Logger.error('Fail response: ' + xhr.responseText + ' (status=' + xhr.status + ' ' + error + ')');
                        };
                        _this.get('PopulateGridData')(gridUrl, success, error, options.data, 'POST', true, true);
                    },
                },
                pageSize: gridPageSize,
                schema: gridSchema,
                serverPaging: true,
                serverSorting: true,
                serverGrouping: true,
                serverFiltering: true,
            };

            var gridOptions = {
                dataSource: dataSource,
                columns: gridColumns,
                editable: gridEditable,
                pageable: {
                    refresh: true,
                    numeric: false,
                    previousNext: false,
                },
                height: gridHeight,
                scrollable: {
                    virtual: true,
                },
                groupable: true,
                filterable: true, 
                filterMenuInit: initializedFilterMenu,
            };

            var grid = Ember.$("#kendo-grid").kendoGrid(gridOptions).data('kendoGrid');
            // The filterMenuInit event is raised when the filter menu is initialized.
            grid.bind("filterMenuInit", initializedFilterMenu);

            _this.set('kendoGrid', grid);

[Marin]

Hello,

I see that you are attaching the event handler twice in the code below:

groupable: true,
                filterable: true,
                filterMenuInit: initializedFilterMenu,
            };

            var grid = Ember.$("#kendo-grid").kendoGrid(gridOptions).data('kendoGrid');
            // The filterMenuInit event is raised when the filter menu is initialized.
            grid.bind("filterMenuInit", initializedFilterMenu);

Normally this has to be done only once in the gridOptions, where you provide the handler.

You can also check if the filterMenuInit handler is called correctly after the ajax request.

Regards,
Marin
Telerik