Completed
Last Updated: 21 May 2020 13:20 by ADMIN
Release 2.3.0
Created by: Rick
Comments: 3
Category: Grid
Type: Feature Request
13
Need ability to resize grid columns, currently only supports static width setting.  Please add Resizable similar to other Telerik grids.
Completed
Last Updated: 19 May 2020 07:25 by ADMIN
Release 2.14.0
Having a popup opened (such as the  filter menu or a date picker) and scrolling (or clicking a scrollbar - be that on the grid or not) throws an exception in WASM scenario. The error is "Error: Unknown edit type: 0"
Completed
Last Updated: 11 May 2020 08:25 by ADMIN
Release 2.13.0
I would like the children table row, when using the Grid to showcase details like in the Grid Hierarchy, to pick up the classes from their parent table row.
Unplanned
Last Updated: 10 May 2020 13:06 by Lee

For example, I'd like something like this:
Field Name: record.TotalSales -> Auto-generated column title: "Total Sales" with inserted space

ADMIN EDIT: See also the idea below about "AutoGeneratedTitles" Func<string, string> property where the user could perform whatever processing they liked upon the default value. Please leave your comment on what approach you would prefer to be exposed.

Completed
Last Updated: 29 Apr 2020 16:05 by ADMIN
Release 2.11.0

I want to fetch grid records page per page according to the appropriate filter settings. While this is possible through the OnRead event, I want to be able to send the request to the server so that it is easier to fetch the data, like in the UI for ASP.NET Core grid. Currently you can do this only for a server-side project because you can pass the request object by reference, but for a WASM project it needs to serialize in an HTTP request.

---

ADMIN EDIT

You can find examples of doing this here: https://github.com/telerik/blazor-ui/tree/master/grid/datasourcerequest-on-server

---

Declined
Last Updated: 29 Apr 2020 14:02 by ADMIN

 

@GridEditMode.Incell mode does not update automatically on row change when an editortemplate is used, as below

            <GridColumn Field=@nameof(ProjectRankingInfo.Ranking.Option2) Title="@Option2Title" Width="120px" Filterable="false">
                <EditorTemplate>
                    @{
                        currentItem = context as ProjectRankingInfo.Ranking;
                        <TelerikNumericTextBox Max="10" Min="0" Step="1" @bind-Value=@currentItem.Option2 />
                    }
                </EditorTemplate>
            </GridColumn>

 

one must click the update button for the update to occur,

 

Incell works fine and updates on row change for simple grid columns

ADMIN EDIT: SOLUTION: Read the details in the following article: https://docs.telerik.com/blazor-ui/components/grid/editing/incell#notes

ADMIN EDIT: this thread is rather long and I am adding the workaround offered by René here:

<TelerikGrid Data="@GridData" OnUpdate="@UpdateHandler"> ... </TelerikGrid>

 

In GridColumn
-------------------

<EditorTemplate>
   @{
         var item = context as MyModel;
         EditedItem = item;
         <TelerikNumericTextBox @bind-Value="@item.Number" OnChange="OnChangeItemHandler">
         </Telerik.Blazor.Components.TelerikNumericTextBox>
      }
</EditorTemplate>

 

In Code-Section
----------------------

protected MyModel EditedItem { get; set; }

protected void OnChangeItemHandler()
{
       var gridCommandEventArgs = new GridCommandEventArgs
       {
            Item = EditedItem
       };

        UpdateHandler(gridCommandEventArgs);
}

protected void UpdateHandler(GridCommandEventArgs args)
{
       var myModel = (MyModel)args.Item;

      // Save myModel to DB

      .....

}
Completed
Last Updated: 28 Apr 2020 16:40 by ADMIN
Release 2.13.0

Currently I need to define a custom JsonConverter to serialize the state of the grid.  I would prefer not to have to do this, however I understand that may just be the way things are for now.  Creating this ticket / issue to track if this is ever changed to not being needed.

For now I'll be setting up two serializers, one just for the grids that uses Newtonsoft, and the one I would prefer to use that uses System.Text.Json, https://github.com/Blazored/LocalStorage.

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

// to store the serialized grid state, we need to have a custom serialized // based on Newtonsoft.Json serialization. In the future this may not be required public class FilterDescriptorJsonConverter : JsonConverter {

///rest omitted

}

 

Completed
Last Updated: 27 Apr 2020 10:59 by ADMIN
Release 2.13.0

Reproducible

<TelerikButton OnClick="@(_ => _Splited = !_Splited)">Toggle columns - works fine</TelerikButton>
<br />Select a single row to see the error

