App crash when adding a custom delete-row menu in a row.

[veymar montano colque]

Hi sync-fusion.

When I have a grid with a custom menu inside a cell which deletes that specific row data the application crashes.

As you can see the menu in the last colum has only a delete option, when you try to delete the last row, the shown console error appears and the application crashes.

In order to get the menu positioned in that specific part, I'm using javascript.
This problem doesn't occur when using RowTemplate, however, I need the edition capabilities also, which aren't possible with RowTemplate(as I know checking the documentation).
attached is the .zip project that shows the problem. Please run the project and delete the las column to check the error. Also the error is show when there's only one row in the table.

Attached is the project that generates the error, thanks in advance.

Tools.

.Net Core 3.1.403
Sync-fusion version: 18.4.0.46

Attachment: GridMenuProblem_7b27396b.zip

[Vignesh Natarajan]

Hi Veymar,  

 

Thanks for contacting Syncfusion support.  

 

Query: “When I have a grid with a custom menu inside a cell which deletes that specific row data the application crashes” 

 

We have analyzed your query and we understand that you want to render a menu that open on a button click in column. And upon clicking the Delete option you want to delete a record in Grid. While doing so, you are facing an exception in Grid. we are able to reproduce the reported issue at our end also.  

 

Instead of custom component, we suggest you to achieve your requirement using DropDownButton component. Refer the below code example.   

 

<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn> 

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridColumn HeaderText="Menu" TextAlign="TextAlign.Center" Width="120"> 

            <Template> 

                @{ 

                    Order order = (context as Order); 

                    <SfDropDownButton CssClass="e-icons e-menu-icon"> 

                        <DropDownButtonEvents ItemSelected="@((args)=>Select(args,order))"></DropDownButtonEvents> 

                        <DropDownMenuItems> 

                            <DropDownMenuItem Id="Delete" Text="Delete" IconCss="e-icons e-delete-icon"></DropDownMenuItem> 

                        </DropDownMenuItems> 

                    </SfDropDownButton> 

                } 

            </Template> 

        </GridColumn> 

    </GridColumns> 

</SfGrid> 

  

@code{ 

    SfGrid<Order> Grid { get; set; } 

    private void Select(MenuEventArgs args, Order val) 

    { 

        if (args.Item.Text == "Delete") 

        { 

            if (Orders.Count() > 0) 

            { 

                //to delete the record 

                Orders.Remove(Orders.Where(x => x.OrderID == val.OrderID).FirstOrDefault()); 

                //refresh the grid to reflect the changes performed in datasource property 

                Grid.Refresh(); 

            } 

        } 

        Console.WriteLine(Orders.Count()); 

    } 

 

 

Refer the below screenshot for your reference 

 

 

 

For your convenience we have prepared a sample which can be downloaded from below 

 

Sample: https://www.syncfusion.com/downloads/support/forum/163436/ze/GridMenuProblem-335161211 

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan