CRUD on datagrid

[Ralph Hope]

Hi there,

I want to use a datagrid on a form, but I need the useage of it to be quick and lightweifht for the user (not having to click add, click save, etc) as it's part of a larger form and I want them to basically just add / remove items like they were using a spreadsheet.

I think I can get around the clicking save by allow batch editing then calling a save from the main form save button? (any code help would be appreciated).

With the adding, this example is supposed to show CRUD manipulation:  https://ej2.syncfusion.com/aspnetcore/Grid/CommandColumn#/material

But I can see no way to create records, which is what the 'C' of CRUD stands for.  Is this really just a 'RUD' demo?    Ideally, I'd like to always have a spare empty row for the user.  Perhaps I could do this with some kind of event that creates a new empty row when they start editing the current last empty row?  Again, any code help would be most appreciated.

[Renjith Singh Rajendran]

Hi Ralph, 

Greetings from Syncfusion support. 

Based on your scenario, we suggest you to add a custom command button to Grid. We have prepared a sample based on this scenario, please download the sample form the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Serversample429333484 

Reference : https://blazor.syncfusion.com/documentation/datagrid/editing/#custom-command 

We have called the Grid’s AddRecord method to programmatically open an add form in Grid when the Add custom command button is clicked. Please refer the codes below, 

 

<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true" Height="315"> 

    <GridEvents CommandClicked="CommandClicked" TValue="Order"></GridEvents> 

    ... 

    <GridColumns> 

        ... 

        <GridColumn HeaderText="Manage Records" Width="150"> 

            <GridCommandColumns> 

                <GridCommandColumn Title="Add" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-add", CssClass = "e-flat" })"></GridCommandColumn> 

                <GridCommandColumn Type="CommandButtonType.Edit" ...></GridCommandColumn> 

                ... 

            </GridCommandColumns> 

        </GridColumn> 

    </GridColumns> 

</SfGrid> 

 

 

    SfGrid<Order> Grid; 

    public void CommandClicked(CommandClickEventArgs<Order> args) 

    { 

        if(args.CommandColumn.Title == "Add") 

        { 

            Grid.AddRecord(); 

        } 

    } 

https://blazor.syncfusion.com/documentation/datagrid/editing/#performing-crud-operations-programmatically 

Please refer the below documentation for the available built-in command buttons. 

https://blazor.syncfusion.com/documentation/datagrid/editing/#command-column 

https://blazor.syncfusion.com/demos/datagrid/command-column?theme=bootstrap4 

And also, please confirm whether you are using Blazor DataGrid or ASP.NET Core DataGrid(as the shared online demo is in ASP.NET Core platform). 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran