1. Home
  2. Forum
  3. Blazor
  4. Grid GridColumn AllowEditing dynamically,cell AllowEditing, tab index and batch save.

Grid GridColumn AllowEditing dynamically,cell AllowEditing, tab index and batch save.

Hi,
I have some questions for my Blazor Server project.

Question 1:
I need to enable / disable the "GridColumn AllowEditing" parameter dynamically while editing data.
I would like to be able to change the "Costumer Name" press TAB and disable the editing of the OrderDate. Now I have to click on a different line to disable editing in the OrdarDate.
I also tried calling RefreshColumns () bat don't work. I attach an example.
Question 2:
Is it possible to manage the Allow Editing per cell? Example: calling a function that determines whether the cell it is editable or not.
Question 3:
https://blazor.syncfusion.com/documentation/datagrid/editing/#batch
"Update button or by externally calling the BatchSave method"
I didn't understand how I can call the "BatchSave" method from a button other than the Update button on the toolbar.
Question 4:
When I'm in Bath or Normal editing mode, can I specify the TabIndex value?

Thanks for the support, best regards
Alessandro Malisani


Attachment: AllowEditing_b5a4428c.7z

5 Replies 1 reply marked as answer
RS Renjith Singh Rajendran Syncfusion Team November 6, 2020 01:17 PM UTC

Hi Marco, 

Greetings from Syncfusion support. 

Question 1:I need to enable / disable the "GridColumn AllowEditing" parameter dynamically while editing data. 
Based on this scenario, we suggest you to cancel the editing for the particular column by using args.Cancel in the OnCellEdit event of Grid. Please refer and use the below codes in your application. 

<GridEvents TValue="Order" OnCellEdit="OnCellEdit" CellSaved="CellSaved" > 

public void OnCellEdit(CellEditArgs<Order> args){    if(!CanOrderDate && !CanOrderFreight)    {        if (args.ColumnName == "OrderDate" || args.ColumnName == "Freight")            args.Cancel = true;    }}


Query 2 : Example: calling a function that determines whether the cell it is editable or not. 
You can get the column information by using the GetColumnByField method of Grid. With this you can fetch the AllowEditing property value for that particular column to determine the editable state of the column. Please refer the codes below, 

