Print edited grid

Hi,

On my page I have a Grid with edit mode set to batch. I want to print the grid and include any edited data that was entered by the user.

Is this possible?


3 Replies 1 reply marked as answer

SK Sujith Kumar Rajkumar Syncfusion Team October 7, 2021 07:54 AM UTC

Hi Eddie, 
 
Greetings from Syncfusion support. 
 
Based on the query we would like to let you know that the Grid’s batch editing functionality allows to perform multiple CRUD actions like add, edit, delete on the Grid rows and on performing each action the changes will be pushed into a batch changes variable within the source. Because of this the save action will not be called after performing each edit as user can perform multiple CRUD actions and save the changes as a whole. So when each change occurs it will only be updated in a virtual storage and not affect the Grid’s data source. Only when the save action is performed these changes are updated to the Grid’s data source. This is the default behavior of the batch edit functionality of the Grid. 
 
And because of this the edited batch data will not be included on performing print action since it will use the Grid’s data source for it.  
 
So we suggest you to save the changes in the Grid before performing print action by either manually clicking the ‘Update’ toolbar button(which can be checked in this online demo sample for reference) or by calling the edit module’s batchSave method before performing the action as demonstrated in the below code snippet to print Grid with the updated data source, 
 
function onClick() { 
   var gridObj = document.getElementById('Grid').ej2_instances; 
   gridObj.editModule.batchSave(); 
} 
 
 
Please get back to us if you require any further assistance. 
 
Regards, 
Sujith R 



EW Eddie Willcox October 7, 2021 09:06 AM UTC

I understand. Thank you.

I tried using the BeforePrint function to execute editeModule.batchSave(), but this requires a user to first click OK or Cancel before the data is saved.

Should I rather use a different edit mode to achieve my requirements? Or is there a way to automatically accept that changes are going to be saved to the Grid datasource without requiring the user to either accept or decline?



SK Sujith Kumar Rajkumar Syncfusion Team October 8, 2021 01:19 PM UTC

Hi Eddie, 
 
By default the confirmation dialog will be shown while updating changes using the batch edit functionality. However you can disable this dialog by setting the ‘ShowConfirmDialog’ property of the Grid’s EditSettings as false as demonstrated in the below code snippet, 
 
EditSettings(edit => { edit.AllowEditing(true) … .Mode(Syncfusion.EJ2.Grids.EditMode.Batch).ShowConfirmDialog(false); }) 
 
So after disabling this, you can achieve the requirement of automatically updating changes when performing the print action by initially cancelling the print action in the BeforePrint event(by setting its ‘cancel’ argument property as true), calling the batch save method(after checking if batch changes are present) and then calling the Grid’s print method to perform this action with the updated data source. 
 
This can be done using a global flag variable(which is enabled by default) for cancelling the print action initially, then disabled when the above condition executes(so that the manually invoked print action is not cancelled) and then enabling this global flag condition again in the PrintComplete event(so that the same actions can be performed for concurrent print) as demonstrated in the below code snippet, 
 
// Global flag condition is enabled by default 
var isInitial = true; 
 
// Grid’s BeforePrint event handler 
function onBeforePrint(args) { 
    var gridObj = document.getElementById('Grid').ej2_instances[0]; 
    // Check if batch changes are available 
    var isAdd = (gridObj.getBatchChanges().addedRecords.length !== 0) ? true : false; 
    var isEdit = (gridObj.getBatchChanges().changedRecords.length !== 0) ? true : false; 
    var isDelete = (gridObj.getBatchChanges().deletedRecords.length !== 0) ? true : false; 
    if (isInitial && (isAdd || isEdit || isDelete)) { 
        // Condition executes for initial print action if batch changes are available 
        // Initial print action is cancelled 
        args.cancel = true; 
        // Global flag condition is disabled so that this condition is not executed when print action is called below 
        isInitial = false; 
        // Batch changes are saved to the Grid 
        gridObj.editModule.batchSave(); 
        // Print action is executed with the updated Grid data 
        gridObj.print(); 
    } 
} 
 
// Grid’s PrintComplete event handler 
function onPrintComplete() { 
    // Global flag condition is enabled so that these actions can be performed for concurrent print  
    isInitial = true; 
} 
 
We have prepared a sample based on this for your reference. You can find it below, 
 
 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R 


Marked as answer
Loader.
Up arrow icon