Grid - Import from Clipboard (Excel) when column name matches the first row header

I think it would be a great feature to be able to import copied data from excel into the grid either based on the index of the column or the header row in the clipboard matches the name of the column in Blazor Grid.

---

ADMIN EDIT

You can find an example of implementing this and the caveats it brings in the following sample project: https://github.com/telerik/blazor-ui/tree/master/grid/paste-from-excel

This feature requires research on how we could provide it as a built-in feature. So, any feedback on the matter will be appreciated.

---

The null type of operator can cause errors on the backend

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

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 ***

I would like to be able to customize the default format for dates and numbers that the grid has to, for example, use the current UI culture of my app.

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

I want to know when the user moves focus to a new row - I intend to use that to select this row and to perform some operations on an adjacent grid.

----

ADMIN EDIT

The majority of things are possible through templates right now. You can put in the desired template (editor, row, cell, header, whatever you need to capture events from) and add the desired handler to your own DOM element. Then, you can alter the grid, if needed, through its state. If you need the row data item - it is available in the templates related to the data rows. If you need adjacent rows models - you can get them from the sorted list of grid data when you use its OnRead event - you have the current row and you can get a previous/next one as needed from that list.

That said, I am keeping this item open (status "Unplanned") so we can still gather any feedback and its popularity and what the community thinks, and whether it will be a meaningful addition to the component.

----

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

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

Hi,

It would be nice to have a property available on a GridColumn where you could indicate that the column should only be visible when you export the data, and not on, screen.

Thanks,

Tom

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 ***

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 ***

With using the Grid, I have several GridCommandButtons. Instead of displaying the button with an icon followed by text, I wanted to display just the icon and use the TelerikTooltip to display the text on hover. When I set the GridCommandButton.Title and inspect the DOM, there is no title attribute on the button even though the description of the GridCommandButton.Title property reads "The title attribute of the Button".

when setting a default filter in code the grid does not show any type of indicator that a filter is applied to a column

desiredState = newGridState<Employee>()
            {
                FilterDescriptors = newList<FilterDescriptorBase>()
                {
                    newCompositeFilterDescriptor()
                    {
                        FilterDescriptors = newFilterDescriptorCollection()
                        {
                            newFilterDescriptor() { Member = "Active", Operator = FilterOperator.IsEqualTo, Value = true, MemberType = typeof(bool) }
                        }
 
                    }
                }
            };

 
 
     

Using the Excel Export for Grid creates the Excel file, but on opening it, the columns that contain data are hidden. Unless I unhide the columns, the sprceadsheet looks empty.

---
ADMIN EDIT:
One idea to go about this is to expose an event that would allow users to modify the column width values before they get sent for export. The benefit of this approach is that if the columns are resized, the user will receive their current size in the specified unit e.g. rem, em or % and will be able to set the width in px.

Another idea is to default such column widths to some hardcoded value (say, 64px) or even the grid might try to calculate them (which can cause questionable results in stranger settings, but it is an idea - if an event gets exposed you will be able to do that in your application code).

---

Here's the reproducible:

@using System.ComponentModel.DataAnnotations
@* Used for the model annotations only *@

<strong>REPRO: activate the validation for the Name field to see the issue - click Save with an empty input</strong>

<TelerikGrid Data=@MyData EditMode="@GridEditMode.Popup" Pageable="true" Height="500px"
             OnUpdate="@UpdateHandler" OnDelete="@DeleteHandler" OnCreate="@CreateHandler">
    <GridToolBar>
        <GridCommandButton Command="Add" Icon="add">Add Employee</GridCommandButton>
    </GridToolBar>
    <GridColumns>
        <GridColumn Field=@nameof(SampleData.ID) Title="ID" Editable="false" />
        <GridColumn Field=@nameof(SampleData.Name) Title="Name" />
        <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 {

    public class SampleData
    {
        public int ID { get; set; }

        [Required(ErrorMessage = "aa something else")] // the first word is 1 or 2 characters to show the issue
        public string Name { get; set; }
    }

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

        // perform actual data source operations here through your service

        // if the grid Data is not tied to the service, you may need to update the local view data too
        var index = MyData.FindIndex(i => i.ID == item.ID);
        if (index != -1)
        {
            MyData[index] = item;
        }
    }

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

        // perform actual data source operation here through your service

        // if the grid Data is not tied to the service, you may need to update the local view data too
        MyData.Remove(item);
    }

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

        // perform actual data source operation here through your service

        // if the grid Data is not tied to the service, you may need to update the local view data too
        item.ID = MyData.Count + 1;
        MyData.Insert(0, item);
    }


    public List<SampleData> MyData { get; set; }

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

        for (int i = 0; i < 50; i++)
        {
            MyData.Add(new SampleData()
            {
                ID = i,
                Name = "Name " + i.ToString()
            });
        }
    }
}

Reproducible:

 Similar to the focusout-event of html-input...I want to do something after leaving a row.

----

ADMIN EDIT

The majority of things are possible through templates right now. You can put in the desired template (editor, row, cell, header, whatever you need to capture events from) and add the desired handler to your own DOM element. Then, you can alter the grid, if needed, through its state. If you need the row data item - it is available in the templates related to the data rows. If you need adjacent rows models - you can get them from the sorted list of grid data when you use its OnRead event - you have the current row and you can get a previous/next one as needed from that list.

That said, I am keeping this item open (status "Unplanned") so we can still gather any feedback and its popularity and what the community thinks, and whether it will be a meaningful addition to the component.

----