Edit cell by one click

[Tomasz Sobczuk]

Hi

Is it possible to edit a cell by one click and autosave new value? (Like in InPlace Editor https://blazor.syncfusion.com/demos/in-place-editor/overview?theme=bootstrap4 )

Inline or batch mode edit.

[Vignesh Natarajan]

Hi Tomasz,  

 

Thanks for contacting Syncfusion support.  

 

Query: “Is it possible to edit a cell by one click and autosave new value?” 

 

Yes. You can edit a cell on single click in Grid. We have documented your requirement in UG documentation. So kindly refer our UG documentation to perform Edit action in single click while using Batch editing in Grid (cell based editing). Refer the below UG documentation for your reference. 

UG: https://blazor.syncfusion.com/documentation/datagrid/how-to/single-click-editing-with-batch-mode/  

https://blazor.syncfusion.com/documentation/datagrid/editing/  

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan 

[Tomasz Sobczuk]

Hi Vignesh ,

Works but if I change EditTemplate doesn't work ex:

 <GridColumn Field=@nameof(Product.Quantity) AllowEditing="true" Type="ColumnType.Number" EditType="EditType.NumericEdit" HeaderText="@Resources.SfResources.GridColumnHeaderQuantity" Width="120" EditorSettings="@FreightEditParams">

                @*<Template>

                        @{

                            var part = (context as Product);

                            <SfNumericTextBox TValue="int" @bind-value="@part.Quantity"></SfNumericTextBox>

                        }

                    </Template>

                    <EditTemplate>

                        @{

                            var part = (context as Product);

                            <SfNumericTextBox TValue="int" @bind-value="@part.Quantity" Max=100 Min=0></SfNumericTextBox>

                        }

                    </EditTemplate>*@

            </GridColumn>

Is it possible to edit a cell by one click but "edit status" always-on, numeric button, and input always show a user.

Attachment: numeric_bdc20d81.zip

[Vignesh Natarajan]

Hi Tomasz,  

 

Query: “Is it possible to edit a cell by one click but "edit status" always-on, numeric button, and input always show a user.” 

 

We have analyzed your query and we understand that you want always on Numeric Text Box column. We suggest you to achieve your requirement using Column Template of Grid. On changing the value in NumericText box, we suggest you to update the datasource using UpdateRow method of Grid and ValueChange event of NumericTextBox.  

 

Refer the below code example  

 

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

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

    <GridColumns> 

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

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" EditType="EditType.DatePickerEdit" Format="d" TextAlign="TextAlign.Right" Width="130" Type="ColumnType.Date"></GridColumn> 

        <GridColumn Field=@nameof(Order.Freight) AllowEditing="true" Type="ColumnType.Number" EditType="EditType.NumericEdit" HeaderText="Quantity" Width="120"> 

            <Template> 

                @{ 

                    var part = (context as Order); 

                    <div @onclick:stopPropagation="true" @onkeydown:stopPropagation="true"> 

                        <SfNumericTextBox TValue="int" @bind-value="@part.Freight"> 

                            <NumericTextBoxEvents ValueChange="@((args)=>OnChange(args,part.OrderID))" TValue="int"></NumericTextBoxEvents> 

                        </SfNumericTextBox> 

                    </div> 

                } 

            </Template> 

        </GridColumn> 

    </GridColumns> 

</SfGrid> 

  

@code{ 

    SfGrid<Order> Grid { get; set; } 

    public List<Order> Orders { get; set; } 

    public async Task OnChange(ChangeEventArgs<int> Args, int? PrimaryKey) 

    { 

        Order SelectedProduct = Orders.Where(x => x.OrderID == PrimaryKey).FirstOrDefault(); // get the current edited record. 

        SelectedProduct.Freight = Args.Value; // update the numeric textbox value. 

        await this.Grid.UpdateRow(1, SelectedProduct); //save the changes in grid. 

    } 

 

   

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

 

Sample: https://www.syncfusion.com/downloads/support/forum/157192/ze/BlazorApp12037333585  

 

Kindly get back to us if you have further queries.   

 

Regards, 

Vignesh Natarajan 

[Tomasz Sobczuk]

Hi Vignesh Natarajan 

After many testing, I have a problem with this solution. If you click fast, many times (5 or more) and click another window or show a new dialog or next page in grid, you don't have number 5, you have 3 or 2 

Can you fix it ?

Attachment: screencapture_ca5bb3c1.zip

[Vignesh Natarajan]

Hi Tomasz,  

 

Query: “If you click fast, many times (5 or more) and click another window or show a new dialog or next page in grid, you don't have number 5, you have 3 or 2 ” 

 

We have analyzed the reported query with provided video demo and we are able to reproduce the reported behavior at our end also. From the video demo, we found that at some point on clicking the arrow button, particular Freight column goes into Edit mode (double clicking the column will go to edit mode) and default NumericTextBox is shown. Now value will be saved only when cell is focused out. But instead you have tried to move to another pager and value is not saved. Hence the reported issue occurred 

 

To overcome this behavior, we suggest you to render the NumericTextBox component inside EditTemplate similar to Template. Refer the below code example.  

 

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

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" ShowConfirmDialog="false" Mode="EditMode.Batch"></GridEditSettings> 

    <GridColumns> 

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

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" EditType="EditType.DatePickerEdit" Format="d" TextAlign="TextAlign.Right" Width="130" Type="ColumnType.Date"></GridColumn> 

        <GridColumn Field=@nameof(Order.Freight) AllowEditing="true" Type="ColumnType.Number" HeaderText="Quantity" Width="120"> 

            <Template> 

                @{ 

                    var part = (context as Order); 

                    <div @onclick:stopPropagation="true" @onkeydown:stopPropagation="true"> 

                        <SfNumericTextBox TValue="int" @bind-value="@part.Freight"> 

                            <NumericTextBoxEvents ValueChange="@((args)=>OnChange(args,part.OrderID))" TValue="int"></NumericTextBoxEvents> 

                        </SfNumericTextBox> 

                    </div> 

                } 

            </Template> 

            <EditTemplate> 

                @{ 

                    var part = (context as Order); 

                    <SfNumericTextBox TValue="int" @bind-value="@part.Freight"> 

                        <NumericTextBoxEvents ValueChange="@((args)=>OnChange(args,part.OrderID))" TValue="int"></NumericTextBoxEvents> 

                    </SfNumericTextBox> 

                } 

            </EditTemplate> 

        </GridColumn> 

    </GridColumns> 

</SfGrid> 

 

 

Kindly download the modified sample from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/157192/ze/BlazorApp1_Updated-472718827  

 

Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/editing/#cell-edit-template 

 

Please get back to us if you have further queries.   

 

Regards, 

Vignesh Natarajan  

[Stephan Herold]

Hi

I noticed from the screen shots that this solution was directed for editing in batch mode. 

Is there a way to single click edit when the edit mode is 'Normal'?

Really looking forward to a response.

Best Regards

[Naveen Palanivel]

Hi Stephan,

Based on your request, we understand that you are looking for a way to edit a row with a single click when the edit mode is set to 'Normal'. To achieve this, we have used the RowSelected event and StartEditAsync method, which allows you to edit the selected row in a single click. We have included a code snippet and a sample for your reference.

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

    <GridEvents RowSelected="RowSelectHandler" TValue="Order"></GridEvents>

    <GridColumns>

</SfGrid>

 

@code {

    public List<Order> Orders { get; set; }

 

    SfGrid<Order> Grid;

 

   

 

    public void RowSelectHandler(RowSelectEventArgs<Order> args)

    {

        Grid.StartEditAsync();

    }

}

Please let us know if you have any concerns.

Regards,

Naveen Palanivel

Attachment: Blazor_SingleClick_16a86d6b.zip