How would you remove the icon to expand a detail grid only for certain rows? Some rows will not have detail data and should not be expandable.
---
ADMIN EDIT
As suggested by Joel, you can use the RowRender event and a bit of CSS to hide the button. Here is a Knolwdge Base article that shows a fully runnable sample: https://docs.telerik.com/blazor-ui/knowledge-base/grid-conditional-expand-button.
void OnRowRenderHandler(GridRowRenderEventArgs args)
{
OrgUnit item = args.Item as OrgUnit;
args.Class = item.Children.length ? "has-children" : "no-children";
}
tr.no-children .k-hierarchy-cell *{
display:none !important;
}
I would like to be able to set Min Width parameter to a Grid Column. The behavior I expect to see is:
how to use Multiple Column Header in grid?
thanks
In addition to more filtering options we would like to have the ability to use custom filter components instead of the built-in ones. For example, through a cell template for the filter row.
Please comment below with how you would like to see this integrate into the data source operations of the grid (for example, should it fire an event where you filter the data you pass to the grid, or should the grid expose some method/interface that you need to use).
I would like the grid to behave like Excel for editing, and so I am using the InCell editing mode. I would like that pressing Tab would open the next cell in the row instead of moving the focus to the next focusable element.
---
ADMIN EDIT
The feature is rather complex and we want to make sure it is done right. To this end, we have postponed its implementation for the year 2021 instead of the November 2020 release. When a concrete release is known, this page will be updated. To get notifications for that, click the Follow button.
---
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).
---
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.
So far in the TelerikGrid component it is only possible to set the title of a column to a string. It would be useful to give the title/header a template instead of a simple string. In this way one could for example place a button, image, (...) inside the columnheader.
This kind of template-ability could be very handy in various other cases elsewhere, so please bring this flexibility into ui for blazor.
The need is to update, add or delete a lot of items at once (for example, the selected items). Sample of batch editing: https://demos.telerik.com/kendo-ui/grid/editing.
Perhaps this may become possible through methods on the grid that invoke the CUD operations.
---
ADMIN EDIT
There is a sample project that accomplishes most of these goals: https://github.com/telerik/blazor-ui/tree/master/grid/batch-editing
The grid state offers a great deal of flexibility in terms of controlling the grid, up to putting it in edit/insert mode.
---
Can you add a confirmation popup to the grid row delete like what is in the JQuery UI library?
---
ADMIN EDIT
As of 2.23.0 predefined confirmation dialog is available for use with just a few lines of code and you can achieve that behavior through the OnClick event of the command button:
<TelerikGrid Data=@GridData EditMode="@GridEditMode.Inline"
Height="500px" AutoGenerateColumns="true" Pageable="true"
OnDelete="@DeleteItem">
<GridColumns>
<GridAutoGeneratedColumns />
<GridCommandColumn Width="100px">
<GridCommandButton Command="Delete" Icon="delete" OnClick="@ConfirmDelete">Delete</GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
@code {
//for the confirmation - see the OnClick handler on the Delete button
[CascadingParameter]
public DialogFactory Dialogs { get; set; }
async Task ConfirmDelete(GridCommandEventArgs e)
{
Product productToDelete = e.Item as Product;
string confirmText = $"Are you sure you want to delete {productToDelete.Name}?";
string confirmTitle = "Confirm Deletion!";
//the actual confirmation itself
bool userConfirmedDeletion = await Dialogs.ConfirmAsync(confirmText, confirmTitle);
e.IsCancelled = !userConfirmedDeletion;//cancel the event if the user did not confirm
}
// only sample data operations follow
public List<Product> GridData { get; set; }
protected override async Task OnInitializedAsync()
{
GridData = Enumerable.Range(1, 50).Select(x => new Product { Id = x, Name = $"Name {x}" }).ToList();
}
private void DeleteItem(GridCommandEventArgs args)
{
Console.WriteLine("DELETING ITEM");
var argsItem = args.Item as Product;
GridData.Remove(argsItem);
}
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
}
}
---
Hi - this one is a feature request, not a bug. :)
For the filter menu, when you enter a filter value, it would be nice if you could press enter to execute the filter instead of having to click "Filter."
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; }
}
}