I have MVC - razor environment. My grid has columns A, B, C. When user enters value in A and B columns then C column should be calculated(A+B) and displayed. After that whenever A or B changes, C value should be automatically calculated. How to do this.
Hello sekhar pandiri,
What I can suggest for achieving your requirement is using formula option of igGrid columns. This is a reference or name of a java script function which will calculate the value based on the cell values in the same row when column is unbound. Basically my suggestion is to add unbound column in your igGrid and calculate its value from the columns of your choice. For example:
<body> @(Html.Infragistics().Grid<igGridMVCStatApplication.Models.Product>() .ID("grid1") .Width("100%") .AutoCommit(true) .Height("500px") .AutoGenerateColumns(false) .FeatureChooserIconDisplay(FeatureChooserIconDisplayMode.None) .PrimaryKey("Name") .Columns(col => { col.For(c => c.ProductID).HeaderText("ProductID").Hidden(false); col.For(c => c.Name).HeaderText("Name"); col.For(c => c.ReleaseDate).HeaderText("ReleaseDate"); col.For(c => c.ProductNumber).HeaderText("Product Number"); col.For(c => c.Col1).HeaderText("Value 1"); col.For(c => c.Col2).HeaderText("Value2"); col.Unbound("Total").Formula("CalculateTotal"); }) .Features(features => { features.Updating(); features.Hiding(); features.ColumnMoving(); features.Filtering().Mode(FilterMode.Advanced).Type(OpType.Remote); }) .DataSourceUrl(Url.Action("GetData")) .UpdateUrl(Url.Action("OrdersSaveData")) .Render()) <script type="text/javascript"> function CalculateTotal(data, grid) { return data["Col1"] + data["Col2"]; } </script> </body>
In this scenario when any of the values comprising the value of total column is changed this changed will be reflected in the Total column as well.
Please let me know if have any additional questions regarding this matter.
Here is my code in Model. Whenever A or B value changes, C need to be calculated as C = A+B (For example).
public GridModel BuildTestGrid() { var grid = new GridModel { AutoGenerateColumns = false, AutoGenerateLayouts = false, LoadOnDemand = true, PrimaryKey = "Id", GenerateCompactJSONResponse = false, AutoCommit = false, AggregateTransactions = true, Width = "100%" };
grid.Columns.Add(new GridColumn("A", "A", "number", "20%")); grid.Columns.Add(new GridColumn("B", "B", "number", "20%")); grid.Columns.Add(new GridColumn("C", "C", "number", "20%")); //Calculated Field
var url = new UrlHelper(System.Web.HttpContext.Current.Request.RequestContext);
grid.DataSourceUrl = url.Action("BindGrid", new RouteValueDictionary { {"area", "TestArea"}, {"controller", "TestController"}, {"action", "BindGrid"}, {"id",""} });
grid.UpdateUrl = url.Action("UpdateGrid", new RouteValueDictionary { {"area", "TestArea"}, {"controller", "TestController"}, {"action", "UpdateGrid"}, {"id", ""} });
grid.Features.Add(updating); return grid;
}
All my columns A, B and C are bound to model. That is these are all model fields.
So is there anyway I can achieve populating value in C when A, B entered.
Hello sekhar,
Thank you for the clarification.
In case that column C is part of the model my suggestion is to handle editRowEnding event of igGrid. In this event a reference to the new (as well as to the old) cell values could be retrieved vie the ui argument. Afterwards, this values could be used for any calculations result of which to be set as a cell value. For example:
<script type="text/javascript"> //Bind after initialization $(document).delegate("#grid1", "iggridupdatingeditrowending", function (evt, ui) { ui.values["C"] = ui.values["A"] + ui.values["B"]; }); </script>
Please test this approach on your side and let me know if you need any further assistance with this matter.
I have added the javascript in my cshtml file.
I do not see any change. It is not working.
When I click on "+Add row" icon on grid, it is allowing to add values in columns. When values are entered in column A, B, I do not see any value in Column C.
After entering values in A, B, When "Done" is pressed, the row is added but value in C is still blank. Anything is missing ?