This is a migrated thread and some comments may be shown as answers.

dynamic editable in grid that uses InCell editing and VirtualScrolling

6 Answers 1021 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Miriam
Top achievements
Rank 1
Veteran
Miriam asked on 16 Sep 2020, 10:24 AM

Hi,

I am currently trying to use a dynamic editable in my grid but it doesn't work although I followed the directions in this post: https://docs.telerik.com/blazor-ui/knowledge-base/grid-change-editable-attribute-update-create

<GridColumn Field="@(nameof(Menge))" Title="Menge" Width="100px" Editable="@(Current?.PositionsTyp != PositionsTyp.Hierarchiestufe)">
                        <EditorTemplate>
                            @{
                                Current = context as Item;
                                <div>@Current.Menge</div>
                            }
                        </EditorTemplate>
                    </GridColumn>

Should it work for InCell editing and virtual scrolling mode too?

Thanks in advance!

6 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 16 Sep 2020, 02:42 PM

Hello Miriam,

You can try adding the conditional logic in the EditorTemplate itself - in this case you won't have to use the Editable parameter of the column - the template itself can decide whether to keep showing the "read" value, or to offer an actual editor. This is the first approach from the article and the one I'd recommend. The second is more suitable for InLine and PopUp editing as they render a lot of things (the entire row and an entire popup) while the InCell editing only updates the current cell.

 

Regards,
Marin Bratanov
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

0
Miriam
Top achievements
Rank 1
Veteran
answered on 17 Sep 2020, 12:25 PM

Ok, I actually tried to implement the GridColumn conditionally in the EditorTemplate but I always get an Exception:

InvalidOperationException: Object of type 'Telerik.Blazor.Components.GridColumn' does not have a property matching the name 'Value'.

So, it doesn't work.

And the other option: Editable="@( CurrentlyEditedEmployee?.ID > 0 )" doesn't work either because CurrentlyEditedEmployee is always null.

 

0
Miriam
Top achievements
Rank 1
Veteran
answered on 17 Sep 2020, 12:32 PM

<GridColumn Field="Menge" Title="Menge" Width="100px">

                        <EditorTemplate>
                            @{
                                Current = context as Item;
                                if (Current?.Typ != Typ.H)
                                {
                                    <GridColumn Field="Menge" Editable="true">
                                        <div>@Current.Menge</div>
                                    </GridColumn>
                                }
                                }

                        </EditorTemplate>
                    </GridColumn>

 

System.InvalidOperationException: Object of type 'Telerik.Blazor.Components.GridColumn' does not have a property matching the name 'ChildContent'.

How do I have to use the EditorTemplate?

0
Marin Bratanov
Telerik team
answered on 17 Sep 2020, 12:54 PM

Hi Miriam,

You can review the documentation of the editor template to see how to use it: https://docs.telerik.com/blazor-ui/components/grid/templates/editor. You place markup and editor components there, not another grid column. You can find an example of conditional markup in the first snippet of this KB: https://docs.telerik.com/blazor-ui/knowledge-base/grid-change-editable-attribute-update-create.

As for the error - it is described here: https://docs.telerik.com/blazor-ui/knowledge-base/grid-no-childcontent.

 

Regards,
Marin Bratanov
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

0
Miriam
Top achievements
Rank 1
Veteran
answered on 21 Sep 2020, 12:25 PM

The solution looks like this:

01.<GridColumn Field="Menge" Title="Menge" Width="100px">
02.       <EditorTemplate>
03.          @{
04.            Current = context as Item;
05.            if (Current?.PositionsTyp != PositionsTyp.Hierarchiestufe)
06.            {
07.              <TelerikNumericTextBox T="decimal?"
                                           @bind-Value="@Current.Menge" OnChange="@ChangeMengenHandler" Decimals="3">
09.              </TelerikNumericTextBox>
10.             }
11.        }
12.        </EditorTemplate>
13. </GridColumn>
0
Miriam
Top achievements
Rank 1
Veteran
answered on 21 Sep 2020, 12:28 PM

And this:

01.public async Task ChangeMengenHandler(object theUserInput)
02.        {
03.            var gridCommandEventArgs = new GridCommandEventArgs
04.            {
05.                Item = CurrentLV
06.            };
07. 
08.            await UpdateHandler(gridCommandEventArgs);
09.        }
10. 
11.        public async Task UpdateHandler(GridCommandEventArgs args)
12.        {
13.            var viewModel = args.Item as Item;
14. 
15.            /*

                  some operations + saving

                  */
19. 21.
 
22.            var index = GridItems.FindIndex(item => item.LId == viewModel.LId);
23. 
24.            GridItems[index].Menge = Convert.ToDecimal(viewModel.Menge?.AsNumberFormatted());
28. 
29.            StateHasChanged();
30.        }
Tags
Grid
Asked by
Miriam
Top achievements
Rank 1
Veteran
Answers by
Marin Bratanov
Telerik team
Miriam
Top achievements
Rank 1
Veteran
Share this question
or