<TelerikGrid Data="@GridData"
             Height="480px" RowHeight="40" PageSize="100" SelectionMode="@GridSelectionMode.Multiple"
             Sortable="true" FilterMode="@GridFilterMode.FilterMenu"
             SelectedItemsChanged="@((IEnumerable<Order> objectList) => OnSelect(objectList))"
             OnRead=@ReadOrders
             Pageable="true"
             Resizable="true"
             TotalCount=@TotalOrders>
    <GridColumns>
        <GridCheckboxColumn SelectAll="@ShowSelectAll"></GridCheckboxColumn>
        <GridColumn Field="@(nameof(Order.Id))" Title="@(nameof(Order.Id))" />
        @if (!_Splited)
        {
            <GridColumn Field="@(nameof(Order.Name))" Title="@(nameof(Order.Name))" />
            <GridColumn Field="CreatedAt">
                <Template>
                    @((context as Order).CreatedAt.ToString("dd.MM.yyyy - HH:mm"))
                </Template>
            </GridColumn>
            <GridColumn Field="@(nameof(Order.State))" Title="@(nameof(Order.State))" />
        }
        else
        {
            <GridColumn Field="@(nameof(Order.Name))" Title="@(nameof(Order.Name))" />
            <GridColumn Field="@(nameof(Order.State))" Title="@(nameof(Order.State))" />
        }

    </GridColumns>
</TelerikGrid>

@code {

    bool ShowSelectAll;
    bool _Splited = false;
    public int TotalOrders { get; set; } = 1000;

    public IEnumerable<Order> GridData { get; set; }

    protected override async Task OnInitializedAsync()
    {
    }

    protected async Task OnSelect(IEnumerable<Order> objectList)
    {
        if (objectList.Count() == 1) // considered as single select, so it goes to SplitView and the list needs to shrink
        {
            _Splited = true;
        }
        else // it's in the multi-select mode, so it stays or gets back to the list
        {
            _Splited = false;
        }
    }

    private async Task<IEnumerable<Order>> LoadData()
    {
        var OrderData = new List<Order>();
        for (int i = 1; i < 1001; i++)
        {
            OrderData.Add(new Order()
            {
                Id = Guid.NewGuid(),
                Name = $"Order {i}",
                CreatedAt = DateTime.Now.AddDays((Convert.ToInt32(new Random().Next(10)))),
                State = (OrderState)new Random().Next(0, 2),
            });
        }

        return OrderData.AsEnumerable();
    }

    protected async Task ReadOrders(GridReadEventArgs args)
    {
        int pageNo = args.Request.Page;
        int pageSize = 100;
        var totalData = await LoadData();
        GridData = totalData.Skip(pageSize * (pageNo - 1)).Take(pageSize);
    }


    public class Order
    {
        public Guid Id { get; set; }
        public string Name { get; set; }
        public DateTime CreatedAt { get; set; }
        public OrderState State { get; set; }

    }

    public enum OrderState
    {
        Open,
        Canceled,
        Closed,
    }
}
Unplanned
Last Updated: 24 Apr 2020 10:12 by ADMIN
Created by: Viktorija
Comments: 1
Category: Grid
Type: Feature Request
6

We are using Grid control with OData source (ToODataString() exstension) and OnRead event. When we try to group by some column, it douesn't work. OData query to API is same and OnRead event fires but grid not grouping.

Completed
Last Updated: 23 Apr 2020 10:29 by ADMIN
Release 2.13.0

Reproducible:

 

@using System.Collections.ObjectModel;

<div style="align-self:center;text-align:center" class="alert-danger">
    @errorMessages
</div>
<div style="align-self:center;text-align:center" class="alert-success">
    @successMessages
