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
135
MVC IGGrid Edit Mode Combo Box changed even handler
posted

Hello,

I have the following grid setup with .NET MVC, which all works well, but I need to take action when the value in the combo box changes and I can't figure that out. I'm hoping that someone can show me what I need to with my code to handle this.

Grid:
@(Html.Infragistics().Grid<QuoteOption>()
        .ID("igQuoteOptions")
        .PrimaryKey("Id")
        .UpdateUrl(Url.Action("SaveQuoteOptions", "QuoteHeader", new { quoteNumber = Model.QuoteNumber}))
        .Columns(column =>
        {
            column.For(x => x.Id).DataType("number").Hidden(true);
            column.For(x => x.OptionNumber).DataType("number").HeaderText("Option #");
            column.For(x => x.OptionDescription).DataType("string").HeaderText("Description");
            
        })
        .Features(features =>
        {
            features.Filtering();
            features.Sorting();

            features.Updating().ColumnSettings(cs =>
            {
                cs.ColumnSetting().ColumnKey("OptionNumber")
                    .EditorType(ColumnEditorType.Combo)
                    .ComboEditorOptions(co =>
                        co.DataSource(Model.AllowableOptions)
                        .ValueKey("Id")
                        .TextKey("OptionDescription")
                        .AllowCustomValue(true)                      
                    );
            }).EditMode(GridEditMode.Cell).AddClientEvent("iggridupdatingeditcellending ", "optionSelectedChange");
                
        })
        .AutoGenerateColumns(false)
        .DataSource(Model.QuoteOptions.AsQueryable())
        .DataBind()
        .Render()
)

function:

    function optionSelectedChange() {
        alert("something, anything");
    }

  • 19693
    posted

    Hello,

    Thank you for posting in our community.

    If you want to restrict the invocation of the function

     you can use the reference to the column Key/Index in editCellEnding for the purpose.

    http://help.infragistics.com/jQuery/2013.2/ui.iggridupdating#events 

    Another issue that I noticed is that you are using the whole name of the event. You need to set it editCellEnding.

    For example

    feature.Updating()

    .ColumnSettings(cs =>

       {

           cs.ColumnSetting().ColumnKey("DeveloperId")

    .EditorType(ColumnEditorType.Combo)

    .ComboEditorOptions(co => co.DataSource(Model).ValueKey("DeveloperId").TextKey("DeveloperId"));

       })

    .EditMode(GridEditMode.Cell)

    .AddClientEvent("editCellEnding", "optionSelectedChange"); 

    … 

    function optionSelectedChange(evt, ui) {

                if (ui.columnKey === "DeveloperId") {

                    if (ui.oldValue !== ui.value) {

                        alert("Old value " + ui.oldValue + " New value " + ui.value);

                    }

                }

            } 

    Please let me know if you need further assistance