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
2565
igGrid ColumnEditorType Combo changed event
posted

We have an igGrid with a column that is of type ColumnEditorType.Combo. We need to tie an event to the combo so that when it changes we can update another column in the grid. The editorValidatorOptions have an onChange property. How do you hook that up to an event? Is that even the right way to configure this? Any samples you could provide would be helpful.

Parents
  • 17150
    Verified Answer
    Offline posted

    Hello Tammy,

    Thank you for posting in our community.

    Events for the igCombo editor could be hooked in the editorOptions. All events that are applicable for the igCombo (which could be found here) could be attached for the editor provider as well.  For example the SelectionChanged event could be achieved as following:

      $("#gridManageView").igGrid({

    .

    .

      features: [

    {
           name: "Updating",
           enableAddRow: true,
           enableDeleteRow: true,
           columnSettings: [
              {
                    columnKey: "viewType", editorType: "combo", required: true,
                     editorOptions: {
                        mode: "dropdown",
                        textKey: "Text",
                        valueKey: "Value",
                        dataSource: viewOptions,
                        dataSourceType: "json",
                        width: "100%",
                        autoComplete: false,
                        filteringType: "local",
                        renderMatchItems: "contains",
                        enableClearButton: true,
                        mode: "editable",
                        selectionChanged: function (e, args) {
                           //handle your event here
                            alert("Event Fired!");
                        }
                }
         },
                                               
      ]

    }

    ]

    });

    I am also attaching a small sample illustrating my suggestion for your reference.

    Please have a look at the provided sample and let mw know if you have any additional questions afterwards.

    igGridComboEditorSelectionChangedEvent.zip
Reply
  • 17150
    Offline posted in reply to Tammy Wohlrabe

    Hello Tammy,

    Thank you for your patience while I was looking into this matter for you.

    When using the MVC wrappers event handlers could be attached after the controls initialization using jQiery delegate. Handlers are attached to one or more events for all elements that match the selector. Basically, this means that the ID option of the combo editor should be set in order to get reference to this particular element and hook the event. For example:

    @(Html.Infragistics().Grid(Model)
      .ID("grid1")
      .Width("100%")
      .AutoGenerateColumns(false)
      .AutoCommit(true)
      .PrimaryKey("ProductID")
      .Columns(col =>
    {
        col.For(c => c.ProductID).HeaderText("ProductID").Width("0%");
        col.For(c => c.Name).HeaderText("Name").Width("20%");
        col.For(c => c.ReleaseDate).HeaderText("ReleaseDate").Width("50%");
        col.For(c => c.Status).HeaderText("Status").Width("20%").FormatterFunction("formatStatus");
    })
    .Features(features =>
    {
       features.Updating().EditMode(GridEditMode.Row).ColumnSettings(cs => {
           cs.ColumnSetting().ColumnKey("Status").EditorType(ColumnEditorType.Combo).ComboEditorOptions(co => co.DataSource(ViewBag.Statuses).ID("comboEditor").ValueKey("Key").TextKey("Value").Mode(ComboMode.DropDown));   
       });
    })
    .UpdateUrl(Url.Action("UpdateURLAction"))
    .DataSourceUrl(Url.Action("GetData"))
    .Render())

    //
            $(document).delegate("#comboEditor", "igcomboselectionchanged", function (evt, ui) {

               alert("Selection Changed event is fired");
            });

    // ]]>

    I am also attaching a application project illustrating my suggestion for your reference. Please have a look at the provided sample and do not hesitate to contact me if you have any additional questions afterwards.

    Thank you for using Infragistics components.

    igGridComboEditorEvents (3).zip
Children