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.
|
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
|
This page will automatically be redirected to the sign-in page in 10 seconds.
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.
