Можем ли мы добавить пользовательский атрибут в текстовое поле, которое создается в режиме редактирования ag-grid?

Question

У нас есть существующая сетка, которая содержит текстовое поле ниже.Мне нужно прикрепить все эти атрибуты к текстовому полю, которое создается в режиме редактирования ag-grid (<input class="ag-cell-edit-input" type="text">).Как мы можем прикрепить то же самое?

<input typeaheadval="3" onfocus="fnborderRow(21);" onfocusout="fnborderRow(0);" type="text" id="drpClass21" vendorpaymentid="149962" vendorpaymentdetailid="167679" rowid="21" sortfieldcol="clsSortPayee" value="210 UT - Salt Lake City" selectedid="210" onchange="fnChangeObj(this);" style="border-width: 1px; border-style: solid; border-color: rgb(195, 195, 195); background-color: rgb(255, 255, 255);" class="form-control clsSearch clsClass ui-autocomplete-input clsGLClass149962" autocomplete="off">

Answer 1

Поскольку вы используете vanilla js, вам нужно создать свой собственный редактор ячеек как функцию, а затем добавить все необходимые методы в прототип функции.

Определите ваш столбец по умолчанию:

{ headerName: "Custom Input", field: "customInput", editable: true, cellEditor: 'customTextInputEditor', }

Создайте CustomTextInputEditor функцию:

function CustomTextInputEditor() {

}

Затем добавьте все необходимые методы к прототипу CustomTextInputEditor, например init:

CustomTextInputEditor.prototype.init = function (params) {
    this.container = createElementFromHTML('<input typeaheadval="3" onfocus="fnborderRow(21);" onfocusout="fnborderRow(0);" type="text" id="drpClass21" vendorpaymentid="149962" vendorpaymentdetailid="167679" rowid="21" sortfieldcol="clsSortPayee" value="210 UT - Salt Lake City" selectedid="210" onchange="fnChangeObj(this);" style="border-width: 1px; border-style: solid; border-color: rgb(195, 195, 195); background-color: rgb(255, 255, 255);" class="form-control clsSearch clsClass ui-autocomplete-input clsGLClass149962" autocomplete="off">')

    $(document).mouseup(function (e) {
        var container = $(".clsSearch");

        // if the target of the click isn't the container nor a descendant of the container
        if (!container.is(e.target) && container.has(e.target).length === 0) {
            params.stopEditing();
        }
    });

    var that = this;

    this.container.addEventListener('keydown', function (event) {
        //that.onKeyDown(event)
        if (event.keyCode == 13) {
            //event.stopPropagation();
            params.stopEditing();
        }
    })
}; 

Полный рабочий пример можно найти здесь .