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.

Regards,
Viktor Kombov
Entry Level Software Developer
Infragistics, Inc.

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 Kombov
Entry Level Software Developer
Infragistics, Inc.

igGridDifferentEditorForEachCellMVC.zip

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 column
2. Place the HTML strings into cell values as plain text
3. Use a column template to produce the actual HTML markup like this: ${FullHtmlMarkupFromEachCellValue}