Unplanned
Last Updated: 18 Sep 2024 22:12 by Andrew
Created by: Davide
Comments: 3
Category: Grid
Type: Feature Request
25
I'd like to be able to sort the grouped column.
In Development
Last Updated: 18 Sep 2024 12:57 by ADMIN
Scheduled for 2024 Q4 (Nov)

The problem is when filtering programmatically, the X that is normally used to clear the search box disappears.
I am following the Telerik guide here. https://docs.telerik.com/blazor-ui/components/grid/filter/searchbox

The problem is actually demonstrated in the example from that page.

Filtering by typing:

Filtering programatically:

Thanks.

 

Unplanned
Last Updated: 18 Sep 2024 11:47 by Lennert
Loading Groups on Demand in a column with a nullable data type groups all records under the "Null" group
In Development
Last Updated: 17 Sep 2024 17:30 by ADMIN
Scheduled for 2024 Q4 (Nov)

When filtering using a GridSearchBox - to filter across all columns, we have an issue where if you change a GridColumns Visible attribute to false that row will still be visible in the grid results even though it no longer matches the filter.

Take this snippet for example: Telerik REPL for Blazor - The best place to play, experiment, share & learn using Blazor.

1. Use Search box and search for a Name. e.g "Chang"

2. Click "Toggle Name Visibility" button

Expected: Since Name column is now hidden, the column should no longer be used in filter and the row should no longer be displayed. In reference to the GridSearchBox: https://docs.telerik.com/blazor-ui/components/grid/filter/searchbox#filter-from-code where it's mentioned that the search box will filter only on columns that are visible. It doesnt seem to refresh the filter.

Actual: Row still displayed even though it no longer matches filter

Just wanting to raise this as an issue and also hoping you may know a potential work-around for this?

A potential work-around I have tried is re-applying the existing filter in the search box by following documentation here in the "Filter From Code" section: https://docs.telerik.com/blazor-ui/components/grid/filter/searchbox#filter-from-code

While I am able to apply a filter from code I cannot seem to retrieve the value that is currently in the search box as I want to reuse it. How can I achieve this with a GridSearchBox? There doesnt seem to be a property available on the GridSearchBox component for binding it's value. Would I need to create a custom filter input to achieve this?

 

 

Unplanned
Last Updated: 16 Sep 2024 15:30 by Andrew
Created by: Simi
Comments: 2
Category: Grid
Type: Feature Request
18

Hello,

Please consider a Grid feature that changes the component layout on mobile devices or narrow screens. The idea is to switch the column layout to a card layout or anything similar to this example: https://css-tricks.com/responsive-data-tables/

It is possible to implement a similar behavior with the Telerik Blazor Grid and MediaQuery components, but it requires reusing the column titles in the CSS code: https://blazorrepl.telerik.com/GnYPmHFR176Jg5Yg02

===

Telerik Blazor team: Everyone who is interested in this feature, please vote for it to help us prioritize. Also, share your opinion about which Grid features you strictly need in the "mobile" layout and which ones you are ready to sacrifice. Some features don't make sense in a card / listview layout anyway, but still, the mobile-friendly Grid may require completely different HTML markup and UX, so some features may need to be completely revamped.

Completed
Last Updated: 13 Sep 2024 12:54 by ADMIN
Release 2024 Q4 (Nov)
Created by: Daniel
Comments: 0
Category: Grid
Type: Bug Report
1

I am trying to display a related virtual entity from an object in Grid. The List of objects is loaded using Entity Framework Core. I am certain that the related entities are loaded;

The transactions object that is returned ultimately to the TelerikGrid.Data definitely contain the related fields (checked with breakpoint).

Here is the grid I am using;

