I want to edit the Excel file the grid exports before it gets to the user. For example, to add a sheet with data I want to generate, or to change columns, formats, colors.

----

ADMIN EDIT

I have attached to this post an example that shows how you can generate your own exported file so you can customize colors, sheets and so on. It also shows how to cache the DataSourceRequest of the grid so you can extract only the current page or all data, and so you can also apply the current grid sorts/filters and so on to the export. This also lets you add metadata to the sheet such as the current user settings such as filters that resulted in this filter.

----

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

I would like to export custom data to excel, for example - the selected items.

<AdminEdit>

As an attached file, you can see a sample implementation that shows how you can export the Selected Items from the Grid to excel.

</AdminEdit>

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).

---

I would prefer if you can use the FilterMenuTemplate in such a way that you can fetch also "filter criteria" from other fields/columns.

An example:

- grid has 3 coluns > Name, City, Population

- filter mode is set to filter menu and my filter menu should display at the first column.

- after the filter dialog is opened my expactation is that it includes also entries from other fields

In summary, my team would welcome the opportunity of central approach for filtering with multiple fields.

Regards,

Özmen

I am using Dutch culture and the following issue occurs when resizing - the edit button jumps to the end and back again.

Horizontal scroll bar is visible, but doesn't move with cursor/current-cell.

---

ADMIN EDIT

Applies also to vertical scrolling with or without row virtualization (e.g., using InCell edit mode, pressing Enter will open the next row for editing, but it will not work out with row virtualization at all after the current viewport, and without virtualization you will not see what's happening until you start typing and the browser calls .scrollIntoView() for the editor)

---

I am using EF on my backend and when I group I get an error like this one:

Unhandled exception rendering component: Processing of the LINQ expression '(GroupByShaperExpression:
      KeySelector: (t.FirstName), 
      ElementSelector:(EntityShaperExpression: 
          EntityType: Customer
          ValueBufferExpression: 
              (ProjectionBindingExpression: EmptyProjectionMember)
          IsNullable: False
      )
      )' by 'RelationalProjectionBindingExpressionVisitor' failed. This may indicate either a bug or a limitation in EF Core. See https://go.microsoft.com/fwlink/?linkid=2101433 for more detailed information.
System.InvalidOperationException: Processing of the LINQ expression '(GroupByShaperExpression:
KeySelector: (t.FirstName), 
ElementSelector:(EntityShaperExpression: 
    EntityType: Customer
    ValueBufferExpression: 
        (ProjectionBindingExpression: EmptyProjectionMember)
    IsNullable: False
)
)' by 'RelationalProjectionBindingExpressionVisitor' failed. This may indicate either a bug or a limitation in EF Core. See https://go.microsoft.com/fwlink/?linkid=2101433 for more detailed information.
   at Microsoft.EntityFrameworkCore.Query.Internal.RelationalProjectionBindingExpressionVisitor.VisitExtension(Expression extensionExpression)
   at System.Linq.Expressions.Expression.Accept(ExpressionVisitor visitor)

and a lot more line through the EF Core expression classes.

-----

ADMIN EDIT

    protected override void OnInitialized()
    {
        GridData = ProductService.GetProducts().ToList();
    }

----

It will be useful if the grid column state contains the Field parameter if such is specified.

This will make easier mapping the ColumnState entity to the actual column.

I have a column in the grid that is bound to a enum. The enum value names show up fine in the grid, but when exported, I get the underlying int value, which is incomprehensible to the users.

Thanks

---

ADMIN EDIT:

As a workaround you could generate the .xlsx file yourself. I'm attaching a sample project that allows you to do that. The relevant line of code is line 125 in Index.razor

---

I have a blazor grid with a large number of columns which I would like to have the width of the page and a horizontal scrollbar to be able to scroll through all of the columns.

