Is it possible to have a different editor for each cell in a single grid column? I.e. One single column with different editors for each row. (combo boxes, date pickers, textboxes, numbers, etc.)
I am trying to use an Infragistics TreeGrid and TreeGridModel in an MVC app to simulate a Windows property grid. (see attached image)
The TreeGrid needs a different editor for each row in the last column, as shown in the example.
Or, is the TreeGrid a bad choice for emulating the Windows property grid? Is there a better component?
Could I use a column template to produce HTML markup in the following fashion?
1. Create HTML markup strings for the various editor types in each cell in the column2. Place the HTML strings into cell values as plain text3. Use a column template to produce the actual HTML markup like this: ${FullHtmlMarkupFromEachCellValue}
Hello Ray,
Thank you for your patience while I was looking into this matter for you.
What I can suggest in order to use a different editor for each cell is to use the Custom Editor Provider. Implementing your own editor provider allows you to fully customize the editing experience, from the type of editor used to the visualization and validation logic for the editor. I belive you will find the Implementing Custom Editor Provider topic of our official documentation very helpful. There you can find more information regarding how to implement a custom editor provider that extends the igEditorProvider class:
Razor
@(Html.Infragistics().TreeGrid(Model.Customers.AsQueryable()) .ID("treegrid1") ... .Features(features => { features.Updating().ColumnSettings(cs => { cs.ColumnSetting().ColumnKey("CustomEditor"); }) .AddClientEvent("editCellEnding", "onEditCellEnding").AddClientEvent("editCellStarting", "onEditCellStarting").EditMode(GridEditMode.Cell).EnableAddRow(false).EnableDeleteRow(false); }) .DataBind() .Render() )
Javascript
// sets the custom editor provider $(function () { $("#treegrid1").igTreeGridUpdating("option", "columnSettings")[1].editorProvider = new $.ig.EditorProviderDynamic(); }); $.ig.EditorProviderDynamic = $.ig.EditorProviderDynamic || $.ig.EditorProvider.extend({ ... getValue: function() { var val; if (!this.editor || !this.editor.value) return null; val = this.editor.value(); switch (_editorProperties.currentEditor) { case "bool": return val === "true" ? "true" : "false"; case "date": return val ? val.toString() : null; case "decimal": return val || val == 0 ? val.toString() : null; case "int": return val || val == 0 ? val.toString() : null; default: break; } return val; }, setValue: function (val) { this.destroy(); switch (_editorProperties.currentEditor) { case "bool": this.element.igCombo( { width: _editorProperties.cellWidth, dataSource: [{ value: "true" }, { value: "false" }], textKey: "value", valueKey: "value", } ); this.element.igCombo("value", val) this.editor = this.element.data("igCombo"); break; case "date": this.element.igDatePicker( { datepickerOptions: { showWeek: true }, placeHolder: "Pick Date", value: new Date(val), width: _editorProperties.cellWidth } ); this.editor = this.element.data("igDatePicker"); break; case "text": this.element.igTextEditor( { value: val, width: _editorProperties.cellWidth, textChanged: function (evt, ui) { if (!ui.owner._editMode) { value = ui.owner._currentInputTextValue ui.owner._editorInput[0].value = value; } } } ); this.editor = this.element.data("igTextEditor"); break; default: this.editor = {}; break; } }, }); function onEditCellEnding(evt, ui) { ui.update = true; if (ui.columnKey == "CustomEditor" && value) { ui.value = value; } value = null; } function onEditCellStarting(evt, ui) { switch ($("#treegrid1").igTreeGrid("findRecordByKey", ui.rowID).DataType) { case 'text': _editorProperties.currentEditor = "text"; break; case 'bool': _editorProperties.currentEditor = "bool"; break; case 'date': _editorProperties.currentEditor = "date"; break; case 'int': _editorProperties.currentEditor = "int"; break; default: break; } }
Attached you will find a small sample, that I have prepared in order to demonstrate my suggestion. Please test it on your side and let me know whether you find it helpful.
Looking fowrard to hearing from you.
Regards,Viktor KombovEntry Level Software DeveloperInfragistics, Inc.
igGridDifferentEditorForEachCellMVC.zip
Thanks for getting back to me.
I suggested the custom editor provider because it is the recommended approach in the official documentation of the Ignite UI product for a customization of the type of editor used. However, your solution also seems to work, so you can use it instead of the custom editor provider.
Thank you for choosing Infragistics components.
I chose a simpler method.
I simply put HTML directly into the cell value. It showed up in the browser as editable controls. (see attachment)
I was unsure why your solution was better than simple HTML in the cell value, so I did not use it.