CODEWITHSUNDEEP
javascriptag-grid
vamsi chand
vamsi chand

Reputation: 11

When user is typing in AG-GRID column cell ,how to get count of remaining characters

In below AG-GRID column "Comments" ,cellEditor is agLargeTextCellEditor and maximun characters use can tyoi is 2000, i want to show how many characters are remaining when user is typing in this cell.I am getting the characters remaining count when i leave the Comments cell, but how to get the count of remaining characters count when user is typing. onCellClicked , onCellValueChanged events are firing when i click on comments cell. But these events are not capturing the value when user is typing in cell.

{ headerName: 'Comments', field: 'Comments', width: 500, sortable: true, filter: true, resizable: true, editable: function (params) { return IsCellEditable(params); } , cellClass: 'cell-wrap-text' , autoHeight: true , cellEditor: 'agLargeTextCellEditor' , cellEditorParams: { maxLength: '2000' }

    , valueSetter: function (params) {
       
    }
}

var columnDefs_updateddocumentation = [
    {
        headerName: 'ID', field: 'ID', width: 0, hide: true
    },
    {
        headerName: 'Name', field: 'Name', width: 400, sortable: true, filter: true, resizable: true,
        editable: function (params) {
            return IsCellEditable(params); 

        }
        , cellClass: 'cell-wrap-text'
        , autoHeight: true
        , valueSetter: function (params) {           
        }
    },
    {
        headerName: 'Comments', field: 'Comments', width: 500, sortable: true, filter: true, resizable: true,
        editable: function (params) {
            return IsCellEditable(params);
        }
        , cellClass: 'cell-wrap-text'
        , autoHeight: true
        , cellEditor: 'agLargeTextCellEditor'
        , cellEditorParams: {
            maxLength: '2000'
        }
        , valueSetter: function (params) {
        }
    }
];

var gridOptions_updateddocumentation = {
    defaultColDef: {
        width: 100,
        sortable: true,
        resizable: true,
        cellClass: 'cell-wrap-text',
        autoHeight: true

    },
    columnDefs: columnDefs_updateddocumentation,
    getRowStyle: function (params) {
        if (params.selected && params.data.CauseID === 0) {

        }
       
    },
    singleClickEdit: true,
    animateRows: true,
    components: {
        datePicker: getDatePicker()
    },
    onGridSizeChanged: function (params) {
    },
    onFirstDataRendered: function (params) {

    },
    onGridReady: function (params) {
        
    },
    onCellValueChanged: function (event) {

    },
    stopEditingWhenGridLosesFocus: isStopEditingWhenGridLosesFocus,
    enableCellChangeFlash: true,
    suppressPropertyNamesCheck: true,
    suppressColumnVirtualisation: true,
    onCellClicked: function (event) {
        Selectedcolumn = event.column.colId;
        if (event.column.colId == 'Comments') {
            $("#myPopupUD").html((2000 - getdata(event.value).length) + " characters remaining of 2000 characters");
            var popup = document.getElementById("myPopupUD");
            popup.classList.toggle("show");
            Selectedcolumn = event.column.colId;
        }
    }

};

Upvotes: 0

Views: 395

Answers (1)

GreyBeardedGeek
GreyBeardedGeek

Reputation: 30088

As the documentation states, agLargeTextCellEditor is a "simple" cell editor.

If you want the character count while editing, you are going to have to write your own cell editor to use instead of agLargeTextCellEditor.

If you can find the source code for agLargeTextCellEditor, you may be able to subclass it, or just use it as a guide.

Upvotes: 0

Related Questions