Grid Filter Row issues with latest update

7 posts, 0 answers
  1. ray
    ray avatar
    1 posts
    Member since:
    Feb 2011

    Posted 23 Sep 2016 Link to this post

    The latest update contained two changes to the filter row that are undesirable. 

     

    The first, the filter row control now has an X in it. On smaller columns, it eats up a lot of the real estate. It is also redundant because next to the filter row operator, is a reserved spot for a clear button. Is there anyway to either remove the clear button from the text editor or remove the clear button next to the filter operator?

     

    The second issue is the noDataTemplate. In my case, I don't want auto complete on the filter row text box. To remove it, I set the dataSource to an empty object. Unfortunately, this results in the textbox to constantly show No Data Found as you type. Is there any way to remove this feature for the filter row controls when the datasource is set to { } for the field?

     

    Thanks.

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    633 posts

    Posted 27 Sep 2016 Link to this post

    Hello Ray,

    The mentioned clear buttons serve different purpose, and that is why both are present by default.

    The Kendo UI AutoComplete's filter row clearButton just clears any typed text the widget's dataSource will be filtered by, while the "X" button to the right of the filter icon clears the filter, applied to the Grid, based on the AutoComplete's value, and rerenders the Grid with the corresponding data, after the filter is removed.

    In general, you can achieve the desired functionality by getting a reference to the AutoComplete, and using the setOptions() method to configure the clearButton and noDataTemplate options:

    http://dojo.telerik.com/IJITu/2

    However, we have a logged issue with setting clearButton after the widget has been initialized:

    https://github.com/telerik/kendo-ui-core/issues/2222

    Until it is resolved, you can use jQuery to remove the undesired element, as shown in the dojo example, provided above.

    If you do not want an AutoComplete in the filter row at all, maybe the more straightforward approach would be to use the columns.filterable.cell.template Grid option to override the default behavior, and use a regular input, instead of the AutoComplete widget:

    http://dojo.telerik.com/IJITu/4

    I hope this helps.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
  3. Benjamin
    Benjamin avatar
    21 posts
    Member since:
    Apr 2015

    Posted 28 Sep 2016 Link to this post

    Hi,

    we are facing the same issue. Even before the update there was a space problem especially in small rows. Yet it's even worse :-( Also for the user the behaviour is not predictable, respectively it's not logical which button has which effect.

    My suggestion would be to offer an flag to disable the outer X button.

    Thanks!

     

  4. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    633 posts

    Posted 29 Sep 2016 Link to this post

    Hello Benjamin,

    I am sorry to hear that the new clearButton feature has caused some confusion and inconvenience. Currently we provide means for removing the clear button from the AutoComplete's input only, while editing the filter cell header contents can be done via custom styles and logic.

    If you feel that the Grid can benefit from additional functionalities and/or configuration options, please submit a feature request to our UserVoice portal:

    http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback

    The most popular ideas are considered for future releases of Kendo UI. Thank you in advance.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
  5. Paul
    Paul avatar
    3 posts
    Member since:
    Dec 2015

    Posted 18 Jul Link to this post

    I have just upgraded from Telerik 2016.2 to 2017.2 and have same issue with auto-complete on filter rows. We were using "BindTo(Enumerable.Empty<string>()" on GridColumnFilterableCellSettingsBuilder to hide the auto-complete. This all worked fine, but after upgrading we now get the "No Data Found" animation as soon as you start typing.

    I would just like an easy way to get rid of the auto-complete for the 100+ occurrences I have in my ASP.NET MVC project.

     

     

     

     

     

     

     

     

     

  6. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    633 posts

    Posted 20 Jul Link to this post

    Hi Paul,

    When the Grid filtering mode is set to "row", a Kendo AutoComplete widget is automatically created for filtering the string columns/fields.

    You can either use a template for the filtering UI that will be rendered, providing a function, as described in the following section of our documentation:

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.filterable.cell.template

    The syntax for the UI for MVC wrappers would be:

    // Grid config
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
        .Name("grid")
        .Columns(columns =>
        { ...
              columns.Bound(p => p.ShipName).Width(500).Filterable(ftb => ftb.Cell(cell => cell.Template("filter")));
     
    // client-side JavaScript
    <script>
        function filter(args) {
            var input = $(args.element);
            input.addClass('k-textbox');
                // custom logic for triggering filtering on Enter (optional)
            input.keypress(function (ev) {
                if (ev.which === 13) {
                    $(this).trigger('change');
                }
            });
        }
    </script>

    ... or let the AutoComplete be created and rendered on the server, but prevent its dropdown from opening on the client by adding a custom open event handler to all instances on the page (that are inside Grid filter row), e.g.:

    <script>
        $(function () {
            var autoCompleteElements = $('.k-widget.k-grid .k-filter-row [data-role="autocomplete"]');
            autoCompleteElements.each(function (index, item) {
                $(item).data('kendoAutoComplete').setOptions({
                    open: function (e) {
                        e.preventDefault();
                    }
                })
            });
        });
    </script>

    I hope this helps.

    Regards,
    Dimiter Topalov
    Progress Telerik
    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 visualization (charts) and form elements.
  7. Paul
    Paul avatar
    3 posts
    Member since:
    Dec 2015

    Posted 27 Jul in reply to Dimiter Topalov Link to this post

    Two good suggestions... thanks!!  I have now removed the binding to the empty list and as long as the Operator and SuggestionOperator are the same I can put up with always having suggestions for now as at least it is consistent.  If others think it is better without the suggestions then I will implement one of your above suggestions... thanks!

     

     

     

     

Back to Top