Grid Filter Row issues with latest update

[ray]

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.

[Dimiter Topalov]

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

[Benjamin]

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!

 

[Dimiter Topalov]

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

[Paul]

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.

 

 

 

 

 

 

 

 

 

[Dimiter Topalov]

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

[Paul]

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!

 

 

 

 

[kishor]

i checked http://dojo.telerik.com/IJITu/4 this demo on both Google Crome and Internet explorer, when i enter some characters in ShipName column and pressed enter key,it works in Google Crome but not working in Internet explorer.

 

Can you provide solution for this issue.

[Ivan Danchev]

Hello Kishor,

The issue is caused by adding a class to the filter input:

template: function (args) {
    // style the textbox
    args.element.addClass('k-textbox')
}

Without the template pressing Enter filters the records as expected: http://dojo.telerik.com/uBoSufOs

Regards,
Ivan Danchev
Progress Telerik

[kishor]

i am creating dynamic grid  like shown in this example link "https://docs.telerik.com/kendo-ui/knowledge-base/create-with-dynamic-columns-and-data-types"

but paging not working.

when i change page index 1 to 2 and reset datasource , so i want set selected page index as 2.

how to set selected page index as 2, by default first page selected

 

[Ivan Danchev]

Kishor,

The topic of this thread is unrelated to paging. If your questions is not related to the to the discussion in an existing thread, please start a new thread.

With regard to selecting a specific page in the Grid, this can be done through its dataSource page method:

$("#grid").data("kendoGrid").dataSource.page(2);

 

Regards,
Ivan Danchev
Progress Telerik