Unplanned
Last Updated: 14 May 2021 06:03 by ADMIN

Using mobile browser (Safari iOS or Chrome Android)
Go to demo grid page
https://demos.telerik.com/blazor-ui/grid/overview
Click any grid's filter menu which contains text field
Try to enter text into textbox.
The filter menu automatically closed, so you can't enter anything

---

ADMIN EDIT

this happens because the keyboard pops up, changes the screen size and may even scroll the page, and both of these events hide the popup menu.

A workaround could be using the filter row mode, with the caveat that it takes up more space on the initial rendering, and that filtering happens immediately.

---

Unplanned
Last Updated: 14 May 2021 05:48 by ADMIN
Created by: Danilo
Comments: 3
Category: Grid
Type: Feature Request
15

I have a grid with the excell Export. Now I have two custom Export buttons on the Page (Over and under the Grid).

Can I somehow trigger the Grid Excell Export command Manually? 

---

ADMIN EDIT

Here is a workaround - a bit of JS to click the desired button and the second snippet shows how to invoke it from a blazor component and code.

 <script>
        function clickButton(selector) {
            var btn = document.querySelector(selector);
            if (btn && btn.click) {
                btn.click();
            }
        }
    </script>

@inject IJSRuntime _js

<style>
    /* hide the built-in button if you like */
    .myExcelExportButton {
        display:none;
    }
</style>

<button @onclick="@MyExternalExportTrigger">my external export button</button>

<TelerikGrid Data="@GridData" Pageable="true" Sortable="true" Resizable="true" Reorderable="true"
             FilterMode="@GridFilterMode.FilterRow" Groupable="true"
             Class="@GridClass">
    <GridToolBar>
        <GridCommandButton Class="@ExportBtnClass" Command="ExcelExport" Icon="@IconName.FileExcel">Export to Excel</GridCommandButton>
        <label><TelerikCheckBox @bind-Value="@ExportAllPages" />Export All Pages</label>
    </GridToolBar>
    <GridExport>
        <GridExcelExport FileName="telerik-grid-export" AllPages="@ExportAllPages" />
    </GridExport>

    <GridColumns>
        <GridColumn Field="@nameof(SampleData.ProductId)" Title="ID" Width="100px" />
        <GridColumn Field="@nameof(SampleData.ProductName)" Title="Product Name" Width="300px" />
        <GridColumn Field="@nameof(SampleData.UnitsInStock)" Title="In stock" Width="100px" />
        <GridColumn Field="@nameof(SampleData.Price)" Title="Unit Price" Width="200px" />
        <GridColumn Field="@nameof(SampleData.Discontinued)" Title="Discontinued" Width="100px" />
        <GridColumn Field="@nameof(SampleData.FirstReleaseDate)" Title="Release Date" Width="300px" />
    </GridColumns>
</TelerikGrid>

@code {
    // cascade through classes on the grid and/or on the built-in button to click it with JS
    // so that it can invoke the built-in export operations
    string GridClass { get; set; } = "MyGrid";
    string ExportBtnClass { get; set; } = "myExcelExportButton";
    async Task MyExternalExportTrigger()
    {
        var selector = $".{GridClass} .k-header .{ExportBtnClass}";
        await _js.InvokeVoidAsync("clickButton", selector);
    }



    List<SampleData> GridData { get; set; }
    bool ExportAllPages { get; set; }

    protected override void OnInitialized()
    {
        GridData = Enumerable.Range(1, 100).Select(x => new SampleData
        {
            ProductId = x,
            ProductName = $"Product {x}",
            UnitsInStock = x * 2,
            Price = 3.14159m * x,
            Discontinued = x % 4 == 0,
            FirstReleaseDate = DateTime.Now.AddDays(-x)
        }).ToList();
    }

    public class SampleData
    {
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public int UnitsInStock { get; set; }
        public decimal Price { get; set; }
        public bool Discontinued { get; set; }
        public DateTime FirstReleaseDate { get; set; }
    }
}

---

Unplanned
Last Updated: 13 May 2021 17:07 by ADMIN
Created by: Wes
Comments: 0
Category: Grid
Type: Feature Request
1

