I'm using an ASP.Net MVC igGrid and i have created the grid like below
@(Html.Infragistics().Grid(this.Model.lstMilestoneDetails).PrimaryKey("intMileStoneNo").AutoCommit(false).AutoGenerateColumns(false).ID("MileStoneGrid").Columns(column => { column.For(x => x.intMileStoneNo).Hidden(true); //MilestoneNo column.For(x => x.txtDescription).HeaderText("Description"); //Description column.For(x => x.dtDate).Format("dd-MMM-yyyy").HeaderText("Date").Width("15%"); column.For(x => x.fltPercentage).HeaderText("Percentage"); //Percentage column.For(x => x.fltAmount).HeaderText("Amount"); //Amount column.For(x => x.MilestonePercentage).HeaderText("Milestone%"); }).Features(features => { features.Updating().ColumnSettings(cs => { cs.ColumnSetting().ColumnKey("txtDescription").EditorType(ColumnEditorType.Text).Required(true); cs.ColumnSetting().ColumnKey("dtDate").EditorType(ColumnEditorType.DatePicker).Required(true); cs.ColumnSetting().ColumnKey("fltPercentage").EditorType(ColumnEditorType.Numeric).DefaultValue(0).Required(true).NumericEditorOptions(opts => opts.MaxValue(100).MinValue(0)); cs.ColumnSetting().ColumnKey("fltAmount").EditorType(ColumnEditorType.Numeric).DefaultValue(0).Required(true); cs.ColumnSetting().ColumnKey("MilestonePercentage").ReadOnly(true); }); features.Summaries().ColumnSettings(cs => { cs.ColumnSetting().ColumnKey("fltPercentage").AllowSummaries(true).SummaryOperands(so => { so.SummaryOperand().RowDisplayLabel("Sum").Type(SummaryFunction.Sum).Active(true); }); cs.ColumnSetting().ColumnKey("fltAmount").AllowSummaries(true).SummaryOperands(so => { so.SummaryOperand().RowDisplayLabel("Sum").Type(SummaryFunction.Sum).Active(true); }); }); features.Resizing(); features.ColumnMoving().AddMovingDropdown(false); features.Sorting().ApplyColumnCss(false); features.Selection().MultipleSelection(true); features.RowSelectors().EnableSelectAllForPaging(true).EnableCheckBoxes(true).EnableRowNumbering(false); features.Paging().PageSize(5).PageSizeDropDownLocation("inpager").AddClientEvent("pageIndexChanged", "fnPagination").AddClientEvent("pageSizeChanged", "fnPageSizeChange"); }) .AutoCommit(true) .DataBind().Render() )
I want to calculate a value of cell "Amount" when I change value of "Percentage" and vice versa . I need to change the values either on blur of that particular cell or when the value is changed.
Like When i enter percentage as 15% i want to update the amount value like 15 * some predefined value.
How can I do that? Can you kindly provide it with an example?
Hello Kumar,
Thank you for posting in our community.
What I can suggest for achieving your requirement is using formatter option of igGrid columns. This is a reference to a function which will be used for formatting cell values. This function has two arguments, val - that holds current cell value and record - that holds the whole record values. My idea is to create a formatter function for Amount column where you will calculate the value based on the "Percentage" column value. When editing if you update the Percentage column`s value formatter function will reflect that in the Amount column`s value. For example:
column.For(x => x.fltAmount).HeaderText("Amount").FormatterFunction("formatVal"); //Amount
//define formatVal function
<script>
function formatVals(val, record) {
var formattedVal = record.Percentage * predefined value;
return formattedVal;
}
</script>
Keep in mind that formatting operates at grid rendering phase and does not affect the data in the underlying data source. Some further reference about formatting can be found here.
Please test this approach on your side and let me know if it helps you achieve your requirement.
Regards,Vasya KacheshmarovaAssociate Software DeveloperInfragistics