Pending Review
Last Updated: 27 Nov 2020 14:21 by Robert
Created by: Robert
Comments: 0
Category: Grid
Type: Feature Request
1
I would like to have a HeaderTemplate for the GridCheckboxColumn so that I could customize the behavior of the Select all checkbox. 
Planned
Last Updated: 27 Nov 2020 09:55 by ADMIN
At the moment it is not allowed, but I would like to freeze a few columns in the 100 columns that I have, and I use column virtualization for.
Declined
Last Updated: 23 Nov 2020 09:16 by ADMIN
Created by: Daniel
Comments: 3
Category: Grid
Type: Feature Request
1

I am trying to get the currently filtered data out of the grid as per this KB article and I want to include the searchbox filters. I do not, however, want to use OnRead but I want to get the grid state on a click of a button and get the filters plus the searchbox filters from it instead.

---

ADMIN EDIT

Here is a sample of getting those filters through the OnRead event without using remote operations - all the data is in the view model (the SourceData field) so this does not change the way operations happen compared to not using OnRead.

@using Telerik.DataSource
@using Telerik.DataSource.Extensions

@( new MarkupString(output) )

<br />
<TelerikButton OnClick="@GetFilters">Get Filters</TelerikButton>


<TelerikGrid Data=@GridData TotalCount=@Total OnRead=@ReadItems
             FilterMode=@GridFilterMode.FilterRow Sortable=true Pageable=true EditMode="@GridEditMode.Inline">
    <GridToolBar>
        <GridSearchBox />
    </GridToolBar>
    <GridColumns>
        <GridColumn Field=@nameof(Employee.ID) />
        <GridColumn Field=@nameof(Employee.Name) Title="Name" />
        <GridColumn Field=@nameof(Employee.HireDate) Title="Hire Date" />
        <GridCommandColumn>
            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
            <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
            <GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
            <GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@code {
    TelerikGrid<Employee> GridRef { get; set; }
    string output { get; set; }
    public DataSourceRequest CurrentRequest { get; set; }
    void GetFilters()
    {
        output = string.Empty;


        foreach (var item in CurrentRequest.Filters)
        {
            if (item is FilterDescriptor) // filter row
            {
                FilterDescriptor currFilter = item as FilterDescriptor;
                output += $"field: {currFilter.Member}, operator {currFilter.Operator}, value: {currFilter.Value}<br />";
            }

            if (item is CompositeFilterDescriptor) // filter menu
            {
                CompositeFilterDescriptor currFilter = item as CompositeFilterDescriptor;
                output += $"START nested filter: logical operator: {currFilter.LogicalOperator}, details:<br />";
                // there will actually be 1 or 2 only, this showcases the concept and the types
                foreach (FilterDescriptor nestedFilter in currFilter.FilterDescriptors)
                {

                    output += $"field: {nestedFilter.Member}, operator {nestedFilter.Operator}, value: {nestedFilter.Value}<br />";
                }
                output += "END nested filter<br />";
            }
        }
    }




    public List<Employee> SourceData { get; set; }
    public List<Employee> GridData { get; set; }
    public int Total { get; set; } = 0;

    protected override void OnInitialized()
    {
        SourceData = GenerateData();
    }

    protected async Task ReadItems(GridReadEventArgs args)
    {
        CurrentRequest = args.Request;


        var datasourceResult = SourceData.ToDataSourceResult(args.Request);

        GridData = (datasourceResult.Data as IEnumerable<Employee>).ToList();
        Total = datasourceResult.Total;

        StateHasChanged();
    }

    //This sample implements only reading of the data. To add the rest of the CRUD operations see
    //https://docs.telerik.com/blazor-ui/components/grid/editing/overview

    private List<Employee> GenerateData()
    {
        var result = new List<Employee>();
        var rand = new Random();
        for (int i = 0; i < 100; i++)
        {
            result.Add(new Employee()
            {
                ID = i,
                Name = "Name " + i,
                HireDate = DateTime.Now.Date.AddDays(rand.Next(-20, 20))
            });
        }

        return result;
    }

    public class Employee
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public DateTime HireDate { get; set; }
    }
}

---

