How to make a data grid edit cell editable and centered on a button click without performing a double click action
I am using a react data grid to list my data.
I want to add a new row on a button click and so the first column (not necessarily the first one can be anything) should be editable and focused on creation.
I know the response data grid has an editable cell function on double click. But I want this to be created without any clicks. And it would be great if there is any way to disable editing after the user is logged in.
Code for generating the list:
import React, { Component } from 'react';
import FileMenuFormatter from './filemenuformatter';
import NameFormatter from './nameformatter';
import ListView from '../../components/listview/listview';
import { getRow } from '../../helpers/fileviewer/fileutils';
const columns = [
{
key: 'name',
name: 'Name',
formatter: NameFormatter,
resizable: true,
sortable: true
}, {
key: 'created',
name: 'Created On',
resizable: true,
sortable: true
}, {
key: 'lastmodified',
name: 'Last Modified',
resizable: true,
sortable: true
}, {
key: 'filesize',
name: 'File Size',
resizable: true,
sortable: true
},
{
key: 'menu',
name: '',
width: 35,
formatter: FileMenuFormatter,
draggable: false
}
];
/**
*
*
* @class myComp
* @extends {Component}
*/
class myComp extends Component {
getList() {
let rows = [];
for (let index in this.props.dList) {
if (typeof index !== 'undefined') {
let dir = this.props.dList[index];
rows.push(getRow("dir", dir))
}
}
for (let index in this.props.fList) {
if (typeof index !== 'undefined') {
let file = this.props.fList[index];
rows.push(getRow("file", file))
}
}
var newRow = this.props.newRow;
if(Object.keys(newRow).length !== 0) {
rows.push(getRow("dir", newRow[0]));
}
return rows
}
getRow(rowId) {
return this.getList()[rowId];
}
render() {
let rowListData = this.getRowList();
return (
<div>
<ListView
columns={columns}
rows={rowListData}
minHeight={this.props.minHeight} />
</div>
);
}
}
export default myComp;
Does anyone know how to achieve this?
source to share
I have solved this problem. Workaround here.
so the onClick of the button I called my showActive () function, which is responsible for making the column (1st in my case) editable just like the data responsive grid.
1 make an editable column, ReactDataGrid accepts "editable" as an input function. allowEdit - check if this column is available. For me, I wanted to make the cell editable only when creating a new row.
Create a new object to insert as a new row in the table. Like this -
let newRow = [
{
created: milliseconds,
absPath: this.props.dirSelectedPath,
modified: milliseconds,
size: 0,
filename: folderName,
type: "FILE_DIR",
allowEdit: true
}
];
Then below is the column configuration of the cell being edited.
const columns = [
{
key: 'name',
name: 'Name',
resizable: true,
sortable: true,
filterable: true,
editable: function (rowData) {
return rowData.allowEdit ? true : false;
}
}
];
Now you need to write a function to show the selected and active cell. To do this, I called the same function as the calls to the react grid.
get a handle to the grid.
<ReactDataGrid showActive={this.showActive.bind(this)} rowsCount={this.getSize()} ref={node => this.grid = node} {...this.props } />
showActive() {
let length = this.getSize(); // get the length of the grid i.e number of rows
let obj = { idx: 0, rowIdx: length };
let promise = new Promise(function (resolve, reject) {
if (this.grid) {
resolve("this worked!");
}
}.bind(this));
promise.then(function () {
this.grid.onSelect(obj);
this.grid.setActive('Enter');
}.bind(this), function () {
});
}
hope this helps.
source to share