Hi, how to show a pointer cursor while mouse over the group arrow icon? I could probably set style="cursor: pointer", but just wondering if there is any other approach. Thanks.
Hello,
If the Grid has X columns at first, and then it renders Y more columns, the new Y columns will not be resizable. Here is a test page.
A possible workaround is to define all columns initially, but hide some of them with Visible="false".
This worked in 2.29 and broke in 2.30.
If you create a second Grid on the page, it will clear the SearchBox input value of the first Grid.
<p><TelerikButton OnClick="@ToggleSecondGrid">Toggle Second Grid</TelerikButton></p>
<TelerikGrid Data="@GridData">
<GridToolBar>
<GridSearchBox />
</GridToolBar>
<GridColumns>
<GridColumn Field=@nameof(Product.ProductName) Title="Product Name" />
</GridColumns>
</TelerikGrid>
@if (ShowSecondGrid)
{
<TelerikGrid Data="@( new List<Product>() )">
<GridColumns>
<GridColumn />
</GridColumns>
</TelerikGrid>
}
@code {
List<Product> GridData { get; set; }
bool ShowSecondGrid { get; set; }
async Task ToggleSecondGrid()
{
ShowSecondGrid = !ShowSecondGrid;
}
protected override void OnInitialized()
{
GridData = new List<Product>();
for (int i = 1; i <= 5; i++)
{
GridData.Add(new Product()
{
ProductId = i,
ProductName = "Product " + i.ToString(),
UnitPrice = (decimal)(i * 3.14),
UnitsInStock = (short)(i * 1),
Discontinued = false
});
}
}
public class Product
{
public int ProductId { get; set; }
public string ProductName { get; set; }
public decimal? UnitPrice { get; set; }
public short? UnitsInStock { get; set; }
public bool Discontinued { get; set; }
}
}
The idea of the feature is to be able to customize the list of FilterOperators displayed in the list of the FilterRow and FilterMenu.
FilterRow UI element
FilterMenu UI element
How can I get the tooltips for validation of each field displayed at the corresponding field in a Grid Popup form, not just the summary below the Form, etc?
---
ADMIN EDIT
---
This will be handled through exposing an option to set your preferred field validation message type - tooltip or inline. It will cover all edit modes (Popup, Inline, InCell).
If you want to remove the ValidationSummary after adding field validation messages, check the ability to remove ValidationSummary from the Popup edit form.
----
ADMIN EDIT
The Excel export seems to honor it, so it can be used as a workaround.
Reproducible with the workaround commented out:
<TelerikButton OnClick="@CurrentPage">Current Page</TelerikButton>
<TelerikButton OnClick="@AllPages">All Pages</TelerikButton>
<TelerikGrid Data="@GridData"
@ref="@GridRef"
Pageable="true"
Sortable="true"
Resizable="true"
Reorderable="true"
FilterMode="@GridFilterMode.FilterRow"
Groupable="true">
<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 {
async Task AllPages()
{
ExportAllPages = true;
await Task.Delay(20); // allow the component to rerender with the new parameter
await GridRef.SaveAsCsvFileAsync();
//await GridRef.SaveAsExcelFileAsync(); // this works
}
async Task CurrentPage()
{
ExportAllPages = false;
await Task.Delay(20); // allow the component to rerender with the new parameter
await GridRef.SaveAsCsvFileAsync();
//await GridRef.SaveAsExcelFileAsync(); // this works
}
private TelerikGrid<SampleData> GridRef { get; set; }
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; }
}
}
Here is the scenario:
- UI for Blazor version 2.30
- Grid with InCell editing
- EditorTemplate with a DropDownList inside
In version 2.30 there is no longer need for an explicit blur handler for the in-cell editor template. The editor template closes automatically when the user selects a value from the DropDownList. However, the new value is ignored.
REPL test page: https://blazorrepl.telerik.com/mFbcmQvs16Lf1jwv18
I have a filterable DropDownList in a Grid EditorTemplate. The edit mode is InCell.
When the user opens the dropdown, the edited cell closes immediately with an OnUpdate call. The DropDownList value can be changed only with the keyboard or if I disable DropDownList filtering.
===
The same problem occurs with any component that uses a popup and the popup can gain focus - ComboBox, ColorPicker, etc.
If a Grid with ColumnVirtualization enabled is programmatically resized at runtime, some of its cells appear empty.
The same behavior will occur after column resizing. It looks like it is not accordingly updated as if a scroll horizontally, it updates and the missing data is rendered.
===
Edit: Here is a workaround for the column resizing scenario. Part of this approach can be used to workaround Grid resizing as well -
Use the OnStateChanged event simulate horizontal scrolling inside the Grid after column resize. The custom Grid CSS class is optional, if there are pages with multiple Grids.
Razor
<TelerikGrid Class="virtual-grid"
OnStateChanged="@( (GridStateEventArgs<GridModel> args) => OnGridStateChanged(args) )" />
C#
async Task OnGridStateChanged(GridStateEventArgs<User> args)
{
if (args.PropertyName == "ColumnStates")
{
await js.InvokeVoidAsync("loadColumns", "virtual-grid");
}
}
JavaScript
function loadColumns(gridClass) {
var rowContainer = document.querySelector("." + gridClass + " .k-grid-content");
if (rowContainer) {
rowContainer.scrollLeft += 1;
rowContainer.scrollLeft -= 1;
}
}
When a user clicks outside of the edited input in the same cell, the cell remains in edit mode. The problem occurs in the 2.30.0 version.
You can see this behavior in the Incell Editing demo.