When you set widths to some columns in the grid, the rest of the columns stretch to accommodate the rest of the width. Thus, the row drag column can stretch and become unexpectedly wide. A screenshot of the problem is attached.

Perhaps the GridRowDraggableSettings could have a parameter for the width of the draggable column.

Completed
Last Updated: 13 May 2021 17:05 by ADMIN
Release 2.24.0
Created by: Wei
Comments: 4
Category: Grid
Type: Feature Request
34
there is a feature we want to implement in grid for a row to be dragged and dropped onto another row. is this something we can do with blazor grid?

drag one row or multiple row over another row and have the drop event exposed so we can handle it?
Unplanned
Last Updated: 12 May 2021 08:23 by ADMIN
Missing form label in Grid Inline Editing mode
Unplanned
Last Updated: 10 May 2021 06:23 by ADMIN
Created by: Brian
Comments: 1
Category: Grid
Type: Feature Request
2
I would like to use the endless scrolling feature (like in the Telerik UI for jQuery) with the Telerik Blazor Grid.
Completed
Last Updated: 07 May 2021 13:28 by ADMIN
Release 2.24.0
Created by: ali
Comments: 15
Category: Grid
Type: Feature Request
34

how to use Multiple Column Header in grid?

thanks

Completed
Last Updated: 06 May 2021 16:27 by ADMIN
Release 2.22.0

I would like the grid to behave like Excel for editing, and so I am using the InCell editing mode. I would like that pressing Tab would open the next cell in the row instead of moving the focus to the next focusable element.

---

ADMIN EDIT

The feature is rather complex and we want to make sure it is done right. To this end, we have postponed its implementation for the year 2021 instead of the November 2020 release. When a concrete release is known, this page will be updated. To get notifications for that, click the Follow button.

---

In Development
Last Updated: 05 May 2021 19:36 by Douglas
Scheduled for 2.25.0

Grid column header and content alignment (horizontal +Vertical)

---

ADMIN EDIT

For the time being, this is possible through the CellRender event, see below in the thread for an example.

---

Declined
Last Updated: 04 May 2021 18:33 by ADMIN

The new functionality to have the in-cell editing validate based on the model doesn't work with fluid validation. We use a custom component that integrates fluid validation with blazor which works fine for all controls including telerik input controls, but the built in validation for the grid editing doesn't seem to work with it.

Also there seems to be a bug with the validation using standard attribute validation. If the row you are working on has an existing record that does not validation properly, the in-cell editing will stop working once you go in to any cell and make a change. The edit mode on that cell will close as if everything updated ok, but after that, you will not be able to click into any cell to edit. While normally the data should already be valid, there can be scenarios where new validation rules are applied and existing records would become retroactively invalid.

 

Thanks,

Alan

 

Declined
Last Updated: 04 May 2021 08:27 by ADMIN
Created by: Lark
Comments: 3
Category: Grid
Type: Bug Report
0

I am having problems with grouping in TelerikGrid.

When I drag the column into the header for grouping, I get an error ArgumentNullException: Value cannot be null, apparently,  somewhere in TelerikGrid.SetProcessedGroups.

Test code:
@page "/test"

<div>
    <TelerikGrid @ref="grid" Data="@GridData" @bind-Page="Page" PageSize="PageSize"
                 Pageable="true" Sortable="true" Groupable="true"
                 FilterMode="Telerik.Blazor.GridFilterMode.FilterMenu" 
                 ShowColumnMenu="true"
                 TotalCount="@TotalRowCount"
                 SelectionMode="GridSelectionMode.Single"
                 OnRead=@ReadData>
        <GridAggregates>
            <GridAggregate Field=@nameof(TestData.Name) Aggregate="@GridAggregateType.Count" />
            <GridAggregate Field=@nameof(TestData.Surname) Aggregate="@GridAggregateType.Count" />
            <GridAggregate Field=@nameof(TestData.Department) Aggregate="@GridAggregateType.Count" />
        </GridAggregates>
        <GridColumns>
            <GridColumn Field="@(nameof(TestData.Name))" FieldType="typeof(string)" Editable="false" Groupable="true" ShowColumnMenu="false" />
            <GridColumn Field="@(nameof(TestData.Surname))" FieldType="typeof(string)" Editable="false" Groupable="true" ShowColumnMenu="false" />
            <GridColumn Field="@(nameof(TestData.Department))" FieldType="typeof(string)" Editable="false" Groupable="true" ShowColumnMenu="false" />
            <GridCommandColumn Width="60px" Lockable="false" ShowColumnMenu="true">
                <GridCommandButton Command="View" Icon="information" ShowInEdit="false" OnClick="@ViewItem"></GridCommandButton>
            </GridCommandColumn>
        </GridColumns>
    </TelerikGrid>