<TelerikGrid @ref="@SafexTransactionGrid" Data=@SafexContractTransactionGridData ConfirmDelete="true" Pageable="true" Groupable="true" Sortable="true" FilterMode="GridFilterMode.FilterMenu" Resizable="true" Reorderable="true" EditMode="GridEditMode.Popup" SelectionMode="GridSelectionMode.Multiple" PageSize="15" Navigable="true"> <GridColumns> ... <GridColumn Field="@nameof(SafexContractTransaction.Trader.Name)" Title="Trader Name" Editable="false"/> ... </GridColumns> </TelerikGrid> @code { private List<SafexContractTransaction> SafexContractTransactionGridData { get {

// returns all the data including populated Trader property

return FourtyTwoUnitOfWork.SafexContractTransactionRepo.GetAll(SafexContractGrid.SelectedItems);; } } } private TelerikGrid<SafexContractTransaction> SafexTransactionGrid { get; set; } }

Yet when the grid is displayed it does not contain the property. 

How can I solve this? 

Unplanned
Last Updated: 13 Sep 2024 10:04 by ADMIN

Problem Statement:
We have the following blazor grid:

We have enabled the GridColumnMenuSettings

Now when we open the column chooser it does not disable for the last option.



When we don't have the GridCheckboxColumn then it works as intended



The last column option is disabled


Expected Result : We don't want the check box column to be shown in the column chooser and the last option to be unchecked in the column chooser needs to be disabled.

Code snippet is as follows:
@* Use the Template to render the list of columns and add some custom styles *@ 

<TelerikGrid Data="@MyData"
             Pageable="true"
             PageSize="5"
             Width="700px"
             FilterMode="@GridFilterMode.FilterMenu"
             Sortable="true"
             ShowColumnMenu="true">
     <GridSettings>
     
     <GridColumnMenuSettings Sortable="true"
                             Lockable="false"
                             FilterMode="@ColumnMenuFilterMode.None" />
 </GridSettings>
    <GridColumns> 

 <GridCheckboxColumn Width="80px" HeaderClass="header-select-all" />   
        <GridColumn Field="@(nameof(SampleData.Id))" Width="80px" Title="Id" Id="id-column-id" />
        <GridColumn Field="@(nameof(SampleData.FirstName))" Title="First Name" Id="firstname-column-id" />
        <GridColumn Field="@(nameof(SampleData.LastName))" Title="Last Name" Id="lastname-column-id" />
        <GridColumn Field="@(nameof(SampleData.CompanyName))" Title="Company" Id="companyname-column-id" />
        <GridColumn Field="@(nameof(SampleData.Team))" Title="Team" Id="team-column-id" />
        <GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" Id="hiredate-column-id" />
    </GridColumns>
</TelerikGrid>

@code {
    public string TextboxValue { get; set; } = string.Empty;

    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
    {
        Id = x,
        FirstName = $"FirstName {x}",
        LastName = $"LastName {x}",
        CompanyName = $"Company {x}",
        Team = "team " + x % 5,
        HireDate = DateTime.Now.AddDays(-x).Date
    });

    public class SampleData
    {
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string CompanyName { get; set; }
        public string Team { get; set; }
        public DateTime HireDate { get; set; }
    }
}

Completed
Last Updated: 12 Sep 2024 13:42 by ADMIN
Release 2024 Q4 (Nov)
Use a Reorderable and Resizable Grid with more than one locked column, try to reorder the locked column then resize it. The position of the column is shifted to the right. This can be seen only if the scale factor of the display is more than 100%. The higher the scale factor, the more noticeable the bug (200%).
Completed
Last Updated: 12 Sep 2024 11:56 by ADMIN
Release 2024 Q4 (Nov)
When I autofit the width of any Grid column, the first one has null for Width when you GridRef.GetState()
Unplanned
Last Updated: 12 Sep 2024 05:58 by Sam

I have recently encountered an accessibility issue with the grid popup editor where the labels for the generated fields are not linked to their respective editor. It seems that the label does have a "for" attribute that is the same as the column title which I expect, but the Id of the input does not get set to the same thing. I can't see any option to make the association happen automatically.

===

ADMIN EDIT

===

A possible option for the time being is to use a custom popup edit form. You may either declare your desired custom content for the form and link the labels to their respective inputs or use the Form component with the field autogeneration feature which will automatically link the labels to the inputs.

