https://docs.telerik.com/blazor-ui/components/grid/filtering?_ga=2.198924911.1399219233.1601890390-1967950312.1584602021#toolbar-search-box

You can add a search box in the grid toolbar that lets the user type their query and the grid will look up all visible string columns with a case-insensitive Contains operator, and filter them accordingly. You can change the filter delay, and the fields the grid will use - see the Customize the SearchBox section below.

-----

I have an int and a string field and would love to be able to let the user search in both at the same time.

Workaround is now:

public int number {get; set;}

public string numberString => number.ToString();

public string name {get; set;}

But I would love to see it without the need to use the numberString

Just wondering if there has been any movement on this issue. We are seeing this in our production system application insights logs. Thanks!

System.ObjectDisposedException: at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessPendingRender (Microsoft.AspNetCore.Components, Version=3.1.7.0, Culture=neutral, PublicKeyToken=adb9793829ddae60) at Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer.ProcessPendingRender (Microsoft.AspNetCore.Components.Server, Version=3.1.6.0, Culture=neutral, PublicKeyToken=adb9793829ddae60) at Microsoft.AspNetCore.Components.RenderTree.Renderer.AddToRenderQueue (Microsoft.AspNetCore.Components, Version=3.1.7.0, Culture=neutral, PublicKeyToken=adb9793829ddae60) at Microsoft.AspNetCore.Components.ComponentBase.StateHasChanged (Microsoft.AspNetCore.Components, Version=3.1.7.0, Culture=neutral, PublicKeyToken=adb9793829ddae60) at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContextDispatcher.InvokeAsync (Microsoft.AspNetCore.Components, Version=3.1.7.0, Culture=neutral, PublicKeyToken=adb9793829ddae60) at Telerik.Blazor.Components.RootComponent.TelerikFragmentContainer.Refresh (Telerik.Blazor, Version=2.16.0.0, Culture=neutral, PublicKeyToken=20b4b0547069c4f8) at Telerik.Blazor.Components.RootComponent.TelerikRootComponentFragment.Dispose (Telerik.Blazor, Version=2.16.0.0, Culture=neutral, PublicKeyToken=20b4b0547069c4f8) at Microsoft.AspNetCore.Components.Rendering.ComponentState.Dispose (Microsoft.AspNetCore.Components, Version=3.1.7.0, Culture=neutral, PublicKeyToken=adb9793829ddae60) at Microsoft.AspNetCore.Components.RenderTree.Renderer.Dispose (Microsoft.AspNetCore.Components, Version=3.1.7.0, Culture=neutral, PublicKeyToken=adb9793829ddae60)

Related:

https://feedback.telerik.com/blazor/1451036-system-objectdisposedexception-cannot-process-pending-renders-after-the-renderer-has-been-disposed-when-i-refresh-a-page-with-f5

https://feedback.telerik.com/blazor/1446870-window-throws-cannot-process-pending-renders-after-the-renderer-has-been-disposed-when-the-user-closes-the-page

Hi,

the Blazor form controls like DropDownList & ComboBox have a fixed width of 300px (why ???).

This does not respect the Boostrap 4 style guidelines and in a <form> looks like:

where the "Currency" field is a standard <select> and "Model Reader Engine" is a <TelerikDropDownList>.

If I try to set the "Width" attribute of the DropDownList to "100%" the result is:

but if I try to open the DropDown the element list is large as the entire screen:

Have you planned a fix for this ?

Thanks in advance

The Image Thumbnail Viewer Component should have features like:

• Face detection-based image cropping
• Overlay an image over detected faces [To hide faces]
• Blur or pixelate faces
• Thumbnail masking within different shapes like:
  • Circle
  • Square
  • Rectangle
  • Hexagon
  • Star etc.
• Content Aware Padding of images to fix the container size
• Set transparent background
• Text overlay
• Image watermark overlays
• Recolor a picture
• Antic Effect

This Thumbnail Viewer can then be used within Data Grid, File Manager/Explorer, Card View, Drop down lists, List Views, Tiles etc.

Just Moving from Ajax UI to Blazor

Used the search box a lot - multi-columns, had first match as typed toward an item,filtering, a click return the item selected

Wonderful

please can we have a blazor version?

Nick

Hi Team,

We are using Telerik Modal popup on the GridView edit click button.

This Modal Window moves out of the screen when user clicks on popup header click when there is a vertical page scrollbar and the scroll position is not top.

