We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to use Syncfusion EJ2 Controls in PHP

Platform: JavaScript - EJ 2 |
Control: General
Tags: php

Initializing EJ2 component

 

Step 1: By using CDN, refer to the required control’s script and style in the PHP file.

<!-- Essential JS 2 material theme -->
<link href="http://cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" type="text/css"/>
 
<!-- Essential JS 2 all script -->
<script src="http://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>

 

Step 2: Add the control to the application.

<div id="Grid"></div>

 

Step 3: Add the corresponding scripts to the script tag.

var grid = new ej.grids.Grid({
 allowSorting: false,
        columns: [
            { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },
            { field: 'Freight', width: 120, textAlign: 'Right' },
            { field: 'ShippedDate', headerText: 'Shipped Date', width: 140,  textAlign: 'Right' },
            { field: 'OrderDate', headerText: 'Shipped Date', width: 140,  textAlign: 'Right' },
            { field: 'ShipCountry', headerText: 'Ship Country', width: 150 }
        ]
    });
grid.appendTo('#Grid');

 

Refer to the following documentation link for getting started on EJ2 components.

https://ej2.syncfusion.com/javascript/documentation/grid/getting-started/

 

Data binding

Using the getData method, the JSON data will be fetched from the server. Find the following code snippet to bind the data source using the dataManager.

var grid = new ej.grids.Grid({
 allowSorting: false,
        columns: [
            { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },
            { field: 'Freight', width: 120, textAlign: 'Right' },
            { field: 'ShippedDate', headerText: 'Shipped Date', width: 140,  textAlign: 'Right' },
            { field: 'OrderDate', headerText: 'Shipped Date', width: 140,  textAlign: 'Right' },
            { field: 'ShipCountry', headerText: 'Ship Country', width: 150 }
        ]
    });
     var data = new ej.data.DataManager({
     url: 'http://localhost:80/grid/getData.php/?action=getData',    
     crossDomain: true 
}).executeQuery(new ej.data.Query()).then(function(e){
    grid.dataSource = e.result;
    grid.appendTo('#Grid');
})

 

Refer to the following documentation link to learn more about databinding.

https://ej2.syncfusion.com/documentation/data/data-binding/

In server-side, the data from database can be retrieved by using the getData()method.

function getData(){ 
//connection to the database
$dbhandle = mysql_connect("localhost", "root", "");  
$selected = mysql_select_db("grid", $dbhandle);   
//execute the SQL query and return records
$result = mysql_query("SELECT * FROM grid");
//fetch the data from the database 
$emparray=array();
while ($row = mysql_fetch_assoc($result)) {
   $emparray[]=$row;
}
echo json_encode($emparray);
}
if(function_exists($_GET['action'])) {    
   $_GET['action']();
   }

 

Sample link: A sample with EJ2 Grid in PHP can be downloaded from the following link.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Grid852314441.zip

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile