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.
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:
[code]
$("#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!"); } } }, ]
}
]
});
[/code]
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.
I am glad that you find my suggestion helpful.
Please let me know if you need any further assistance with this matter.
This API is not available when using the MVC wrapper. Do you have recommendations for how to tie this out using MVC?
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"); }); // ]]>
@(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.
Is there a way to set the ID for the other editor types. It appears that the combo MVC wrapper is the only one that has that property? We also have date, numeric, and editor fields in our grid.