</div>


@code {

    protected TelerikGrid<TestData> grid;
    protected List<TestData> GridData { get; set; }
    public int TotalRowCount { get; set; } = 0;
    public int Page { get; set; } = 1;
    public int PageSize { get; set; } = 10;

    protected async Task ReadData(GridReadEventArgs args)
    {
        await LoadData();
    }

    protected async Task LoadData()
    {
        GridData = await GetSampleData();
        TotalRowCount = 100;
    }

    protected async Task<List<TestData>> GetSampleData()
    {
        List<TestData> results = new List<TestData>();

        results.Add(new TestData { Name = "Name1", Surname = "Surname1", Department = "Department1" });
        results.Add(new TestData { Name = "Name2", Surname = "Surname2", Department = "Department1" });
        results.Add(new TestData { Name = "Name3", Surname = "Surname3", Department = "Department1" });
        results.Add(new TestData { Name = "Name4", Surname = "Surname4", Department = "Department1" });
        results.Add(new TestData { Name = "Name5", Surname = "Surname5", Department = "Department2" });
        results.Add(new TestData { Name = "Name6", Surname = "Surname6", Department = "Department2" });
        results.Add(new TestData { Name = "Name7", Surname = "Surname7", Department = "Department2" });
        results.Add(new TestData { Name = "Name8", Surname = "Surname8", Department = "Department3" });
        results.Add(new TestData { Name = "Name9", Surname = "Surname9", Department = "Department3" });
        results.Add(new TestData { Name = "Name10", Surname = "Surname10", Department = "Department4" });

        await Task.Delay(1000); //simulate loading delay ...

        return results;
    }

    protected void ViewItem(GridCommandEventArgs args)
    {
        //navigate to edit view ...
    }

    public class TestData
    {
        public string Name { get; set; }
        public string Surname { get; set; }
        public string Department { get; set; }
    }
}

I am getting the following error:

 

This happens in Chrome and Edge, in Webassembly and Server-side blazor.

Am I doing something wrong?

 

Thanks for the help!

Unplanned
Last Updated: 04 May 2021 05:24 by ADMIN
Created by: Dan Stevens
Comments: 0
Category: Grid
Type: Feature Request
2
Horizontal scroll bar is visible, but doesn't move with cursor/current-cell.
Planned
Last Updated: 03 May 2021 12:12 by ADMIN
Scheduled for 2.26.0
Created by: Kelly
Comments: 1
Category: Grid
Type: Feature Request
20
I would like to display a message where rows would be displayed in grid, when there are no records returned from the data source. Basically, a message with graphics and hyperlink that direct the user to a page to enter a new record.
Planned
Last Updated: 03 May 2021 11:58 by ADMIN
Scheduled for 2.26.0
Created by: David
Comments: 10
Category: Grid
Type: Feature Request
27

Can you add a confirmation popup to the grid row delete like what is in the JQuery UI library?

---

ADMIN EDIT

As of 2.23.0 predefined confirmation dialog is available for use with just a few lines of code and you can achieve that behavior through the OnClick event of the command button:

<TelerikGrid Data=@GridData EditMode="@GridEditMode.Inline"
             Height="500px" AutoGenerateColumns="true" Pageable="true"
             OnDelete="@DeleteItem">
    <GridColumns>
        <GridAutoGeneratedColumns />

        <GridCommandColumn Width="100px">
            <GridCommandButton Command="Delete" Icon="delete" OnClick="@ConfirmDelete">Delete</GridCommandButton>
        </GridCommandColumn>

    </GridColumns>
</TelerikGrid>

