Completed
Last Updated: 09 Apr 2020 20:38 by Daniel
Created by: Daniel
Comments: 4
Category: Grid
Type: Feature Request
1

Hi there,

currently the grid component does not provide a feature to set a specific position in virtual scrolling mode.

My team has currently implemented a workaround via javascript interop call to set a specific position. The workaround basically calculates the "scroll value" (we reverse engineered this value by looking at the Telerik js code) and passes it to the jQuery scrollTop() function. This results in an update of the scrollbar which in return triggers the OnReadItems event where we fetch the items based on the given skip and take values.

This workaround does not seem to work in all cases and is somewhat unreliable hence i'm requesting an official feature to set a specific position without the javascript hack.

What do you say?

So lonG

Daniel

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: 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,
    }
}
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.
Declined
Last Updated: 23 Nov 2023 11:28 by ADMIN

Looking through the examples I can't find one with SelectionMode="GridSelectionMode.Multiple" and using a RowTemplate.

ADMIN EDIT: This is not a bug in the component, an example of how this can be implemented by the app is available in the comments.

I'm not sure what I should be binding my checkbox to so it accurately reflects selection state.

From the RowTemplate Example adding SelectionMode:

<TelerikGrid Data=@GridData

@bind-SelectedItems="@SelectedItems"

SelectionMode="GridSelectionMode.Multiple" Height="@Height">

<RowTemplate Context="product">  @*Trying to inspect what is generated in the examples I came up with this, but not sure what to bind to checked*@

<td role="gridcell" colspan=0 data-col-index="0">
                    <span>
                        <input class="k-checkbox k-grid-checkbox telerik-blazor" type="checkbox" />
                    </span>
                </td>

<td> <img class="rounded-circle" src="@($"images/{product.ProductId}.jpg")" alt="Alternate Text" /> @product.ProductName </td> <td> @(String.Format("{0:C2}", product.UnitPrice)) </td> </RowTemplate> <GridColumns> <GridColumn Field=@nameof(Product.ProductName) Title="Product Name" /> <GridColumn Field=@nameof(Product.UnitPrice) Title="Unit Price" /> </GridColumns> </TelerikGrid>

Completed
Last Updated: 26 May 2020 00:56 by ADMIN
Release 2.14.0

In the following reproducible, try filtering the third column (SomeNavigationProperty.Field1). It does not work.

<TelerikGrid Data="@myData" Pageable="true" Sortable="true" FilterMode="@GridFilterMode.FilterRow" Groupable="true">
    <GridColumns>
        <GridColumn Field="@nameof(SampleComplexObject.ID)" Title="ID"></GridColumn>
        <GridColumn Field="@nameof(SampleComplexObject.Name)" Title="The Name"></GridColumn>
        <GridColumn Title="First Nested Property" Field="SomeNavigationProperty.Field1" />
        <GridColumn Field="SomeNavigationProperty.OtherField" />
    </GridColumns>
</TelerikGrid>


@code {
    public class SampleComplexObject
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public NestedObject SomeNavigationProperty { get; set; } // use this field name for data binding
    }

    public class NestedObject
    {
        public int Field1 { get; set; }
        public string OtherField { get; set; }
    }

    public IEnumerable<SampleComplexObject> myData = Enumerable.Range(1, 50).Select(x =>
            new SampleComplexObject
            {
                ID = x,
                Name = "Name " + x,
                SomeNavigationProperty = new NestedObject
                {
                    Field1 = x,
                    OtherField = "second " + x % 6
                }
            }
        );
}
Completed
Last Updated: 26 May 2020 00:55 by ADMIN
Release 2.14.0
When enabling keyboard navigation the DropDownList (does not expand the dropdown) and Numeric Textbox (the cell is losing focus when changing the value with the arrows) do not work properly. 
Declined
Last Updated: 01 Jun 2020 10:49 by ADMIN

row height set in grid definition must apply to all rows in the grid for row virtualization as of now. 

in real business case there might be complex content in each row that can't reinforce this - but if each row report its own height, grid still can visualize the load, and it will be much more flexible. 

