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 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; }
    }
}

---

With OnRead, AllPages cannot be exported because the grid Data only has the current page: https://docs.telerik.com/blazor-ui/components/grid/export/excel#notes:

If you are using the OnRead event, only the current page of data will be exported, because that's all the grid has at the time of the export action.

I load my data via "OnRead", because i need to implement pagination by myself, and I would like the export option to work with that too.

I know that I can bind the PageSize property to a variable, but then I have to build a dropdown with the available page sizes in a separate control. Are there plans to integrate a page size selection into the existing paging controls? Perhaps a PageSizes property that takes an array of integers.

Example:

PageSizes = "[10, 25, 50, 100]"

These would then be converted into a dropdown integrated into the existing paging controls on the grid.

Currently I need to define a custom JsonConverter to serialize the state of the grid.  I would prefer not to have to do this, however I understand that may just be the way things are for now.  Creating this ticket / issue to track if this is ever changed to not being needed.

For now I'll be setting up two serializers, one just for the grids that uses Newtonsoft, and the one I would prefer to use that uses System.Text.Json, https://github.com/Blazored/LocalStorage.

From https://docs.telerik.com/blazor-ui/components/grid/state 

// to store the serialized grid state, we need to have a custom serialized
// based on Newtonsoft.Json serialization. In the future this may not be required
public class FilterDescriptorJsonConverter : JsonConverter
{
///rest omitted
}
 

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.

---

Hi there,

currently the grid component does not provide a feature to set a specific position in virtual scrolling mode.

My team has currently implemented a workaround via javascript interop call to set a specific position. The workaround basically calculates the "scroll value" (we reverse engineered this value by looking at the Telerik js code) and passes it to the jQuery scrollTop() function. This results in an update of the scrollbar which in return triggers the OnReadItems event where we fetch the items based on the given skip and take values.

This workaround does not seem to work in all cases and is somewhat unreliable hence i'm requesting an official feature to set a specific position without the javascript hack.

What do you say?

So lonG

Daniel

Based on row values, I want to style the entire row.

It could perhaps be exposed through something like a "<RowDescriptor>" element inside the <GridColumns>

//ADMIN EDIT: We plan to extend this item so that it includes not only row styling, but also the ability to add CSS classes to the cells, without having to use the Template.

I would like to be able to customize the title in Editing Popup. 

<AdminEdit>

We plan to expose the following customization options:

• Title,
• Width
• Height
• MaxWidth
• MaxHeight

</AdminEdit>

I want to fetch grid records page per page according to the appropriate filter settings. While this is possible through the OnRead event, I want to be able to send the request to the server so that it is easier to fetch the data, like in the UI for ASP.NET Core grid. Currently you can do this only for a server-side project because you can pass the request object by reference, but for a WASM project it needs to serialize in an HTTP request.

---

ADMIN EDIT

You can find examples of doing this here: https://github.com/telerik/blazor-ui/tree/master/grid/datasourcerequest-on-server

---

With a pageable grid after scrolling down the first page and then paging, the next page should be scrolled to the top - but it is not.

Is there a way to scroll up by code until this is fixed ???

----

ADMIN EDIT

A sample solution is attached to the end of this post that shows how you can achieve this.

----

Hello,

Do you have any sample for custom group Header template.

e..g. To  calculate the value of the column based on the other fields.

---

ADMIN EDIT

---

Once aggregates for all fields are exposed, we will need to provide an option to align them with the corresponding columns. This can be achieved through a GroupHeaderColumnTemplate which is targeted in a separate request.

A Blazor Grid column having a boolean data type field should display as checkbox instead of the text True/False.

A checkbox is a fine representation for the end user, True/False may be ok for a developer ;-)

Editing the boolean value by a checkbox is already fine.

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.