https://docs.telerik.com/blazor-ui/components/grid/editing/incell#notes
I am using an EditorTemplate with a method called ChangeHandler(). After clicking in another row everything works fine but if I leave the cell by pressing enter the UpdateHandler gets called more than two times and comparing args.Item with the GridItem doesn't help because the calls are asynchronous.
=====
Admin Edit
With 2.22.0, the InCell editing mode was revamped to provide better user experience and this alters the way it worked. In the common case, there will no longer be double OnUpdate calls (unless explicit application logic invokes them). With 2.23.0, Tab and Enter keys that bubble from editor templates will be handled by the grid like they are handled for the built-in editors.
This means that this issue is, effectively, solved. You can see the Notes section about editor templates to see how you can also handle the OnBlur event to capture mouse clicks outside of the component so that you can save changes and remove the edited item. See the full notes here (the Event Sequence section was heavily revamped for clarity) and here on editor template behavior.
Thus, the previous ides about Save and Cancel methods on the edit context might not be implemented, which will also be one breaking change that we could avoid:
After discussion with the development team, the proposed resolution is to provide a context that provides Save/Cancel operations. The goal is to provide easier configuration for IncellEditing and EditorTemplates and consistent behavior with mouse and keyboard interaction. However, the change will introduce a breaking change in our EditorTemplate, should be researched further and that is why this is logged as a feature request.
=====
I want to add a custom sort comparer but I don't want to perform the whole sorting manually through the OnRead event.
Please allow adding custom expressions that will be applied to the query that the DataSource package does for easier customizations of the data operations.
Looking through the examples I can't find one with SelectionMode="GridSelectionMode.Multiple" and using a RowTemplate.
ADMIN EDIT: This is not a bug in the component, an example of how this can be implemented by the app is available in the comments.
I'm not sure what I should be binding my checkbox to so it accurately reflects selection state.
From the RowTemplate Example adding SelectionMode:
<TelerikGrid Data=@GridData
@bind-SelectedItems="@SelectedItems"
SelectionMode="GridSelectionMode.Multiple" Height="@Height">
<RowTemplate Context="product"> @*Trying to inspect what is generated in the examples I came up with this, but not sure what to bind to checked*@
<td role="gridcell" colspan=0 data-col-index="0">
<span>
<input class="k-checkbox k-grid-checkbox telerik-blazor" type="checkbox" />
</span>
</td><td> <img class="rounded-circle" src="@($"images/{product.ProductId}.jpg")" alt="Alternate Text" /> @product.ProductName </td> <td> @(String.Format("{0:C2}", product.UnitPrice)) </td> </RowTemplate> <GridColumns> <GridColumn Field=@nameof(Product.ProductName) Title="Product Name" /> <GridColumn Field=@nameof(Product.UnitPrice) Title="Unit Price" /> </GridColumns> </TelerikGrid>
I am using Telerik Grid in our project and I have enabled the feature Reorderable="true". At GridColumnMenuSettings I am getting the following options:
Set column position :
Those options are commonly showing for all columns but I want to disable "Move Next" option for the last column and "Move Previous" option for the first column as these options are not applicable to the corresponding columns.
I have created a custom model where I added an ExpandoObject and a couple properties to it. The Grid seems to render the data successfully but the data operations are not possible - the nested properties are treated as invalid. Please add support for nested ExpandoObject properties in custom models.
---
ADMIN EDIT
---
For the time being, there is a workaround that you may try. Use the ExpandoObject directly, do not nest it in the custom model - bind the Grid Data to a collection of ExpandoObject and populate its properties in the OnInitialized.
@using System.Dynamic
<TelerikGrid Data="@Data"
Pageable="true" Sortable="true" Groupable="true"
FilterMode="Telerik.Blazor.GridFilterMode.FilterRow"
EditMode="@GridEditMode.Incell"
Resizable="true" Reorderable="true">
<GridColumns>
<GridColumn Field="Id" FieldType="typeof(string)" Width="120px" />
<GridColumn Field="DetailData.PropertyInt" Title="Column A" FieldType="@typeof(int)" />
<GridColumn Field="DetailData.ProptertyString" Title="Column B" FieldType="@typeof(string)"/>
<GridColumn Field="DetailData.PropertyDate" Title="Column C" FieldType="@typeof(DateTime)"/>
</GridColumns>
</TelerikGrid>
@code {
public ExpandoObject[] Data { get; set; } = Array.Empty<ExpandoObject>();
protected override async Task OnInitializedAsync()
{
Data = new ExpandoObject[]
{
GetPopulatedExpando(1),
GetPopulatedExpando(2),
GetPopulatedExpando(3),
GetPopulatedExpando(4),
GetPopulatedExpando(5),
};
}
private ExpandoObject GetPopulatedExpando(int id)
{
dynamic expando = new ExpandoObject();
expando.Id = id;
dynamic nested = new ExpandoObject();
nested.PropertyInt = id;
nested.ProptertyString = "ID " + id;
nested.PropertyDate = new DateTime(2022, 4, id);
expando.DetailData = nested;
return expando;
}
}
Hello,
when using grid with multiple-selection mode and row template, ONLY single row selection works. Not able to select multiple rows. Grid somehow internally "reverts"(lose) selection to single row.
Here is full detail, with video and sample "what acts weird". Start with the post " Michal - Posted on: 19 Oct 2023 08:38":
Simplified reproducible sample from Nadezhda Tacheva(thanks), has that issue also - try to select multiple rows:
Video with the problem AND expected result(video is based on sample posted at same feedback above "Posted on: 19 Oct 2023 08:38":
https://feedback.telerik.com/attachment/download/1120622
Fully working example(recorded video) in VS - GridCheckBoxColumn in sample "IS HACK!", not required at all(just hint, which can be removed):
@using System.Collections.Generic;
@using System.Dynamic;
<span>Selection bind not working as expected:</span>
<TelerikGrid TItem="ExpandoObject"
@bind-SelectedItems="@gSelectedItems"
OnRowClick="@OnGridRowClicked"
SelectionMode="GridSelectionMode.Multiple"
OnRead=@gHLReadItems
RowHeight="60">
<RowTemplate Context="ctx">
<td>
@{
var it = (ctx as IDictionary<string, object>);
@(it["Name"].ToString())
}
</td>
</RowTemplate>
<GridColumns>
<GridCheckboxColumn CheckBoxOnlySelection="true" Visible="false" @key="@("sIDX1")" SelectAll="false" />
<GridColumn Field="Name" FieldType=@typeof(string) Title="Name" />
</GridColumns>
</TelerikGrid>
<span>WORKs OK:</span>
<TelerikGrid TItem="ExpandoObject"
@bind-SelectedItems="@gSelectedItems"
OnRowClick="@OnGridRowClicked"
SelectionMode="GridSelectionMode.Multiple"
OnRead=@gHLReadItems
RowHeight="60">
<GridColumns>
<GridCheckboxColumn CheckBoxOnlySelection="true" Visible="false" @key="@("sIDX2")" SelectAll="false" />
<GridColumn Field="Name" FieldType=@typeof(string) Title="Name" />
</GridColumns>
</TelerikGrid>
@code
{
private List<ExpandoObject> RowData;
IEnumerable<ExpandoObject> gSelectedItems { get; set; } = Enumerable.Empty<ExpandoObject>();
protected override void OnInitialized()
{
RowData = new List<ExpandoObject>();
dynamic obj0 = new ExpandoObject();
obj0.Name = "Tester";
RowData.Add(obj0);
dynamic obj1 = new ExpandoObject();
obj1.Name = "Testovicz";
RowData.Add(obj1);
dynamic obj2 = new ExpandoObject();
obj2.Name = "Selectant";
RowData.Add(obj2);
}
protected async Task gHLReadItems(GridReadEventArgs args)
{
//RowData are readen from DYNAMIC source, cannot add any NEW property to it
args.Data = RowData;
args.Total = 3;
}
protected void OnGridRowClicked(GridRowClickEventArgs args)
{
var it = args.Item as ExpandoObject;
if (gSelectedItems.Any(x => x == it))
{
gSelectedItems = gSelectedItems.Where(x => x != it);
}
else
{
gSelectedItems = gSelectedItems.Union(RowData.Where(x => x == it));
}
}
}
thanks
Please support Display(Order = ...) with autogenerated Grid columns.
Such functionality will also be useful for controlling the order of manually declared columns when using a custom component for reusable columns. For example: https://blazorrepl.telerik.com/cGOtbwOX21f6zQcy35 - the "Name" column is rendered last and currently one cannot control its order.
public class DateModel
{
[Display(Order = 2)]
public string Id { get; set; }
[Display(Order = 1)]
public string Text { get; set; }
}
Here's the reproducible:
@using System.ComponentModel.DataAnnotations
@* Used for the model annotations only *@
<strong>REPRO: activate the validation for the Name field to see the issue - click Save with an empty input</strong>
<TelerikGrid Data=@MyData EditMode="@GridEditMode.Popup" Pageable="true" Height="500px"
OnUpdate="@UpdateHandler" OnDelete="@DeleteHandler" OnCreate="@CreateHandler">
<GridToolBar>
<GridCommandButton Command="Add" Icon="add">Add Employee</GridCommandButton>
</GridToolBar>
<GridColumns>
<GridColumn Field=@nameof(SampleData.ID) Title="ID" Editable="false" />
<GridColumn Field=@nameof(SampleData.Name) Title="Name" />
<GridCommandColumn>
<GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
<GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
<GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
<GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
@code {
public class SampleData
{
public int ID { get; set; }
[Required(ErrorMessage = "aa something else")] // the first word is 1 or 2 characters to show the issue
public string Name { get; set; }
}
async Task UpdateHandler(GridCommandEventArgs args)
{
SampleData item = (SampleData)args.Item;
// perform actual data source operations here through your service
// if the grid Data is not tied to the service, you may need to update the local view data too
var index = MyData.FindIndex(i => i.ID == item.ID);
if (index != -1)
{
MyData[index] = item;
}
}
async Task DeleteHandler(GridCommandEventArgs args)
{
SampleData item = (SampleData)args.Item;
// perform actual data source operation here through your service
// if the grid Data is not tied to the service, you may need to update the local view data too
MyData.Remove(item);
}
async Task CreateHandler(GridCommandEventArgs args)
{
SampleData item = (SampleData)args.Item;
// perform actual data source operation here through your service
// if the grid Data is not tied to the service, you may need to update the local view data too
item.ID = MyData.Count + 1;
MyData.Insert(0, item);
}
public List<SampleData> MyData { get; set; }
protected override void OnInitialized()
{
MyData = new List<SampleData>();
for (int i = 0; i < 50; i++)
{
MyData.Add(new SampleData()
{
ID = i,
Name = "Name " + i.ToString()
});
}
}
}
When you zoom out, the span that displays the Grid pager's content has its style set to display: none, and it does not always reappear when you zoom in after that.
Reproduction
1. Run this REPLWhen PageSize is set to "All" and a new item is added to the grid's data source, the PageSize parameter is not updated, so the new item is sent to a second page. Instead of being added at the top or bottom of the page.
Reproduction
1. Run this REPL
2. Set PageSize to All from the dropdown at the bottom
3. Add a new item from Update Data or Add
4. New Item is added to the second page
5. Video Example