Sometimes, we just want a simple equal filter in grid, without operators options
---
ADMIN EDIT
If you want to modify the current behavior and layout of the filters, use the filter template (there is another example in this thread - in the post from 29 Jun 2020 that you can also use as base).
---
Hello everyone,
I would like to jump into the discussion with some details about this feature request.
We are currently in design and research stage of the feature and we further evaluated all customer feedback. It seems that there are more requests included in the messages in the thread. Thus, we are giving you heads-up what to expect as output from this FR.
- Parameter to define the Default Filter Operator applicable for the FilterRow and FilterMenu
- Parameter to control whether the filter buttons (Filter Operator DropdownButton and Clear Button) should be vissible in FilterRow scenario
Preliminary (not finalized specification)
<TelerikGrid Data="@Data"
FilterMode="@GridFilterMode.FilterRow">
<GridColumns>
<GridColumn Field=@nameof(ProductDto.ProductId)
ShowFilterCellButtons="false"
DefaultFilterOperator="@FilterOperator.IsEqual" >
</GridColumn>
</GridColumns>
</TelerikGrid>
Another request that we observed in the messages is to be able to control the filter operator list displayed in the dropdowns. This is a separate feature request logged here, but please add your vote and comments so that we could prioritize it in a timely manner:
https://feedback.telerik.com/blazor/1550855
Regards,
Joana
Progress Telerik
Hi Michal,
I recommend keeping separate issues in their own dedicated threads. The real estate (size) issue you are facing is not related to setting a default filter operator or removing some filter operators - those are things that will be visible in the dropdown of the button that lets you choose the operator.
The current design of the FilterRow requires room for both buttons (choose operator and clear filter) and that there is some input for the filter. What you are facing here is a typical screen real estate issue that is typically solvable in several different ways (you could even combine more than one):
Our components are an off-the-shelf product and so they come with a certain design and UX that is targetting the most common use cases. For situation where you want something highly specific, typically you would accomplish it by writing some code to customize the built-in behavior - be that templates and/or other code (such as CSS).
If you have further issues or questions on this, please open a separate thread where they can be better addresses without spamming everyone interested in the particular feature that this thread targets.
Regards,
Marin Bratanov
Progress Telerik
Hello,
in version 3.0.0, situation with filter row is even escalated.
Attachment as example - In background is current radgrid, at bottom/foreground near perfect solution(filter criteria on top of the column is bonus, ignore it).
Is this expected behaviour? Is it correct roadplan, where filtering in radgrid goes?
If yes, is there sollution for regular users "how" to filter in that kind of usual narrow columns?
NOGO:
- use column templates
- make the column wider (!!)
Almoast, but how:
- use css to hide buttons(How/Where to specifi which columns)? ie. hide buttons in: 12 columns of 10.
Thank you for info.
Hi Meindert,
If you localize your Telerik components, you can have those texts in the user's native language: https://demos.telerik.com/blazor-ui/grid/globalization
At the moment, the only way to change what the available filter operators are is to make a custom menu template: https://demos.telerik.com/blazor-ui/grid/custom-filter-menu.
Regards,
Marin Bratanov
Progress Telerik
Hi,
Two requirements we have to implement:
1) The language of the Search options should be in Native language
2) I have as source ExpandoObject and the following selections are not posible/usable and like to remove them:
Telerik pervert way and solution is using template and/or state ?
Kind regards,
Meindert
Hello Michal,
I am sorry to see that there have been some misunderstanding on how we handle enhancements and I will try to shortly cover some key points of our internal process, which you may find useful in relation to the other threads where I see you have contributed similar thoughts.
These considerations apply now, and will continue to apply in the future, even if the Blazor framework has been out of preview for about 2 years now. Making reusable components for it is a different matter than making the framework itself.
So, to recap the rest of your questions this thread:
Lastly, the grid is the flagship component in the suite, and each release we've made has carried enhancements, new features and fixes for it. This is extremely likely to continue to be the case. If you don't see the features you want in it, I recommend you open a private ticket where we can discuss your options.
Regards,
Marin Bratanov
Progress Telerik
Hello,
any update in this feature to be implemented in NEAR future? It is over YEAR and technology "demo" era should be done.
It is real showstopper for our customers with moving/migrating from asp.net radgrid to blazor grid.
Columns doesnt look profesional and also are not usable with enabled filtering. When you decided to decline similar request for fixing overlaping https://feedback.telerik.com/blazor/1459066-grid-column-min-and-max-width items
with reason" Competitors doesnt have this feature".
So HIDE FILTER BUTTON + FilterOnKeyPres(enter#13)/exit, your competitors(devex,sf) has it from beginning = This is not something special, its just how it should work and look to be usable in real world. Not only on "demo" with few fixed columns, lot of space and fast datasource.
Try it for yourself: X columns with short strings(4 charaters max).... As i see, you hidened example images from previous posts - they are still relevant and better than hundred words.
Grids are alpha and omega in b2b applications,so say it proudly, if you are not aiming to this audience, we all "data driven webapp makers" move elsewhere.
Thank You for info.
Hi Michal,
Thank you for your feedback!
Indeed, Filter templates provide opportunity for any customization that is needed to match the application needs. While they allow you to fully control the filtering, that also requires some additional setup to be done.
With that being said, the feedback you provided will also be considered when planning the implementation of the current feature request. Ajax components are a bit different in terms of structure, however while exposing the opportunity to set a default filter operator it might also be reasonable to allow optionally hiding the filter button.
Also, if you haven't already, I recommend clicking on the follow button to subscribe to this feature request and thus keep in track with its status updates.
Please let me know if you need any additional information. Thank you.
Regards,
Nadezhda Tacheva
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Hello Marin
Unfortunately I do not agree in both cases:
1) Use the TEMPLATE: is not the answer for everything, for that as an relatively ordinary task. Thats why we all are using telerik componets, to make the things in reasonable time, not spending ages/lines with RAW codig the output(and duplaciting what is already done in filterrow-component). Template is powerful way for higher level of customization.
2) Performance blazor-server: 1 filterbutton+placeholder clear/column=1kB of data going up and down the wire every statechange(whole block starting with: div class="k-filtercell-operator".....).
Lets have 1grid with 20 TINY(4characters) columns=20kB per change. If it will be properly hidden(not rendered at all) its 0.
In the current situation, the narrow columns are impossible for user to filter, because filter+clear button overlapping textinput(filter). Template is answer near to "do not use grid"
Alternative)- If you dont wont to add option as in the radgrid(ajax) for hiding it, what about:
If there is ONLY ONE option in filter menu(ie only "contains"), do not show button+clearbutton?
Hello MIchal,
The list ofoptions renders only when it is expanded. One button is unlikely to be the performance hit in an app, so CSS would be a viable option.
For removing this button altogether, the general approach would be using the filter template rather than bloating the grid API.
Regards,
Marin Bratanov
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/.
Thank you Marin,
filtermode=filterrow and hiding filter operator would by nice. But not by css, because of performance reasons.
In datacentric b2b applications there is always plenty of columns and every pixel+cpu cycles counts.
similar functionality to: "ajax ui radgrid" component is the goal :)
Hi Michal,
This request is about what filter operators should be available and which should be the default. If you want to hide the filter icon altogether, you can set Filterable=false for the column and you won't see an icon for the FilterMenu. For other CSS customizations (such as hiding the filter operator button from the FilterRow mode) there should rather be a CSS class option for the filter cell and header cell. This is something we have in mind.
Regards,
Marin Bratanov
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/.
Hello,
how it looks like with option "ShowFilterIcon="false"" ? GetState/SetState is doing nice job with filtering settings, but there is no option how to hide the "funnell button"
... or am i missing some workaround?(except filtertemplate - which is not as an productive way for just hiding it)
Thanks
Hello Wes,
You can go through the grid state and set options to the filter descriptors - the grid defines them initially. You can find some examples here (see the second code block).
Ultimately, this page that we are on will announce when a feature like that becomes available and it will hopefully provide an easier way to do this.
Regards,
Marin Bratanov
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/.
Marin,
We are coming from ASP.NET and use this all the time. It is just a cleaner look without a bunch of funnels. How can I reproduce in Blazor?
<telerik:GridBoundColumn FilterControlWidth="150px" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false" />
Thanks.
Hi Todd,
Once you use the filter menu template, the grid will not render the filter operators dropdown for you, so it will be up to you to choose what to render, how, and what options to provide for it. You can find a few examples in the demo and docs about the feature for a filter menu too. You can also see how to bind a dropdown to an enum (our filter operators are an enum) here - instead of foreach in the second example you would define the collection you want.
Regards,
Marin Bratanov
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/.
Hi all,
You can now do this through the custom filter templates. Here's an example:
@using Telerik.DataSource
@using Telerik.Blazor.Common.Filter
<TelerikGrid Data=@GridData FilterMode="@GridFilterMode.FilterRow"
Height="400px" Width="700px" Pageable="true">
<GridColumns>
<GridColumn Field="Id" Filterable="false" Width="80px" />
<GridColumn Field="Price" Filterable="false" />
<GridColumn Field="ProductName" Title="Product">
<FilterCellTemplate>
<TelerikTextBox @bind-Value="@currFilterValue"
OnChange="@(async () =>
{
(context.FilterDescriptor.FilterDescriptors[0] as FilterDescriptor).Value = currFilterValue;
// invoke filter through built-in method
await context.FilterAsync();
})"></TelerikTextBox>
<div class="k-filtercell-operator">
<TelerikDropDownList Data="@Operators"
Class="k-dropdown-operator"
PopupWidth="auto"
PopupHeight="auto"
Width=""
OnChange="@(async () =>
{
// invoke filter through built-in method
await context.FilterAsync();
})"
@bind-Value="@( (context.FilterDescriptor.FilterDescriptors[0] as FilterDescriptor).Operator )"
ValueField="@nameof(FilterListOperator.Operator)"
TextField="@nameof(FilterListOperator.Text)">
</TelerikDropDownList>
<TelerikButton ButtonType="ButtonType.Button"
Class="k-clear-button-visible ml-2"
Icon="filter-clear"
Enabled="@( !string.IsNullOrEmpty(currFilterValue) )"
OnClick="@(async () =>
{
currFilterValue = null;
// clear filter through the method the context provides
await context.ClearFilterAsync();
})">
</TelerikButton>
</div>
</FilterCellTemplate>
</GridColumn>
</GridColumns>
</TelerikGrid>
@code {
//used for the custom filter
string currFilterValue { get; set; }
// custom filter operators list - mind the field type as not all operators can apply to all types
List<FilterListOperator> Operators =>
new List<FilterListOperator>()
{
new FilterListOperator() { Text = "starts with", Operator = FilterOperator.StartsWith },
new FilterListOperator() { Text = "contains", Operator = FilterOperator.Contains },
new FilterListOperator() { Text = "is not empty", Operator = FilterOperator.IsNotEmpty },
};
// sample grid data
public List<SampleData> GridData { get; set; } = Enumerable.Range(1, 50).Select(x => new SampleData
{
Id = x,
Price = x * 0.5m,
ProductName = $"Product {x}"
}).ToList();
public class SampleData
{
public int Id { get; set; }
public decimal Price { get; set; }
public string ProductName { get; set; }
}
}
<style>
/* change the dropdownlist arrow to a filter icon */
.k-dropdown-operator .k-i-arrow-60-down::before {
content: "\e129";
}
</style>
Regards,
Marin Bratanov
Progress Telerik
Hi Peter,
You can see our short-term plans in our roadmap page: https://www.telerik.com/support/whats-new/blazor-ui/roadmap. We take the community feedback actively when prioritizing items, so the more popular a given request becomes, the more likely it is to be implemented sooner rather than later. This also means that we can't commit to firm timeframes for all those features in the portal, and the best way to know when something gets done is to Follow its progress.
Regards,
Marin Bratanov
Progress Telerik
Thank you Peter, it helps having our customers' preferences so we can better accommodate them.
--Marin
Hi Marin,
I think for the most part that Operators to Exclude would be the most useful. If we don't want to filter on a particular column can't we just set the Filterable parameter on the column itself? If you can implement Operators to Include as well but only allow one of the parameters (Operators to Include/Operators to Exclude) to be implemented at the same time, that would be helpful for situations where the desired number of operators is small. I would also like to see Default Operator implemented as per your example below. All of this should be implemented in the GridColumn definition. Hope that helps.
Regards,
Peter Zanutto
Hello Peter,
This brings me back to my initial question of how you want this exposed for configuration - operators to include, operators to exclude, default operator, parameter for whether the operators list will be available at all, some other sort of parameter per field type at the grid level? There are various ways to get this implemented and we'd appreciate feedback on how you want it to work.
Regards,
Marin Bratanov
Progress Telerik
Marin,
I like your suggested treatment. I was just looking at a way to simplify the number of choices that a user has depending on the data type of a column. We may for instance not provide the same operator choices for numeric data as we would for string data.
Would something like this be useful for you (I am trying to make the feature more generic so that it can accommodate more use cases):
<TelerikGridColumn Field="@(nameof(ReadModel.Name))" Title="User name" DefaultFilterOperator="EqualTo" FilterOperators="EqualTo" />
which would let you define the available operators in the dropdown - in this case so there is only one option - and, in addition, so you can define the default action in case you want to keep a number of operators (FilterOperators would be able to take a list of sorts, this is pseudocode). With FilterRow filtering (the default) blurring the input would trigger filtering anyway, so clicking the filter button would simply show the current operator so the user can know what they are actually doing.
or
<TelerikGridColumn Field="@(nameof(ReadModel.Name))" Title="User name" DefaultFilterOperator="EqualTo" ShowFilterOperatorsList="false" />
so that there is no dropdown at all (see the second property) and only a filter button is available in addition to the input. This would make more of a difference in the upcoming Filter Menu filtering mode.
Hey Marin!
Something like this:
<TelerikGridColumn Field="@(nameof(ReadModel.Name))" Title="User name" ExclusiveFilterOperator="Equal" />
If you configure the property ExclusiveFilterOperator, the drop down will not show and the operator will be the value of ExclusiveFilterOperator?
ok?
How would you expect this to be exposed for configuration? For example, List<string> properties where you can list the available operators, or properties where you list the ones you want to hide? Also, how would you want to control this depending on the field type (like numeric, string, DateTime, boolean), as they have different available filter options?