Scribd
Upload
11 views

Ej2 Grid-bootstrap

Uploaded by

Maddula Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views

Ej2 Grid-bootstrap

Uploaded by

Maddula Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

Powered by AI

Copilot

Sure, I can help with that. Here’s an example of how you can implement server-side pagination with
Syncfusion EJ2 Grid and Bootstrap:

First, make sure you have Bootstrap installed in your project. If not, you can add it via npm:
npm install bootstrap

Then, import Bootstrap in your JavaScript file:


import 'bootstrap/dist/css/bootstrap.min.css';

Here’s the revised code:


import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
import { Grid, Page } from '@syncfusion/ej2-grids';
import '@syncfusion/ej2-base/styles/bootstrap4.css';
import '@syncfusion/ej2-buttons/styles/bootstrap4.css';
import '@syncfusion/ej2-inputs/styles/bootstrap4.css';
import '@syncfusion/ej2-navigations/styles/bootstrap4.css';
import '@syncfusion/ej2-popups/styles/bootstrap4.css';
import '@syncfusion/ej2-splitbuttons/styles/bootstrap4.css';
import '@syncfusion/ej2-grids/styles/bootstrap4.css';

// Initialize DataManager
let dataManager = new DataManager({
url: 'https://api.example.com/data',
adaptor: new WebApiAdaptor,
crossDomain: true
});

// Initialize Grid
let grid = new Grid({
dataSource: dataManager,
allowPaging: true,
pageSettings: { pageSize: 10 },
columns: [
{ field: 'Id', headerText: 'ID', textAlign: 'Right', width: 120 },
{ field: 'Name', headerText: 'Name', width: 150 },
// add other columns as needed
],
height: 315
});

grid.appendTo('#Grid');

In this example, DataManager is used to manage the data flow in the grid and it will interact with the server for
all CRUD operations. WebApiAdaptor is used as the adaptor for the data manager. When you enable paging, the
grid will fetch only the data for the current page from the server.

Please replace 'https://api.example.com/data' with your actual server API endpoint. Also, make sure your
server is set up to handle pagination and return the appropriate data.

This is a basic example. Depending on your needs, you might need to customize it further. For instance, you
might want to handle errors, add more options to the grid, etc. You can refer to the official Syncfusion EJ2 Grid
documentation for more details.

Please let me know if you need further assistance! 😊

You might also like