Unplanned
Last Updated: 05 Apr 2023 09:13 by ADMIN
Created by: Kenny
Comments: 9
Category: Grid
Type: Feature Request
24

It would be nice if I could specify an item in the inline editor (or any other for that matter) to get focus when the editor is activated.

Thanks,
Kenny

===

Telerik edit:

A possible workaround is:

  1. Define an <EditorTemplate> for the column(s) that can receive automatic focus in edit mode. The editor component inside it must have a @ref.
  2. (optional) Set a flag that points to the edit field to focus, if it will be dynamic.
  3. Check the flag value in OnAfterRenderAsync and focus the respective editor programmatically after a delay.

The example below also shows how to enter Grid edit mode programmatically and how to focus a specific field when editing with OnRowClick.

<TelerikGrid @ref="@GridInlineRef"
             Data="@GridInlineData"
             EditMode="@GridEditMode.Inline"
             OnAdd="@OnGridAddEdit"
             OnEdit="@OnGridAddEdit"
             OnCreate="@OnGridInlineCreate"
             OnUpdate="@OnGridInlineUpdate"
             OnRowClick="@OnGridRowClick">
    <GridToolBarTemplate>
        <GridCommandButton Command="Add">Add</GridCommandButton>
    </GridToolBarTemplate>
    <GridColumns>
        <GridColumn Field="@nameof(Product.Name)">
            <EditorTemplate>
                @{ var editItem = (Product)context; }
                <TelerikTextBox @ref="@NameTextBoxRef" @bind-Value="@editItem.Name" DebounceDelay="0" />
            </EditorTemplate>
        </GridColumn>
        <GridColumn Field="@nameof(Product.Price)">
            <EditorTemplate>
                @{ var editItem = (Product)context; }
                <TelerikNumericTextBox @ref="@PriceNumericTextBoxRef" @bind-Value="@editItem.Price" DebounceDelay="0" />
            </EditorTemplate>
        </GridColumn>
        <GridColumn Field="@nameof(Product.Stock)">
            <EditorTemplate>
                @{ var editItem = (Product)context; }
                <TelerikNumericTextBox @ref="@StockNumericTextBoxRef" @bind-Value="@editItem.Stock" DebounceDelay="0" />
            </EditorTemplate>
        </GridColumn>
        <GridCommandColumn>
            <GridCommandButton Command="Edit">Edit</GridCommandButton>
            <GridCommandButton Command="Save" ShowInEdit="true">Update</GridCommandButton>
            <GridCommandButton Command="Cancel" ShowInEdit="true">Cancel</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@code {
    private TelerikGrid<Product>? GridInlineRef { get; set; }
    private TelerikTextBox? NameTextBoxRef { get; set; }
    private TelerikNumericTextBox<decimal?>? PriceNumericTextBoxRef { get; set; }
    private TelerikNumericTextBox<int>? StockNumericTextBoxRef { get; set; }
    private string EditFieldToFocus { get; set; } = string.Empty;

    private List<Product> GridInlineData { get; set; } = new List<Product>();

    private void OnGridAddEdit(GridCommandEventArgs args)
    {
        EditFieldToFocus = nameof(Product.Stock);
    }

    private async Task OnGridRowClick(GridRowClickEventArgs args)
    {
        EditFieldToFocus = args.Field;
        var itemToEdit = (Product)args.Item;

        args.ShouldRender = true;

        if (GridInlineRef != null)
        {
            var gridState = GridInlineRef.GetState();

            gridState.InsertedItem = null!;
            gridState.OriginalEditItem = itemToEdit;
            gridState.EditItem = itemToEdit.Clone();

            await GridInlineRef.SetStateAsync(gridState);
        }
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (!string.IsNullOrEmpty(EditFieldToFocus))
        {
            await Task.Delay(200);

            switch (EditFieldToFocus)
            {
                case nameof(Product.Name):
                    if (NameTextBoxRef != null)
                    {
                        await NameTextBoxRef.FocusAsync();
                    }
                    break;
                case nameof(Product.Price):
                    if (PriceNumericTextBoxRef != null)
                    {
                        await PriceNumericTextBoxRef.FocusAsync();
                    }
                    break;
                case nameof(Product.Stock):
                    if (StockNumericTextBoxRef != null)
                    {
                        await StockNumericTextBoxRef.FocusAsync();
                    }
                    break;
                default:
                    break;
            }

            EditFieldToFocus = string.Empty;
        }
    }

    #region Programmatic Inline Editing

    private async Task InlineAdd()
    {
        var gridState = GridInlineRef!.GetState();

        gridState.InsertedItem = new Product();
        gridState.InsertedItem.Name = "New value";
        gridState.OriginalEditItem = null!;
        gridState.EditItem = null!;

        await GridInlineRef.SetStateAsync(gridState);
    }

    private async Task InlineEdit()
    {
        if (GridInlineData.Any())
        {
            var gridState = GridInlineRef!.GetState();

            gridState.InsertedItem = null!;
            gridState.OriginalEditItem = GridInlineData.First();
            gridState.EditItem = GridInlineData.First().Clone();
            gridState.EditItem.Name = "Updated inline value";

            EditFieldToFocus = nameof(Product.Price);

            await GridInlineRef.SetStateAsync(gridState);
        }
    }

    private async Task InlineCancel()
    {
        var gridState = GridInlineRef!.GetState();

        gridState.InsertedItem = null!;
        gridState.OriginalEditItem = null!;
        gridState.EditItem = null!;

        await GridInlineRef.SetStateAsync(gridState);
    }

    private async Task InlineUpdate()
    {
        var gridState = GridInlineRef!.GetState();

        if (gridState.EditItem != null)
        {
            OnGridInlineUpdate(new GridCommandEventArgs()
            {
                Item = gridState.EditItem
            });
        }
        else if (gridState.InsertedItem != null)
        {
            OnGridInlineCreate(new GridCommandEventArgs()
            {
                Item = gridState.InsertedItem
            });
        }

        gridState.InsertedItem = null!;
        gridState.OriginalEditItem = null!;
        gridState.EditItem = null!;

        await GridInlineRef.SetStateAsync(gridState);
    }

    #endregion Programmatic Inline Editing

    #region Grid Inline Editing Handlers

    private void OnGridInlineUpdate(GridCommandEventArgs args)
    {
        var updatedItem = (Product)args.Item;
        var index = GridInlineData.FindIndex(i => i.Id == updatedItem.Id);
        if (index != -1)
        {
            GridInlineData[index] = updatedItem;
        }
    }

    private void OnGridInlineCreate(GridCommandEventArgs args)
    {
        var createdItem = (Product)args.Item;
        createdItem.Id = Guid.NewGuid();
        GridInlineData.Insert(0, createdItem);
    }

    #endregion Grid Inline Editing Handlers

    #region Data Generation and Model

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 3; i++)
        {
            GridInlineData.Add(new Product()
            {
                Id = Guid.NewGuid(),
                Name = $"Product {i}",
                Price = Random.Shared.Next(1, 100) * 1.23m,
                Stock = (short)Random.Shared.Next(0, 1000)
            });
        }
    }

    public class Product
    {
        public Guid Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public decimal? Price { get; set; }
        public int Stock { get; set; }
        public DateTime ReleaseDate { get; set; }
        public bool InProduction { get; set; }

        public Product Clone()
        {
            return new Product()
            {
                Id = Id,
                Name = Name,
                Price = Price,
                Stock = Stock,
                ReleaseDate = ReleaseDate,
                InProduction = InProduction
            };
        }
    }

    #endregion Data Generation and Model
}

 

