Disable ToolbarItems depending on row selected

[Art Vandelay]

I am trying to disable/enable toolbaritems depending on the row selection in a hierarchy grid.

It works almost expected, the buttons are disabled when no rows in the inner grid is selected. 

1. Expand for inner grid 1
2. Select the first row

And the buttons are enabled as expected.

However, if I then

1. Expand for inner grid 2

The buttons are disabled, which is fine, but if I then try to re-select the row in inner grid 1, the buttons are not being enabled. I need to close and expand the grid again and re-select the row in order to enable them.

Perhaps there are better ways of handling what I want by code, but I currently use the Disabled property and SelectedRecords as shown here

                <SfGrid @ref="workoutsGrid" DataSource="@workouts" AllowSorting="true" AllowTextWrap="true">
                    <GridEvents RowSelected="OnRowSelected" RowDataBound="OnRowDataBound" TValue="WorkoutDto"></GridEvents>
                    <GridColumns>
                        <GridColumn Field=@nameof(WorkoutDto.Time) Width="10px" HeaderText="Tid">
                            <Template>
                                @{
                                    var workout = (context as WorkoutDto);
                                    if (workout.Time.HasValue)
                                    {
                                        var time = workout.Time.Value.ToString("hh\\:mm");
                                        <span>@time</span>
                                    }
                                }
                            </Template>
                        </GridColumn>
                        <GridColumn Field=@nameof(WorkoutDto.Category) HeaderText="Type" Width="30px"></GridColumn>
                        <GridColumn Field=@nameof(WorkoutDto.Name) HeaderText="Navn" Width="40px"></GridColumn>
                        <GridColumn Field=@nameof(WorkoutDto.DurationInMinutes) HeaderText="Varighet" Width="10px"></GridColumn>
                        <GridColumn Field=@nameof(WorkoutDto.KcalUsed) HeaderText="Kaloribruk" Width="10px"></GridColumn>
                        <GridColumn Field=@nameof(WorkoutDto.Comment) Width="10px" HeaderText="">
                            <Template>
                                @{
                                    var workout = (context as WorkoutDto);
                                    if (workout != null && !string.IsNullOrEmpty(workout.Comment))
                                    {
                                        <span class="oi oi-comment-square" aria-hidden="true"></span>
                                    }
                                }
                            </Template>
                        </GridColumn>
                    </GridColumns>
                    <SfToolbar>
                        <ToolbarItems>
                            <ToolbarItem Type="ItemType.Button" Text="Legg til trening" PrefixIcon="e-add" OnClick="OnWorkoutAddRowButtonClick" Id="ItemsGrid_add"></ToolbarItem>
                            <ToolbarItem Type="ItemType.Button" Disabled="@(!workoutsGrid.SelectedRecords.Any())" Text="Vis/Endre" PrefixIcon="e-edit" OnClick="OnWorkoutEditRowButtonClickAsync" Id="ItemsGrid_edit"></ToolbarItem>
                            <ToolbarItem Type="ItemType.Button" Disabled="@(!workoutsGrid.SelectedRecords.Any())" Text="Slett" PrefixIcon="e-delete" OnClick="OnWorkoutDeleteRowButtonClick" Id="ItemsGrid_delete"></ToolbarItem>
                            <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
                            <ToolbarItem Type="ItemType.Button" Text="Legg til øvelse" OnClick="() => OnExerciseAddButtonClickAsync(workoutsGrid.SelectedRecords.First())" PrefixIcon="e-add"></ToolbarItem>
                            <ToolbarItem Type="ItemType.Button" Text="Vis/Endre" Disabled="@(workoutExercisesGrid == null || !workoutExercisesGrid.SelectedRecords.Any())" PrefixIcon="e-edit" OnClick="OnExerciseEditRowButtonClickAsync"></ToolbarItem>
                            <ToolbarItem Type="ItemType.Button" Text="Slett" Disabled="@(workoutExercisesGrid == null || !workoutExercisesGrid.SelectedRecords.Any())" PrefixIcon="e-delete" OnClick="OnExerciseDeleteRowButtonClick"></ToolbarItem>
                        </ToolbarItems>
                    </SfToolbar>
                    <GridTemplates>
                        <DetailTemplate Context="detailContext">
                            @{
                                var workout = (detailContext as WorkoutDto);
                                <SfGrid @ref="workoutExercisesGrid" TValue="WorkoutExerciseDto" DataSource="@exercises" Query="@(new Query().Where("WorkoutID", "equal", workout.Id))">
                                    <GridEvents RowSelected="OnExerciseRowSelected" TValue="WorkoutExerciseDto"></GridEvents>
                                    <GridColumns>
                                        <GridColumn Field="Exercise.Name" HeaderText="Øvelse" Width="30px"></GridColumn>
                                        <GridColumn Field=@nameof(WorkoutExerciseDto.Sets) HeaderText="Sett" Width="10px"></GridColumn>
                                        <GridColumn Field=@nameof(WorkoutExerciseDto.Reps) HeaderText="Reps" Width="10px"></GridColumn>
                                        <GridColumn Field=@nameof(WorkoutExerciseDto.Weight) HeaderText="Vekt" Width="10px"></GridColumn>
                                        <GridColumn Field=@nameof(WorkoutExerciseDto.Comment) Width="10px" HeaderText="">
                                            <Template>
                                                @{
                                                    var workoutExercise = (context as WorkoutExerciseDto);
                                                    if (workoutExercise != null && !string.IsNullOrEmpty(workoutExercise.Comment))
                                                    {
                                                        <span class="oi oi-comment-square" aria-hidden="true"></span>
                                                    }
                                                }
                                            </Template>
                                        </GridColumn>
                                    </GridColumns>
                                    <GridTemplates>
                                        <EmptyRecordTemplate>
                                            Ingen registrerte øvelser.
                                        </EmptyRecordTemplate>
                                    </GridTemplates>
                                </SfGrid>
                            }
                        </DetailTemplate>
                        <EmptyRecordTemplate>
                            Ingen registrerte treninger denne dagen.
                        </EmptyRecordTemplate>
                    </GridTemplates>
                </SfGrid>

[Naveen Palanivel]

Hi Art Vandelay,

Based on your query, it appears that enabling and Disable ToolbarItems based on the selecting row. As per requirement we prepared the simple sample attached in the forum. Please refer the attached sample for your reference.

If the reported issue still reproduced then kindly share the below details to validate further at our end.

1. Share us the entire Grid code snippet along with model class
2. Please share if we missed any replication procedure in attached sample
3. Share a video demonstration of the issue with a detailed explanation. This will greatly assist us in understanding the problem.
4. Please provide a simple sample that reproduces the issue with duplicate data or try to modify the above mentioned sample.

The above-requested details will be very helpful for us to validate the reported query at our end and provide the solution as early as possible.

Regards,

Naveen Palanivel

Attachment: GridColumn_Toolbar_4ff5e524.zip