Unplanned
Last Updated: 23 Nov 2020 08:44 by ADMIN
Created by: Aditya
Comments: 8
Category: Grid
Type: Feature Request
16
I want to be able to enter numbers and the grid to filter numeric fields too according to those numbers. Enums would be nice too.
Duplicated
Last Updated: 20 Nov 2020 17:14 by ADMIN
Created by: Scott Mappes
Comments: 1
Category: Grid
Type: Feature Request
0

I'm using the Grid with a GridToolbar containing a GridSearchBox.  I have the following requirement that I wish to be able to implement:

When focus is on the GridSearchBox and I hit Esc I would like to clear the search text.

Completed
Last Updated: 20 Nov 2020 11:49 by ADMIN
Release 2.20.0
Created by: Ryan
Comments: 2
Category: Grid
Type: Feature Request
28
Please add a feature to export the grid to a CSV file.
Planned
Last Updated: 18 Nov 2020 08:02 by ADMIN
Scheduled for 2.21.0
Created by: David
Comments: 4
Category: Grid
Type: Feature Request
16
We use the multi-checkbox filters in our jquery grids now and would like to use them in Blazor. Example here https://demos.telerik.com/kendo-ui/grid/filter-multi-checkboxes
Unplanned
Last Updated: 16 Nov 2020 15:29 by ADMIN

I am using this sample to implement server-side grouping:

https://github.com/telerik/blazor-ui/tree/master/grid/datasourcerequest-on-server/WasmApp

Now I need Aggregate sum for the price in the GroupFooterTemplate. When I add aggregates, exceptions are thrown if a group footer uses the aggregate value, if not - the grid simply does not look grouped.

---

ADMIN EDIT

The issue stems from the inability of the System.Text.Json to deserialize interfaces - there are a couple of interfaces in the datasource request and data source result related to aggregates. Preliminary review indicates that perhaps some or all of them might be changed to, for example, Dictionary<string, object> from the current IDictionary<string, object>, or perhaps the framework might "learn" to deserialize interfaces.

----

Unplanned
Last Updated: 16 Nov 2020 09:03 by ADMIN
Created by: Wei
Comments: 0
Category: Grid
Type: Feature Request
2
I am using InCell editing with an editor template and when I use the State to close the cell for editing, the grid re-renders and focus is lost. I need a method to call after the state call that will focus the cell of the grid - it could take the row model and a field name as parameters to know which cell to focus.
Unplanned
Last Updated: 11 Nov 2020 05:38 by ADMIN

I have a reset all button that clears a grid of all column, filter, sorts etc.

I need it to also reset any searchbox criteria.  I can easily clear the searchbox of it's value using javascript, but this does not then trigger the searchbox to reset the grid.

---

ADMIN EDIT

A workaround could be to clear the input with a bit of JS and to trigger its input event so it bubbles up to the Blazor code. Something like:

// locate the searchbox of the Grid
const input = document.querySelector(".k-grid-search input"); 
// clear the value of the input
input.value = ""; 
// dispatch the input event in order to force the Grid event binding to trigger the filtering
input.dispatchEvent(new Event('input', {bubbles: true} ));

---

Unplanned
Last Updated: 09 Nov 2020 12:36 by ADMIN
Grid column header and content alignment (horizontal +Vertical)
Completed
Last Updated: 06 Nov 2020 08:28 by ADMIN
Release 2.19.0

At the moment, the focus remains on the cell. It should be in the input so the user does not have to perform an extra action (say, click with the mouse) in order to edit data.

This also applies to inserting a new row - the first cell should be focused.

Planned
Last Updated: 05 Nov 2020 12:48 by ADMIN

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.

---

Planned
Last Updated: 05 Nov 2020 12:45 by ADMIN
Scheduled for 2.21.0
Created by: Dan
Comments: 2
Category: Grid
Type: Feature Request
46
When loading large datasets, it would be nice if there was an ability to trigger an animation or loading modal.  Similarly, filtering a large dataset causes a delay that can result in lost key presses when typing a few characters into the filter.  Interrupting with an animation or modal would be helpful there (as would the ability to specify a custom delay on filtering after keypress).
Unplanned
Last Updated: 04 Nov 2020 20:30 by George
Created by: Christian
Comments: 4
Category: Grid
Type: Feature Request
18

I would like to be able to do something like

<GridCommandColumn>
@{
context as MyModel;
if(context.ShowButton)
{
<GridCommandButton>Todo</GridCommandButton>
}
}
</GridCommandColumn>

 