Unplanned
Last Updated: 12 Sep 2024 01:44 by Federico
Created by: Igor
Comments: 3
Category: Grid
Type: Feature Request
25

In a grouped Grid with Incell editing if I collapse all groups and then expand one to edit an item in it, once I press Enter to complete the editing all groups expand.

Please add option for persisting the Collapsed State of the groups.

---

ADMIN EDIT

---

The feature applies to the other data operations as well (for example, paging, sorting).
Completed
Last Updated: 11 Sep 2024 10:21 by ADMIN
Release 2024 Q4 (Nov)

I have the foreign key issue that is described here:

https://docs.telerik.com/blazor-ui/knowledge-base/grids-foreign-key 

I am working with your grid and trying to implement the filter template. I am using the sample code on this page under the section Filter Menu Template:

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

For the text to display I want to use a List of objects that have 2 properties: an id and a text to display.

I have used the grouping header template and the editor template successfully with the foreign key.


My issue with the filter template is as follows:

1. Run the attached project

2. drop down the list

3. select one item

4. press Filter  (this works fine)

5. drop down the list

6. unselect the selected field

7. press Filter  (this does not work – the list is still filtered)

Completed
Last Updated: 11 Sep 2024 10:20 by ADMIN
Release 2024 Q4 (Nov)

I have enabled the Column Menu and I am using a Filter Menu Template with only one TextBox. With this setup I am able to only type one letter before the Filter Context is reset.

Reproduction: https://blazorrepl.telerik.com/wnYxagGE14oxMFH659.

Completed
Last Updated: 11 Sep 2024 10:20 by ADMIN
Release 2024 Q4 (Nov)

When using the Filter Menu inside the Column Menu filter value is reset if Rebind is called. For reference, if using FIlter Row or a standalone Filter Menu value is not reset upon invoking Rebind.

Reproduction: https://blazorrepl.telerik.com/mdOJYHas48vPCPUv47.

Completed
Last Updated: 11 Sep 2024 10:20 by ADMIN
Release 2024 Q4 (Nov)

Consider this test page: https://blazorrepl.telerik.com/cSEQOTQY53LRL4je36

  1. Check some checkboxes for the Name column and click on the Filter button. This works as expected.
  2. Uncheck all checkboxes in the Name column checkbox list and click on the Filter button again. This time, the previously checked checkboxes remain checked and the filters remain applied.

This happens only when using a column menu - ShowColumnMenu="true".

===

A possible workaround is to use a FilterButtonsTemplate and clear the filters programmatically if the filter descriptor is empty:

@using Telerik.DataSource
@using Telerik.DataSource.Extensions
 
<TelerikGrid TItem="@Employee"
             OnRead="@OnReadHandler"
             Pageable="true"
             FilterMode="@GridFilterMode.FilterMenu"
             FilterMenuType="@FilterMenuType.CheckBoxList"
             ShowColumnMenu="true"
             Height="400px">
    <GridColumns>
        <GridColumn Field="@(nameof(Employee.EmployeeId))" Filterable="false" />
        <GridColumn Field="@nameof(Employee.Name)">
            <FilterMenuTemplate Context="context">
                <TelerikCheckBoxListFilter Data="@NameOptions"
                                           Field="@(nameof(NameFilterOption.Name))"
                                           @bind-FilterDescriptor="@context.FilterDescriptor">
                </TelerikCheckBoxListFilter>
            </FilterMenuTemplate>
            <FilterMenuButtonsTemplate Context="filterContext">
                <TelerikButton OnClick="@( async () => await ApplyFilterAsync(filterContext) )"
                               ThemeColor="primary">Filter</TelerikButton>
                <TelerikButton OnClick="@( async () => await ClearFilterAsync(filterContext) )">Clear</TelerikButton>
            </FilterMenuButtonsTemplate>
        </GridColumn>
        <GridColumn Field="@nameof(Employee.Team)" Title="Team">
            <FilterMenuTemplate Context="context">
                <TelerikCheckBoxListFilter Data="@TeamsList"
                                           Field="@(nameof(TeamNameFilterOption.Team))"
                                           @bind-FilterDescriptor="@context.FilterDescriptor">
                </TelerikCheckBoxListFilter>
            </FilterMenuTemplate>
        </GridColumn>
        <GridColumn Field="@nameof(Employee.IsOnLeave)" Title="On Vacation" />
    </GridColumns>
</TelerikGrid>

@code {
    List<Employee> AllGridData { get; set; }

    #region custom-filter-data
    List<TeamNameFilterOption> TeamsList { get; set; }
    List<NameFilterOption> NameOptions { get; set; }

    private async Task ApplyFilterAsync(FilterMenuTemplateContext filterContext)
    {
        var hasFilters = filterContext.FilterDescriptor.FilterDescriptors.OfType<FilterDescriptor>().Any(x => !string.IsNullOrEmpty(x.Value.ToString()));

        if (hasFilters)
        {
            await filterContext.FilterAsync();
        }
        else
        {
            await filterContext.ClearFilterAsync();
        }
    }

    private async Task ClearFilterAsync(FilterMenuTemplateContext filterContext)
    {
        await filterContext.ClearFilterAsync();
    }

    //obtain filter lists data from the data source to show all options
    async Task GetTeamOptions()
    {
        if (TeamsList == null) // sample of caching since we always want all distinct options,
                               //but we don't want to make unnecessary requests
        {
            TeamsList = await GetNamesFromService();
        }
    }

    async Task<List<TeamNameFilterOption>> GetNamesFromService()
    {
        await Task.Delay(500);// simulate a real service delay

        // this is just one example of getting distinct values from the full data source
        // in a real case you'd probably call your data service here instead
        // or apply further logic (such as tie the returned data to the data the grid will have according to your business logic)
        List<TeamNameFilterOption> data = AllGridData.OrderBy(z => z.Team).Select(z => z.Team).
            Distinct().Select(t => new TeamNameFilterOption { Team = t }).ToList();

        return await Task.FromResult(data);
    }

    async Task GetNameOptions()
    {
        if (NameOptions == null)
        {
            NameOptions = await GetNameOptionsFromService();
        }
    }

    async Task<List<NameFilterOption>> GetNameOptionsFromService()
    {
        await Task.Delay(500);// simulate a real service delay

        List<NameFilterOption> data = AllGridData.OrderBy(z => z.Name).Select(z => z.Name).
            Distinct().Select(n => new NameFilterOption { Name = n }).ToList();

        return await Task.FromResult(data);
    }
    #endregion custom-filter-data

    async Task OnReadHandler(GridReadEventArgs args)
    {
        //typical data retrieval for the grid
        var filteredData = await AllGridData.ToDataSourceResultAsync(args.Request);
        args.Data = filteredData.Data as IEnumerable<Employee>;
        args.Total = filteredData.Total;
    }

    protected override async Task OnInitializedAsync()
    {
        AllGridData = new List<Employee>();
        var rand = new Random();
        for (int i = 1; i <= 15; i++)
        {
            AllGridData.Add(new Employee()
            {
                EmployeeId = i,
                Name = "Employee " + i.ToString(),
                Team = "Team " + i % 3,
                IsOnLeave = i % 2 == 0
            });
        }

        await GetTeamOptions();
        await GetNameOptions();
    }

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

    // in this sample we use simplified models to fetch less data from the service
    // instead of using the full Employee model that has many fields we do not need for the filters

    public class TeamNameFilterOption
    {
        public string Team { get; set; }
    }

    public class NameFilterOption
    {
        public string Name { get; set; }
    }
}

Completed
Last Updated: 10 Sep 2024 10:30 by ADMIN
Release 2024 Q4 (Nov)

When using the TelerikCheckBoxListFilter component in a FilterMenuTemplate, it does render a checkbox with a blank label, but selecting it does not generate a filter descriptor.

For reference, the built-in CheckBoxList filtering correctly filters null values.

Unplanned
Last Updated: 04 Sep 2024 10:18 by Mehdi

