1. Home
  2. Forum
  3. React - EJ 2
  4. Grid Hierarchy - Server Side Pagination on Children

Grid Hierarchy - Server Side Pagination on Children

Hi

Is it possible to use server side pagination on the child grids.  My requirement is for a 3 level hierarchy and the amount of data would be too much to just grab it all.  So each leve requires server side pagination.


8 Replies
BS Balaji Sekar Syncfusion Team February 24, 2020 12:50 PM UTC

Hi Richard, 
 
Greetings from Syncfusion support. 
Query : Is it possible to use server side pagination on the child grids.  My requirement is for a 3 level hierarchy and the amount of data would be too much to just grab it all.  So each leve requires server side pagination. 
Yes, it is possible to handle pagination for all the childGrids in the server side. We have created grid with 2 level childGrid and bounded the remote data for that. Please refer the below code example and sample for more information.  
 
export class FetchEmployee extends React.Component<RouteComponentProps<{}>, FetchEmployeeDataState> { 
    public toolbarOptions: any = ['Add', 'Delete', 'Update', 'Cancel']; 
    public editSettings: any = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' }; 
    constructor(props) { 
        super(props);        
    } 
    public onload(args: any) {         
        let dm: any = new DataManager({ 
            url: "/Home/UrlDatasource", 
            adaptor: new UrlAdaptor(), 
            insertUrl: "/Home/Insert", 
            updateUrl: "/Home/Update", 
            removeUrl:"/Home/Remove" 
        }); 
        (this as any).grid.dataSource = dm; 
    } 
    public dataManger: Object = new DataManager({ 
            url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders', 
            adaptor: new ODataAdaptor, 
            crossDomain: true 
        }); 
    public dataManger2: Object = new DataManager({ 
    url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Customers', 
    adaptor: new ODataAdaptor, 
    crossDomain: true 
}); 
    public secondChildGrid: any = { 
// binding remote data 
        dataSource: this.dataManger2, 
        queryString: 'CustomerID', 
        allowPaging: true, 
        pageSettings: { pageSize: 6, pageCount: 5 }, 
        columns: [ 
            { field: 'CustomerID', headerText: 'Customer ID', textAlign: 'Right', width: 75 }, 
            { field: 'ContactName', headerText: 'Contact Name', width: 100 }, 
            { field: 'Address', headerText: 'Address', width: 120 }, 
            { field: 'Country', headerText: 'Country', width: 100 } 
        ] 
    }; 
    public childGrid: any = { 
//binding remote data 
        dataSource: this.dataManger, 
        queryString: 'EmployeeID', 
        allowPaging: true, 
        pageSettings: { pageSize: 6, pageCount: 5 }, 
        columns: [ 
            { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 }, 
            { field: 'ShipCity', headerText: 'Ship City', width: 120 }, 
            { field: 'Freight', headerText: 'Freight', width: 120 }, 
            { field: 'ShipName', headerText: 'Ship Name', width: 150 } 
        ], 
        childGrid: this.secondChildGrid 
    }; 
 
    public render() { 
        return (<div className='control-section'> 
            <GridComponent ref={g => (this as any).grid = g} load={this.onload.bind(this)} editSettings={this.editSettings} toolbar={this.toolbarOptions} childGrid={this.childGrid} allowSorting={true} > 
                <ColumnsDirective> 
                    <ColumnDirective field='EmployeeID' headerText='Employee ID' width='125' textAlign='Right' /> 
                    <ColumnDirective field='ShipCity' headerText='ShipCity' width='125' /> 
                </ColumnsDirective> 
                <Inject services={[DetailRow, Page, Sort, Edit, Toolbar]} /> 
            </GridComponent> 
        </div>) 
    }        
} 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Balaji Sekar. 


DJ David Jones February 26, 2020 08:18 AM UTC

Hi Thanks for the response, unfortunatly oData isnt an option with our API.  

DJ David Jones February 26, 2020 01:50 PM UTC

Hi 

Is there an event a can use when the child grid opens?

PK Prasanna Kumar Viswanathan Syncfusion Team February 27, 2020 09:13 AM UTC

Hi David, 
 
Thanks for your update. 
 
Query: unfortunately OData isn’t an option with our API. 
 
We would like to inform you that child Grid paging will work with local data and also with remote Data (All adaptors). So you can use your API with any adaptor as per your configurations. 
 
Query: Is there an event a can use when the child grid opens? 
 
Yes, you can use detailDataBound event which event triggers at initial expand. 
 
 
Please get back to us, if you need further assistance. 
 
Regards, 
Prasanna Kumar N.S.V 
 


DJ David Jones February 27, 2020 01:24 PM UTC

thats great thanks,

I now have an issue where i am trying to get a context menu in the gridModel with a button click.  When using the GridComponent ColumnDirective I would use a template to return the context menu.  I am lost how this would be done in the Grid Model.

MS Manivel Sellamuthu Syncfusion Team February 28, 2020 01:54 PM UTC

Hi David, 

Thanks for your update. 

You can achieve your requirement by adding custom context menu for the button click. Please find the below code example and sample and documentation link for more information. 

 [index.js] 
export class Hierarchy extends SampleBase { 
    constructor() { 
        super(...arguments); 
         this.menuItems = [ 
        { 
            text: 'Cut', 
            iconCss: 'e-cm-icons e-cut' 
        }, 
        { 
            text: 'Copy', 
            iconCss: 'e-cm-icons e-cm-copy' 
        }]; 
        this.childGrid = { 
            dataSource: orderDatas, 
            queryString: 'EmployeeID', 
            allowPaging: true, 
            pageSettings: { pageSize: 6, pageCount: 5 }, 
            columns: [ 
 . . . 
                { 
                  headerText: 'Context Menu', template:this.gridTemplate, width: 150 
                } 
            ], 
        }; 
    } 
     gridTemplate(props) { 
  function btnClick (e) { 
    var contextMenu = document.getElementById('contextMenu').ej2_instances[0]; 
    var x = e.currentTarget.getBoundingClientRect().top; 
    var y = e.currentTarget.getBoundingClientRect().left; 
    contextMenu.close(); 
// open the context menu with the given coordinates. 
    contextMenu.open(x,y+60); 
} 
        return (<div> 
                   // render the button 
                    <ButtonComponent onClick={btnClick.bind(this) }>Context Menu</ButtonComponent> 
        </div>); 
    } 
     
    render() { 
        return (<div className='control-pane'> 
                <div className='control-section'> 
              // render the context menu 
                 <ContextMenuComponent id="contextMenu" items={this.menuItems} /> 
                    <GridComponent dataSource={employeeData} childGrid={this.childGrid} allowSorting={true}> 
                        <ColumnsDirective> 
 . . . 
                        <Inject services={[DetailRow, Page,ContextMenu, Sort]}/> 
                    </GridComponent> 
                </div> 
            </div>); 
    } 
} 
 
render(<Hierarchy />, document.getElementById('sample')); 




Please get back to us, if you need further assistance. 

Regards, 
Manivel 


DJ David Jones March 5, 2020 12:07 PM UTC

How can i pass in parameters into the GridModel to search?

MS Manivel Sellamuthu Syncfusion Team March 6, 2020 11:32 AM UTC

Hi David, 

Thanks for your update. 
 
Query: How can i pass in parameters into the GridModel to search? 
 
We are not clear in above requirement, so we suspect that you want to search the child grid at initial rendering or if you have any other requirements please explain more about that. 

Regards, 
Manivel 


Loader.
Up arrow icon