I would like to be able to customize the title in Editing Popup.
<AdminEdit>
We plan to expose the following customization options:
</AdminEdit>
Sometimes, we just want a simple equal filter in grid, without operators options
---
ADMIN EDIT
If you want to modify the current behavior and layout of the filters, use the filter template (there is another example in this thread - in the post from 29 Jun 2020 that you can also use as base).
---
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 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; }
}
}
---
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)
---
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 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} ));
---
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.
---
Our application has, on many pages, complex business logic to enable or disable specific cells based upon the viewing mode, the user's capabilities, the type of data in the row, etc. If a cell is to be disabled, we also want to change the background color.. This is easily accomplished with the OnCellRender property.
However, we cannot enable/disable specific cells within a column without creating a column template with conditional logic. And so, in all our grids, EVERY column has to have a template, just for that trivial function. And now we have business logic smeared across both the razor page and the code page.
A template should be required only if you are doing something unusual or exceptional. Setting a cell to be enabled or disabled is completely routine, and one should not have to create a template just for that.
If you would add a property such as OnCellEnable, to override the column Enabled property on a per-cell basis, it would be extremely useful and would eliminate the need for literally hundreds of templates.
Thanks
It is a common request to show grids in alternating colors, rather than simply white and grey. Because the Grid component generates the <tr> element, we are left with manually setting each <td> element. A tedious but effective solution.
The feature I would like to request is to add 2 new tags to the <TelerikGrid> component, call them EvenRowClass, and OddRowClass. The behavior is the same as the Class tag, but they operate on Even and Odd numbered rows of data, respectively. Their values would be added to the <tr> element as <tr class="MyEvenClass"> or <tr class="MyOddClass" in the same manner class k-alt is generated or not. This would provide a simple yet extensible mechanism to achieve custom alternating row colors in a Grid.