kifni41
Newbie
Posts: 23
|
|
« on: July 17, 2020, 12:44:12 AM » |
|
hi,
i try make datagrid with pagination with pagination, when i show limit 4 row per page, it show 4 row (include the groupfield). any config or some tips to show data correctly?
Here the attachment, using grouping vs no grouping.
|
|
|
Logged
|
|
|
|
jarry
|
|
« Reply #1 on: July 17, 2020, 08:31:27 PM » |
|
Please try to custom the 'pageFilter' function. Make sure to update to the newest version. pageFilter(data, pageNumber, pageSize) { const pageData = data.filter(r => !r._groupRow); const total = pageData.length; const start = (pageNumber - 1) * pageSize; const rows = pageData.slice(start, start + pageSize); const row1 = rows[0]; const row2 = rows[rows.length - 1]; let index1 = data.indexOf(row1); let index2 = data.indexOf(row2); if (index1 > 0 && data[index1-1]._groupRow){ index1 --; } return({ total: total, rows: data.slice(index1, index2 + 1) }) }
<DataGrid data={this.state.data} pagination={true} pageSize={4} pageFilter={this.pageFilter} groupField="code" renderGroup={this.renderGroup} style={{ height: 250 }} > ...
|
|
|
Logged
|
|
|
|
kifni41
Newbie
Posts: 23
|
|
« Reply #2 on: July 19, 2020, 10:20:35 PM » |
|
thanks i tried add pageFilter={this.pageFilter} its worked for normal pagination,
but when i try datagrid lazy pagination, pageFilter is not detected or not called at all
when i put console.log() not show any log, and not error when i delete pageFilter(data, pageNumber, pageSize)
|
|
« Last Edit: July 21, 2020, 04:11:57 AM by kifni41 »
|
Logged
|
|
|
|
jarry
|
|
« Reply #3 on: July 30, 2020, 11:53:16 PM » |
|
In lazy mode, the pagination and group data must be prepared in server side and returned to the browser. The 'pageFilter' function doesn't fire in lazy mode.
|
|
|
Logged
|
|
|
|
kifni41
Newbie
Posts: 23
|
|
« Reply #4 on: August 01, 2020, 11:38:57 PM » |
|
so how the answer to this case? hehe need help please, can you give me example
the datagrid can't show correct data, i can't figured it, Group Name always count as row data
|
|
« Last Edit: August 01, 2020, 11:43:18 PM by kifni41 »
|
Logged
|
|
|
|
jarry
|
|
« Reply #5 on: August 02, 2020, 08:37:26 AM » |
|
This is the example that shows how to group data in remote mode. Make sure to update to the newest version. import React from 'react'; import { DataGrid, GridColumn } from 'rc-easyui';
class App extends React.Component { constructor(props) { super(props); this.state = { sourceData: [], total: 0, pageNumber: 1, pageSize: 20, data: [], loading: false, } } componentDidMount() { this.loadData(); this.loadPage(this.state.pageNumber, this.state.pageSize) } loadPage(pageNumber, pageSize) { this.setState({ loading: true }) setTimeout(() => { let result = this.getData(pageNumber, pageSize); this.setState(Object.assign({}, result, { data: result.rows, loading: false })) }, 400); } loadData() { const isGroupRow = (row) => { return row._groupRow ? true : false; } const getGroup = (value, groups) => { if (!groups) { groups = this.groupData; } for (let group of groups) { if (group.value === value) { return group; } } return null; } const makeGroup = (data, groupField) => { const groups = []; for (let row of data) { if (!isGroupRow(row)) { let group = getGroup(row[groupField], groups); if (group) { group.rows.push(row); } else { group = { value: row[groupField], collapsed: false, rows: [row] }; groups.push(group); } } } groups.sort((a, b) => { return a.value < b.value ? -1 : 1; }) return groups; }
const data = []; for (let i = 1; i <= 100; i++) { let amount = Math.floor(Math.random() * 1000); let price = Math.floor(Math.random() * 1000); data.push({ inv: "Inv No " + i, name: "Name " + i, amount: amount, price: price, cost: amount * price, note: "Note " + i, code: 'code' + (Math.floor(Math.random() * 10) + 1) }); } this.groupData = makeGroup(data, 'code'); const rows = this.makeGroupedRows(this.groupData); this.setState({ sourceData: rows }) } makeGroupedRows(groupData) { let rows = []; for (let group of groupData) { rows.push({ _groupRow: true, value: group.value, rows: group.rows, collapsed: group.collapsed }); if (!group.collapsed) { rows = rows.concat(group.rows); } } return rows; } getData(pageNumber, pageSize) { const data = this.state.sourceData; const pageData = data.filter(r => !r._groupRow); const total = pageData.length; const start = (pageNumber - 1) * pageSize; const rows = pageData.slice(start, start + pageSize); const row1 = rows[0]; const row2 = rows[rows.length - 1]; let index1 = data.indexOf(row1); let index2 = data.indexOf(row2); while (index1 > 0 && data[index1 - 1]._groupRow) { index1--; } return { total: total, pageNumber: pageNumber, pageSize: pageSize, rows: this.state.sourceData.slice(index1, index2 + 1) }; } handlePageChange(event) { if (event.toggleGroup) { const data = this.groupData.filter(g => g.value === event.toggleGroup); if (data.length) { data[0].collapsed = !data[0].collapsed; } const rows = this.makeGroupedRows(this.groupData); this.setState({ sourceData: rows }, () => { this.loadPage(event.pageNumber, event.pageSize) }) } else { this.loadPage(event.pageNumber, event.pageSize) } } renderGroup({ value, rows }) { return ( <span style={{ fontWeight: 'bold' }}> {value} - <span style={{ color: 'red' }}>{rows.length}</span> Item(s) </span> ) } render() { return ( <div> <h2>Row Group</h2> <DataGrid style={{ height: 250 }} groupField="code" renderGroup={this.renderGroup} pagination lazy {...this.state} onPageChange={this.handlePageChange.bind(this)} > <GridColumn field="inv" title="Inv No"></GridColumn> <GridColumn field="name" title="Name"></GridColumn> <GridColumn field="amount" title="Amount" align="right"></GridColumn> <GridColumn field="price" title="Price" align="right"></GridColumn> <GridColumn field="cost" title="Cost" align="right"></GridColumn> <GridColumn field="note" title="Note"></GridColumn> </DataGrid> </div> ); } }
export default App;
|
|
|
Logged
|
|
|
|
kifni41
Newbie
Posts: 23
|
|
« Reply #6 on: August 03, 2020, 12:43:25 AM » |
|
Thanks, this help a lot. you're so genius Jarry
|
|
« Last Edit: August 03, 2020, 08:00:12 AM by kifni41 »
|
Logged
|
|
|
|
kifni41
Newbie
Posts: 23
|
|
« Reply #7 on: August 04, 2020, 11:56:17 PM » |
|
But i found another problem minor,
by doing this thing i can't collapse the grouping when click the icon in grouping row
|
|
|
Logged
|
|
|
|
jarry
|
|
« Reply #8 on: August 05, 2020, 02:02:07 AM » |
|
In 'lazy' mode, collapsing or expanding a group will trigger the 'onPageChange' event. You should re-generate data in server side and return to the browser.
|
|
|
Logged
|
|
|
|
kifni41
Newbie
Posts: 23
|
|
« Reply #9 on: August 06, 2020, 08:06:42 PM » |
|
i try put console inside onPageChange function,
when i click colapse icon in grouping name nothing happend, not triggered
|
|
« Last Edit: August 06, 2020, 09:03:00 PM by kifni41 »
|
Logged
|
|
|
|
jarry
|
|
« Reply #10 on: August 08, 2020, 12:12:38 AM » |
|
Make sure to update to the newest version. The 'onPageChange' event will take the 'toggleGroup' parameter value. handlePageChange(event) { if (event.toggleGroup) { //... } }
|
|
|
Logged
|
|
|
|
kifni41
Newbie
Posts: 23
|
|
« Reply #11 on: August 12, 2020, 09:08:07 PM » |
|
Nice, work now. And i found another problem btw, group name related. When i add numbering like <GridColumn field="rn" align="center" width="30px" filterable={false} cellCss="datagrid-td-rownumber" render={({rowIndex}) => ( <span>{rowIndex+1}</span> )} /> group name counted as row, so number start at 2. I there more than 1 group name there, numbering become more invalid.
|
|
« Last Edit: August 12, 2020, 09:09:48 PM by kifni41 »
|
Logged
|
|
|
|
|