EasyUI Forum
March 28, 2024, 01:42:51 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: DATAGRID pagination + groupField show inconsistency data  (Read 9955 times)
kifni41
Newbie
*
Posts: 23


View Profile
« 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
Administrator
Hero Member
*****
Posts: 2260


View Profile Email
« 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.

Code:
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)
    })
}
Code:
<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


View Profile
« 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
Administrator
Hero Member
*****
Posts: 2260


View Profile Email
« 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


View Profile
« 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
Administrator
Hero Member
*****
Posts: 2260


View Profile Email
« 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.
Code:
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


View Profile
« Reply #6 on: August 03, 2020, 12:43:25 AM »

Thanks, this help a lot.
you're so genius Jarry  Cool
« Last Edit: August 03, 2020, 08:00:12 AM by kifni41 » Logged
kifni41
Newbie
*
Posts: 23


View Profile
« 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
Administrator
Hero Member
*****
Posts: 2260


View Profile Email
« 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


View Profile
« 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
Administrator
Hero Member
*****
Posts: 2260


View Profile Email
« 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.
Code:
    handlePageChange(event) {
        if (event.toggleGroup) {
        //...
        }
    }
Logged
kifni41
Newbie
*
Posts: 23


View Profile
« 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
Code:
<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
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!