Grid with such editable columns

[Jaish Mathews]

Is there a way to construct a gid like below without any separate Edit/Delete buttons? Like an entry form with 2 way binding. 

Attachments column is for selecting a file and we could able to read the file path. Remaining columns can be textBoxes and Datepickers in editable mode, with 2 way binding.

[Rahul Narayanasamy]

Hi Jaish, 

Greetings from Syncfusion. 

We have validated your query and we would like to inform you that the grid editing will have only one edit form at a time which will be rendered by using double click/toolbar click. But you want to have all the rows in edit mode.  

For this, we suggest you to render the components for each column by using the column template feature of the grid. Please refer the below documentation and the sample for your reference.  

 

Reference:  

https://blazor.syncfusion.com/documentation/datagrid/columns#column-template 

 

  <SfGrid @ref="Grid" DataSource="@Orders" 

            AllowPaging="true" Height="315"> 

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

        <GridColumns> 

            . . . 

            <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" ValidationRules="@(new ValidationRules{ Required=true})" Width="120"> 

                <Template> 

                    @{ 

                        var con = context as Order; 

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

                            <SfTextBox @bind-Value="con.CustomerID"></SfTextBox> 

                        </div> 

                    } 

                </Template> 

            </GridColumn> 

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

                <Template> 

                    @{ 

                        var con = context as Order; 

                        <SfDatePicker TValue="DateTime?" @bind-Value="@con.OrderDate" Format="d"></SfDatePicker> 

                    } 

               </Template> 

            </GridColumn> 

            . . . 

        </GridColumns> 

    </SfGrid> 

 

Sample: https://www.syncfusion.com/downloads/support/forum/170927/ze/BlazorApp3Sample1238783534  

Please let us know if you have any concerns. 

Regards, 

Rahul 

[Jaish Mathews]

Thanks, this helps.

[Rahul Narayanasamy]

Hi Jaish, 

 

Thanks for the update. 

 

We are happy to hear that the provided solution was helpful for your requirement. Please get back to us if you need further assistance. 

 

Regards, 

Rahul