Spreading GrandTotal to remaining Cell using grid

Question

In following Normal grid I am calculating "Total" using valueAccessor. If I enter value e.g. 40 in Total column is there any way I can spread this value across other cells equally

Rajapandiyan Settu · Accepted Answer

Hi Akshatha, 
 
Thanks for your update. 
 
Query: In following Normal grid I am calculating "Total" using valueAccessor. If I enter value e.g. 40 in Total column is there any way I can spread this value across other cells equally 
 
We have validated your query at our end. You can achieve your requirement by using change event of NumericTextbox component. 
 
Change: https://ej2.syncfusion.com/javascript/documentation/api/numerictextbox#change 
 
In that event, we get the TotalQty value and equally share its value to other columns. Please find the below code example and sample for more information. 
 




[app.component.ts] 
export class AppComponent { 
  public data: Observable<DataStateChangeEventArgs>; 
 
  ----- 
  prepareDataForGrid(data) { 
    console.log(data); 
    ---- 
    const columns = [ 
      { 
        field: "OrderID", 
        headerText: "Order ID", 
        textAlign: "Right", 
        isPrimaryKey: true, 
        width: 120 
      }, 
      { field: "CustomerID", headerText: "Customer ID", width: 150 }, 
      { 
        field: "Freight", 
        headerText: "Freight", 
        editType: "numericedit", 
       allowEditing: false, 
        edit: {params: { change: this.itemChange }}, 
        width: 150 
      }, 
      { 
        field: "EmployeeID", 
        headerText: "Employee ID", 
        editType: "numericedit", 
       allowEditing: false, 
        edit: { params: { change: this.itemChange } }, 
        width: 150 
      }, 
      { 
        field: "Qty", 
        headerText: "Qty", 
        editType: "numericedit", 
        edit: { params: { change: this.qtyChange } }, 
        valueAccessor: this.valueAccessor, 
        width: 150 
      } 
    ]; 
    --- 
    return { dataSource: itemValue, cols: columns, aggregates: aggregates }; 
  } 
 
  actionBegin(args) { 
    if (args.requestType == "beginEdit") { 
      args.rowData.Qty = parseFloat(args.rowData["Freight"]) + parseFloat(args.rowData.EmployeeID); 
    } 
  } 
  qtyChange = args => { 
    var gridId = this.gridPoc.element.id; 
    var qtyValue = args.value; 
// get the shared value from totalQty 
    var sharedValue = qtyValue / 2; 
// bind the shared value to other columns 
 
// get the freight column’s numerictextbox control using its id (grid id + column name) 
    (document.getElementById(gridId + "Freight") as any).ej2_instances[0].value = sharedValue; 
// get the employeeID column’s numerictextbox control using its id (grid id + column name) 
    (document.getElementById(gridId + "EmployeeID") as any).ej2_instances[0].value = sharedValue; 
    console.log(this); 
  }; 
 
 
Sample: https://stackblitz.com/edit/angular-ws2fqv-xrmcqo?file=app.component.ts 
 
By using allowEditing property of column, you can disable editing on particular column in Grid. Find the below documentation for more information. 
 
Disable editing on particular column: https://ej2.syncfusion.com/javascript/documentation/grid/edit/#disable-editing-for-particular-column 
 
You can also dynamically disable/enable the allowEditing of the column by using actionBegin and actionComplete event of Grid. find the below code example for your reference. 
 
actionBegin: https://ej2.syncfusion.com/javascript/documentation/api/grid#actionbegin 
actionComplete: https://ej2.syncfusion.com/javascript/documentation/api/grid#actioncomplete 
allowEditing: https://ej2.syncfusion.com/javascript/documentation/api/grid/column/#allowediting 
getColumnByField: https://ej2.syncfusion.com/javascript/documentation/api/grid#getcolumnbyfield 
 




  actionBegin(args) { 
    if (args.requestType == "beginEdit") { 
// disable the editing on particular column 
      this.gridPoc.getColumnByField("Freight").allowEditing = false; 
      this.gridPoc.getColumnByField("EmployeeID").allowEditing = false; 
    } 
  } 
  actionComplete(args) { 
    if (args.requestType === "save" && args.action === "edit") { 
// enable the editing on particular column 
      this.gridPoc.getColumnByField("Freight").allowEditing = true; 
      this.gridPoc.getColumnByField("EmployeeID").allowEditing = true; 
    } 
  } 
 
Please get back to us if you need further assistance with this. 
 
Regards, 
Rajapandiyan S