---

ADMIN EDIT

See the thread below for a way to implement this right now with your own buttons in a "regular" column and the grid state. Also, note that this feature (the row context in the command column) will be a breaking change.

---

Unplanned
Last Updated: 04 Nov 2020 15:20 by ADMIN

When I have a grid with Reordable=true and a ComboBox in the HeaderTemplate, I cannot click in the combo box because the reordable functionality prevents it.

---

ADMIN EDIT

This could be exposed through a data- attribute that you could add to your DOM elements so that the grid can know to skip them, for example:

<TelerikGrid Data="@MyData" Height="300px" Pageable="true" Sortable="true" FilterMode="@GridFilterMode.FilterMenu" Reorderable="true">
    <GridColumns>
        <GridColumn Field="@(nameof(SampleData.ID))" Title="This title will not be rendered">
            <HeaderTemplate>
                Continent <br />
                <div style="text-align:center">Id</div>
                <div @onclick:stopPropagation="true" data-draggable="false">
                    <TelerikComboBox Data="@Continents" Filterable="true" class="headerCombo"
                                     @bind-Value="@SelectedContinentId"
                                     TextField="@nameof(Continent.Name)" ValueField="@nameof(Continent.Id)" Id="MyId">
                    </TelerikComboBox>
                </div>
            </HeaderTemplate>
        </GridColumn>
        <GridColumn Field=@nameof(SampleData.Name) Title="First Name" />
    </GridColumns>
</TelerikGrid>

@code {
    /* Grid */
    string result { get; set; }
    void DoSomething()
    {
        result = $"button in header template clicked on {DateTime.Now}, something happened";
    }

    public class SampleData
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public DateTime HireDate { get; set; }
    }

    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 50).Select(x => new SampleData
    {
        ID = x,
        Name = "name " + x,
        HireDate = DateTime.Now.AddDays(-x)
    });

    /* ComboBox */

    public class Continent
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
    IEnumerable<Continent> Continents = new List<Continent>() { new Continent { Id = 1, Name = "Africa" }, new Continent { Id = 2, Name = "Asia" }, new Continent { Id = 3, Name = "South America" } };
    public int SelectedContinentId { get; set; } = 1;

}

---

Unplanned
Last Updated: 04 Nov 2020 10:48 by ADMIN

https://docs.telerik.com/blazor-ui/components/grid/editing/incell#notes 

I am using an EditorTemplate with a method called ChangeHandler(). After clicking in another row everything works fine but if I leave the cell by pressing enter the UpdateHandler gets called more than two times and comparing args.Item with the GridItem doesn't help because the calls are asynchronous.

=====

Admin Edit

After discussion with the development team, the proposed resolution is to provide a context that provides Save/Cancel operations. The goal is to provide easier configuration for IncellEditing and EditorTemplates and consistent behavior with mouse and keyboard interaction. However, the change will introduce a breaking change in our EditorTemplate, should be researched further and that is why this is logged as a feature request. A small snippet how providing the context will change the setup:

<EditorTemplate>
         <TelerikTextBox @bind-Value=@context.Item.Name OnChange="@(() => context.Save())" Width="100%" />
</EditorTemplate>

Workaround

<TelerikGrid @ref="@Grid"
             Data=@MyData
             EditMode="@GridEditMode.Incell"
             Pageable="true"
             Height="500px"
             OnUpdate="@UpdateHandler" 
             Navigable="true">
    <GridColumns>
        <GridColumn Field=@nameof(SampleData.ID) Editable="false" Title="ID" />
        <GridColumn Field=@nameof(SampleData.Name) Title="Name">
            <EditorTemplate>
                @{
                    currentItem = context as SampleData;
                    <span @onkeydown="@OnKeyDown">
                        <TelerikTextBox @bind-Value=@currentItem.Name OnChange="@CloseEditor" Width="100%" />
                    </span>
                }
            </EditorTemplate>
        </GridColumn>
        <GridColumn Field=@nameof(SampleData.Ranking) Title="Ranking" Width="120px">
            <EditorTemplate>
                @{
                    currentItem = context as SampleData;
                    <TelerikNumericTextBox @bind-Value=@currentItem.Ranking OnChange="@CloseEditor"
                                           Width="100%" Max="10" Min="0" Step="1">
                    </TelerikNumericTextBox>
                }
            </EditorTemplate>
        </GridColumn>
        <GridColumn Field=@nameof(SampleData.Role) Title="Position" Width="200px">
            <EditorTemplate>
                @{
                    currentItem = context as SampleData;
                    <TelerikDropDownList Data="@Roles" @bind-Value="@currentItem.Role" OnChange="@CloseEditor"
                                         Width="120px" PopupHeight="auto">
                    </TelerikDropDownList>
                }
            </EditorTemplate>
        </GridColumn>
        <GridCommandColumn>
            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Save</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
    <GridToolBar>
        <GridCommandButton Command="Add" Icon="add">Add Employee</GridCommandButton>
    </GridToolBar>