<SfButton OnClick="EditState">Get Edit status of OrderDate</SfButton>public async Task EditState(){    //you can also use - var IsEdit = myGrid.Columns[2].AllowEditing;    var OrderDateColumn = await myGrid.GetColumnByField("OrderDate");    var IsEdit = OrderDateColumn.AllowEditing;}


Question 3:I didn't understand how I can call the "BatchSave" method from a button other than the Update button on the toolbar. 
Sorry for the inconvenience caused. We suggest you to use EndEdit() method instead of BatchSave. We have also logged a task to update the documentation, we will modify the changes and will be refreshed online. Please refer and use the codes below, 

<SfButton OnClick="Update">Update Batch Changes</SfButton>
public void Update(){    myGrid.EndEdit();}


Question 4: When I'm in Bath or Normal editing mode, can I specify the TabIndex value? 
We are not clear about this scenario. Kindly share with us the following details to further proceed on this query.  
  1. Share a detailed explanation of your requirement.
  2. What do you refer by TabIndex value?
  3. Share with us a pictorial representation(video demo or screenshot) showing your complete requirement.

The provided information will help us analyze the problem, and provide you a solution as early as possible. 

Regards, 
Renjith Singh Rajendran 


MA Marco November 6, 2020 04:20 PM UTC

Hi,
Thanks for the quick reply!

Q1:
Ok but if I continue to move with the TAB selecting an editable cell this does not return to edit.
If I set Freight to Alloweditng to True, when the socus i set to this cell I would like to become editable.
I try to use "Single click editing with Batch mode in Blazor DataGrid component" but work only if I click or push ENTER.
Q2:
Sorry I expressed myself badly.
Currently in my project I use a function to determine if the column is editable or not.
AllowEditing="@getAllow(nameof(D_righe_ordine_clienteDA.descrizione))"
I would need to be able to do the same but for the cell.
In order to make a cell editable or not based on the values ​​of the row.
Q3:
All clear.
Q4:
Now the TAB key moves to the next cell, but i need to move to the "next index Columns", like a tab index in control forms.


Regards,
Alessandro



RS Renjith Singh Rajendran Syncfusion Team November 12, 2020 02:55 AM UTC

Hi Alessandro, 

Query 1 : when the socus i set to this cell I would like to become editable. 
By default, pressing tab key from one cell will place the focus to immediate next cell. In this case, when the current cell is in edited state then pressing tab will make the next cell also editable. But, if the current cell is not in edited state then it will just set the focus to next cell and won’t make that next cell editable. This is the default behavior of pressing Tab in Grid and this is why the reported behavior occurred. 

We have prepared a sample to overcome this default behavior and achieve your requirement. (i.e.) achieve single click editing when pressing tab key based on your scenario. Please download the sample from the link below, 
 
In the above sample, we have used @onkeyup, RowSelected, CellSelected and OnCellEdit events to Grid to achieve this requirement. We have used the RowSelected and OnCellEdit event handlers to fetch the required row and cell indexes. And in CellSelected and @onkeuup handlers we handle the logic to edit the required cell on single click or tab way of selecting the cell. 

Please refer the below codes with explanations for more details, 

<SfGrid @ref="@myGrid" DataSource="@Orders" @onkeyup="KeyUp" AllowPaging="true">    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Batch"></GridEditSettings>    <GridEvents TValue="Order" RowSelected="RowSelected" CellSelected="CellSelectHandler" OnCellEdit="OnCellEdit" CellSaved="CellSaved"></GridEvents>    <GridSelectionSettings Mode="SelectionMode.Both"></GridSelectionSettings>    ...</SfGrid> @code{    public List<Order> Orders { get; set; }    public SfGrid<Order> myGrid { get; set; }    ...    public async Task KeyUp(KeyboardEventArgs Args)    {        if (Args.Key == "Tab")        {            var a = await myGrid.GetSelectedRowCellIndexes();            var cols = await myGrid.GetColumns();            if (a.Count == 0)            {                //use the row and cell index values to select the row and edit the cell                await myGrid.SelectRow(CurrentEditRowIndex);                await myGrid.EditCell(CurrentEditRowIndex, cols[Convert.ToInt32(CurrentEditCellIndex + 1)].Field);            }        }    }    public int CurrentEditCellIndex;    public double CurrentEditRowIndex;    public async Task RowSelected(RowSelectEventArgs<Order> args)    {        //update the row and cell index values        if(CurrentEditRowIndex != args.RowIndex)        {            CurrentEditRowIndex = args.RowIndex;            CurrentEditCellIndex = 0;        }    }    public async Task CellSelectHandler(CellSelectEventArgs<Order> args)    {         //this will have same codes as in single click batch edit documentation     }    public async Task OnCellEdit(CellEditArgs<Order> args)    {        //update the row and cell index values here using GetColumnIndexByField and GetRowIndexByPrimaryKey methods        CurrentEditCellIndex = (int)await myGrid.GetColumnIndexByField(args.ColumnName);        CurrentEditRowIndex = await myGrid.GetRowIndexByPrimaryKey(args.RowData.OrderID);        if (!CanOrderDate) {            if (args.ColumnName == "OrderDate")                args.Cancel = true;        }        ...    }    ...}

Reference : 
 
Query 2 : In order to make a cell editable or not based on the values ​​of the row. 
We suggest you to use the OnCellEdit event of Grid. In this event handler based on args.RowData value you can compare current editable cell’s value and set args.Cancel to prevent editing for that particular valued cell. Please refer the codes below. We have also included the below code in above attached sample(Freight column cell with 4.2 as value will not be editable) 

public async Task OnCellEdit(CellEditArgs<Order> args){    ...    if(args.ColumnName == "Freight" && args.RowData.Freight == 4.2)    {        args.Cancel = true;       //cancel the cell editing based on cell value in args.RowData    }}


Query 3 : but i need to move to the "next index Columns", like a tab index in control forms. 
We suggest you to bind @onkeyup event to Grid. In this event handler you can call the EditCell method to make any cell in Grid editable instead of the next cell, when pressing the Tab key.  

<SfGrid @ref="@myGrid" DataSource="@Orders" @onkeyup="KeyUp" AllowPaging="true">    ...</SfGrid>
 
 
public async Task KeyUp(KeyboardEventArgs Args) 
{ 
    if (Args.Key == "Tab") 
    { 
        //based on current selected cell value or rowdata value you can call the EditCell to enable editing for a cell other than the next cell 
        await myGrid.EditCell(1, "Freight");   //Pass your cell’s row index and column name as argument for EditCell 
    } 
} 



Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


Marked as answer
MA Marco November 17, 2020 04:08 PM UTC

Thank you so much! All work fine!



RS Renjith Singh Rajendran Syncfusion Team November 18, 2020 10:00 AM UTC

Hi Alessandro, 

Thanks for your update. 

We are glad to hear that the suggested solution helped you in achieving this requirement. 

Please get back to us if you need further assistance. 

Regards, 
Renjith R 


Loader.
Up arrow icon