This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
ra:oldfrontend [2018/11/15 12:44] koubel |
ra:oldfrontend [2018/12/04 15:03] (current) koubel [React components] |
||
|---|---|---|---|
| Line 83: | Line 83: | ||
| See some react related tasks for more information and examples. | See some react related tasks for more information and examples. | ||
| + | ====== React components ====== | ||
| + | Grid | ||
| + | |||
| + | important props | ||
| + | * rows - list of objects - rows. For columns, see later | ||
| + | * updateHeightInModal - necessary for showing grid in modal | ||
| + | * customRowSettings.customButtons - array for the settings for special row properties, mostly for popup menu | ||
| + | |||
| + | <code> | ||
| + | <DataGrid.Grid | ||
| + | key={"id"} | ||
| + | rows={this.workPlanStore.sewerCollections} | ||
| + | showRowSelectionCheckbox={true} | ||
| + | selectedRowKey={"id"} | ||
| + | isLoading={false} | ||
| + | showFilterRow={true} | ||
| + | // list of rows necessary, without this, grid doesn't work either | ||
| + | selectedRowValues={this.workPlanStore.selectedRowsIds.slice()} | ||
| + | // necessary for show grid in modal | ||
| + | updateHeightInModal={true} | ||
| + | onRowsSelected={(x) => this.workPlanStore.setSelectedRows(x)} | ||
| + | // settings for row popup menu which is available at the end of row on ... | ||
| + | customRowSettings={{ | ||
| + | visible: true, | ||
| + | displayEdit: false, | ||
| + | displayDelete: false, | ||
| + | customButtons: [ | ||
| + | { name: "planning", title: localize("sewerDrainGrid.planning"), icon: "" }, | ||
| + | { name: "detail", title: localize("sewerDrainGrid.workPlanDetail"), icon: "" }, | ||
| + | ], | ||
| + | handleButtonClick: this.handleRowButtonClick | ||
| + | }} | ||
| + | onRowsDeselected={(x) => this.workPlanStore.setDeselectedRows(x)} | ||
| + | > | ||
| + | |||
| + | </DataGrid.Grid> | ||
| + | </code> | ||
| + | |||
| + | Stores and observables | ||
| ====== Internet Explorer Support ====== | ====== Internet Explorer Support ====== | ||