</TelerikGrid>

@code {
    // handling the custom editor template for InCell editing
    public TelerikGrid<SampleData> Grid { get; set; }
    public SampleData currentItem { get; set; }
    public bool ShouldUpdateItem { get; set; }

    public void OnKeyDown(KeyboardEventArgs args)
    {
        if (args.Key == "Enter")
        {
            ShouldUpdateItem = false;
        }
    }

    async Task CloseEditor()
    {
        var state = Grid?.GetState();

        if (currentItem.ID == 0 && state.InsertedItem != null)
        {
            // insert operation - the item is new
            await CreateHandler(new GridCommandEventArgs()
            {
                Item = state.InsertedItem
            });
        }
        else
        if (currentItem.ID > 0 && state.EditItem != null)
        {
            // edit operation on an existing item

            await UpdateHandler(new GridCommandEventArgs()
            {
                Item = state.EditItem,
                Field = state.EditField
            });
        }

        state.InsertedItem = state.OriginalEditItem = state.EditItem = default;

        await Task.Delay(20); // let the grid re-render and close the cell if keyboard navigation is enabled

        await Grid?.SetState(state);
    }

    //Create and Update operations

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

        if (ShouldUpdateItem == false)
        {
            ShouldUpdateItem = true;
            return;
        }

        var index = MyData.FindIndex(i => i.ID == item.ID);
        if (index != -1)
        {
            // with keyboard navigation and Enter key press in the component
            // both the grid, and the OnChange handler will raise the update event
            // you may want to add an equality comparison for the item to only call the database once
            // when the item has changed, not both times
            if (!MyData[index].Equals(item))
            {
                MyData[index] = item;
                Console.WriteLine("update");
                //perform actual data source operations here
            }
        }
    }


    // data sources

    protected override void OnInitialized()
    {
        MyData = new List<SampleData>();

        for (int i = 1; i < 50; i++)
        {
            MyData.Add(new SampleData()
            {
                ID = i,
                Name = "name " + i,
                Ranking = i % 10
            });
        }
    }

    public class SampleData
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public string Role { get; set; }
        public int Ranking { get; set; }

        public override bool Equals(object obj)
        {
            if (obj != null && obj is SampleData)
            {
                SampleData curr = obj as SampleData;
                return (ID == curr.ID) && (Name == curr.Name) && (Role == curr.Role) && (Ranking == curr.Ranking);
            }
            return false;
        }
    }

    List<SampleData> MyData { get; set; }
    static List<string> Roles = new List<string> { "Manager", "Employee", "Contractor" };
}

=====

Unplanned
Last Updated: 03 Nov 2020 14:19 by ADMIN

This will let Excel mark the field as a Date and act according to the current culture on the machine that opens the file.

---

ADMIN EDIT:

This feature would let you define custom formats, so you may want to Vote for it and Follow it too: Custom Format for Excel Export per column. It is important to keep in mind that the Excel formats are completely different from the .NET formats.

If this is of high importance for you right now, you could create your own Excel file with the desired settings by following the example from this thread.

---

Unplanned
Last Updated: 02 Nov 2020 18:32 by ADMIN
Created by: Nick
Comments: 7
Category: Grid
Type: Feature Request
15

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

Unplanned
Last Updated: 21 Oct 2020 08:08 by ADMIN
Created by: Eric
Comments: 3
Category: Grid
Type: Feature Request
2

Hi - this one is a feature request, not a bug. :)

 

For the filter menu, when you enter a filter value, it would be nice if you could press enter to execute the filter instead of having to click "Filter."

 

1 2 3 4 5 6