According the the documentation I have found (https://demos.telerik.com/blazor-ui/grid/scrolling), setting the width of the grid to 100% and providing widths for the columns which exceed that of the width of the grid/page should cause the horizontal scrollbar to appear. Instead of doing this, however, the grid just expands horizontally to fit all of the columns, no matter what I try. In addition, it appears to be expanding the entire page horizontally to fit itself, as it is increasing the size of all of my bootstrap columns so that it fits within the bootstrap container.

Here is an example of a page containing a grid where I am experiencing this:

@page "/admin/users/manageusers"
@inherits ManageUsersBase


<h3>Manage Users</h3>

<WS7.Components.PDAuthorizeBase AllowedRoleIds="ManageAllUsers,ManageAssignedUsers" />
@if (this.Users == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <div class="form-group">
        <label for="UserSearch" class="col-form-label">Search</label>
        <input id="UserSearch" class="form-control" type="search" aria-label="User Search" placeholder="Search" @bind-value="Filter" @bind-value:event="oninput" />
    </div>


    <TelerikGrid Data="@FilteredUsers" TItem="WS7.Engine.Models.ViewModels.ManageUsersViewModel" Height="600px" Width="100%" Pageable="true" PageSize="40" Sortable="true" Groupable="false"
                 FilterMode="GridFilterMode.FilterMenu" Resizable="true" Reorderable="true" OnEdit="EditUser" ScrollMode="@GridScrollMode.Scrollable">
        <GridToolBar>
            <GridCommandButton OnClick="(()=>AddUser())">
                <span class="oi oi-plus"></span> Add
            </GridCommandButton>
        </GridToolBar>
        <GridColumns>
            <GridCommandColumn Width="100px">
                <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>


            </GridCommandColumn>

            <GridColumn Field="UserName" Title="User Name" Width="500px" />
            <GridColumn Field="Email" Title="Email" Width="500px" />
            <GridColumn Field="FirstName" Title="First Name" Width="500px" />
            <GridColumn Field="LastName" Title="Last Name" Width="500px" />
            <GridColumn Field="AccountStatus" Title="Account Status" Width="500px">
                <Template>
                    @{
                        string toolTip;
                        WS7.Engine.Models.ViewModels.ManageUsersViewModel user = context as WS7.Engine.Models.ViewModels.ManageUsersViewModel;
                        toolTip = "Account Status: " + user.AccountStatus;
                        toolTip += Environment.NewLine + "Active: " + user.Active.ToString();
                        toolTip += Environment.NewLine + "Email Confirmed: " + user.EmailConfirmed.ToString();
                    }
                    <div class="badge badge-pill badge-info">
                        <span class="oi oi-info" data-toggle="tooltip" data-placement="top" title="@toolTip"></span>
                    </div>
                </Template>
            </GridColumn>

            @*<GridCommandColumn Width="90px">
                    <GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
                </GridCommandColumn>*@
        </GridColumns>
    </TelerikGrid>
}

---

ADMIN EDIT

You can find some more details on  the origin of the issue in the thread below and in the following Knowledge Base article, which also offers a few ideas for solutions to this browser behavior: https://docs.telerik.com/blazor-ui/knowledge-base/grid-bootstrap-flex-width-issue

---

Hi, 

I am using a grid on a data structure that has nested properties inside. Previously, I was able to do this which worked fine: (notice the first 2 colums)

              <TelerikGrid Data="@PackedInfo.PackedParts" Height="100%">
                    <GridColumns>
                        <GridColumn Field=@nameof(PackedPart.Part.PartNo) Title="Part no" />
                        <GridColumn Field=@nameof(PackedPart.Part.PartDescription) Title="Description" />
                        <GridColumn Field=@nameof(PackedPart.UnitWeightG) Title="Substance Weight" />
                        <GridColumn Field=@nameof(PackedPart.FlashPointCentigrade) Title="Flash point" />
                        <GridColumn Field=@nameof(PackedPart.Pg) Title="PG" />
                        <GridColumn Field=@nameof(PackedPart.Qty) Title="PG" />
                    </GridColumns>
                </TelerikGrid>

I recently upgraded to the latest version (Telerik.UI.for.Blazor (2.29.0) and noticed that the first 2 fields are no longer displaying. I fixed this, by specifying the field names as string values:

               <TelerikGrid Data="@PackedInfo.PackedParts" Height="100%">
                    <GridColumns>
                        <GridColumn Field="Part.PartNo" Title="Part no" />
                        <GridColumn Field="Part.PartDescription" Title="Description" />
                        <GridColumn Field=@nameof(PackedPart.UnitWeightG) Title="Substance Weight" />
                        <GridColumn Field=@nameof(PackedPart.FlashPointCentigrade) Title="Flash point" />
                        <GridColumn Field=@nameof(PackedPart.Pg) Title="PG" />
                        <GridColumn Field=@nameof(PackedPart.Qty) Title="PG" />
                    </GridColumns>
                </TelerikGrid>

I have also tried using @nameof(Part.PartNo) but that didn't work either. Only providing nested properties as string values works. This should not be the intended behaviour i'm sure? 

regards,

Chris Nateghi

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.

---

TELERIK EDIT

The officially supported way to clear the GridSeachBox is through the Grid state. You can see an example in the Grid SeachBox documentation.

A possible workaround for old versions is to clear the search textbox with JavaScript and to trigger its input event:

@inject IJSRuntime js

<TelerikGrid Data="@GridData"
             Pageable="true"
             Sortable="true"
             Class="custom-grid-class">
    <GridToolBarTemplate>
        <GridSearchBox />
        <TelerikButton Icon="@SvgIcon.X" OnClick="@OnClearButtonClick"></TelerikButton>
    </GridToolBarTemplate>
    <GridColumns>
        <GridColumn Field="@nameof(SampleModel.Name)" />
        <GridColumn Field="@nameof(SampleModel.Description)" />
    </GridColumns>
</TelerikGrid>

<script suppress-error="BL9992">//
    function clearSearch() {
        // locate the searchbox of the Grid
        const input = document.querySelector(".custom-grid-class .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} ));
    }
//</script>

@code {
    private List<SampleModel> GridData { get; set; } = new();

    private async Task OnClearButtonClick()
    {
        await js.InvokeVoidAsync("clearSearch");
    }

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 50; i++)
        {
            GridData.Add(new SampleModel()
            {
                Id = i,
                Name = $"{(char)(64 + i % 26 + 1)}{(char)(64 + i % 26 + 1)} {i}",
                Description = $"{(char)(123 - i % 26 - 1)}{(char)(123 - i % 26 - 1)} {i}"
            });
        }
    }

    public class SampleModel
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public string Description { get; set; } = string.Empty;
    }
}