add new row on button click

[Smisha Alias]

Hi,

I have been using data grid to display some data and i want to display a button on mouse hover of a row and on clicking that button i want to add a new row with close and save icons, also a textbox. Please find the attachment, for clarification.

[Rahul Narayanasamy]

Hi Smisha, 

Greetings from Syncfusion. 

Query: add new row on button click  

We have validated your query and you want to add a record using button click. You can add a new record by using AddRecord method of Grid. Find the below code snippets for your reference. 

 

<button @onclick="Add">Add Record</button> 

 

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

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings> 

    <GridColumns> 

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

        . . . 

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

            <GridCommandColumns> 

                . . . 

            </GridCommandColumns> 

        </GridColumn> 

    </GridColumns> 

</SfGrid> 

 

@code{ 

    SfGrid<Order> Grid; 

    . . . 

 

    public async Task Add() 

    { 

        await Grid.AddRecord(); 

    } 

} 

Could you please share your requirement details(attachment) once again since the shared attachment is missed in this forum. 

Also could you please share the below details. It will be helpful to validate and provide a better solution. 

• Share more details about your requirement.
• Whether the button is shown only while mouse hovering?
• Pictorial representation of your requirement.
• Share your attachment.

Regards, 

Rahul 

[Smisha Alias]

Hi,

I was using detailed template to show detailed data for particular records that meet a given condition. How do i expand and collapse the detailed row on button click rather than detailed icon click.

[Rahul Narayanasamy]

Hi Smisha, 

Thanks for the update. 

Query: How do i expand and collapse the detailed row on button click rather than detailed icon click. 

We have validated your query and prepared a sample based on your requirement. Here, we achieved your requirement by using DetailsExpandCollapseRow method of the Grid. We have checked the condition and  expand the rows in button click using DetailsExpandCollapseRow  method. Find the below code snippets and sample for your reference. 

 

<button @onclick="Expand">Expand</button> 

<button @onclick="Collapse">Collapse</button> 

 

<SfGrid @ref="Grid" DataSource="@Employees"  Height="600" > 

    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu"></GridFilterSettings> 

    <GridPageSettings PageSize="40"></GridPageSettings> 

   <GridTemplates> 

        <DetailTemplate> 

            @{ 

                var employee = (context as EmployeeData); 

                <SfGrid DataSource="@Orders" Query="@(new Query().Where("EmployeeID", "equal", employee.EmployeeID))"> 

                    . . . 

               </SfGrid> 

            } 

        </DetailTemplate> 

    </GridTemplates> 

    <GridColumns> 

        . . . 

   </GridColumns> 

</SfGrid> 

 

@code{ 

    SfGrid<EmployeeData> Grid; 

    public List<EmployeeData> ExpandedRecords { get; set; } = new List<EmployeeData>(); 

    . . . 

   public void Expand() 

    { 

        var rec = Employees.Where(or => or.FirstName == "Nancy" || or.FirstName == "Smith");   //check condition 

        ExpandedRecords = rec.ToList(); 

        for (var i = 0; i < ExpandedRecords.Count; i++) 

        { 

            Grid.DetailExpandCollapseRow(ExpandedRecords[i]);     //expand particular detail rows 

        } 

    }     

    public void Collapse() 

    { 

        Grid.DetailCollapseAll();   //collapse detail rows 

 

    } 

} 

Sample: https://www.syncfusion.com/downloads/support/forum/160427/ze/BlazorApp1Expand1298432174  

Reference: 

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DetailExpandCollapseRow__0_  

Please let us know if you have any concerns. 

Regards, 

Rahul