Hi, 

Are you planning to add a loader to the grid in the feature?

E.g as an isLoading attribute or exepnd the build-in one?

With method OnRead to fetch data, when grid is not yet loaded with data, it displays no records available.

Also when chenging data, loading is not starting, but there is an unsmooth transition after some time. 

Thanks in advance for your time, Kacper

I have a scenario in which we have user definable columns for a grid, including hundreds if not thousands that need to be ported from the old version of our product. This means these column keys would be strings that may contain spaces or even special characters - and as such cannot be a valid C# property name (which means using an ExpandoObject approach will not work)

It would be really beneficial if the TelerikGrid component could be given Data of an IEnumerable<Dictionary<string, object>> where the Field property of GridColumn (or a new property) would line up with a key in that dictionary rather than a field name for the component to then use reflection with.

A customer with multiple modules of our product installed may very well have columns with similar names, i.e "Some Key", "SomeKey", "Some_Key", "Some & Key" - so simply replacing spaces or special characters may not always still give unique keys.

We are using Telerik UI for Blazor (V6.2.0) grid. The first 3 columns (Delivery No, Spot Check, Spotcheck Status) of the grid are frozen/locked. While horizontal scrolling the header text gets overlapped. We have used custom CSS to change the header color.

<TelerikGrid @ref="@GridRef" Data="@dashboardData"
             Reorderable="true"
             SortMode="@SortMode.Single"
             Pageable="true"
             FilterMode="GridFilterMode.FilterRow"
             PageSize="10"
             EnableLoaderContainer="true"
             Sortable="true" Context="inboundContext" OnRowRender="@OnRowRenderHandler" Width="1800px" Height="500px">

Creating a new WebApp project template through the extension fails to build. This is caused by incorrect icon type in the MainLayout.razor file.

To make sure the app is correctly built, the Icon type should be FontIcon.

<TelerikButton Icon="@FontIcon.Menu"
               FillMode="@ThemeConstants.Button.FillMode.Clear"
               OnClick="@( () => DrawerExpanded = !DrawerExpanded )" />

It appears there are some issues with encoding special characters in the DataSourceExtensions.ToODataString extension method.

See snippet below. 

var ds = new DataSourceRequest()
{
	Filters = [new FilterDescriptor("FieldName", FilterOperator.IsEqualTo, "Route #")],
	Sorts = []
};
{

Console.WriteLine(ds.ToODataString());

After reading your documentation, it appears that the Pager Position enum only allows for the grid pager to be at the top OR the bottom of the grid.

It would be most excellent to allow it to be BOTH. For very large grids, it would be convenient for the user to see the grid at the very top, but if they do happen to need to scroll to the very bottom of the grid, seeing the pager component there would also be convenient for the user.

This is in regard to this page:
https://www.telerik.com/blazor-ui/documentation/components/grid/paging

Please add a .Both option to the PagerPosition enum that allows both Top and Bottom at the same time.

Thanks! :)

=== EDITED BY TELERIK ===

When using nullable enums, their DisplayNameAttrute doesn't show in the Grid.

https://blazorrepl.telerik.com/QTOlwiaM456Yh9Xp33

The bug is related to Enum DisplayName attributes are ignored in view mode of the Grid

=== ORIGINAL POST CONTENT ===

Sample Code to reproduce the error: 

https://blazorrepl.telerik.com/QzYPGLFj11s0rZwp47

If you change line 44 to a non-nullable field type, it crashes the grid with an error message in the CSS file.  I have included the error message I get in my blazor app with the same code above, console then sources:

Within the grids, be able to filter and group using And & Or statements.  The following is our design.

I recently had a breakthrough moment in my journey learning and using Telerik Blazor that I believe highlights a crucial area for improvement in your documentation strategy. I believe that this will significantly help me learn and use your components,  I suspect others may still fall into the same trap as me.  I'm confident that implementing this suggestion will make the learning process considerably easier for all users.

