1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. How to use the datagrid (fractional calculation)

How to use the datagrid (fractional calculation)

Hi, Syncfusion team


I want to update the other cell by creating a multiplying relationship between the two cells.

Please refer to the following image for the relationship between the two cells.



If one of the two cells is edited,

I hope you react to the "Room volume" volume right away.

Will it be possible?

The sources for your reference are as follows.


<html>

<ejs-grid id="DataInputGrid" created="GridCreated" allowSelection="true" gridLines="Both" rowHeight="30" height="500px" frozenColumns="5" allowTextWrap="true" cellEdit="cellEdit"

              toolbar="@(new List<string>() { "Add","Delete","Update","Cancel" })" beforeBatchAdd="beforeBatchAdd" beforeBatchSave="beforeBatchSave" actionComplete="actionComplete">

        <e-grid-textwrapsettings wrapMode="Header"></e-grid-textwrapsettings>

        <e-grid-selectionsettings checkboxOnly="true" type="Single"></e-grid-selectionsettings>

        <e-grid-editSettings allowAdding="true" allowEditing="true" allowDeleting="true" mode="Batch" newRowPosition="Top"></e-grid-editSettings>

        <e-grid-columns>

            <e-grid-column type="checkBox" width="40" headerTextAlign="Center" textAlign="Center"></e-grid-column>

            @*Frozen Column*@

            <e-grid-column headerText="ARCHITECTURAL INFORMATION" headerTextAlign="Center" textAlign="Center"

                           columns="@(new List<Syncfusion.EJ2.Grids.GridColumn>() {

                    new Syncfusion.EJ2.Grids.GridColumn { HeaderText = "ROOM INFORMATION", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, Columns = new List<Syncfusion.EJ2.Grids.GridColumn>(){

                        new Syncfusion.EJ2.Grids.GridColumn { Field = "RM_SNO" , MinWidth = "80", Width = "120", HeaderText = "KEY" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Left},

                        new Syncfusion.EJ2.Grids.GridColumn { Field = "ROOM_NO" , MinWidth = "80", Width = "90" , HeaderText = "ROOM NO." , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, ValidationRules = new { required=true}},

                        new Syncfusion.EJ2.Grids.GridColumn { Field = "AIR_SYS_NM", MinWidth = "80", Width = "90" , HeaderText = "AIR SYSTEM NAME", DefaultValue = "1", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center},

                        new Syncfusion.EJ2.Grids.GridColumn { Field = "RM_NM" , MinWidth = "80", Width = "140", HeaderText = "ROOM NAME" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Left, ValidationRules = new { required=true}}}

                    }})">

            </e-grid-column>


            @*ARCHITECHTURAL INFORMATION*@

            <e-grid-column headerText="ARCHITECTURAL INFORMATION" headerTextAlign="Center" textAlign="Center"

                           columns="@(new List<Syncfusion.EJ2.Grids.GridColumn>() {

                    new Syncfusion.EJ2.Grids.GridColumn { HeaderText = "ROOM INFORMATION", TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, Columns = new List<Syncfusion.EJ2.Grids.GridColumn>(){

                        new Syncfusion.EJ2.Grids.GridColumn { Field = "RM_AREA" , Width = "80" , Visible = false, HeaderText = "ROOM AREA (m2)" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }},

                        new Syncfusion.EJ2.Grids.GridColumn { Field = "RM_WIDTH" , Width = "80" , Visible = false, HeaderText = "WIDTH (m)" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }},

                        new Syncfusion.EJ2.Grids.GridColumn { Field = "RM_LGTH" , Width = "80" , Visible = false, HeaderText = "LENGTH (m)" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }},

                        new Syncfusion.EJ2.Grids.GridColumn { Field = "RM_CLG_HGT" , Width = "90" , Visible = false, HeaderText = "CEILING HEIGHT (m)" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }},

                        new Syncfusion.EJ2.Grids.GridColumn { Field = "RM_FULL_HGT" , Width = "90" , Visible = false, HeaderText = "FULL HEIGHT (m)" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }},

                        new Syncfusion.EJ2.Grids.GridColumn { Field = "RM_VOL" , Width = "100", Visible = false, HeaderText = "ROOM VOLUME (m3)" , DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }},

                        new Syncfusion.EJ2.Grids.GridColumn { Field = "RM_NO_OF_OCC", Width = "100", Visible = false, HeaderText = "NUMBER OF OCCUPANCY", DefaultValue = "" , HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }}}

                    },


                    new Syncfusion.EJ2.Grids.GridColumn { HeaderText = "OUTER WALL LENGTH", TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, Columns = new List<Syncfusion.EJ2.Grids.GridColumn>(){

                        new Syncfusion.EJ2.Grids.GridColumn { Field = "OWL_N", Width = "90", HeaderText = "N", Visible = false, DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }},

                        new Syncfusion.EJ2.Grids.GridColumn { Field = "OWL_E", Width = "90", HeaderText = "E", Visible = false, DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }},

                        new Syncfusion.EJ2.Grids.GridColumn { Field = "OWL_S", Width = "90", HeaderText = "S", Visible = false, DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }},

                        new Syncfusion.EJ2.Grids.GridColumn { Field = "OWL_W", Width = "90", HeaderText = "W", Visible = false, DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }}}

                    },


                    new Syncfusion.EJ2.Grids.GridColumn { HeaderText = "OUTER WALL AREA", TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, Columns = new List<Syncfusion.EJ2.Grids.GridColumn>(){

                        new Syncfusion.EJ2.Grids.GridColumn { Field = "OWA_N", Width = "90", HeaderText = "N", Visible = false, DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right},

                        new Syncfusion.EJ2.Grids.GridColumn { Field = "OWA_E", Width = "90", HeaderText = "E", Visible = false, DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right},

                        new Syncfusion.EJ2.Grids.GridColumn { Field = "OWA_S", Width = "90", HeaderText = "S", Visible = false, DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right},

                        new Syncfusion.EJ2.Grids.GridColumn { Field = "OWA_W", Width = "90", HeaderText = "W", Visible = false, DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right}}

                    },


                    new Syncfusion.EJ2.Grids.GridColumn { HeaderText = "DOOR Q'ty", TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, Columns = new List<Syncfusion.EJ2.Grids.GridColumn>(){

                        new Syncfusion.EJ2.Grids.GridColumn { Field = "DOOR_QTY_N", Width = "90", HeaderText = "N", Visible = false, DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }},

                        new Syncfusion.EJ2.Grids.GridColumn { Field = "DOOR_QTY_E", Width = "90", HeaderText = "E", Visible = false, DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }},

                        new Syncfusion.EJ2.Grids.GridColumn { Field = "DOOR_QTY_S", Width = "90", HeaderText = "S", Visible = false, DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }},

                        new Syncfusion.EJ2.Grids.GridColumn { Field = "DOOR_QTY_W", Width = "90", HeaderText = "W", Visible = false, DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }}}

                    },


                    new Syncfusion.EJ2.Grids.GridColumn { HeaderText = "WINDOW Q'ty", TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, Columns = new List<Syncfusion.EJ2.Grids.GridColumn>(){

                        new Syncfusion.EJ2.Grids.GridColumn { Field = "WIN_QTY_N", Width = "90", HeaderText = "N", Visible = false, DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }},

                        new Syncfusion.EJ2.Grids.GridColumn { Field = "WIN_QTY_E", Width = "90", HeaderText = "E", Visible = false, DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }},

                        new Syncfusion.EJ2.Grids.GridColumn { Field = "WIN_QTY_S", Width = "90", HeaderText = "S", Visible = false, DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }},

                        new Syncfusion.EJ2.Grids.GridColumn { Field = "WIN_QTY_W", Width = "90", HeaderText = "W", Visible = false, DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right, ValidationRules = new { number=true }}}

                    }})">

            </e-grid-column>