@code {
    //for the confirmation - see the OnClick handler on the Delete button
    [CascadingParameter]
    public DialogFactory Dialogs { get; set; }

    async Task ConfirmDelete(GridCommandEventArgs e)
    {
        Product productToDelete = e.Item as Product;
        string confirmText = $"Are you sure you want to delete {productToDelete.Name}?";
        string confirmTitle = "Confirm Deletion!";
        //the actual confirmation itself
        bool userConfirmedDeletion = await Dialogs.ConfirmAsync(confirmText, confirmTitle);
        e.IsCancelled = !userConfirmedDeletion;//cancel the event if the user did not confirm
    }

    // only sample data operations follow

    public List<Product> GridData { get; set; }

    protected override async Task OnInitializedAsync()
    {
        GridData = Enumerable.Range(1, 50).Select(x => new Product { Id = x, Name = $"Name {x}" }).ToList();
    }

    private void DeleteItem(GridCommandEventArgs args)
    {
        Console.WriteLine("DELETING ITEM");
        var argsItem = args.Item as Product;

        GridData.Remove(argsItem);
    }

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

---

Planned
Last Updated: 03 May 2021 05:22 by ADMIN
Scheduled for 2.26.0

When the sum of the widths of the Grid columns is higher than the total width of the Grid and a horizontal scrollbar appears the Virtual Scrolling twitches when the user scrolls to the bottom of the Grid. The same behavior can be observed if the Grid has Resizeable columns and by resizing them horizontal scrollbar appears.

<AdminEdit>

The issue is reproducible on mobile Safari without horizontal scrolling. 

</AdminEdit>

Unplanned
Last Updated: 02 May 2021 06:59 by ADMIN

I set the GridColumn DisplayFormat="{0: yyyy-MM-dd}" and the data reflects that format. The default filter control doesn't. How can I make the control do that?

---

ADMIN EDIT

For the time being, the way to affect the filter behavior is through a custom filter template. The format for date pickers and numeric textboxes comes from the app culture settings (see more here). You may also want to Follow this idea for easier selection of a default filter operator and limiting the filter operators choices.

---

Planned
Last Updated: 01 May 2021 05:13 by ADMIN
Scheduled for 2.25.0
Created by: Wei
Comments: 0
Category: Grid
Type: Feature Request
2

column virtualization is a great feature for wide table - and we would like to use keyboard navigation with it. 

can both be supported together?

thanks

wei

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

Planned
Last Updated: 01 May 2021 05:07 by ADMIN
Scheduled for 2.25.0

I want to be able to use interfaces and models that are created from a service when working with the grid. A parameterless constructor is not enough for me, I need to be able to instantiate models in a more complex manner.

---

ADMIN EDIT

The tentative event name I have put in the title might vary when the implementation is researched. The goal would still be the same - the grid to provide an event when it needs an instance of the model so you can provide it with one. At the moment this happens when a row enters edit mode, when the filter list needs to be built, and when you are inserting an item (a caveat with the last one might be the OnClick event for the command button - the new event might have to fire before OnClick so it can give you the model).

---

Planned
Last Updated: 30 Apr 2021 12:41 by ADMIN
Created by: Nick
Comments: 8
Category: Grid
Type: Feature Request
19

Hi,

I'm testing the grid on mobile and I've noticed that the pager can end up being cut off the edge of the screen. The app is designed to not allow scrolling in the HTML window but it does allowing scrolling in the grid (and navbar). This works, but the pager is cutting off. Is there any way it can be made more responsive or made to wrap in a relatively neat way without breaking the control?

See attached image.

 

Thanks,

Nick

Planned
Last Updated: 30 Apr 2021 12:24 by ADMIN
Scheduled for 3.0.0
Created by: Svetoslav
Comments: 1
Category: Grid
Type: Feature Request
6

Hello everyone,

We created this Feature Request to gather feedback on the way the item expansion is working in the Grid state. Currently, you can expand any items with the ExpandedRows collection of int where you pass the indexes of the rows. 

Another option, which we are thinking of, is to provide a Collection<Model>. This would let you pass models, instead of indexes and the Grid would automatically expand those items. This approach would make the need to preserve the indexes redundant, which you should currently do when Filtering/Sorting and Grouping the items in the Grid.

We would appreciate your feedback on both approaches and which you think will be easier to use.

1 2 3 4 5 6