As a developer with over 35 years of experience, my initial approach to learning new technologies is to rely heavily on official documentation. I expect to find comprehensive resources that facilitate a smooth learning curve. However, after years of struggling with Telerik Blazor components, I stumbled upon the Component Demos section (https://demos.telerik.com/blazor-ui). This discovery, triggered by a specific Google search for "telerik blazor drawer submenu," is a game-changer.

The Component Demos contain a wealth of practical examples for each component, offering invaluable "cut-and-paste" starting points. Before this, I primarily relied on StackOverflow and other online resources and until today, I finally landed on the Telerik Blazor Component demos. The fact that I have been unaware of this resource for so long represents a significant shortcoming in the current documentation.  How easy it would be to add a link in the overview to the component's demos which would have saved me countless hours of trying to solve problems that have already been solved on the demos page, like the Drawer submenu mentioned above.

   Integrating direct links to each component's respective demo page within the main documentation would dramatically improve the discover-ability of these demos and empower users to independently solve many common challenges. Currently, the limited examples within the documentation are insufficient for comprehensive understanding.

In summary, prominently featuring the Component Demos within the core Telerik Blazor documentation would vastly enhance the learning experience, reduce support requests, and empower developers to utilize the full potential of your components.

Peter

We would like the ability to customize the calendar's month header.

For instance, we would like to add a row displaying the month name and year, as shown in the attached screenshot.

Describe the bug

The class 'k-tabstrip' item is missing in the rendering of the TabStrip component.

To Reproduce

1. Go to the following demo and open the DevTools:

https://demos.telerik.com/blazor-ui/tabstrip/overview

2. Check the source of truth:

https://github.com/telerik/kendo-themes/blob/develop/tests/tabstrip/tabstrip.html 

Actual results

The class 'k-tabstrip-item' is missing.

Expected behavior

The class 'k-tabstrip-item' to be present.

Additional context

ThemeBuilder generates styles for the items of the TabStrip component with selectors like these:

.k-tabstrip .k-tabstrip-items-wrapper .k-tabstrip-items.k-reset.k-tabstrip-items-start .k-item.k-tabstrip-item.k-active .k-link

This works in other technologies, such as Kendo React, but it doesn't take effect in Blazor applications because of the issue.

Reported through t.1672526.

For example, selecting Bootstrap-Main-Dark theme in the Project Wizard does not apply the dark mode.

===ADMIN EDIT===

For the time being, a possible workaround is to manually add class="k-body" to the <body> tag of your application. This will ensure, that the dark mode is correctly applied. This is required because, by design, the Default theme does not enable the typography system. The "k-body" class is required for the typography system to work properly on the document level and apply the predefined typography values to the page. For more detailed information, refer to Design System Documentation.

Good Morning,

I have recently started getting random and repeated Javascript errors when debugging my project using your controls for Blazor.  It is completely random (sometimes happens immediately at project start, sometimes when navigating to a new page, sometimes when interacting with a control).  It is ALWAYS the same error....

TypeError: Cannot read properties of undefined (reading 'visible') 

Message=
  Source=
  StackTrace:
  at __webpack_modules__.8219.constructor.onMouseEnter (https://localhost:44307/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js?v=ITaQSsBTBmdJoUpPr2KiZ7JwhfKjwa7SGa6zvlv9kkU:50:1442661)

I am using the most current version of your product.  I have gone through your "Javascript Errors" page and have worked through all the suggestions.  Nothing resolves it.

This is becoming a giant time sink while trying to work on a project.  What can we do to get appropriate error handling on your end to prevent these issues?

Thanks

Hi,

I haven't been able to find this as a request or as a topic of discussion (If it iss feel free to point me to it and close this request) but I feel the Grouping feature is limiting. If I use the group field in say the DropDownList the grouping works fine but it orders it alphabetically.

I propose adding a number of features to enhance this. The first being a GroupAscending or GroupDescending tag. Takes a boolean value and allows you to change the order to ascending (default/True) or descending (False).

The second, and more complicated feature upgrade could be a GroupOrder tag. This would take a List of the group field names ordered in the way you require and apply that order to the grouping in the DropDownList. for instance if you had the list ordered as Category 1, Category 3, Category 2 it would display the items in each grouping in that order top to bottom.

Regards,

Luke

We find this in our infrastructure but it can be reproduced even in Telerik docs.

Docs page: https://docs.telerik.com/blazor-ui/components/grid/grouping/overview try to drop all three columns using drag and drop in sequence: Team, Name, On Vacation.

Expected sequence: Team, Name, On Vacation

Expected sequence: Team, On Vacation, Name

All Elements are always added as 1 item. It is an important feature for us, as our customers use it frequently.

===

TELERIK EDIT:

A possible workaround is to intercept the grouping and reorder the groups:

@using Telerik.DataSource

<p>Group by a third column, so that it should come last in the Group Panel:</p>

<TelerikGrid @ref="@GridRef"
             Data="@GridData"
             Pageable="true"
             Sortable="true"
             Groupable="true"
             FilterMode="GridFilterMode.FilterRow"
             OnStateInit="@( (GridStateEventArgs<Employee> args) => OnGridStateInit(args) )"
             OnStateChanged="@( (GridStateEventArgs<Employee> args) => OnGridStateChanged(args) )">
    <GridColumns>
        <GridColumn Field="@nameof(Employee.Name)" />
        <GridColumn Field="@nameof(Employee.Team)" />
        <GridColumn Field="@nameof(Employee.Salary)" />
        <GridColumn Field="@nameof(Employee.OnVacation)" />
    </GridColumns>
</TelerikGrid>

@code {
    private TelerikGrid<Employee>? GridRef { get; set; }

    private List<Employee> GridData { get; set; } = new();

    private void OnGridStateInit(GridStateEventArgs<Employee> args)
    {
        args.GridState.GroupDescriptors = new List<GroupDescriptor>();

        args.GridState.GroupDescriptors.Add(new GroupDescriptor()
        {
            Member = nameof(Employee.Team),
            MemberType = typeof(string)
        });

        args.GridState.GroupDescriptors.Add(new GroupDescriptor()
        {
            Member = nameof(Employee.OnVacation),
            MemberType = typeof(bool)
        });
    }

    private async Task OnGridStateChanged(GridStateEventArgs<Employee> args)
    {
        if (args.PropertyName == "GroupDescriptors" && args.GridState.GroupDescriptors.Count > 2 && GridRef != null)
        {
            var secondGroupDescriptor = args.GridState.GroupDescriptors.ElementAt(1);

            args.GridState.GroupDescriptors.Remove(secondGroupDescriptor);
            args.GridState.GroupDescriptors.Add(secondGroupDescriptor);

            await GridRef.SetStateAsync(args.GridState);
        }
    }

    protected override void OnInitialized()
    {
        var rnd = new Random();

        for (int i = 1; i <= 20; i++)
        {
            GridData.Add(new Employee()
            {
                Id = i,
                Name = "Name " + i,
                Team = "Team " + (i % 4 + 1),
                Salary = (decimal)rnd.Next(1000, 3000),
                OnVacation = i % 3 == 0
            });
        }
    }

    public class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public string Team { get; set; } = string.Empty;
        public decimal Salary { get; set; }
        public bool OnVacation { get; set; }
    }
}

https://docs.telerik.com/blazor-ui/common-features/icons#icon-nuget-packages

When you click "Preview" under Using TelerikFontIcon, the preview is blank, even if I scroll to the top, still nothing.

Hi

I don't understand the text in this yellow info box: "You can define a key for zooming only selection zooming is configured." Is there a word missing?

https://docs.telerik.com/blazor-ui/components/chart/pan-and-zoom/zoom#specifying-a-key-for-zooming

https://docs.telerik.com/blazor-ui/knowledge-base/inputs-validation-child-component

Number of typos where "Fied" should be "Field".  

1 minute fix, just looks bad.  4x in MyCustomComponent and in MainComponent. 

Peter