<script>

 //HvacData Grid Edit prevent

    function cellEdit(args) {

        var Grid = document.getElementById('DataInputGrid').ej2_instances[0];

        var editData = Grid.getBatchChanges();

        var dataprovider = new DataInputGrid.local


        if (editData.changedRecords.length > 0) {

            var editRow = editData.changedRecords[0];

            var RoomArea = parseFloat(editRow['RM_AREA']);

            var CelingHeight = editRow['RM_CLG_HGT'];


            var result = RoomArea * CelingHeight;


            args.columnObject.parent.contentModule.rows[0].changes["RM_VOL"] = result;

            args.columnObject.parent.contentModule.rows[0].data["RM_VOL"] = result;


            var Revision = args.cell;

            Revision.innerText = result;

            Revision.ariaLabel = result + " column header ROOM VOLUME (m3)";


            grid.seted



        }


I look forward to your good answer.

Have a great day today.








4 Replies
RR Rajapandi Ravi Syncfusion Team January 11, 2022 01:57 PM UTC

Hi TaeWook, 

Greetings from Syncfusion support 

We have analyzed your shared information and we need more information for our clarification. In your query you have mentioned that “Please refer to the following image for the relationship between the two cells” but the image was not shared in your update. So please share the below details that will be helpful for us to provide better solution. 

1)              Please share your exact requirement scenario with detailed description. 

