Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Declined
Last Updated: 17 May 2021 06:04 by ADMIN
Lance
Created on: 14 May 2021 04:04
Category: UI for Blazor
Type: Bug Report
0
filterrow doesn't work on narrow columns

Hi,

I have a grid, it has quite a few columns - maybe 10-15, and this is causing 2 problems which are kind of related.

First problem is it tries to squash them all onto the screen making them all narrow and that hides the header text - I have played with horizontal scrollbar but so far I've only managed to resize them after it loads (or to workaround that I have tried save state after I've resized them with some success, but i'd really prefer the default starting point to be wider than the screen - if you have an example you can show me how to do this?)

Next problem is when I add a filter row to it - its basically unusable.  Even though the columns are narrow, they look like they should be wide enough, but instead what happens is the filter button appears in the middle by itself and nothing else appears - sometimes I see " ___ Y      "  but most of the time its "        Y         ".  It seems very poor use of space by default.  This is the material theme. 

Can you help?  I did try with the filter menu but it is more complicated for our users and they prefer the idea of filterrow, plus it also crashes intermittently (see below for callstack).

 

Intermittent crash in filter menu - happens when user clicks the menu then clicks filter, before the filter menu is displayed.
Error: System.NullReferenceException: Object reference not set to an instance of an object.
   at Telerik.Blazor.Components.Common.Filters.FilterList.TelerikFilterList.GetFilterOperators()
   at Telerik.Blazor.Components.Common.Filters.FilterList.TelerikFilterList.InitFilterOperators()
   at Telerik.Blazor.Components.Common.Filters.FilterList.TelerikFilterList.OnInitializedAsync()
   at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
3 comments
ADMIN
Marin Bratanov
Posted on: 17 May 2021 06:04

Hello Lance,

Since you mentioned you are using the Material theme, the dark circle is probably the ripple effect buttons have. It is quite hard to implement and harder to inspect.

As for the filter operators list error - I advise you open a ticket with a reproducible so we an have a look and avoid guesswork, I don't have other ideas to my previous post.

Regards,
Marin Bratanov
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.

Lance
Posted on: 16 May 2021 23:08

my workaround so far is this, but there's still a big dark circle highlight when you click the button and its in the wrong place and I can't figure out how/why/what it is even with the browser inspection tools.

.k-grid th {
    padding: 16px 0px 16px 10px;
}

.k-grid-header th .k-grid-filter .k-i-filter {
    margin-left:32px;
}

Also FYI my column type is just a string when I get the crash earlier, not any kind of special object, just a public string property

ADMIN
Marin Bratanov
Posted on: 14 May 2021 06:02

Hello Lance,

By default, the columns get an equal share of the grid width, that's how tables renders with these css rules. If you want to have wider columns, you can specify their Width parameter explicitly. Once the total sum of widths of columns is more than the grid width, you will get a horizontal scrollbar. You can read more about this behavior in the following article: https://docs.telerik.com/blazor-ui/components/grid/columns/width.

Once you have suitable widths for your columns, there will also be sufficient space for the filter row. You don't see much in narrow columns because 1) inputs in Material styling are very minimalistic and blend with their background a lot and 2) only the filter operator button is visible by default, the Clear button appears only when there is a filter. Ultimately, the filter row is a bit more involved in terms of initial components and will need the the application settings provide enough room for the user to work comfortably with it.

I am attaching to the end of this post a short video that demonstrates and hopefully explains this behavior in more detail.

Neither of these two behaviors are bugs, and so I must mark this as "Declined" since this case pertains to a configuration issue and not to a component bug.

As for the third item about the exception - the most likely reason is that the grid is bound to some sort of dynamic object (expando, or data table) or has Grouping enabled with OnRead (ultimately, again a dynamic object as its data source) - in all of these cases you must set the FieldType of each column so the grid can know what filter operators to render. If that's not the case, please open a new support ticket with a small runnable example of the problem so we can investigate.

Regards,
Marin Bratanov
Progress Telerik

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

Attached Files:
Create an account Log In
View
Type
Status
Category