DataGrid row selection before command when clicking delete button

[RealityMasque]

Hi,

New to Blazorise, & having a bit of difficulty. I have a delete button per row, but depending on how fast I click, either the row is selected, the delete icon is selected, or the command is actually invoked. I've tried a number of potential fixes found here & across the web, but none seem to help.

Help?

Thanks,

Orion

[David-Moreira]

Can you please provide us with a reproducable?
For instance, can you reproduce the issue on our applications?

https://blazorise.com/docs/extensions/datagrid/features/editing
https://bootstrapdemo.blazorise.com/tests/datagrid/editing/commands

[RealityMasque]

your 2nd link seems to work more like what we need. coming up with code example now - it's proprietary.

[RealityMasque]

I can't seem to paste the code here w/o losing some of it

[RealityMasque]

<DataGrid TItem="ItemType"
Data="@SelectedParentItem.ItemList"
@bind-SelectedRow="@SelectedItem"
DetailRowTrigger="@(Conditions)"
Responsive
ShowCaptions="true"
Editable="@(UserAuthorized)"
Bordered=true
ShowPager=true
PageSize="10" >
<DataGridColumns>
<DataGridCommandColumn TItem="ItemType">
<EditCommandTemplate>
<Tooltip Inline="true" Text="Edit Item">
<Button Color="Color.Warning" Outline=true Clicked="@(e => EditItem(SelectedItem))"><Icon Name="IconName.Pen"></Icon></Button>
</Tooltip>
<Tooltip Inline="true" Text="Delete Item">
<Button Color="Color.Danger" Clicked="@(e => DeleteItem(SelectedItem))" Outline=true><Icon Name="IconName.Delete"></Icon></Button>
</Tooltip>
</EditCommandTemplate>
<NewCommandTemplate>
<Tooltip Inline="true" Text="New Item">
<Button Color="Color.Secondary" Clicked="@(e => AddItem())"><Icon Name="IconName.PlusCircle"></Icon></Button>
</Tooltip>
</NewCommandTemplate>
<SaveCommandTemplate>
</SaveCommandTemplate>
<DeleteCommandTemplate>
</DeleteCommandTemplate>
</DataGridCommandColumn>
<DataGridColumn TItem="ItemType" Field="@nameof(ItemType.Prop1)" Caption="Prop1" />
<DataGridColumn TItem="ItemType" Field="@nameof(ItemType.Prop2)" Caption="Prop2">
<DisplayTemplate Context="subcontext">
@{
var value = (subcontext as ItemType).ObjectType;
string output = EnumHelper.GetString(value);
}
@(output)
</DisplayTemplate>
</DataGridColumn>
<DataGridColumn TItem="ItemType" Field="@nameof(ItemType.Prop3)" Caption="Prop3">
<DisplayTemplate Context="subcontext">
@{
var value = (subcontext as ItemType).Prop3;
string output = EnumHelper.GetString(value);
}
@(output)
</DisplayTemplate>
</DataGridColumn>
<DataGridColumn TItem="ItemType" Field="@nameof(ItemType.Prop4)" Caption="Prop4" />
<DataGridColumn TItem="ItemType" Field="@nameof(ItemType.Prop5)" Caption="Prop5" Sortable="true">
<DisplayTemplate>
<Check TValue="bool" Checked="context.Prop5" Disabled=true />
</DisplayTemplate>
</DataGridColumn>
</DataGridColumns>
<DetailRowTemplate>
@{
var data = (context as ItemType);

        <CardDeck>
            <Card>
                <CardBody>
                    <strong>Comments1</strong>
                </CardBody>
            </Card>
            <Card>
                <CardBody>
                    <strong>Comments<2/strong>
                </CardBody>
            </Card>
        </CardDeck>
    }
</DetailRowTemplate>
<EmptyTemplate>
    <div class="box">
        <i>not added</i>
    </div>
</EmptyTemplate>

</DataGrid>

