Grid Filter Row issues with latest update in Kendo UI for jQuery Grid

ray

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.

Dimiter Topalov

Admin

1292 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.

Benjamin

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!

Dimiter Topalov

Admin

1292 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.

Paul

6 posts

Member since:
Dec 2015

Posted 18 Jul 2017 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.

Dimiter Topalov

Admin

1292 posts

Posted 20 Jul 2017 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.

Paul

6 posts

Member since:
Dec 2015

Posted 27 Jul 2017 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!

kishor

17 posts

Member since:
Jan 2016

Posted 06 Apr 2020 in reply to Dimiter Topalov Link to this post

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

Admin

2154 posts

Posted 08 Apr 2020 Link to this post

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.

kishor

17 posts

Member since:
Jan 2016

Posted 22 Sep 2020 Link to this post

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

1.png

Ivan Danchev

Admin

2154 posts

Posted 24 Sep 2020 Link to this post

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.