Closed wnvko closed 2 months ago
@wnvko I would JS to populate the template, follow the example at the bottom of this discussion https://github.com/IgniteUI/igniteui-blazor/issues/53
There is a caveat where you can't add items directly within the component while inside the template. I see exceptions when selecting items using the code you provided.
-elements.4112d35dd7f73b825fc3.bundle.js:1 Unhandled Promise rejection: Cannot read properties of undefined (reading 'reference') ; Zone:
@mddifilippo89 I know how to add select as editor via InlineEditorTemplateScript
. However, I do not want to make it via JS. I do want to add the inline editor via Blazor and C# with no JS. Actually the code above seams to work without the part where I am setting the value of the select and the value of the cell. This is what is not working.
@wnvko One part of the issue is fixed here: https://github.com/IgniteUI/igniteui-blazor/issues/111. Then another part of the issue is that we try to update the cell editValue on the server but the cell should be also updated on the client, also this should be somewhat async operation. We do not have a way to do this yet because there are not a igc-cell representation on the client, thus the server cannot find a reference to update. I think that same will happen with the row. @damyanpetev Let me know if you have any thoughts on that. The only workaround I can think of is this: use the grid reference to call the updateCellAsync API
<IgbGrid @ref="grid" Data=@CustomersData Width="100%" PrimaryKey="ID">
<IgbColumn Field="ID"></IgbColumn>
<IgbColumn Field="CompanyName" Editable=true>
<InlineEditorTemplate>
<IgbSelect Value="@(context.Cell.EditValue.ToString())"
Change="@(async e => {
await grid.UpdateCellAsync(e.Detail.Value,context.Cell.Id.RowID,context.Cell.Column.Field);
})">
@foreach (var item in CustomersData)
{
<IgbSelectItem Value="@item.CompanyName">@item.CompanyName</IgbSelectItem>
}
</IgbSelect>
</InlineEditorTemplate>
</IgbColumn>
<IgbColumn Field="ContactName" Editable=true></IgbColumn>
<IgbColumn Field="ContactTitle" Editable=true></IgbColumn>
</IgbGrid>
Yeah, this issue is quite old, possibly before official docs were live, at this point we don't really recommend using RenderFragment
templates for anything high-intensity (read: most things in the grid, especially in virtualized window) or in need of synchronous interaction with the client component. Editing falls in both categories and is best suited using a JS template is the best approach for that.
The suggestion for updateCellAsync
is only somewhat valid (ignoring the performance hit) - it skips the editing process though and it won't respect row editing behavior and likely more, so not ideal.
@wnvko We should be using JS templates all around now and unless there's anything else, I believe this can be closed.
Description
I want to add
IgbSelect
as inline editor for a grid cell.Steps to reproduce
This is what I have in my grid:
Result
Value="@(context.Cell.EditValue.ToString())"
.Change="@(e => context.Cell.Value = e.Detail.Value)"
.Expected result
I want to be able to put
IgbSelect
as inline editor. When cell enters edit mode the select should show the cell value as selected item. When an item is selected in the select the value of the item should be applied as a value to the grid cell.