Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add Row Detail feature with new example #421

Merged
merged 5 commits into from
Oct 19, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
432 changes: 432 additions & 0 deletions docs/grid-functionalities/row-detail.md

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions docs/grid-functionalities/tree-data-grid.md
Original file line number Diff line number Diff line change
Expand Up @@ -305,17 +305,17 @@ There are a few methods available from the `TreeDataService` (only listing the i
- `applyToggledItemStateChanges(x)`: apply different tree toggle state changes (to ALL rows, the entire dataset) by providing an array of parentIds

For example
```ts
```tsx
export default class Example extends React.Component<Props, State> {
aureliaGrid?: AureliaGridInstance;
reactGrid?: SlickgridReactInstance;

reactGridReady(aureliaGrid: AureliaGridInstance) {
this.reactGrid = aureliaGrid;
reactGridReady(reactGrid: SlickgridReactInstance) {
this.reactGrid = reactGrid;
}

getTreeDataState() {
// for example get current Tree Data toggled state
console.log(this.aureliaGrid.getCurrentToggleState());
console.log(this.reactGrid.getCurrentToggleState());
}
}
```
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@
"@slickgrid-universal/empty-warning-component": "~5.9.0",
"@slickgrid-universal/event-pub-sub": "~5.9.0",
"@slickgrid-universal/pagination-component": "~5.9.0",
"@slickgrid-universal/row-detail-view-plugin": "~5.9.0",
"dequal": "^2.0.3",
"i18next": "^23.16.1",
"sortablejs": "^1.15.3"
Expand Down
2 changes: 2 additions & 0 deletions src/examples/slickgrid/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import Example15 from './Example15';
import Example16 from './Example16';
import Example17 from './Example17';
import Example18 from './Example18';
import Example19 from './Example19';
import Example20 from './Example20';
import Example21 from './Example21';
import Example22 from './Example22';
Expand Down Expand Up @@ -62,6 +63,7 @@ const routes: Array<{ path: string; route: string; component: any; title: string
{ path: 'example16', route: '/example16', component: <Example16 />, title: '16- Row Move Plugin' },
{ path: 'example17', route: '/example17', component: <Example17 />, title: '17- Remote Model' },
{ path: 'example18', route: '/example18', component: <Example18 />, title: '18- Draggable Grouping' },
{ path: 'example19', route: '/example19', component: <Example19 />, title: '19- Row Detail View' },
{ path: 'example20', route: '/example20', component: <Example20 />, title: '20- Pinned Columns/Rows' },
{ path: 'example21', route: '/example21', component: <Example21 />, title: '21- Grid AutoHeight (full height)' },
{ path: 'example22', route: '/example22', component: <Example22 />, title: '22- with Bootstrap Tabs' },
Expand Down
106 changes: 106 additions & 0 deletions src/examples/slickgrid/Example19-detail-view.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
import React from 'react';
import type { SlickDataView, SlickGrid, SlickRowDetailView } from 'slickgrid-react';

import './example19-detail-view.scss';

interface Props {
model: {
duration: Date;
percentComplete: number;
reporter: string;
start: Date;
finish: Date;
effortDriven: boolean;
assignee: string;
title: string;
};
addon: SlickRowDetailView;
grid: SlickGrid;
dataView: SlickDataView;
parent: any;
}
interface State {
assignee: string;
}

export class Example19DetailView extends React.Component<Props, State> {
constructor(public readonly props: Props) {
super(props);
this.state = {
assignee: props.model?.assignee || ''
}
}

assigneeChanged(newAssignee: string) {
this.setState((props: Props, state: State) => {
return { ...state, assignee: newAssignee }
});
}

alertAssignee(name: string) {
if (typeof name === 'string') {
alert(`Assignee on this task is: ${name.toUpperCase()}`);
} else {
alert('No one is assigned to this task.');
}
}

deleteRow(model: any) {
if (confirm(`Are you sure that you want to delete ${model.title}?`)) {
// you first need to collapse all rows (via the 3rd party addon instance)
this.props.addon.collapseAll();

// then you can delete the item from the dataView
this.props.dataView.deleteItem(model.rowId);

this.props.parent!.showFlashMessage(`Deleted row with ${model.title}`, 'danger');
}
}

callParentMethod(model: any) {
this.props.parent!.showFlashMessage(`We just called Parent Method from the Row Detail Child Component on ${model.title}`);
}

render() {
return (
<div className="container-fluid" style={{ marginTop: '10px' }}>
<h3>{this.props.model.title}</h3>
<div className="row">
<div className="col-3 detail-label"><label>Assignee:</label> <input className="form-control" value={this.state.assignee} onInput={($event) => this.assigneeChanged(($event.target as HTMLInputElement).value)} /></div>
<div className="col-3 detail-label"><label>Reporter:</label> <span>{this.props.model.reporter}</span></div>
<div className="col-3 detail-label"><label>Duration:</label> <span>{this.props.model.duration?.toISOString?.()}</span></div>
<div className="col-3 detail-label"><label>% Complete:</label> <span>{this.props.model.percentComplete}</span></div>
</div>

<div className="row">
<div className="col-3 detail-label"><label>Start:</label> <span>{this.props.model.start?.toISOString()}</span></div>
<div className="col-3 detail-label"><label>Finish:</label> <span>{this.props.model.finish?.toISOString()}</span></div>
<div className="col-3 detail-label"><label>Effort Driven:</label> <i className={this.props.model.effortDriven ? 'mdi mdi-check' : ''}></i>
</div>
</div>

<hr />

<div className="col-sm-8">
<h4>
Find out who is the Assignee
<small>
<button className="btn btn-primary btn-sm" onClick={() => this.alertAssignee(this.props.model.assignee)} data-test="assignee-btn">
Click Me
</button>
</small>
</h4>
</div>

<div className="col-sm-4">
<button className="btn btn-primary btn-danger btn-sm" onClick={() => this.deleteRow(this.props.model)} data-test="delete-btn">
Delete Row
</button>
<button className="btn btn-outline-secondary btn-sm" onClick={() => this.callParentMethod(this.props.model)} data-test="parent-btn">
Call Parent Method
</button>
</div>
</div>
);
}
}
12 changes: 12 additions & 0 deletions src/examples/slickgrid/Example19-preload.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { forwardRef } from 'react';

export const Example19Preload = forwardRef((props: any, ref: any) => {
return (
<div ref={ref} className="container-fluid" style={{ marginTop: '10px' }}>
<h4>
<i className="mdi mdi-sync mdi-spin mdi-50px"></i>
Loading...
</h4>
</div>
);
});
Loading