How to make the cell clickable?
I am using reactJS and want to make the special cell of the grid clickable and change the component when the cell clicked.
origin grid:
when the user clicks the customer name e.g. (Maria), the page will change to
SIGN IN To post a reply.
17 Replies
Thank you for providing a good answer to me, but I still have two question.
1: Because my grid includes a checkbox for the user to select the row. When I change the selectionSetting to "Single" and mode to "Cell", how to make the checkbox still can select the row?
const selectionSettings = { type: "Single", mode: "Cell" };
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
2:
Can I change the Grid using "useState"? Because when I use the "useState" to change the Grid, the console shows the error message
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
My Code Example:
The Grid2 is another JSX file for import
Grid2:
import * as React from "react";
import { ButtonComponent } from "@syncfusion/ej2-react-buttons";
import { TextBoxComponent } from "@syncfusion/ej2-react-inputs";
import * as moment from "moment";
import {
GridComponent,
ColumnsDirective,
ColumnDirective,
Inject,
Page,
Edit,
Toolbar,
CommandColumn,
} from "@syncfusion/ej2-react-grids";
import { dataSource } from "./dataSource";
const Grid2 = () => {
const gridRef = React.createRef();
const toolbarOptions = ["Add", "Delete", "Update", "Cancel"];
const editSettings = {
allowEditing: true,
allowAdding: true,
allowDeleting: true,
newRowPosition: "Top",
};
const commands = [
{ type: "Edit", buttonOption: { iconCss: " e-icons e-edit", cssClass: "e-flat" } }
];
const actionBegin = args => {
};
return (
<div className="grid2-class">
<GridComponent
id="grid2"
dataSource={dataSource}
toolbar={toolbarOptions}
editSettings={editSettings}
actionBegin={actionBegin.bind(this)}
ref={gridRef}
>
<ColumnsDirective>
<ColumnDirective
type="checkbox"
allowSorting={false}
allowFiltering={false}
width="60"
/>
<ColumnDirective field="field1" HeaderText="headerText1" />
<ColumnDirective field="field2" HeaderText="headerText2" />
<ColumnDirective field="field3" HeaderText="headerText3" />
ColumnsDirective>
<Inject services={[Page, CommandColumn, Toolbar, Edit]} />
GridComponent>
div>
);
};
export default Grid2;
Main JSX:
import Grid2 from "./Grid2"; // To import the Grid 2 component
const gridRef = React.createRef();
const [gridDetail, setGridDetail] = useState({
showGrid2: false,
data: {},
});
const cellSelecting = args => {
const column = gridRef.current.getColumnByIndex(args.cellIndex.cellIndex).field;
if (column === "CustomerName") {
setGridDetail({
showGrid2: true, // change the state to show the grid 2
});
}
};
return (
<div>
{gridDetail.showGrid2? ( // for useState to change the Grid2 Component
<div>
<Grid2 />
div>
) : (
<div>
<GridComponent
// .... another grid component setting
ref={gridRef}
cellSelecting={cellSelecting.bind(this)}
>
// Grid 1 info, I am not typing too much
GridComponent>
div>
)}
div>
);
SIGN IN To post a reply.
