DataGrid - How to add a new row below previous one?

Radzen.Blazor Components
1

Hello,

Is it possible to add a new row to a data grid below the previous one?

Data grid adding a new row

<RadzenFieldset Text="Proforma Invoices">
    <RadzenButton ButtonStyle="ButtonStyle.Success" Icon="add_circle" Text="Add" Click="@InsertRow" Disabled="@(editMode == DataGridEditMode.Single && proformasToInsert.Count() > 0)" />
    <RadzenDataGrid @ref="proformaGrid" AllowAlternatingRows="false" AllowFiltering="false" AllowPaging="false" PageSize="1" AllowSorting="false" EditMode="DataGridEditMode.Single"
                        Data="@proformaInvoices" TItem="ProformaInvoice" RowUpdate="@OnUpdateRow" RowCreate="@OnCreateRow">

        <Columns>
            <RadzenDataGridColumn TItem="ProformaInvoice" Property="orderNumber" Title="Order Number">
                <EditTemplate Context="item">
                    <RadzenTextBox @bind-Value="item.orderNumber" Style="width:200px; display: block" Name="Order Number" aria-label="Enter Order Number" />
                </EditTemplate>
            </RadzenDataGridColumn>
            <RadzenDataGridColumn TItem="ProformaInvoice" Property="responsible" Title="Responsible">
                <EditTemplate Context="item">
                    <RadzenTextBox @bind-Value="item.responsible" Style="width:200px; display: block" Name="Responsible" aria-label="Enter Responsible" />
                </EditTemplate>
            </RadzenDataGridColumn>
            <RadzenDataGridColumn TItem="ProformaInvoice" Property="product" Title="Product">
                <EditTemplate Context="item">
                    <RadzenTextBox @bind-Value="item.product" Style="width:200px; display: block" Name="Product" aria-label="Enter Product" />
                </EditTemplate>
            </RadzenDataGridColumn>
            <RadzenDataGridColumn TItem="ProformaInvoice" Property="productCode" Title="Product Code"/>
            <RadzenDataGridColumn TItem="ProformaInvoice" Property="productDescription" Title="Product Description"/>
            <RadzenDataGridColumn TItem="ProformaInvoice" Property="productPrice" Title="Product Price" />
                <RadzenDataGridColumn TItem="ProformaInvoice" Context="item" Filterable="false" Sortable="false" TextAlign="TextAlign.Right" >
               <EditTemplate Context="item">
                    <RadzenButton Icon="check" ButtonStyle="ButtonStyle.Success" Variant="Variant.Flat" Size="ButtonSize.Medium" Click="@((args) => SaveRow(item))" aria-label="Save">
                    </RadzenButton>
                    <RadzenButton Icon="close" ButtonStyle="ButtonStyle.Light" Variant="Variant.Flat" Size="ButtonSize.Medium" class="rz-my-1 rz-ms-1" Click="@((args) => CancelEdit(item))" aria-label="Cancel">
                    </RadzenButton>
                    
                </EditTemplate>
            </RadzenDataGridColumn>
        </Columns>
    </RadzenDataGrid>
</RadzenFieldset>
2

You can add item to the collection bound to the DataGrid Data and Reload() the grid.

3

I added the collection to the data grid data and reloaded but all data disappeared. What is wrong with it?

Data grid


RadzenDataGrid<ProformaInvoice> proformaGrid;
List<ProformaInvoice> proformasToInsert = new List<ProformaInvoice>();
List<ProformaInvoice> proformasToUpdate = new List<ProformaInvoice>();
List<ProformaInvoice> proformaList = new List<ProformaInvoice>();

DataGridEditMode editMode = DataGridEditMode.Single;
IEnumerable<ProformaInvoice> proformaInvoices;

public class Order
{
    public int CardId { get; set; }
    public string CardNr { get; set; }
    public DateTime ExpiryDate { get; set; }
    public string CardHolder { get; set; }
    public string Name { get; set; }
    public string Address1 { get; set; }
    public string Address2 { get; set; }
    public string City { get; set; }
    public string State { get; set; }
    public string Zip { get; set; }
    public int Country { get; set; }
    public int StoreId { get; set; }
    public string Warehouse { get; set; }
    public string Region { get; set; }
    public string System { get; set; }
    public int TransId { get; set; }
    public string Register { get; set; }
    public string Clerk { get; set; }
    public decimal Amount { get; set; }
    public decimal Tax { get; set; }
    public DateTime OrderDate { get; set; }
    public DateTime ShipDate { get; set; }
    public IEnumerable<ProformaInvoice> ProformaInvoices { get; set; }
}

public class ProformaInvoice
{
    public string orderNumber { get; set; }
    public string responsible { get; set; }
    public string product { get; set; }
    public string productCode { get; set; }
    public string productDescription { get; set; }
    public string productPrice { get; set; }
    public List<string> products { get; set; }
}
Order order = new Order()
    {
        ExpiryDate = DateTime.Parse("10/10/2022"),
        OrderDate = DateTime.Now,
        ShipDate = DateTime.Now,
        ProformaInvoices = new List<ProformaInvoice>()
    };

async Task InsertRow()
{
    if (editMode == DataGridEditMode.Single)
    {
        Reset();
    }
    var proformas = new ProformaInvoice();
    proformasToInsert.Add(proformas);
    await proformaGrid.InsertRow(proformas);
}

void OnCreateRow(ProformaInvoice item)
{
    proformasToInsert.Remove(item);
}
void Reset()
{
    proformasToInsert.Clear();
    proformasToUpdate.Clear();

}

void Reset(ProformaInvoice item)
{
    proformasToInsert.Remove(item);
    proformasToUpdate.Remove(item);
}
async Task SaveRow(ProformaInvoice item)
{
    await proformaGrid.UpdateRow(item);
    proformaList.Add(item);
    order.ProformaInvoices = proformaList.OrderBy(p => p.orderNumber).ToList();

    await proformaGrid.Reload();
}


void OnUpdateRow(ProformaInvoice item)
{
    Reset(item);
   
}

void CancelEdit(ProformaInvoice item)
{
    Reset(item);

    proformaGrid.CancelEditRow(item);

    
}

protected override async Task OnInitializedAsync()
{
    proformaInvoices = new List<ProformaInvoice>();
}
4

This works.

async Task SaveRow(ProformaInvoice item)
{
    await proformaGrid.UpdateRow(item);
    proformaList.Add(item);
    proformaList = proformaList.OrderBy(p => p.orderNumber).ToList();
    proformaInvoices = proformaList;
    order.ProformaInvoices = proformaList;
    await proformaGrid.Reload();
}