Grid Pager not showing when using syncfusion grid

[Chethan BV]

Hi I am using syncfusion grid component in which I am using allowPaging='true' but still paging is not visible in Grid.

 <ejs-grid #grid  height='100%' [dataSource]="reportData" [toolbar]="toolbar"

                                [allowPaging]="true" [pageSettings]="pageSettings"

                                 rowHeight='38' [allowPdfExport]="true" [allowExcelExport]="true">

                                <e-columns>

                                    <e-column field='guid' headerText='Order Id'></e-column>

                                    <e-column field='name' headerText='Order Name'></e-column>

                                    <e-column field='isActive' headerText='Order Status'></e-column>

                                    <e-column field='company' headerText='Order Name'></e-column>

                                    <e-column field='address'></e-column>

                                    <e-column field='email' ></e-column>

                                    <e-column field='phone'></e-column>

                                </e-columns>

  </ejs-grid>

[Joseph Christ Nithin Issack]

Hi Chethan,

 Greetings from Syncfusion support.

  Based on the provided information we suspect that you may not injected the page service using the providers. To use Grid features like Paging, Sorting, Filtering, PdfExport, ExcelExport, Grouping, etc., then the required service modules should be injected into the providers section of root NgModule or component class.

Please refer the below code example.

 

import { Component, OnInit } from '@angular/core';

import { L10n, setCulture } from '@syncfusion/ej2-base';

import { data } from './data';

import { PageService } from '@syncfusion/ej2-angular-grids';

 

setCulture('en-US');

 

L10n.load({

  'en-US': {

    pager: {

      currentPageInfo: '',

      totalItemsInfo: '{1} to {2} of {0}',

    },

  },

});

 

@Component({

  selector: 'app-root',

  templateUrl: 'app.component.html',

  providers: [PageService],

})

 

Sample: https://stackblitz.com/edit/angular-ctjwa2?file=app.component.ts

Please get back to us for further details.

Regards,

Joseph I.

[Chethan BV]

Thanks its working I have submitted another Thread please look into that https://www.syncfusion.com/forums/174862/bootstrap-type-tab-using-tailwing-css

[Joseph Christ Nithin Issack]

Hi Chethan,

  Thanks for your update.

  We are glad that the provided solution helped you solve your problem.

  You can refer to the forum for followups and more detail on the query mentioned in that forum.

  Please get back to us for further details.

Regards,

Joseph I.