Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
55
Updating the value of one cell based on another cell value and vice versa in iggrid?
posted

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?

Parents Reply Children
  • 17210
    Verified Answer
    Offline posted in reply to Kumar G

    Hello Kumar,

    My suggestion is to handle igNumericEditor`s valueChanged event. In this event the value of the other depended editor can be set according to your formula. For example:

    1) Define the valueChanged event in Updating column settings collection:

      .Features(f =>
                {
                    f.Updating()
                        .EnableAddRow(false)
                        .EditMode(GridEditMode.Row)
                        .ColumnSettings(cs =>
                        {
                            cs.ColumnSetting().ColumnKey("Id").ReadOnly(true);
                            cs.ColumnSetting().ColumnKey("Amount").NumericEditorOptions(opts=> {
                                opts.AddClientEvent("valueChanged", "amountValChanged");
                            });
                            cs.ColumnSetting().ColumnKey("Percentage").NumericEditorOptions(opts =>
                            {
                                opts.AddClientEvent("valueChanged", "percentageValChanged");
                            });
                        });
                })

    2) Handle valued in valueChanged event hadnlers:

        <script>
            $(function () {
                window.amountValChanged = function(evt, ui) {
                    $("#grid").igGridUpdating("editorForKey", "Percentage").igNumericEditor("value", ui.newValue * 2);
                }
                window.percentageValChanged = function (evt, ui) {
                    $("#grid").igGridUpdating("editorForKey", "Amount").igNumericEditor("value", ui.newValue / 2);
                }
            });
        </script>

    Please test this suggestion on your side and let me know if you have any additional questions afterwards.