Completed
Last Updated: 16 Sep 2020 16:17 by ADMIN
Release 2.18.0
I am using Chromium Edge and my monitor DPI is set to 125%. I have Virtual Scrolling enabled and when navigating up and down, sometimes, the data does not render, but only the loading indicators.
Duplicated
Last Updated: 24 Jun 2020 15:41 by ADMIN
I have a grid with many columns in a Blazor server app. If you have results in the grid the scrollbars appear. If you filter a column that you have to scroll to see and there are no results the grid clears, the scrollbars disappear and the column is again scrolled out of view. In this situation there is no way to clear the filter. I didn't see an option to always show the scrollbars.
Completed
Last Updated: 15 Jul 2020 13:14 by ADMIN
Release 2.16.0
This worked in 2.12.0, but not later and in the current latest 2.15.0 - as per https://docs.telerik.com/blazor-ui/components/grid/selection/overview#editing-modes
Completed
Last Updated: 15 Jul 2020 08:11 by ADMIN
Release 2.16.0
Created by: Jason
Comments: 0
Category: Grid
Type: Bug Report
1
  1. Go to https://demos.telerik.com/blazor-ui/grid/persist-state
  2. Click the Reset State button
  3. Try to reoder columns (e.g., drag the ID column to the end)
Completed
Last Updated: 04 Sep 2020 11:48 by ADMIN
Release 2.17.0
My column data remains in the wrong order when column virtualization is enabled. Without column virtualization the issue does not exist.
Completed
Last Updated: 20 Oct 2020 08:25 by ADMIN
Release 2.18.0
It use the OnCancel event to do some work and when it does not fire, I cannot invoke my logic.
Completed
Last Updated: 04 Feb 2021 00:31 by ADMIN
Release 2.22.0

When I have a Navigable grid and I press Esc on the keyboard while editing/inserting a row, I want to do something (e.g., clean up the newly inserted row altogether from the data). Usually, I can use the OnCancel event for this, but it does not fire when pressing the Esc key on the keyboard.

*** Thread created on customer behalf by admin ***

Completed
Last Updated: 30 Oct 2020 10:05 by ADMIN
Release 2.19.0
Created by: Jaco
Comments: 1
Category: Grid
Type: Bug Report
1

When I enter edit mode for a cell (I used InCell edit mode), the row height decreases.

 

*** Thread created by admin on customer behalf ***

Completed
Last Updated: 19 Apr 2021 17:04 by ADMIN
Release 2.24.0
Created by: Torsten
Comments: 1
Category: Grid
Type: Bug Report
1

Select one or more rows

Right click another of the rows (there is code in the OnContextMenu handler that changes the selected items to the currently clicked row)

<TelerikContextMenu @ref="@ContextMenuRef" Data="@MenuItems" OnClick="@((MenuItem item) => OnItemClick(item))"></TelerikContextMenu>

<TelerikGrid Data=@GridData
             @ref="Grid"
             SelectionMode="GridSelectionMode.Multiple"
             @bind-SelectedItems="@SelectedEmployees"
             @bind-Page="@CurrentPage"
             PageSize="@PageSize"
             OnRowContextMenu="OnContextMenu"
             Pageable="true">
    <GridColumns>
        <GridCheckboxColumn />
        <GridColumn Field=@nameof(Employee.EmployeeId) />
        <GridColumn Field=@nameof(Employee.Name) />
        <GridColumn Field=@nameof(Employee.Team) />
    </GridColumns>
</TelerikGrid>

@if (SelectedEmployees != null)
{
    <ul>
        @foreach (Employee employee in SelectedEmployees.OrderBy(e => e.EmployeeId))
        {
            <li>
                @employee.EmployeeId
            </li>
        }
    </ul>}

