CODEWITHSUNDEEP
ag-gridag-grid-react
michoprogrammer
michoprogrammer

Reputation: 1199

DatePicker doesn't work when stopEditingWhenGridLosesFocus option is true

In this example clicking on a date it is possible to edit it, but if you use the option "stopEditingWhenGridLosesFocus", the date picker doesn't work anymore. Is it possible to fix this? 

<AgGridReact
   stopEditingWhenGridLosesFocus // without this line works fine
   columnDefs={this.state.columnDefs}
   components={this.state.components}
   onGridReady={this.onGridReady.bind(this)}
   rowData={this.state.rowData}
 />

Upvotes: 5

Views: 3252

Answers (2)

user19866754
user19866754

Reputation: 1

stopEditingWhenCellsLoseFocus = true

Upvotes: -2

I. Orozco
I. Orozco

Reputation: 56

Having "stopEditingWhenGridLosesFocus" set to true, when you click on a date, the input tag is gone, so the reference for your datepicker gets lost.

I had the same issue and I solved it doing this:

  • Change your custom component settings to work in a popup:

    Datepicker.prototype.isPopup = function() {
    return true;
};

  • Then, call to stopEditing() method on select event in your datepicker:

    $(this.eInput).datepicker({
    dateFormat: 'dd/mm/yy',
    onSelect: function(dateText, inst) {
        params.stopEditing();
    }
});

I have created a new working fork from your example here

Upvotes: 4

Related Questions