1. Home
  2. Forum
  3. Blazor
  4. How to display the GridColumn as default Edit mode on Page load ?

How to display the GridColumn as default Edit mode on Page load ?

Hi Team,

Actually I m displaying the entry form on Blazor Grid control. But there for making any entry they have to click on that cell. Now customer is expecting without clicking on that cell, he want to fill the text or modified the value like textbox.

could you please give me syntax for making default edit mode on page load ? 



3 Replies 1 reply marked as answer
JP Jeevakanth Palaniappan Syncfusion Team January 14, 2021 11:09 AM UTC

Hi Chandradev, 

Greetings from Syncfusion support. 

We have validated your query and you can achieve your requirement Column template feature and UpdateRow method of the grid. Please refer the below code snippet and the sample for your reference. 

@using Syncfusion.Blazor.Inputs 
@using Syncfusion.Blazor.Grids 
 
<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> 
 
 
@code{ 
    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); 
    } 

Please refer the below sample and documentation for your reference. 


Documentation and API reference. 
 
Regards, 
Jeevakanth SP. 


Marked as answer
CH chandradev January 15, 2021 12:55 AM UTC

Hi Jeevakanth,

Thanks for sending exact code snippet. I tested the code there is one problem, if we are changing the text on textbox update button is not getting enable to save data. Same things how can we achieve with Combobox control inside the Grid ?


RN Rahul Narayanasamy Syncfusion Team January 19, 2021 02:19 PM UTC

Hi Chandradev, 

Thanks for the update. 

Query: I tested the code there is one problem, if we are changing the text on textbox update button is not getting enable to save data. 

We have validated your query and the update button will not be enable while changing the value using the previously provided sample because we have update the value to datasource directly in ValueChange event of the particular component. So the update button of the toolbar is not needed to update the values. It will save the changes automatically. 

You can also achieve the behavior by using two way binding(@bind-Value).  

Query: Same things how can we achieve with Combobox control inside the Grid ? 

Based on your requirement, we have prepared a sample with Combo box control as one of the Grid column in Column Template. Find the below code snippets and sample for your reference. 

Here, we have used @bind-Value to update the changes. 

 
<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 @bind-Value="@employee.FirstName"></SfTextBox> 
                    </div> 
                } 
            </Template> 
        </GridColumn> 
        . . . 
       <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" Width="150"> 
            <Template> 
                @{ 
                    var employee = (context as Order); 
                } 
                <div> 
                    ShipCountry 
                </div> 
                <SfComboBox TValue="string" TItem="Country" @bind-Value="@employee.ShipCountry" DataSource="@LocalData"> 
                    <ComboBoxFieldSettings Value="Text" Text="Text"></ComboBoxFieldSettings> 
                </SfComboBox> 
            </Template> 
        </GridColumn> 
    </GridColumns> 
</SfGrid> 
 
@code{ 
    . . . 
} 



Please let us know if you have any concerns. 

Regards, 
Rahul 
 


Loader.
Up arrow icon