Combo Selection changed Event Handler of Combo inside grid

I have a grid which has a column whose editor is set to Combo. It gets data from the DatasourceUrl, I want to make an ajax request on the selection changed event of that combo. How can I do that ?

Q: How can I register or set an event handler for the combo inside the grid.

Thanks in advance.

Hello Jimmy,

In the editor options settings you can directly define the event handler like this:

Code Snippet

1. features: [{
2.         name: 'Updating',
3.         editMode: 'cell',
4.         columnSettings: [{
5.                 columnKey: 'Name',
6.                 editorType: "combo",
7.                 editorOptions: {
8.                     dataSource: adventureWorks,
9.                     textKey: "Name",
10.                     valueKey: "Name",
11.                     selectionChanged: function (evt, ui) {
12.                         $.get("/testUrl", function () {
13.                             //custom code here
14.                         });
15.                     }
16.                 }
17.             }
18.         ]
19.     }
20. ]

Hope this helps,
Martin Pavlov
Infragistics, Inc. 

Thanks Martin,

I am using MVC Helper syntax like this : 

cs.ColumnSetting().ColumnKey("cur_cd").EditorType(ColumnEditorType.Combo).Required(true)
                                            .ComboEditorOptions(co => co.DataSourceUrl("/mycontroller/getData").TextKey("cur_cd").ValueKey("cur_name")
                                                .Mode(ComboMode.DropDown));

In this syntax, .AddClientEvent("selectionChanged", "myFunction"); is not available in the intellisense on indivisual columns like this:

cs.ColumnSetting().ColumnKey("cur_cd").EditorType(ColumnEditorType.Combo).Required(true)
                                            .ComboEditorOptions(co => co.DataSourceUrl("/mycontroller/getData").TextKey("cur_cd").ValueKey("cur_name")
                                                .Mode(ComboMode.DropDown).AddClientEvent("selectionChanged", "myFunction"));  (Error)

However it is available immediately after features.Updating() like this :

features.Updating().AddClientEvent("selectionChanged", "myFunction")  (Works)

I want to register the event only on cur_cd column & not on all columns, also if it cannot be done in MvcHelper syntax , How can I detect which column's selection changed is fired in the delegate handler, is there something like ui.columnKey something like that to determine which column's selection change is being fired.

One more thing , You can see in my .ComboEditorOptions that TextKey is cur_cd, ValueKey is cur_name , How ever I want TextKey= cur_name & ValueKey=cur_cd but this gives an error for some reason and works fine the other way BUT I see cur_cd as display text in the combo which I dont want, When I select an item than the selected item(after dropdown closes) becomes cur_name, but in the dropdown list it shows cur_cd. Any idea why this strange behavior ?

Hello Jimmy,

You are correct that the MVC helper combo editor options do not include the option to hook up the events at this time. The way to work around this and limit the event to just one of your combos is to first make sure that you set an ID for the combo in the ComboEditorOptions. Next, wire up the igcomboselectionchanged event through the use of the on function, using the patter $(<grid element selector>).on('igcomboselectionchanged', <combo element selector>, <function name>); For example:

        $(function () {
            $('#grid1').on('igcomboselectionchanged', '#FirstCombo', SelectionChanged);
        });

This syntax will make sure that the event gets wired up to the exact combo that you want it to at the time that the combo is created.

As for your second question, please note that the field that you set as the ValueKey should have the same data type as the column you are editing, which is most likely why you are seeing this behavior. Basically, the column that you are editing is set to accept string values so the value of your combo must be a string. The easiest way to resolve this issue would be to set both the TextKey and the ValueKey to cur_name.

If you would instead prefer to have cur_cd be the value of the cell then you'll need to modify the column definition so that the column matches the data type of cur_cd. Please note that after you change the value you'll see cur_cd displayed. If you want to make sure that cur_name is always displayed in that situation then the following forum thread with Martin should be useful for demonstrating how this can be implemented:

https://www.infragistics.com/community/forums/f/ignite-ui-for-javascript/72892/combo-as-editor-type-in-iggrid-column/370474#370474

Please let me know if I may be of any other help with this matter.

Hello Jimmy,

Does wiring up the SelectionChanged event through the on function meet your requirements? Please let me know if I may be any further help with this matter.

Thanks for your response.

Setting an ID though comboEditor options would do the deed.

I want to ask you about one more thing.

The combo which is in my grid is set as a required field.There is another column in the grid for which user has to open up a modal window and then select a value from somewhere and that gets entered in the editor of the grid. But when the user is using the modal window the Editor for grid are opened, when the user clicks on any of the modal window elements the Required combo column in grid starts to pop up "This field is required" message. Although user has not currently finished adding the row, He is infact going to select some value from some modal window to be added in the currently opened editors but the grid pops up required field pop up message on its blur. What is the solution to this problem. I want the Required field validator for grid combo to only work if the user presses Done button of the row editor or presses the enter key. How to tell the grid to not validate the combo on blur.

Hello Jimmy,

One way to work with this would be to handle the ErrorShowing event for the combo. In there, check the dialog state to see if it is anything but closed. If it is then return false to cancel the event, preventing the error message from showing in that instance.

function ErrorShowing(evt, ui) {
    var dialogState = $('#dialog').igDialog('option', 'state');
    if (dialogState != 'closed') {
        return false;
    }
}

I've attached the sample I used to verify this approach works so that you can see how this can be implemented.

Thanks Jason.