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

So, brand new machine (Win 11 pro 64bit), brand new install of Visual Studio & Telerik, use the Telerik templates to create a new Blazor Server project.

When I run the application (with changes or first run), it takes almost a minute to start the application.

Without changes it starts in 2 seconds.

The fix is to add the following to the application's csproj file.

  <PropertyGroup>
    <UseRazorBuildServer>false</UseRazorBuildServer>
  </PropertyGroup>

After the fix, it takes an just a little longer to run than without changes.  Since I have not heard back on my support ticket, I wanted to report this as a bug so hopefully it can get upvoted and we can get an answer to this issue. 

Original support ticket https://www.telerik.com/account/support-center/view-ticket/1621737 

My Setup:

7950x, 32 gb DDR5 ram, WD Black SSD 850x SSD and slower internet 150mbit/s

Similar problem with my new laptop which is about 50% slower but exactly the same issue.

Peter

https://docs.telerik.com/blazor-ui/components/grid/paging

Under the section "Bind Page Size to a variable", if you click preview it generates an error.

Peter

My grid bind to ExpandoObjects, and I would like to implement a Group Header.

So I referenced these two documents
https://docs.telerik.com/blazor-ui/knowledge-base/grid-binding-to-expando-object

https://docs.telerik.com/blazor-ui/components/grid/columns/multi-column-headers

From the first document, it make sense to me that we need to set FieldType for each column that binds to ExpandoObject, but it seems this restriction also applies to the group header column, which does not make sense.

Foe example:

<TelerikGrid Data="@GridData"
             Pageable="true"
             Sortable="true"
             FilterMode="@GridFilterMode.FilterRow">
    <GridColumns>
        <GridColumn Title="Test Group Header">
            <Columns>
                <GridColumn Field="PropertyInt" Title="Int Column" FieldType="@typeof(int)" />
                <GridColumn Field="PropertyString" Title="String Column" FieldType="@typeof(string)" />
                <GridColumn Field="PropertyDate" Title="DateTime Column" FieldType="@typeof(DateTime)" />
            </Columns>
        </GridColumn>
    </GridColumns>
</TelerikGrid>

I get error:

I need to set FieldType on the "Test Group Header" column to an arbitrary value to get rid of this error.

https://demos.telerik.com/blazor-ui/form/templates

When you edit in Telerik Repl, you get a warning message:

What was weird though, is when I ran it from directly from the link in the documentation, I didn't get an error.  I made one small change to the code (swapped line 54 and 55 (just seeing if I could change the rendering order, which I can) and then I saw this warning.  But any change to the code generates the warning.

Peter