Can you please fix this bug? We implemented your workaround, but using that workaround with below link, after opening the popup, below screen automatically scrolls on top. This is not good user experience on lengthy page.

Expectation : Page scroll should stay with the previous position after opening the popup with scrollbar.

Modal Window moves away from the cursor on drag start when there is a vertical page scrollbar and the scroll position is not top (telerik.com)

Thanks,

Aarti Tare

I would like to be able to change the multiselect tags, mainly colors, forground and background, of both dropdown elements (shown in list) and selected values shown in textbox like the image bellow

Per API documentation, the Decimals property defaults to what is set in the user's region (culture). This is a flawed design.

Why would one think that ALL properties of type double or float in grid models should be truncated to 2 decimal places (when my region is set to US and that is the default)?

This seriously limits property values. Not everything is a dollar and cent value! The region setting I believe is for how to format general currency values perhaps (I am not exactly sure what it is for, because there is a different tab for 'Currency' with a 'No. of digits after decimal' setting as well as the tab for 'Numbers' having the same thing. But this does not mean that Windows always formats numbers that way.

Suppose for example I have a property in my model named "Weight" (expressed in terms of pounds). The value 150.12345 (pounds) is perfectly valid. It should not be truncated to 150.12. Or another, "Length" (expressed in terms of Feet): 17.0625 (that's 17 feet, 1 inch) - should not be morphed into 17.06.

To work around this, developers currently either have to override a <GridColumn>'s <EditorTemplate> and place a <TelerikNumericTextBox> element bound to the same property that the <GridColumn> is, and explictly set the Decimals property themselves.

Or what I have found is a better workaround, although not desirable to have to do this at all, is to put this kind of code snippet in the Program.cs file, right after the line var app = builder.Build();

app.UseRequestLocalization(action =>
{
   var currentCulture = CultureInfo.CurrentCulture.Clone() as CultureInfo;
   currentCulture!.NumberFormat.NumberDecimalDigits = 10; // for example, to allow this many decimal places in everything numeric
   var cultures = new List<CultureInfo>() { currentCulture };
   action.SupportedCultures = cultures;
});

Please remove the default value for the Decimals property being tied to the culture. It should just allow as many decimal places as a normal float or double would allow for its precision. Perhaps just allow a developer to set it and honor that, but if not set, basically let it be unlimited, just like the number of digits to the left of the decimal point.

What is the plan for docking control or  docking manager?

This Feature (above) would make my life more easily :) I mean custom main line, which shows, for example, how many items are selected.  The existing solution (below) does not work for me because of overflow behavior.

The File Manager (exactly like https://www.telerik.com/aspnet-core-ui/file-manager) for Blazor is needed.

I see there is the File Select Blazor FileSelect Component | Telerik UI for Blazor, but not File Manager that is a more complete and richer control.

I have a ComboBox that gets data from a remote service, using virtualization. When the PageSize property is big enough (in my case 20), I have issues scrolling down. I'm trying to scroll but it removes the input text.

You can use your own demo examples to replicate this issue. To reproduce the issue, try the ComboBox - Virtualization, in Telerik REPL (Demo). 

Trying to group by some nullable column. Expanding the group returns the entire dataset instead of only these rows with value == null.

Use case: Some users can not be assigned to any Team. Want to group by Teams and see users not assigned to any Team.

Steps to reproduce:

• Using Virtual Scrolling with OnRead method.
• Have a nullable column e.g. string?.
• Trying to group by this column gives unexpected results.

Expected results:

Expanding the group by not assigning Teams returns only these users what doesn't have any teams by applying filtering.

Actual results:

 Expanding the group by not assigning Teams returns all users without filtering.

Code:

@using Telerik.DataSource
@using Telerik.DataSource.Extensions

Scroll through the groups or expand them to load their data on demand

<TelerikGrid TItem="@object"
             LoadGroupsOnDemand="true"
             Groupable="true"
             OnStateInit="@((GridStateEventArgs<object> args) => OnStateInitHandler(args))"
             OnRead="@ReadItems"
             ScrollMode="@GridScrollMode.Virtual" PageSize="20" RowHeight="60"
             Navigable="true" Sortable="true" FilterMode="@GridFilterMode.FilterRow" Height="600px">
    <GridColumns>
        <GridColumn Field="@nameof(Employee.Name)" FieldType="@typeof(string)" Groupable="false" />
        <GridColumn Field="@nameof(Employee.Team)" FieldType="@typeof(string)" Title="Team" />
        <GridColumn Field="@nameof(Employee.Salary)" FieldType="@typeof(decimal)" Groupable="false" />
        <GridColumn Field="@nameof(Employee.IsOnLeave)" FieldType="@typeof(bool)" Title="On Vacation" />
    </GridColumns>
</TelerikGrid>

@code {
    List<object> GridData { get; set; }

    protected async Task ReadItems(GridReadEventArgs args)
    {
        // sample data retrieval, see comments in the service mimic class below
        DataEnvelope<Employee> result = await MyService.GetData(args.Request);

        if (args.Request.Groups.Count > 0)
        {
            args.Data = result.GroupedData.Cast<object>().ToList();
        }
        else
        {
            args.Data = result.CurrentPageData.Cast<object>().ToList();
        }

        args.Total = result.TotalItemCount;
    }

    void OnStateInitHandler(GridStateEventArgs<object> args)
    {
        // set initial grouping
        GridState<object> desiredState = new GridState<object>()
        {
            GroupDescriptors = new List<GroupDescriptor>()
            {
                new GroupDescriptor()
                {
                    Member = "Team",
                    MemberType = typeof(string)
                },
                new GroupDescriptor()
                {
                    Member = "IsOnLeave",
                    MemberType = typeof(bool)
                }
            }
        };

        args.GridState = desiredState;
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public string? Team { get; set; }
        public bool IsOnLeave { get; set; }
        public decimal Salary { get; set; }
    }

    public class DataEnvelope<T>
    {
        public List<AggregateFunctionsGroup> GroupedData { get; set; }
        public List<T> CurrentPageData { get; set; }
        public int TotalItemCount { get; set; }
    }

    public static class MyService
    {
        private static List<Employee> SourceData { get; set; }
        public static async Task<DataEnvelope<Employee>> GetData(DataSourceRequest request)
        {
            if (SourceData == null)
            {
                SourceData = new List<Employee>();
                var rand = new Random();
                for (int i = 1; i <= 3; i++)
                {
                    SourceData.Add(new Employee()
                    {
                        EmployeeId = i,
                        Name = "Employee " + i.ToString(),
                        Team = "Team " + i % 100,
                        IsOnLeave = i % 3 == 0,
                        Salary = rand.Next(1000, 5000)
                    });
                }
                SourceData.Add(new Employee()
                    {
                        EmployeeId = 3,
                        Name = "Employee " + 3.ToString(),
                        Team = null,
                        IsOnLeave = 3 % 3 == 0,
                        Salary = rand.Next(1000, 5000)
                    });
            }

            await Task.Delay(500);// deliberate delay to showcase async operations, remove in a real app

            // retrieve data as needed, you can find more examples and runnable projects here
            // https://github.com/telerik/blazor-ui/tree/master/grid/datasourcerequest-on-server
            var datasourceResult = SourceData.ToDataSourceResult(request);

            DataEnvelope<Employee> dataToReturn;

            if (request.Groups.Count > 0)
            {
                dataToReturn = new DataEnvelope<Employee>
                {
                    GroupedData = datasourceResult.Data.Cast<AggregateFunctionsGroup>().ToList(),
                    TotalItemCount = datasourceResult.Total
                };
            }
            else
            {
                dataToReturn = new DataEnvelope<Employee>
                {
                    CurrentPageData = datasourceResult.Data.Cast<Employee>().ToList(),
                    TotalItemCount = datasourceResult.Total
                };
            }

            return await Task.FromResult(dataToReturn);
        }
    }
}

Title: WCAG 4.1.2: Ensures elements with ARIA roles have all required ARIA attributes (.k-splitbar)
Tags: Accessibility, WCAG 4.1.2, aria-required-attr

Issue: Ensures elements with ARIA roles have all required ARIA attributes (aria-required-attr - https://accessibilityinsights.io/info-examples/web/aria-required-attr)

Target application: xxx

Element path: .k-splitbar

Snippet: <div tabindex="0" role="separator" class="k-splitbar k-splitbar-vertical k-splitbar-draggable-vertical">

How to fix: 
Fix any of the following:
  Required ARIA attribute not present: aria-valuenow

Environment: Microsoft Edge version 111.0.1661.41

====

This accessibility issue was found using Accessibility Insights for Web 2.37.3 (axe-core 4.6.3), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

=================== code ===============================