DataGrid add Toolbar a custom Copy button for insert for modify and update?

[Jacky]

Hi Suport,

By the custom adaptor toolbar : https://blazor.syncfusion.com/documentation/datagrid/custom-binding

How can I add a custom Copy button for Toolbar , it can execute add a new row and default existing row data?

as following Simulation steps screen.

Thanks!

Jacky

(1) Select copy source row data

(2) press toolbar copy button , it will copy the data to new row for modify and press (3) to update

[Prathap Senthil]

Hi Jacky,

Greetings from Syncfusion,

Based on your requirements, we have utilized both built-in and custom items in the Toolbar to render a custom 'Copy' button. When you select a record in the grid and click the 'Copy' button, the selected data is retrieved, and the AddRecordAsync method is called to assign the copied data using the RowCreating event. Kindly refer to the code snippet and the sample provided below for your reference.

<SfGrid TValue="Order" @ref="Grid" ID="Grid" AllowSorting="true" AllowFiltering="true" Toolbar="@Toolbaritems">

    <SfDataManager AdaptorInstance="@typeof(CustomAdaptor)" Adaptor="Syncfusion.Blazor.Adaptors.CustomAdaptor"></SfDataManager>

    <GridEvents RowCreating="RowCreatingHandler"  OnToolbarClick="ToolbarClickHandler" TValue="Order"></GridEvents>

    <GridPageSettings PageSize="8"></GridPageSettings>

    <GridEditSettings AllowEditing="true" AllowDeleting="true" AllowAdding="true" Mode="Syncfusion.Blazor.Grids.EditMode.Normal" NewRowPosition=" Syncfusion.Blazor.Grids.NewRowPosition.Bottom"></GridEditSettings>

    <GridColumns>

       -----------

    </GridColumns>

</SfGrid>

 

@code {

    public static List<Order> Orders { get; set; }

    private List<Object> Toolbaritems = new List<Object>() { "Add", "Delete", "Edit", "Update", "Cancel", new ItemModel() { Text = "Copy", TooltipText = "Copy", PrefixIcon = "e-copy", Id = "Copy" } };

    public string message;

 

    SfGrid<Order> Grid { get; set; }

    protected override void OnInitialized()

    {

        Orders = Enumerable.Range(1, 7).Select(x => new Order()

            {

                OrderID = 1000 + x,

                CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],

                Freight = 2.1 * x,

            }).ToList();

    }

 

    public class Order

    {

        public int OrderID { get; set; }

        public string CustomerID { get; set; }

        public double Freight { get; set; }

    }

 

    public Order CopyData { get; set; }

 

    public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)

    {

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

        {

 

 

            CopyData = Grid.GetSelectedRecordsAsync().Result.FirstOrDefault();

 

            if (CopyData != null)

            {

 

                await Grid.AddRecordAsync();

 

 

 

                CopyData = null;

            }

 

            //You can customize your code here.

        }

    }

 

 

    public async Task RowCreatingHandler( Syncfusion.Blazor.Grids.RowCreatingEventArgs<Order> args)

    {

        if (CopyData != null)

        {

            args.Data.OrderID = CopyData.OrderID;

            args.Data.CustomerID = CopyData.CustomerID;

            args.Data.Freight = CopyData.Freight;

        }

    }

 

Sample:
https://blazorplayground.syncfusion.com/embed/hjLfXaNAzebPaTjJ?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Reference:
https://blazor.syncfusion.com/documentation/datagrid/toolbar-items#both-built-in-and-custom-items-in-toolbar
https://blazor.syncfusion.com/documentation/datagrid/events#rowcreating
https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AddRecordAsync

Regards,
Prathap Senthil

[Jacky]

Hi Prathap,

It worked, thank you great support!

Regards!

Jacky

[Prathap Senthil]

Thanks for the update,

We are happy to hear that the provided information was helpful. We are closing the forum now.