</div>
<TelerikGrid Data=@entitlementsExtended
             Pageable="true"
             Groupable="false"
             PageSize="@PageSize"
             OnUpdate="@UpdateHandler"
             Sortable="false"
             FilterMode="Telerik.Blazor.GridFilterMode.FilterMenu">
    <GridColumns>
        <GridColumn Field="@nameof(EntitlementValueDTOExtended.Description)" Editable="false" />
        <GridColumn Field=@nameof(EntitlementValueDTOExtended.Value)>
            <EditorTemplate>
                @{
                    CurrentlyEditedEntitlement = context as EntitlementValueDTOExtended;
                    <div>
                        <TelerikDropDownList Data="@entitlementOptions" @bind-Value="CurrentlyEditedEntitlement.Value" Width="60px" PopupHeight="auto"></TelerikDropDownList>
                    </div>
                }
            </EditorTemplate>
        </GridColumn>

        <GridCommandColumn Width="300px">
            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
            <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
            <GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@code {
    int PageSize = 10;
    public EntitlementValueDTOExtended CurrentlyEditedEntitlement { get; set; } = new EntitlementValueDTOExtended();

        //changing this to List<> works
    public ObservableCollection<EntitlementValueDTOExtended> entitlementsExtended { get; set; } = new ObservableCollection<EntitlementValueDTOExtended>();

    public static List<string> entitlementOptions = new List<string> { "I", "E" };

    public string errorMessages { get; set; } = "";
    public string successMessages { get; set; } = "";

    protected async override Task OnInitializedAsync()
    {
        IEnumerable<int> entitlements = Enumerable.Range(1, 50);

        //this is a simplified workaround for people needing nested models
        foreach (var entitlement in entitlements)
        {
            EntitlementValueDTOExtended entitlementExtended = new EntitlementValueDTOExtended();
            entitlementExtended.Id = Guid.NewGuid();
            entitlementExtended.Description = $"descr {entitlement}";
            entitlementExtended.Value = $"value {entitlement}";
            entitlementExtended.EntitlementTypeId = entitlement;

            entitlementsExtended.Add(entitlementExtended);
        }
        StateHasChanged();

        await base.OnInitializedAsync();
    }

    public async Task UpdateHandler(GridCommandEventArgs args)
    {
        EntitlementValueDTOExtended item = (EntitlementValueDTOExtended)args.Item;

        var matchingItem = entitlementsExtended.FirstOrDefault(c => c.Id == item.Id);
        if (matchingItem != null)
        {
            matchingItem.Description = item.Description;
            matchingItem.EntitlementTypeId = item.EntitlementTypeId;
            matchingItem.Value = item.Value;
        }

        successMessages = $"updated grid on {DateTime.Now}";
        StateHasChanged();

    }

    public class EntitlementValueDTOExtended
    {
        public Guid Id { get; set; }
        public string Description { get; set; } = "";
        public string Value { get; set; } = "";
        public int EntitlementTypeId { get; set; } = 0;
    }

Completed
Last Updated: 22 Apr 2020 16:18 by ADMIN
Release 2.11.0
Created by: devon
Comments: 17
Category: Grid
Type: Feature Request
43

ADMIN EDIT: The following knowledge base article has been updated to explain how to use nested models: https://docs.telerik.com/blazor-ui/knowledge-base/grid-bind-navigation-property-complex-object

 

At the moment, you must use flat models with primitive types for binding the grid. If you don't, the data source operations break and they can't even display "nested" values. Examples here and here.

I would like to be able to use my complex models so I can point a grid's column to a field like MyModel.MyNestedModel.MyPrimitiveField

My be related to binding to a data table and dynamic expando.

Completed
Last Updated: 20 Apr 2020 07:44 by ADMIN
Release 2.11.0
Using the mouse to edit boolean fields does not update the state of the field, clicking away may not even close the editor (similar to this)
Completed
Last Updated: 20 Apr 2020 06:26 by ADMIN
Release 2.11.0
Pressing enter should only commit the cell, but it keeps it open (fires OnUpdate correctly, but reopens the cell).
Declined
Last Updated: 17 Apr 2020 18:59 by ADMIN

TelerikGird with virtual scrolling was working in version 2.7, but after upgrading to 2.10, it is only showing placeholders.

When scrolling, it shows the values for a split second, but then those get replaced by the placeholders.

 

@page "/test"

<TelerikGrid Data=@GridData
             SelectionMode="GridSelectionMode.Single"
             ScrollMode="GridScrollMode.Virtual"
             Height="300px" RowHeight="20">
    <GridColumns>
        <GridColumn Field=@nameof(Employee.Name) />
        <GridColumn Field=@nameof(Employee.Team) Title="Team" />
    </GridColumns>
</TelerikGrid>

@code {
    public List<Employee> GridData { get; set; }

    protected override void OnInitialized()
    {
        GridData = new List<Employee>();
        for (int i = 0; i < 15; i++)
        {
            GridData.Add(new Employee()
            {
                EmployeeId = i,
                Name = "Employee " + i.ToString(),
                Team = "Team " + i % 3
            });
        }
    }

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

Won't Fix
Last Updated: 16 Apr 2020 09:31 by ADMIN
Scheduled for 2.11.0

A workaround is to initialize the collection of the selected items:

<TelerikButton OnClick="@LoadData">Load Data</TelerikButton>

<TelerikGrid Data=@adminUsers Height="300px" Pageable=true PageSize=10 SelectionMode="@GridSelectionMode.Multiple"
             @bind-SelectedItems="SelectedAdminUsers">
    <GridColumns>
        <GridCheckboxColumn SelectAll="true"></GridCheckboxColumn>
        <GridColumn Field=@nameof(User.DisplayName) Title="User Name" />
        <GridColumn Field=@nameof(User.Department) Title="Department" />
        <GridColumn Field=@nameof(User.Status) Title="Status" />
        <GridColumn Field=@nameof(User.EmployeeId) Title="Employee Id" />
    </GridColumns>

</TelerikGrid>

@code
{
    public IEnumerable<User> SelectedAdminUsers { get; set; } = Enumerable.Empty<User>();

    public List<User> adminUsers { get; set; }

    void LoadData()
    {
        adminUsers = Enumerable.Range(1, 200).Select(x => new User
        {
            EmployeeId = x,
            Status = $"status {x}",
            Department = $"department {x}",
            DisplayName = $"name {x}"
        }
        ).ToList();
    }

    public class User
    {
        public string DisplayName { get; set; }
        public string Department { get; set; }
        public string Status { get; set; }
        public int EmployeeId { get; set; }
    }
}

Completed
Last Updated: 16 Apr 2020 08:10 by ADMIN
Release 2.11.0

Reproducible 

 

@page "/"

@inject NavigationManager NavMan

<TelerikGrid Data=@GridDataToShow
             SelectionMode="GridSelectionMode.Single"
             SelectedItemsChanged="@((IEnumerable<Employee> employeeList) => OnSelect(employeeList))"
             Pageable="true"
             Height="300px">
    <GridColumns>
        <GridColumn Field=@nameof(Employee.Name) />
        <GridColumn Field=@nameof(Employee.Team) Title="Team" />
    </GridColumns>
</TelerikGrid>

@code {
    public List<Employee> GridData { get; set; }
    public Employee SelectedEmployee { get; set; }
    public List<Employee> GridDataToShow // this causes the issue
    {
        get
        {
            return GridData.OrderBy(x => x.EmployeeId).ToList();
        }
    }

    protected override void OnInitialized()
    {
        GridData = new List<Employee>();
        for (int i = 0; i < 15; i++)
        {
            GridData.Add(new Employee()
            {
                EmployeeId = i,
                Name = "Employee " + i.ToString(),
                Team = "Team " + i % 3
            });
        }
    }

    protected async Task OnSelect(IEnumerable<Employee> employees)
    {
        Console.WriteLine("aaa");


        SelectedEmployee = employees.FirstOrDefault();

      //  NavMan.NavigateTo("counter");
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
    }
}
Completed
Last Updated: 14 Apr 2020 15:40 by ADMIN
Release 2.11.0
Created by: Gordon
Comments: 2
Category: Grid
Type: Feature Request
5

Is there any way to default the values that are used when I create a new row?

So for example, I have a row where I want to default a date to Jan 1st of the following year.  However, when I add the row, it adds nulls to all fields and the date shows up as 1 Jan 1900 and there's a lot of fiddly clicking to set the right date.

Completed
Last Updated: 14 Apr 2020 15:15 by ADMIN
Release 2.11.0
Created by: Heiko
Comments: 3
Category: Grid
Type: Feature Request
8
It would be nice if the title of a column is fetched from Display(...) or DisplayName(...) attribute of field.
Completed
Last Updated: 14 Apr 2020 12:25 by ADMIN
Release 2.11.0

Grid with Checkbox Column throws the following error when placed inside EditForm:

InvalidOperationException: Telerik.Blazor.Components.TelerikCheckBox`1[System.Nullable`1[System.Boolean]] requires a value for the 'ValueExpression' ValueExpression is provided automatically when using 'bind-Value'.

Completed
Last Updated: 10 Apr 2020 09:08 by ADMIN
Created by: Nick
Comments: 2
Category: Grid
Type: Feature Request
18
It would be useful to be able to set the sorting of the grid programmatically.

In my particular scenario we have an existing system which is very flexible and has user created entities. We already have the idea of "view definitions" which are used to define how a list of entities (for example companies or contacts) is displayed in a grid format. This view definition contains our own version of sort descriptors to tell us what the initial sorting should be.

I am getting the data using our existing API in the ReadItems method. Because I already have the view definition I can pass our sort descriptor to our API and it returns the data pre-sorted (it also handles paging). I would then like to be able to tell the grid which columns I have sorted by so it could be represented in the UI with the arrow. The grid doesn't actually have to sort the data.

Here is a more detailed description of the case: https://www.telerik.com/forums/grid-questions-07d1fe846889#RgZmmE2avUaSOsIcprdOMg.