Is it possible in Blazor SFGrid to have all rows in edit mode by default?

[David van Duijne]

Hi,

I'll need some input in how to achieve always editable card like rows in the Blazor SFGrid.

Requirement

My project has a requirement that each row in the grid is displayed as a card and is editable by default. Meaning that each row is shown as a card and users can simply click the field and enter data into it. Like below:

What i have managed so far

I've managed to get the card look, but getting it editable without the grid having a mind of it's own is where I run into issues.

For starters, I need to double click on the cell surrounding in order to get into edit mode.

When getting out of the edit mode and changing a value, the grid is determined to show me a colour coded line which removes my card look (see image below).

My queries:

• Is it possible to achieve my requirement with the SFGrid, or do you suggest to use another component for this task?
• How can I get the row in edit mode by default?
• If the above is not possible, how can I get the field to be single clickable and put the row in edit mode, without having the focus ending up somewhere completely different?
• How can I prevent the grid from basically replacing the column template after updates with it's own interpretation of what I want to see when a row or cell value was updated?

Also, a suggestion to improve usability of this forum; would it be possible to sort the list of components alphabetically? :)

Thanks in advance.

[Vignesh Natarajan]

Hi David,  

 

Greetings from Syncfusion support.  

 

Query: “I'll need some input in how to achieve always editable card like rows in the Blazor SFGrid.” 

 

We have analyzed your query and we have achieve your requirement using ColumnTemplate feature and UpdateRow method of the Grid. Refer the below code example.  

 

<SfGrid @ref="Grid" AllowPaging="true" DataSource="@Orders" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 

    <GridEditSettings AllowEditing="true" AllowDeleting="true" AllowAdding="true" Mode="@EditMode.Normal"></GridEditSettings> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" Visible="false" IsPrimaryKey="true" TextAlign="@TextAlign.Center" Width="140"></GridColumn> 

        <GridColumn Field=@nameof(Order.FirstName) HeaderText="First Name" Width="150"> 

            <Template> 

                @{ 

                    var employee = (context as Order); 

                    <div> 

                        First Name 

                    </div> 

                    <div @onkeydown:stopPropagation="true"> 

                        <SfTextBox Value="@employee.FirstName" ValueChange="@((args)=>OnChange(args,employee, "FirstName"))"></SfTextBox> 

                    </div> 

                } 

            </Template> 

        </GridColumn> 

        <GridColumn Field=@nameof(Order.LastName) HeaderText="Last Name" Width="150"> 

            <Template> 

                @{ 

                    var employee = (context as Order); 

                    <div> 

                        Last Name 

                    </div> 

                    <div @onkeydown:stopPropagation="true"> 

                        <SfTextBox Value="@employee.LastName" ValueChange="@((args)=>OnChange(args,employee, "LastName"))"></SfTextBox> 

                    </div> 

                } 

            </Template> 

        </GridColumn> 

    </GridColumns> 

</SfGrid> 

SfGrid<Order> Grid { get; set; }    public List<Order> Orders { get; set; }    public async Task OnChange(ChangedEventArgs Args, Order Val, string field)    {        Val.GetType().GetProperty(field).SetValue(Val, Args.Value);        var RowIndex = await Grid.GetRowIndexByPrimaryKey(Val.OrderID);        await Grid.UpdateRow(RowIndex, Val);    }

  

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

 

Sample: https://www.syncfusion.com/downloads/support/forum/160668/ze/DataGrid1067248217  

 

Refer our API documentation for your reference 

 

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

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan  

[David van Duijne]

Hi Vignesh Natarajan,

Thank you for the example and explanation, this covers the requirement.

Kind regards,

David

[Vignesh Natarajan]

Hi David,  

Thanks for the update. 

We are glad to hear that you have resolved your query using our solution.  

Kindly get back to us if you have further queries.  

Regards, 

Vignesh Natarajan