Completed
Last Updated: 23 Feb 2020 09:50 by ADMIN

I discovered "incell" editing mode on the grid, I love it!  It makes the UI very intuitive and quick to update individual fields. It also works great with a PATCH API endpoint.

One minor glitch with "incell editing".  If I click on a cell in a different row, it immediately takes the previous cell out of edit and puts the new cell in edit with a single click -- VERY cool.  But, if you click on a cell in the same row it takes the previous cell out of edit, but doesn't put the new cell in edit mode.  It would be cool if it worked the same as the "clicking in separate rows" functionality. 

 

Thanks,

Kenny

Completed
Last Updated: 12 Mar 2020 12:44 by ADMIN
Release 2.9.0
Created by: Shaun
Comments: 3
Category: Grid
Type: Feature Request
27
Currently we can set Sortable on `<TelerikGrid>` but not on individual `<TelerikGridColumn>'`.  This is needed because sometimes we have specific columns for which we don't want to allow sorting.
Completed
Last Updated: 21 May 2019 10:53 by ADMIN
Release 1.1.0
I have a Grid control with columns set as editable= false.  When I click a row into edit mode all the columns still appear as editable. Is there something else that needs to be set?
Completed
Last Updated: 05 Sep 2019 11:18 by ADMIN
Release 1.6.0
Created by: Gert
Comments: 4
Category: Grid
Type: Feature Request
14
I would like to be able to select a row visually and logically. This will let me pass the selection from one grid to another (for example, from a grid in a modal dialog to the main page).
Completed
Last Updated: 23 Jun 2020 14:38 by ADMIN
Release 2.15.0
Created by: Ramon
Comments: 3
Category: Grid
Type: Feature Request
33