2)              Please explain your requirement scenario with pictorial representation. 

Regards, 
Rajapandi R 


TK TaeWook Kang January 12, 2022 12:09 AM UTC

싱크퓨전 Q.png



TK TaeWook Kang January 12, 2022 12:10 AM UTC

Attached is an image and video containing the scenario.


Please check and give us a good answer.


RR Rajapandi Ravi Syncfusion Team January 12, 2022 12:36 PM UTC

Hi TaeWook, 

Thanks for the update 

We understand that while editing the Room Area column and Ceiling Height column you like to perform calculation and update the result to the Room volume column. Based on your query we have prepared a sample and we suggest you use the below way to achieve your requirement. Please refer the below code example, sample and video demo for more information. 
 
In this below sample, we have update the Frieght column based on EmployeeID & Height column value. 
 
 
<div class="control-section"> 
    <ejs-grid id="Grid" dataSource="ViewBag.dataSource" cellSave="cellSave" toolbar="@(new List<string>() { "Add","Delete","Update","Cancel" })" allowPaging="true"> 
        <e-grid-pagesettings pageCount="5"></e-grid-pagesettings> 
        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Batch"></e-grid-editSettings> 
        <e-grid-columns> 
            <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120" minWidth="10"></e-grid-column> 
            <e-grid-column headerText="Order Details" columns="@( new List<Syncfusion.EJ2.Grids.GridColumn>() { new Syncfusion.EJ2.Grids.GridColumn { Field = "EmployeeID", Width = "120", HeaderText = "Employee ID", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Right }, 
                                                                                                                new Syncfusion.EJ2.Grids.GridColumn { Field = "Height", Width = "120", HeaderText = "Height", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Right }, 
                                                                                                                   new Syncfusion.EJ2.Grids.GridColumn { Field = "Freight", Width = "135", HeaderText = "Freight($)", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Right  } } )"> 
            </e-grid-column> 
        </e-grid-columns> 
    </ejs-grid> 
</div> 
 
<script> 
    function cellSave(args) {   //cellSave event is triggered at time of saving the cell 
        if (args.columnName == "EmployeeID") { 
            var value = args.value; 
            var height = args.rowData.Height; 
            var result = value + height; //here we have perform addition and you can perform your own calculation here 
            var rowIndex = this.getRowInfo(args.cell.closest('tr')).rowIndex; 
            this.updateCell(rowIndex, "Freight", result) //while using saving value we have perform calculation with height and update the result to the freight column 
        } 
        if (args.columnName == "Height") { 
            var value = args.value; 
            var id = args.rowData.EmployeeID; 
            var result = value + id; //here we have perform addition and you can perform your own calculation here 
            var rowIndex = this.getRowInfo(args.cell.closest('tr')).rowIndex; 
            this.updateCell(rowIndex, "Freight", result) 
        } 
    } 
</script> 
 





Rajapandi R 



Loader.
Up arrow icon