Total summary for all grid rows also with row still in batch edit mode

[Karol Statek]

Hi,

I have defined grid with "batch" edit mode and I need to check amount (left to assign) for every new lines.

I have some amount ex. TaxAmount = 100 (outside grid) and inside grid I would like to prepare option that if user creates new line (with default Add button) - it will create new line and inside column 'Net amount' user will see rest of amount to assign. As below screenshot we have first line with amount=35 and new line should have rest of amount (TaxAmount - summary of all grid lines).

I have tried to use getRowsObject inside BeforeBatchAdd function - but in here I have got only rows which has been already saved - any rows with still active edit - are not visible in this list.

I have also tried to use custom aggregate summary for grid but unfortunatelly in this case it work if I create only one new line (it counts correctly only if I have one line in active edit mode). In case if I will add new line and click again 'Add new lines' - without saving grid - summary is wrong in this case.

Is it possible to check in some way actual state of grid also with all lines with still active 'edit' mode (line highlithed with green)? Or maybe some other option to summary all lines (saved and in edit mode?)

[Santhosh Iruthayaraj]

Hi Karol Statek,

Greetings from Syncfusion support.

From your query, we understand that you want to calculate sum of particular field from all the rows (saved and unsaved) and subtract that sum value from another value which is present outside the Grid (TaxAmount), and set the value as an initial value for a newly added row's field. To get all the row data (saved and unsaved), we have utilized the "getRowsObject" method. To set the value to the newly added row's editor, we have utilized the "beforeBatchAdd" event, since you have utilized the Batch edit mode. Also, we have implemented the logic to calculate the new field value based on your requirement. Please find the below code snippet and sample for your reference:

[index.js]

 

// tax amount declared outside the Grid

let TAX_AMOUNT = 100.0;

 

function DataGrid() {

  let grid;

 

  .  .  .  .  .

 

  // triggers before records are added in batch mode

  function beforeBatchAdd(args) {

    // get each row's changed and unchanged data using getRowsObject method

    // and storing it inside an array

    let viewData = grid.getRowsObject().map((obj) => obj.changes ?? obj.data);

 

    // declare variable to calculate the sum

    let defaultKwotanettoValue = 0;

 

    // calculating sum from the array viewData for particular field (kwotanetto)

    viewData.forEach((d) => {

      defaultKwotanettoValue += d.kwotanetto;

    });

 

    // subtracting the sum value from the tax amount declared outside the Grid

    defaultKwotanettoValue = TAX_AMOUNT - defaultKwotanettoValue;

 

    // setting the result as a default value for particular field (kwotanetto)

    args.defaultData.kwotanetto = defaultKwotanettoValue;

  }

 

  return (

    <>

      <h3>Tax Amount: {TAX_AMOUNT}</h3>

      <GridComponent

        ref={(g) => (grid = g)}

        dataSource={data}

        toolbar={toolbarOptions}

        allowPaging={true}

        editSettings={editSettings}

        pageSettings={{ pageCount: 5, pageSize: 10 }}

        beforeBatchAdd={beforeBatchAdd}

      >

  .  .  .  .  .

 

Sample: https://stackblitz.com/edit/react-grid-dynamic-default-value

beforeBatchAdd event API: https://helpej2.syncfusion.com/react/documentation/api/grid/#beforebatchadd

We hope this solution will help you achieve the desired outcome. Please let us know if you have any further queries or need additional assistance.

Regards,

Santhosh I