Currently, when there is a blank or null value, no text is rendered next to the CheckBox in the CheckBoxList filter. I want to be able to customize that and easily set my desired text. For example, "(Blanks)" as in Excel.
Hi,
I have spent a while looking for the feature to move the Footer Template to the first line of the Telerik grid. Is this currently possible with a parameter I'm unaware of? How possible would this be to do if not.
Kind Regards,
Elliot
The issue targets a Grid with cell selection and DragToSelect feature disabled where at least one column has Visible="false". With this configuration, when using Shift + Click to select multiple cells, the result is a mismatch in the cells that should be selected, after the position where the invisible column is placed.
Video reproduction attached. Reproduction code: https://blazorrepl.telerik.com/GyFuQwPf37H8riAM19.
Please add the ability to expand or collapse all rows as a default feature of the Grid and add the option to set a title on the header (e.g. "Expand").
I've seen the Expand Rows From Code example, but I'd like this to be part of the grid itself, not a button outside of the grid.
I'm trying to add a button in the unused top left cell of the grid, but I've not found a way to use that cell.
The behavior is reproducible in server-side apps when using the Inline or Incell mode and editing numerical values.
When inputting into the field the first value input is either ignored or removed. The default is 0, when backspacing to clear it and then inputting a number, sometimes the number is shown and then immediately removed, and sometimes it's not shown at all and will only displayed when typed a second time.
===
ADMIN EDIT
===
Possible workarounds for the time being:
- Use EditorTemplate with a NumericTextBox component inside: https://blazorrepl.telerik.com/cyvOYBvc39Vnes2L43.
- Use Popup Edit mode.
Please expose the current data of the Grid and TreeList when using Data or OnRead. This will spare the need to cache data for the second time in-memory, or repeat all data operations. The benefit is that the app can:
- Know what data items the user is seeing.
- Obtain the data it its current shape / state.
My scenario is a lot similar to this one and I call SetStateAsync to exit the edit mode. In addition, my Grid is grouped on initialization. I noticed that each time I call SetStateAsync, the AggregateFunctions count of the GroupDescriptor increases and one more identical AggregateFunction is added to the same GroupDescriptor. This results in slowing the editing process.
Here is a simpler reproduction: https://blazorrepl.telerik.com/wekZmTPE35YpD8f504.
I have recently encountered an accessibility issue with the grid popup editor where the labels for the generated fields are not linked to their respective editor. It seems that the label does have a "for" attribute that is the same as the column title which I expect, but the Id of the input does not get set to the same thing. I can't see any option to make the association happen automatically.
===
ADMIN EDIT
===
A possible option for the time being is to use a custom popup edit form. You may either declare your desired custom content for the form and link the labels to their respective inputs or use the Form component with the field autogeneration feature which will automatically link the labels to the inputs.
Problem Statement:
We have the following blazor grid:
We have enabled the GridColumnMenuSettings
Now when we open the column chooser it does not disable for the last option.
When we don't have the GridCheckboxColumn then it works as intended
The last column option is disabled
Expected Result : We don't want the check box column to be shown in the column chooser and the last option to be unchecked in the column chooser needs to be disabled.
@* Use the Template to render the list of columns and add some custom styles *@
<TelerikGrid Data="@MyData"
Pageable="true"
PageSize="5"
Width="700px"
FilterMode="@GridFilterMode.FilterMenu"
Sortable="true"
ShowColumnMenu="true">
<GridSettings>
<GridColumnMenuSettings Sortable="true"
Lockable="false"
FilterMode="@ColumnMenuFilterMode.None" />
</GridSettings>
<GridColumns>
<GridCheckboxColumn Width="80px" HeaderClass="header-select-all" />
<GridColumn Field="@(nameof(SampleData.Id))" Width="80px" Title="Id" Id="id-column-id" />
<GridColumn Field="@(nameof(SampleData.FirstName))" Title="First Name" Id="firstname-column-id" />
<GridColumn Field="@(nameof(SampleData.LastName))" Title="Last Name" Id="lastname-column-id" />
<GridColumn Field="@(nameof(SampleData.CompanyName))" Title="Company" Id="companyname-column-id" />
<GridColumn Field="@(nameof(SampleData.Team))" Title="Team" Id="team-column-id" />
<GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" Id="hiredate-column-id" />
</GridColumns>
</TelerikGrid>
@code {
public string TextboxValue { get; set; } = string.Empty;
public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
{
Id = x,
FirstName = $"FirstName {x}",
LastName = $"LastName {x}",
CompanyName = $"Company {x}",
Team = "team " + x % 5,
HireDate = DateTime.Now.AddDays(-x).Date
});
public class SampleData
{
public int Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string CompanyName { get; set; }
public string Team { get; set; }
public DateTime HireDate { get; set; }
}
}
I want to filter a Grid by DateTimeOffset? field
===ADMIN EDIT===
There are two possible options:
1. Use a DTO in which you have a DateTime field converted as desired by your app from the DateTimeOffset. Filtering, sorting, editing, and grouping on DateTime values are supported out-of-the-box.
REPL example that demonstrates this approach.
2. Use the Grid Filter Template. As a filter editor, you can use the DateTimePicker component, which supports the DateTimeOffset type.
REPL example that demonstrates this approach.
I am using InCell Grid editing. I want to prevent an edit cell from closing on certain condition. However, when I cancel the update with args.IsCancelled = true in OnUpdate, the user can still close the edited cell with Enter or Tab. This is inconsistent with inline or popup editing.
===
A possible workaround is to cancel both OnUpdate and the subsequent OnEdit.
https://blazorrepl.telerik.com/QykMHkks10APuDLQ47
@using System.ComponentModel.DataAnnotations
<TelerikGrid Data="@GridData"
EditMode="@GridEditMode.Incell"
OnEdit="@OnGridEdit"
OnUpdate="@OnGridUpdate">
<GridColumns>
<GridColumn Field="@nameof(SampleModel.Name)" />
<GridColumn Field="@nameof(SampleModel.Min)" />
<GridColumn Field="@nameof(SampleModel.Max)" />
</GridColumns>
</TelerikGrid>
<TelerikNotification @ref="@NotificationRef"
HorizontalPosition="@NotificationHorizontalPosition.Center"
VerticalPosition="@NotificationVerticalPosition.Top" />
@code {
private TelerikNotification? NotificationRef { get; set; }
private List<SampleModel> GridData { get; set; } = new();
private bool ShouldCancelOnEdit { get; set; }
private int LastId { get; set; }
private void OnGridEdit(GridCommandEventArgs args)
{
if (ShouldCancelOnEdit)
{
ShouldCancelOnEdit = false;
args.IsCancelled = true;
}
}
private void OnGridUpdate(GridCommandEventArgs args)
{
var updatedItem = (SampleModel)args.Item;
if (updatedItem.Min > updatedItem.Max)
{
NotificationRef?.Show(new NotificationModel()
{
ThemeColor = ThemeConstants.Notification.ThemeColor.Error,
Text = "Min must be smaller than Max"
});
args.IsCancelled = true;
ShouldCancelOnEdit = true;
}
else
{
var originalItemIndex = GridData.FindIndex(i => i.Id == updatedItem.Id);
if (originalItemIndex != -1)
{
GridData[originalItemIndex] = updatedItem;
}
ShouldCancelOnEdit = false;
}
}
protected override void OnInitialized()
{
for (int i = 1; i <= 5; i++)
{
GridData.Add(new SampleModel()
{
Id = ++LastId,
Name = $"SampleModel {LastId}",
Min = Random.Shared.Next(1, 10),
Max = Random.Shared.Next(11, 20)
});
}
}
public class SampleModel
{
public int Id { get; set; }
[Required]
public string Name { get; set; } = string.Empty;
public int Min { get; set; }
public int Max { get; set; }
}
}
I am using Grid with Cell Selection enabled and DragToSelect="true". If I define a Template inside the GridColumn tag and I add a div inside that, SelectedCellsChanged event handler does not trigger if I start dragging by clicking on the div or if I drop inside that one.
Reproduction: https://blazorrepl.telerik.com/myasmnvQ46Jt7k5n50.
===
ADMIN EDIT
===
The only workaround for the time being is to disable the drag selection and let the user only select cells by clicking them. The cells will be selected even if the user clicks on the custom <div> element inside the template.
Currently the GridSearchBox is able to search in all of the visible columns but when it comes to searching in multiple columns split by space it does not work. Or even two different strings in the same cell.
Example:
If from the above grid, I type in the search box, "LT" three products will be returned but if I type "LT LD" it should return two products but the results set comes with nothing.
I have implemented CustomSearchBox component as a solution in the interim to achieve this functionality. But it would be a worthwhile effort to have this functionality out of the box.
Thank you.
Sheraz
Initial groups are duplicated in version 6.1.0. The OnStateInit event fires twice and the group descriptors are added twice. The problem occurs only when using <GridAggregates>.
The workaround is to clear the GroupDescriptors collection on OnStateInit.
@using Telerik.DataSource
<h2>No Aggregates</h2>
<p><code>OnStateInitCounter1:</code> @OnStateInitCounter1</p>
<TelerikGrid Data="@GridData"
TItem="@SampleModel"
Groupable="true"
OnStateInit="@OnGridStateInit1">
<GridAggregates>
</GridAggregates>
<GridColumns>
<GridColumn Field="@nameof(SampleModel.Name)" />
<GridColumn Field="@nameof(SampleModel.GroupName)" />
</GridColumns>
</TelerikGrid>
<h2>With Aggregates</h2>
<p><code>OnStateInitCounter2:</code> @OnStateInitCounter2</p>
<TelerikGrid Data="@GridData"
TItem="@SampleModel"
Groupable="true"
OnStateInit="@OnGridStateInit2">
<GridAggregates>
<GridAggregate Field="@nameof(SampleModel.Name)" Aggregate="@GridAggregateType.Count" />
</GridAggregates>
<GridColumns>
<GridColumn Field="@nameof(SampleModel.Name)" />
<GridColumn Field="@nameof(SampleModel.GroupName)" />
</GridColumns>
</TelerikGrid>
<h2>With Aggregates and Workaround</h2>
<p><code>OnStateInitCounter3:</code> @OnStateInitCounter3</p>
<TelerikGrid Data="@GridData"
TItem="@SampleModel"
Groupable="true"
OnStateInit="@OnGridStateInit3">
<GridAggregates>
<GridAggregate Field="@nameof(SampleModel.Name)" Aggregate="@GridAggregateType.Count" />
</GridAggregates>
<GridColumns>
<GridColumn Field="@nameof(SampleModel.Name)" />
<GridColumn Field="@nameof(SampleModel.GroupName)" />
</GridColumns>
</TelerikGrid>
@code {
private int OnStateInitCounter1 { get; set; }
private int OnStateInitCounter2 { get; set; }
private int OnStateInitCounter3 { get; set; }
private void OnGridStateInit1(GridStateEventArgs<SampleModel> args)
{
++OnStateInitCounter1;
args.GridState.GroupDescriptors.Add(new GroupDescriptor
{
Member = nameof(SampleModel.GroupName)
});
}
private void OnGridStateInit2(GridStateEventArgs<SampleModel> args)
{
++OnStateInitCounter2;
args.GridState.GroupDescriptors.Add(new GroupDescriptor
{
Member = nameof(SampleModel.GroupName)
});
}
private void OnGridStateInit3(GridStateEventArgs<SampleModel> args)
{
++OnStateInitCounter3;
args.GridState.GroupDescriptors = new List<GroupDescriptor>();
// OR
args.GridState.GroupDescriptors.Clear();
args.GridState.GroupDescriptors.Add(new GroupDescriptor
{
Member = nameof(SampleModel.GroupName)
});
}
private List<SampleModel> GridData { get; set; } = new();
protected override void OnInitialized()
{
for (int i = 1; i <= 4; i++)
{
GridData.Add(new SampleModel()
{
Id = i,
Name = $"Name {i}",
GroupName = $"Group {i % 2 + 1}"
});
}
}
public class SampleModel
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
public string GroupName { get; set; } = string.Empty;
}
}
When trying to make a cell selection using Shift + Click, the clicked cells are not correctly added to the selection range. When clicking on adjacent cells, the selection range gets misplaced resulting in deselection of the first selected cells.
I have a filterable Grid with Enum values. I am saving the state in the OnStateChanged so I can then restore it on future page loads (similar to the approach here).
When trying to restore the deserialized state in the OnStateInit, the Grid throws:
Unhandled exception rendering component: Specified cast is not valid.
Reproduction: https://blazorrepl.telerik.com/QSaiaDkq55RfazF402.
===
ADMIN EDIT
===
At the time of writing (UI for Blazor 6.1.0), the Grid only supports int as an underlying type of the Enum values. When the state is deserialized, the Enum values are returned as short and this causes the issue.
To handle the scenario for the time being you can modify the state object before setting it to the Grid. Loop through the filter descriptors in the state and convert the filter value of the columns bound to Enum, so the value type in the state is the supported int.
Here is a basic example: https://blazorrepl.telerik.com/woaCOZlT29E05lpL45.
If I group by a column, and one of the values in the column contains a forward slash ( '/'), then the value will not be grouped, the Grid ignores it.
The issue seems to occur only when LoadGroupsOnDemand is set to true.
===
ADMIN EDIT
===
A possible option for the time being is to disable the LoadGroupsOnDemand feature.