In addition to more filtering options we would like to have the ability to use custom filter components instead of the built-in ones. For example, through a cell template for the filter row.

Please comment below with how you would like to see this integrate into the data source operations of the grid (for example, should it fire an event where you filter the data you pass to the grid, or should the grid expose some method/interface that you need to use).

Completed
Last Updated: 17 Sep 2019 12:17 by ADMIN
Release 2.0.0
Created by: Gordon
Comments: 0
Category: Grid
Type: Bug Report
9

When there are wide columns that produce a horizontal scrollbar, scrolling horizontally does not scroll the headers. It must.

WORKAROUND (see also the rules for the containing div that provides the scroll):

<style>
    .k-grid,
    .k-grid-container,
    .k-grid-content.k-virtual-content {
        display: inline-block;
    }
</style>

REPRODUCIBLE:

@using Telerik.Blazor.Components.Grid
 
<div style="width: 1200px; overflow-x: auto; overflow-y:hidden; border: 1px solid red;">
    <TelerikGrid Data="@trades" EditMode="inline" Pageable=true PageSize=10>
        <TelerikGridColumns>
            <TelerikGridCommandColumn width="100">
                <TelerikGridCommandButton Command="Edit" Icon="edit">Edit</TelerikGridCommandButton>
                <TelerikGridCommandButton Command="Update" Icon="save" ShowInEdit="true" OnClick="UpdateItem">Update</TelerikGridCommandButton>
                <TelerikGridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true" OnClick="CancelItem">Cancel</TelerikGridCommandButton>
            </TelerikGridCommandColumn>
            <TelerikGridColumn Field="@(nameof(Trade.TradeId))" Width=100></TelerikGridColumn>
            @*<TelerikGridColumn Field="@(nameof(Trade.TradeType))" Width=200></TelerikGridColumn>*@
            <TelerikGridColumn Field=@nameof(Trade.TradeType) Title="Trade Type">
                <EditorTemplate>
                    @{
                        var TradeToEdit = context as Trade;
                        if (TradeToEdit.TradeType == "POWER PHYSICAL")
                        {
                            <select class="form-control d-inline" style="height: 30px" onchange=@SaveItem value=@TradeToEdit.TradeType>
                                <option value="POWER PHYSICAL">POWER PHYSICAL</option>
                                <option value="GAS PHYSICAL"> GAS PHYSICAL</option>
                            </select>
                        }
                        else
                        {
                            <select class="form-control d-inline" style="height: 30px" onchange=@SaveItem value=@TradeToEdit.TradeType>
                                <option value="GAS PHYSICAL"> GAS PHYSICAL</option>
                                <option value="POWER PHYSICAL">POWER PHYSICAL</option>
                                <option value="POWER PHYSICAL">POWER FINANCIAL</option>
                            </select>
                        }
                    }
                </EditorTemplate>
            </TelerikGridColumn>
            <TelerikGridColumn Field="@(nameof(Trade.Company))" Width=500></TelerikGridColumn>
            <TelerikGridColumn Field="@(nameof(Trade.TradeDate))" Width=500></TelerikGridColumn>
            <TelerikGridColumn Field="@(nameof(Trade.BegTime))" Width=500></TelerikGridColumn>
            <TelerikGridColumn Field="@(nameof(Trade.EndTime))" Width=500></TelerikGridColumn>
        </TelerikGridColumns>
    </TelerikGrid>
</div>
 
@functions {
    public class Trade
    {
        public int TradeId { get; set; }
        public string TradeType { get; set; }
        public string Company { get; set; }
        public DateTime TradeDate { get; set; }
        public DateTime BegTime { get; set; }
        public DateTime EndTime { get; set; }
    }
 
    public List<Trade> trades { get; set; }
 
    protected override void OnInit()
    {
        trades = new List<Trade>();
        for (int i = 0; i < 25; i++)
        {
            trades.Add(new Trade()
            {
                TradeId = i,
                TradeType = "type " + i,
                Company = "company " + i,
                TradeDate = DateTime.Now.AddDays(i),
                BegTime = DateTime.Now.AddHours(-i),
                EndTime = DateTime.Now.AddHours(i)
            });
        }
    }
 
    void SaveItem()
    {
 
    }
 
    public void UpdateItem(GridCommandEventArgs e)
    {
 
    }
 
    public void CancelItem(GridCommandEventArgs e)
    {
 
    }
}

Completed
Last Updated: 05 Sep 2019 11:29 by ADMIN
Created by: Gert
Comments: 3
Category: Grid
Type: Feature Request
11

Dear Telerik,

 

I'd like to post a new feature request- > A checkbox column.
Where it is possible to select multiple rows.

Regards,

Gert

Completed
Last Updated: 10 Feb 2020 15:39 by ADMIN
Release 2.7.0
Created by: Marcel
Comments: 2
Category: Grid
Type: Feature Request
30

So far in the TelerikGrid component it is only possible to set the title of a column to a string. It would be useful to give the title/header a template instead of a simple string. In this way one could for example place a button, image, (...) inside the columnheader.

This kind of template-ability could be very handy in various other cases elsewhere, so please bring this flexibility into ui for blazor.

Completed
Last Updated: 13 Jun 2019 10:44 by ADMIN
Release 1.1.1
Created by: tomas
Comments: 5
Category: Grid
Type: Bug Report
4

When I click TelerikGridCommandButton and inside OnClick event calling method uriHelper.NavigateTo("/xxx"); application hangs.

Using latest VS 2019 version and Blazor Preview 4

Declined
Last Updated: 28 Apr 2019 05:28 by ADMIN
Created by: Mark
Comments: 5
Category: Grid
Type: Bug Report
0

The TelerikGrid never loads any data. the app just hangs. 

I copied the Telerik sample from the online demo. 

 The HTML table loads perfectly.

 Using VS 2019  16.1.0 Preview 2.0.

Acquired Telerik nuget package directly from Telerik feed.

 

 

 

    <TelerikGrid Data=@ViewModel.GetCorePharmacies() Height="300">
        <TelerikGridColumns>
            <TelerikGridColumn Field="ID" Title="NCPDP#" />
            <TelerikGridColumn Field="NPINumber" Title="NPI#" />
            <TelerikGridColumn Field="DBAName" Title="Pharmacy" />
            <TelerikGridColumn Field="StoreNumber" Title="Store#" />
        </TelerikGridColumns>
    </TelerikGrid>

    @*<table class="table">
        <thead>
            <tr>
                <th>NCPDP</th>
                <th>NPI</th>
                <th>DBA Name</th>
                <th>Store#</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var pharmacy in ViewModel.GetCorePharmacies())
            {
                <tr>
                    <td>@pharmacy.ID.ToString()</td>
                    <td>@pharmacy.NPINumber.ToString()</td>
                    <td>@pharmacy.DBAName</td>
                    <td>@pharmacy.StoreNumber</td>
                </tr>
            }
        </tbody>
    </table>*@

 

Any thoughts. 

Completed
Last Updated: 17 Sep 2019 12:16 by ADMIN
Release 2.0.0
Created by: Nic
Comments: 3
Category: Grid
Type: Feature Request
7

Hello there,

 

I am looking for the ability to display hierarchical data in the grid control similar to that available in the asp.net core grid: https://demos.telerik.com/aspnet-core/grid/hierarchy

 

Thanks!

Completed
Last Updated: 27 Sep 2019 05:58 by ADMIN
Release 1.3.0
Created by: ben
Comments: 7
Category: Grid
Type: Feature Request
10
Looking for feature parity between the Telerik React Grid Filter and Blazor for filtering.  This is one of our most used features of Telerik's grids...our grids often have 1000s of elements in them, being able to filter is a huge help to our users.
Completed
Last Updated: 09 Apr 2019 21:00 by ADMIN
Created by: Jeff
Comments: 2
Category: Grid
Type: Feature Request
1
Forgive me if this already exists but I can't seem to find a way to specify column widths for the Grid. If there is a way please include this documentation. If there isn't yet a way to do this then please consider this a request for that functionality. Thanks!