1. Home
  2. Forum
  3. Blazor
  4. Is there a Data Grid isDirty or hasChages property I can track when in Batch edit

Is there a Data Grid isDirty or hasChages property I can track when in Batch edit

I would like to use a button, external to the data grid, to save changes when in Batch edit mode.  I would this button to have the same functionality as the built in grid toolbar "Update" button, in that I would like it to show when the grid has changes that need to be saved, and process the updates when clicked.

Thanks for any help!
-Travis



3 Replies 1 reply marked as answer
RN Rahul Narayanasamy Syncfusion Team December 14, 2020 02:13 PM UTC

Hi Travis, 

Greetings from Syncfusion. 

Query: I would like to use a button, external to the data grid, to save changes when in Batch edit mode.  I would this button to have the same functionality as the built in grid toolbar "Update" button, in that I would like it to show when the grid has changes that need to be saved, and process the updates when clicked. 

We have validated your query and you want to enable the Update button which is rendered separately outside the Grid. We suggest you to achieve your requirement by using OnBatchAdd, OnBatchDelete and OnCellSave event of the Grid and a Boolean variable. Find the below code snippets and sample for your reference. 

 
<SfButton @onclick="Add">Add</SfButton> 
<SfButton @onclick="Delete">Delete</SfButton> 
<SfButton @onclick="Save" Disabled="Disabled">Update</SfButton> 
 
<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true"  
        Height="315"> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Batch"></GridEditSettings> 
    <GridEvents OnBatchAdd="BatchAddHandler" OnBatchDelete="BatchDeleteHandler" OnCellSave="CellSaveHandler" TValue="Order"></GridEvents> 
    <GridColumns> 
        . . . 
    </GridColumns> 
</SfGrid> 
 
@code{ 
    SfGrid<Order> Grid; 
    public List<Order> Orders { get; set; } 
    public bool Disabled { get; set; } = true; 
 
    . . . 
 
    public void Save() 
    { 
        Disabled = true; 
        Grid.EndEdit(); 
    } 
 
    public void Add() 
    { 
        Grid.AddRecord(); 
    } 
    public void Delete() 
    { 
        Grid.DeleteRecord(); 
    } 
    public async Task CellSaveHandler(CellSaveArgs<Order> args) 
    { 
        var batchChanges = await Grid.GetBatchChanges(); 
        if(batchChanges.ChangedRecords.Count() > 0) 
        { 
            Disabled = false; 
        } 
    } 
    public void BatchAddHandler(BeforeBatchAddArgs<Order> args) 
    { 
        Disabled = false; 
    } 
    public void BatchDeleteHandler(BeforeBatchDeleteArgs<Order> args) 
    { 
        Disabled = false; 
    } 
} 


Reference: 

Please let us know if you have any concerns. 

Regards, 
Rahul 


Marked as answer
TR Travis December 16, 2020 02:36 AM UTC

Thank you Rahul.  
We are also showing the grid's built in toolbar with Add, Delete, Update, and Cancel.  
Is there any way to handle the "Cancel" event?  With this solution, if the user hits the "Cancel" button in the grid toolbar the external Save button remains enabled.  
I've also noticed that if a user clicks on a cell but does not change the value, the grid's default Update button disappears but the external Save button remains enabled.
Thanks,
 Travis




RN Rahul Narayanasamy Syncfusion Team December 16, 2020 03:04 PM UTC

Hi Travis, 

Thanks for the update. 

Query: Is there any way to handle the "Cancel" event?  With this solution, if the user hits the "Cancel" button in the grid toolbar the external Save button remains enabled 

We have validated your query and we might suspect that you want to disable the Save button while performing Cancel operation. You can achieve your requirement by using below way. Find the below code snippets for your reference. 

 
 
<SfButton @onclick="Add">Add</SfButton> 
<SfButton @onclick="Delete">Delete</SfButton> 
<SfButton @onclick="Save" Disabled="Disabled">Update</SfButton> 
<SfButton @onclick="Cancel" Disabled="CancelDisabled">Cancel</SfButton> 
 
<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true"  
        Height="315"> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Batch"></GridEditSettings> 
    <GridEvents OnBatchAdd="BatchAddHandler" OnBatchDelete="BatchDeleteHandler" OnCellSave="CellSaveHandler" TValue="Order"></GridEvents> 
    <GridColumns> 
        . . . 
    </GridColumns> 
</SfGrid> 
 
@code{ 
    SfGrid<Order> Grid; 
    public List<Order> Orders { get; set; } 
    public bool Disabled { get; set; } = true; 
    public bool CancelDisabled { get; set; } = true; 
 
    . . . 
 
    public void Save() 
    { 
        Disabled = true; 
        CancelDisabled = true; 
        Grid.EndEdit(); 
    } 
 
    . . . 
    public void Cancel() 
    { 
        Grid.CloseEdit(); 
        Disabled = true; 
        CancelDisabled = true; 
    } 
    public async Task CellSaveHandler(CellSaveArgs<Order> args) 
    { 
        . . . 
    } 
    public void BatchAddHandler(BeforeBatchAddArgs<Order> args) 
    { 
        . . . 
    } 
    public void BatchDeleteHandler(BeforeBatchDeleteArgs<Order> args) 
    { 
        . . . 
    } 
} 

Query: I've also noticed that if a user clicks on a cell but does not change the value, the grid's default Update button disappears but the external Save button remains enabled 

We have modified the sample to disable the Save button when there is no change in the cell value. Find the below code snippets and sample for your reference. 

 
<SfButton @onclick="Add">Add</SfButton> 
<SfButton @onclick="Delete">Delete</SfButton> 
<SfButton @onclick="Save" Disabled="Disabled">Update</SfButton> 
<SfButton @onclick="Cancel" Disabled="CancelDisabled">Cancel</SfButton> 
 
<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true"  
        Height="315"> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Batch"></GridEditSettings> 
    <GridEvents OnBatchAdd="BatchAddHandler" OnBatchDelete="BatchDeleteHandler" OnCellSave="CellSaveHandler" TValue="Order"></GridEvents> 
    <GridColumns> 
        . . . 
    </GridColumns> 
</SfGrid> 
 
@code{ 
    SfGrid<Order> Grid; 
    public List<Order> Orders { get; set; } 
    public bool Disabled { get; set; } = true; 
    public bool CancelDisabled { get; set; } = true; 
 
    . . . 
    public async Task CellSaveHandler(CellSaveArgs<Order> args) 
    { 
        var batchChanges = await Grid.GetBatchChanges(); 
        if(batchChanges.ChangedRecords.Count() > 0) 
        { 
            if(args.PreviousValue != args.Value) 
            { 
                Disabled = false; 
                CancelDisabled = false; 
            } 
        } 
    } 
    . . . 
} 

Please let us know if you have any concerns. 

Regards, 
Rahul 


Loader.
Up arrow icon