I want to filter a Grid by DateTimeOffset? field

 

===ADMIN EDIT===

There are two possible options:

1. Use a DTO in which you have a DateTime field converted as desired by your app from the DateTimeOffset. Filtering, sorting, editing, and grouping on DateTime values are supported out-of-the-box.

REPL example that demonstrates this approach. 

2. Use the Grid Filter Template. As a filter editor, you can use the DateTimePicker component, which supports the DateTimeOffset type. 

REPL example that demonstrates this approach. 

 

 

Unplanned
Last Updated: 03 Sep 2024 12:49 by Emmett
Created by: Brian
Comments: 5
Category: Grid
Type: Feature Request
25
I would like to use the endless scrolling feature (like in the Telerik UI for jQuery) with the Telerik Blazor Grid.
Completed
Last Updated: 03 Sep 2024 05:39 by ADMIN
Release 2024 Q4 (Nov)

I have a Grid with Navigable="true" and FilterRow. If I focus a string filter input and press the left/right arrow keys, the focus moves away from the cell. This behavior also occurs when I press up/down arrows in numeric filter inputs.

Reproduction: https://blazorrepl.telerik.com/GcvPkekt36Mxgygv07

Completed
Last Updated: 02 Sep 2024 12:51 by ADMIN
Release 2024 Q4 (Nov)

I am using InCell Grid editing. I want to prevent an edit cell from closing on certain condition. However, when I cancel the update with args.IsCancelled = true in OnUpdate, the user can still close the edited cell with Enter or Tab. This is inconsistent with inline or popup editing.

===

A possible workaround is to cancel both OnUpdate and the subsequent OnEdit.

https://blazorrepl.telerik.com/QykMHkks10APuDLQ47

@using System.ComponentModel.DataAnnotations

<TelerikGrid Data="@GridData"
             EditMode="@GridEditMode.Incell"
             OnEdit="@OnGridEdit"
             OnUpdate="@OnGridUpdate">
    <GridColumns>
        <GridColumn Field="@nameof(SampleModel.Name)" />
        <GridColumn Field="@nameof(SampleModel.Min)" />
        <GridColumn Field="@nameof(SampleModel.Max)" />
    </GridColumns>
</TelerikGrid>

<TelerikNotification @ref="@NotificationRef"
                     HorizontalPosition="@NotificationHorizontalPosition.Center"
                     VerticalPosition="@NotificationVerticalPosition.Top" />

@code {
    private TelerikNotification? NotificationRef { get; set; }

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

    private bool ShouldCancelOnEdit { get; set; }

    private int LastId { get; set; }

    private void OnGridEdit(GridCommandEventArgs args)
    {
        if (ShouldCancelOnEdit)
        {
            ShouldCancelOnEdit = false;
            args.IsCancelled = true;
        }
    }

    private void OnGridUpdate(GridCommandEventArgs args)
    {
        var updatedItem = (SampleModel)args.Item;

        if (updatedItem.Min > updatedItem.Max)
        {
            NotificationRef?.Show(new NotificationModel()
            {
                ThemeColor = ThemeConstants.Notification.ThemeColor.Error,
                Text = "Min must be smaller than Max"
            });

            args.IsCancelled = true;
            ShouldCancelOnEdit = true;
        }
        else
        {
            var originalItemIndex = GridData.FindIndex(i => i.Id == updatedItem.Id);

            if (originalItemIndex != -1)
            {
                GridData[originalItemIndex] = updatedItem;
            }

            ShouldCancelOnEdit = false;
        }
    }

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 5; i++)
        {
            GridData.Add(new SampleModel()
            {
                Id = ++LastId,
                Name = $"SampleModel {LastId}",
                Min = Random.Shared.Next(1, 10),
                Max = Random.Shared.Next(11, 20)
            });
        }
    }

    public class SampleModel
    {
        public int Id { get; set; }
        [Required]
        public string Name { get; set; } = string.Empty;
        public int Min { get; set; }
        public int Max { get; set; }
    }
}

1 2 3 4 5 6