@code {

[Parameter]
public ParentItemType SelectedParentItem { get; set; }

[CascadingParameter]
private Task>AuthenticationState< authenticationStateTask { get; set; }

private User _userModel = new();

public ItemType SelectedItem = new();

protected override async Task OnInitializedAsync()
{
    _userModel = UserController.GetUser(email);
}

private bool showModal = false;

private void AddItem()
{
    SelectedItem = new()
        {
            KeyIdentifier = Guid.NewGuid().ToString()
        };
    showModal = true;
}

private void EditItem(ItemType anItem)
{
    SelectedItem = anItem;
    showModal = true;
}

private void DeleteItem(ItemType anItem)
{
    SelectedParentItem.ItemList.Remove(anItem);
}

private void SaveKey()
{
    if (SelectedParentItem.ItemList.Any(x => x.KeyIdentifier == SelectedItem.KeyIdentifier))
    {
        SelectedItem itemToUpdate = SelectedParentItem.ItemList.SingleOrDefault(x => x.KeyIdentifier == SelectedItem.KeyIdentifier);
        SelectedParentItem.ItemList.Remove(itemToUpdate);
    }
    SelectedParentItem.ItemList.Add(SelectedItem);

    HideModal();
}

private void HideModal()
{
    showModal = false;
}

}

[RealityMasque]

@David-Moreira - reproducable provided-ish

[stsrki]

hello @RealityMasque can you please try to paste the code again? To properly format it inside of a block code, you need to make it like in markdown specs, see https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#quoting-code

[RealityMasque]

are you unable to read what I put in above, @stsrki ?

[stsrki]

I would try to copy/paste it into the app to test it. But there are too many HTML escape codes, and it doesn't work. That why I'm saying it is best to give us a reproducible code. It saves time for all of us, and we can help you sooner.

[RealityMasque]

when I copy & paste in a code block, the post doesn't render everything

[RealityMasque]

@stsrki ^

[stsrki]

That's because you need to make sure the code is placed inside of "code blocks". In markdown, the code block is writer with three backticks

eg.

[David-Moreira]

Hello,

this should fix it:

<EditCommandTemplate>
                 <Div @onclick:stopPropagation>
                     <Tooltip Inline="true" Text="Edit Item">
                         <Button Color="Color.Warning" Outline=true Clicked="@(e => EditItem(SelectedItem))"><Icon Name="IconName.Pen"></Icon></Button>
                     </Tooltip>
                     <Tooltip Inline="true" Text="Delete Item">

                         <Button Color="Color.Danger" Clicked="@(e => DeleteItem(SelectedItem))" Outline=true><Icon Name="IconName.Delete"></Icon></Button>
                     </Tooltip>
                 </Div>
             </EditCommandTemplate>

Making it so the click is not propagated up to the row. let us know if this helped.

[David-Moreira]

What do you mean? That's c# / razor syntax : @onclick:stopPropagation

[RealityMasque]

Doesn't this do the same thing? PreventDefaultOnSubmit, or is that only for submit buttons?

I tried @OnClick:stopPropagation, but that just kept the delete button clicked event from being called after the 1st rows was deleted.

[David-Moreira]

Ah well... I didn't fix your code logic wise. You are deleting the current SelectedItem not the row item.

[David-Moreira]

It should work as you'd like after fixing that.

[stsrki]

The PreventDefaultOnSubmit is meant to prevent the form submit when the Button is placed inside of a Form component.

[RealityMasque]

Ah well... I didn't fix your code logic wise. You are deleting the current SelectedItem not the row item.

without @OnClick:stopPropagation, when I click the delete buttons infrequently, every item gets deleted. with @OnClick:stopPropagation, some of the items remain, & the delete button remains after being clicked & stop firing the DeleteKey() method.

[David-Moreira]

Did you fix your logic to not delete the SelectedItem? But the row item instead? If the row doesn't get clicked the SelectedItem does not get updated with that row's Item. You need to use the context.Item to get & delete the row item.

Clicked="@(e => DeleteItem(SelectedItem))"

[RealityMasque]

we decided to go with using an "are you sure?" modal to avoid the clicking delete repeatedly