@code {
    public IEnumerable<Employee> SelectedEmployees { get; set; } = Enumerable.Empty<Employee>();
    TelerikContextMenu<MenuItem> ContextMenuRef { get; set; }
    TelerikGrid<Employee> Grid { get; set; }
    List<MenuItem> MenuItems { get; set; }
    int CurrentPage { get; set; } = 1;
    int PageSize { get; set; } = 5;

    //data binding and sample data
    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
            });
        }

        MenuItems = new List<MenuItem>()
    {
            new MenuItem(){ Text = "Delete", Icon = IconName.Delete, CommandName = "Delete"}
        };
    }

    protected async Task OnItemClick(MenuItem item)
    {
        if (item.Action != null)
        {
            item.Action.Invoke();
        }
        else
        {
            switch (item.CommandName)
            {
                case "Delete":
                    await Task.Delay(1); // do something

                    break;
            }
        }
    }

    protected async Task OnContextMenu(GridRowClickEventArgs args)
    {
        if (!(args.Item is Employee employee))
            return;

        SelectedEmployees = new List<Employee> { employee }; // this does not work

        if (args.EventArgs is MouseEventArgs mouseEventArgs)
        {
            await ContextMenuRef.ShowAsync(mouseEventArgs.ClientX, mouseEventArgs.ClientY);
        }
    }

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

    public class MenuItem
    {
        public string Text { get; set; }
        public string Icon { get; set; }
        public Action Action { get; set; }
        public string CommandName { get; set; }
    }
}

 

*** Thread created by admin on customer behalf ***

Completed
Last Updated: 22 Oct 2020 05:49 by ADMIN
Release 2.19.0
1. Go to the last page

1. Click the Previous page button in the pager


<TelerikGrid Data="@MyData" Pageable="true" Navigable="true">
    <GridColumns>
        <GridColumn Field="ID"></GridColumn>
        <GridColumn Field="TheName" Title="Employee Name"></GridColumn>
    </GridColumns>
</TelerikGrid>

@code {
    public IEnumerable<object> MyData = Enumerable.Range(1, 50).Select(x => new { ID = x, TheName = "name " + x });
}
Declined
Last Updated: 09 Sep 2020 16:26 by ADMIN

Hello,

When using grid command button edit with the onedit handler shown in this documentation https://docs.telerik.com/blazor-ui/components/grid/editing/inline

There is a bug that causes the grid to reset to the first page when editing the last item on any page that isn't the first. In other words we can edit the last item in the gird on the first page but not on the second, third, fourth...etc. 
I have taken out all the logic in my edit handler as well and the problem still presents itself. 

Below is the relevenat code sample and I have also zipped a short video demonstrating the behavior.

<TelerikGrid @ref="@GridNameHere"
                             Class="smallerFont"
                             Data="@DataHere"
                             Pageable="true"
                             Page="@Page"
                             PageSize="@PageSize"
                             TotalCount="@Total"
                             Sortable="@true"
                             Groupable="@false"
                             FilterMode="@GridFilterMode.FilterMenu"
                             Reorderable="@true"
                             OnEdit="@OnEdit"
                             OnUpdate="@OnUpdate"
                             OnCreate="@OnUpdate">
                    <GridToolBar>
                        <GridCommandButton Command="Add" Icon="add">Add</GridCommandButton>
                    </GridToolBar>
                    <GridColumns>
                        <GridCommandColumn Width="150px">
                            <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
                            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Save</GridCommandButton>
                            <GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
                        </GridCommandColumn>

                        <GridColumn Field="@(nameof(ModelName.FieldName))" Title="Column Name" Width="100px" />

                    </GridColumns>
                </TelerikGrid>

//Handler for edit

 protected void OnEdit(GridCommandEventArgs args)
{

// no code in here and problem still presents itself but feel free to put anything I recommend using the sample from the documentation above

}

Unplanned
Last Updated: 26 Sep 2020 08:23 by ADMIN
Created by: Jan Hindrik
Comments: 0
Category: Grid
Type: Feature Request
1

For example, when I have two levels of grouping, I want to render only the inner footer templates, but not the outer.

While this is possible with some CSS like the snippet below, this does not scale well, and does not work well for arbitrary number of groups

<style>
    .k-group-footer + .k-group-footer {
       display:none;
    }
</style>

Group by the Vacation and Team columns to see the effect

<TelerikGrid Data=@GridData Groupable="true" Pageable="true">
    <GridColumns>
        <GridColumn Field=@nameof(Employee.Name) Groupable="false" />
        <GridColumn Field=@nameof(Employee.Team) Title="Team">
            <GroupFooterTemplate>
                Team group footer
            </GroupFooterTemplate>
        </GridColumn>
        <GridColumn Field=@nameof(Employee.IsOnLeave) Title="On Vacation">
            <GroupFooterTemplate>
                IsOnLeave group footer
            </GroupFooterTemplate>
            </GridColumn>
    </GridColumns>
</TelerikGrid>

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

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

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