Create custom filter menu on filter initialization

4 posts, 0 answers
  1. Niloofar
    Niloofar  avatar
    24 posts
    Member since:
    Jan 2015

    Posted 25 Mar 2016 Link to this post

    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.
  2. Marin
    Admin
    Marin avatar
    1057 posts

    Posted 28 Mar 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Niloofar
    Niloofar  avatar
    24 posts
    Member since:
    Jan 2015

    Posted 28 Mar 2016 in reply to Marin Link to this post

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

  4. Marin
    Admin
    Marin avatar
    1057 posts

    Posted 29 Mar 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top