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
1215
Different editor for each cell in grid column
posted

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?

Parents
  • 1215
    Offline posted

    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}

Reply
  • 640
    Offline posted in reply to Ray White

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

    igGridDifferentEditorForEachCellMVC.zip

Children