Please add a feature to export the grid to a PDF file.

---

ADMIN EDIT

We have made two examples you can use for the time being to get a PDF document from the grid:

• server-side export - getting the grid data request and using some application code to generate the file: https://github.com/telerik/blazor-ui/tree/master/grid/pdf-export-server
• client-side export through Kendo libraries in the browser only: https://github.com/telerik/blazor-ui/tree/master/common/pdf-jpg-export-js

---

Hello,

I am new to your Blazor UI components.  Please provide a link for exporting a grid to excel.

Thanks,

Earl

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.

---

Hello,

I am currently fiddling around with the Blazor UI, mainly the grid. I was wondering if it is possible to configure the grid to automatically fit the columns to the contents they have?

Meaning that the width of the header and the content cells of a given column are automatically set to a value which best fits either the cells content or the header title (depending on what takes up more space).

Best Regards,

Karl

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 need the ability to show or hide command buttons based on a row's property.

I am aware that I can just cancel commands, but in my opinion, a command button should not even be shown when the command can't or shouldn't be executed on a row.

Unfortunately, I was unable to find a way to access the "context" (the instance) in a TelerikGridCommandColumn the same way you're able to in a normal TelerikGridColumn.

---

ADMIN EDIT

You can Vote for and Follow this request for a follow up on providing the model as context to the command column: https://feedback.telerik.com/blazor/1461283-pass-the-model-context-to-command-button. At the moment, conditional command buttons are possible in a "normal" column through the grid state, the page above shows an example.

---

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.

The feature request is to be able to customize the GridCsvExportOptions and GridExcelExportOptions from the API methods -

• ExportToExcelAsync
• ExportToCsvAsync
• SaveAsExcelFileAsync
• SaveAsCsvFileAsync

It will be useful to be able to customize the columns and data to be exported.

===

Telerik edit:

A possible workaround is to click the built-in Grid export buttons with JavaScript. With this approach, you will be able to use the built-in export options and events. Here is a REPL example.

Grid column header and content alignment (horizontal +Vertical)

---

ADMIN EDIT

For the time being, this is possible through the CellRender event, see below in the thread for an example.

---

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.

**Admin Edit**

The feature request will be researched and evaluated. It contradicts to our datasource filtering logic that relies on the type of the fields. Thus, it is highly possible that we will handle the task through a knowledge base example.

**Admin Edit**

---

ADMIN EDIT: Check the source code and comments in it from the following demo to see how to bind the grid to a DataTable: https://demos.telerik.com/blazor-ui/grid/data-table. You can also examine it offline - the entire demos project is available in the "demos" folder of your installation

The sample code snippet below will let the grid show data, but will not enable complex operations like filtering and sorting. Review the demo linked above for more details on the correct approach.

---

I would like to be able to supply a DataTable with an arbitrary amount of columns to the grid and display them all without declaring them all. This should also allow paging, sorting, filtering. At the moment binding to a DataTable is not supported, only IEnumerable collections are.

At the moment, here's the closest I can get, sorting and filtering throw errors so they are disabled.

ADMIN EDIT: The following knowledge base article has been updated to explain how to use nested models: https://docs.telerik.com/blazor-ui/knowledge-base/grid-bind-navigation-property-complex-object

At the moment, you must use flat models with primitive types for binding the grid. If you don't, the data source operations break and they can't even display "nested" values. Examples here and here.

I would like to be able to use my complex models so I can point a grid's column to a field like MyModel.MyNestedModel.MyPrimitiveField

My be related to binding to a data table and dynamic expando.

I want the grid to be able to resize all the columns (or only certain columns) to fit their data, when the data loads, without the user having to double click the border between them.

---

ADMIN EDIT

Automatic application of the auto fitting will come with a flicker, and that's why it was declined as a feature originally. In Blazor we have a detachment between code and when exactly something is rendered. So, we have no way to trigger the resizing logic immediately after the columns content is rendered. The events that are available will cause a flicker and can cause a performance hit - both for the browser and also by raising StateChanged multiple times.

Another caveat is how would this be exposed for configuration - should it work for all columns at once, or only for certain columns (how to control for which ones), how to control which data-related events should invoke this logic (or should it happen super often on any event). Exposing such configuration is likely to lead to a property hell type of situation.

Perhaps a way to get this would be to provide API on the grid to invoke that functionality that you can call as required by your logic and UX: https://feedback.telerik.com/blazor/1513384-programmatically-invoke-fit-to-width-functionality-for-the-grid-columns.

Nevertheless, we will keep this open to monitor for feedback, what is requested, interest and how people would want it exposed. Leave your comments and preferences here.

---

In a grouped Grid with editing if I collapse all groups and then expand one to edit an item in it, once I press Enter to complete the editing all groups expand.

Please add option for persisting the Collapsed State of the groups.

---

TELERIK EDIT


The feature applies to the other data operations as well (for example, paging, sorting).

Here is how to maintain the collapsed groups after editing by using the Grid OnStateChanged event and the Grid state as a whole:

@using Telerik.DataSource

<TelerikGrid @ref="@GridRef"
             Data="@GridData"
             TItem="@Employee"
             Pageable="true"
             Sortable="true"
             Groupable="true"
             FilterMode="GridFilterMode.FilterRow"
             OnStateInit="@OnGridStateInit"
             OnStateChanged="@OnGridStateChanged"
             EditMode="@GridEditMode.Inline"
             OnUpdate="@OnGridUpdate">
    <GridColumns>
        <GridColumn Field="@nameof(Employee.Name)" />
        <GridColumn Field="@nameof(Employee.Team)" />
        <GridColumn Field="@nameof(Employee.Salary)" />
        <GridColumn Field="@nameof(Employee.OnVacation)" />
        <GridCommandColumn>
            <GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true">Update</GridCommandButton>
            <GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
            <GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@code {
    private TelerikGrid<Employee>? GridRef { get; set; }

    private List<Employee> GridData { get; set; } = new();

    private ICollection<int>? GridCollapsedGroups { get; set; }

    private void OnGridUpdate(GridCommandEventArgs args)
    {
        var updatedItem = (Employee)args.Item;
        var originalItemIndex = GridData.FindIndex(x => x.Id == updatedItem.Id);

        if (originalItemIndex >= 0)
        {
            GridData[originalItemIndex] = updatedItem;
        }

        GridCollapsedGroups = GridRef!.GetState().CollapsedGroups;
    }

    private async Task OnGridStateChanged(GridStateEventArgs<Employee> args)
    {
        if (args.PropertyName == "EditItem" && GridCollapsedGroups != null)
        {
            args.GridState.CollapsedGroups = GridCollapsedGroups;

            await GridRef!.SetStateAsync(args.GridState);

            GridCollapsedGroups = default;
        }
    }

    private void OnGridStateInit(GridStateEventArgs<Employee> args)
    {
        args.GridState.GroupDescriptors = new List<GroupDescriptor>();

        args.GridState.GroupDescriptors.Add(new GroupDescriptor()
        {
            Member = nameof(Employee.Team),
            MemberType = typeof(string)
        });
    }

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 20; i++)
        {
            GridData.Add(new Employee()
            {
                Id = i,
                Name = $"Name {i}",
                Team = $"Team {i % 4 + 1}",
                Salary = (decimal)Random.Shared.Next(1000, 3000),
                OnVacation = i % 3 == 0
            });
        }
    }

    public class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public string Team { get; set; } = string.Empty;
        public decimal Salary { get; set; }
        public bool OnVacation { get; set; }
    }
}

Please add an attribute to Blazor GridColumn which allows to easily format data with the default .NET standard formats

e.g. <GridColumn Field="@(nameof(Item.Price))" Title="Price" Format="0#.##" />

It's a little bit annoying always having to define a template for this purpose.

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.

I would like to be able to set Min Width parameter to a Grid Column. The behavior I expect to see is:

• The Grid Column with set Min Width will take all the available space on large screens
• On smaller screens it will shrink but no more than the set min width (e.g. 100 px).