### Start GraphQL Server
Source: https://ej2.syncfusion.com/javascript/documentation/data/adaptors.html
Commands to install dependencies and start the development server.
```bash
npm install
npm run dev
```
--------------------------------
### Project Installation Commands
Source: https://ej2.syncfusion.com/javascript/documentation/accumulation-chart/getting-started
Commands to clone the quickstart repository and install necessary dependencies.
```bash
git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
cd quickstart
npm install
```
--------------------------------
### Full ODataAdaptor Implementation Example
Source: https://ej2.syncfusion.com/javascript/documentation/data/adaptors?no-cache=1
Complete setup including template compilation, DataManager initialization, and query execution.
```javascript
let template = '
${OrderID}
${CustomerID}
${EmployeeID}
${ShipCity}
${ShipCountry}
';
let compiledFunction = ej.base.compile(template);
let table = document.getElementById('datatable');
const datamanger = new ej.data.DataManager({
// Use remote server host and port instead of 'xxxx'.
url: "https://localhost:xxxx/api/Orders",
adaptor: new ej.data.ODataAdaptor()
});
datamanger.executeQuery(new ej.data.Query().take(8)).then((e) => {
```
--------------------------------
### Full FAB implementation example
Source: https://ej2.syncfusion.com/javascript/documentation/floating-action-button/icons
Complete setup including ripple effect initialization, FAB configuration, and the required HTML structure.
```javascript
ej.base.enableRipple(true);
// Initialize the Floating Action Button control
var fab = new ej.buttons.Fab({
iconCss: 'fab-icons fab-icon-people',
content:'Contacts',
target: '#targetElement',
iconPosition: 'Right'
});
// Render initialized Floating Action Button
fab.appendTo('#fab');
```
```html
EJ2 Floating Action Button
```
--------------------------------
### Full Setup for AvoidLineOverlapping Feature
Source: https://ej2.syncfusion.com/javascript/documentation/diagram/connectors/connectors
Example demonstrating module injection and port configuration for the AvoidLineOverlapping feature.
```javascript
ej.diagrams.Diagram.Inject(ej.diagrams.LineRouting, ej.diagrams.AvoidLineOverlapping);
ej.diagrams.Diagram.Inject(ej.diagrams.Snapping);
var orData = 'M21.7,76.5L21.7,76.5c6.4-18.1,6.4-37.8,0-55.9l0-0.1h1.6c21.5,0,41.7,10.4,54.2,28l0,0l0,0 c-12.5,17.6-32.7,28-54.2,28H21.7z M99.5,48.5l-22,0 M0,31.5h25 M0,65.5h25';
var andData = 'M21.5,20.5h28a28,28,0,0,1,28,28v0a28,28,0,0,1-28,28h-28a0,0,0,0,1,0,0v-56a0,0,0,0,1,0,0Z M78,48.5 L 100,48.5Z M0,32.5 L 21.4,32.5Z M0,65.5 L 21.4,65.5Z';
var notData = 'M75.5,50.5l-52,28v-56L75.5,50.5z M81.5,50.5h18 M1.5,50.5h22 M78.5,47.5c-1.7,0-3,1.3-3,3s1.3,3,3,3s3-1.3,3-3 S80.2,47.5,78.5,47.5z';
let orPort = [
{ id: 'Or_port1', offset: { x: 0.01, y: 0.1963 }, visibility: ej.diagrams.PortVisibility.Visible, style: { fill: 'black' }, shape: 'Circle' }, { id: 'Or_port2', offset: { x: 0.26, y: 0.5 } },
{ id: 'Or_port3', offset: { x: 0.01, y: 0.805 }, visibility: ej.diagrams.PortVisibility.Visible, style: { fill: 'black' }, shape: 'Circle' }, { id: 'Or_port4', offset: { x: 0.99, y: 0.5 }, visibility: ej.diagrams.PortVisibility.Visible, style: { fill: 'black' }, shape: 'Circle' }
];
let andPort = [
{ id: 'And_port1', offset: { x: 0.01, y: 0.215 }, visibility: ej.diagrams.PortVisibility.Visible, style: { fill: 'black' }, shape: 'Circle' }, { id: 'And_port2', offset: { x: 0.22, y: 0.5 } },
{ id: 'And_port3', offset: { x: 0.01, y: 0.805 }, visibility: ej.diagrams.PortVisibility.Visible, style: { fill: 'black' }, shape: 'Circle' }, { id: 'And_port4', offset: { x: 0.99, y: 0.5 }, visibility: ej.diagrams.PortVisibility.Visible, style: { fill: 'black' }, shape: 'Circle' }
];
let notPort = [
{ id: 'Not_port1', offset: { x: 0.01, y: 0.5 }, visibility: ej.diagrams.PortVisibility.Visible, style: { fill: 'black' }, shape: 'Circle' }, { id: 'Not_port2', offset: { x: 0.99, y: 0.5 }, visibility: ej.diagrams.PortVisibility.Visible, style: { fill: 'black' }, shape: 'Circle' }
];
```
--------------------------------
### Initialize and render Toast component
Source: https://ej2.syncfusion.com/javascript/documentation/toast/es5-getting-started
This example demonstrates the full setup including required CSS and script references, followed by the initialization and rendering of the Toast component.
```html
Essential JS2 Toast
```
--------------------------------
### Tooltip HTML boilerplate for dynamic methods
Source: https://ej2.syncfusion.com/javascript/documentation/tooltip/animation
HTML setup for the dynamic animation example.
```html
EJ2 Tooltip
```
--------------------------------
### HTML Page Setup for Mention Control
Source: https://ej2.syncfusion.com/javascript/documentation/mention/es5-getting-started
Example of including necessary CSS and JS files in an HTML document.
```html
Essential JS 2
```
--------------------------------
### Clone Layer HTML Setup
Source: https://ej2.syncfusion.com/javascript/documentation/diagram/layers
HTML boilerplate for the clone layer example.
```html
EJ2 Diagram
```
--------------------------------
### Initialize TreeView in index.html
Source: https://ej2.syncfusion.com/javascript/documentation/treeview/es5-getting-started
This example demonstrates the complete setup for a TreeView, including necessary CSS and script references, container definition, and component initialization using a JSON data source.
```html
Essential JS 2 for TreeView
```
--------------------------------
### Initialize Dashboard Layout in HTML
Source: https://ej2.syncfusion.com/javascript/documentation/dashboard-layout/es5-getting-started
This example demonstrates the complete setup of an index.html file, including CDN references for styles and scripts, the HTML structure for panels, and the JavaScript initialization of the DashboardLayout control.
```html
Essential JS 2
0
1
2
3
4
5
6
```
--------------------------------
### HTML Page Setup for MultiColumn ComboBox
Source: https://ej2.syncfusion.com/javascript/documentation/multicolumn-combobox/es5-getting-started
Example of including necessary CSS and JavaScript files in an HTML document to initialize the component.
```html
Essential JS 2
```
--------------------------------
### Full Implementation Example
Source: https://ej2.syncfusion.com/javascript/documentation/grid/data-binding/data-binding
A complete example showing grid initialization and a function to update the datasource dynamically via a button click.
```javascript
var grid = new ej.grids.Grid({
dataSource: data,
columns: [
{ field: 'OrderID', headerText: 'OrderID', textAlign: 'Right', width: 90 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 120 },
{ field: 'Freight', headerText: 'Freight', textAlign: 'Right', format:'C2', width: 90 },
{ field: 'ShipCity', headerText: 'Ship City', width: 120 },
],
height: 280
});
grid.appendTo('#Grid');
var button = new ej.buttons.Button();
button.appendTo('#sample');
document.getElementById('sample').addEventListener('click', function () {
changeDatasource();
});
function changeDatasource() {
for (var i = 0; i < 5; i++) {
var newRecord = {
OrderID: generateOrderId(),
CustomerID: generateCustomerId(),
ShipCity: generateShipCity(),
Freight: generateFreight(),
ShipName: generateShipName()
};
grid.dataSource.unshift(newRecord);
grid.setProperties({dataSource: grid.dataSource});
}
}
// Generate a random OrderID
function generateOrderId() {
return Math.floor(10000 + Math.random() * 90000);
}
// Generate a random CustomerID
function generateCustomerId() {
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var result = '';
for (var i = 0; i < 5; i++) {
result += characters.charAt(Math.floor(Math.random() * characters.length));
}
return result;
}
// Generate a random ShipCity
function generateShipCity() {
var cities = ['London', 'Paris', 'New York', 'Tokyo', 'Berlin'];
return cities[Math.floor(Math.random() * cities.length)];
}
// Generate a random Freight value
function generateFreight() {
return Math.random() * 100;
}
// Generate a random ShipName
function generateShipName() {
var names = ['Que Delícia', 'Bueno Foods', 'Island Trading', 'Laughing Bacchus Winecellars'];
return names[Math.floor(Math.random() * names.length)];
}
```
```html
EJ2 Grid
```
--------------------------------
### getStartEndHours
Source: https://ej2.syncfusion.com/javascript/documentation/api/schedule/staticFunctions
Method to get start and end hours.
```APIDOC
## getStartEndHours
### Description
Retrieves the start and end hours for a given date.
### Parameters
- **date** (Date) - Required - The date object.
- **startHour** (Date) - Required - The start hour date object.
- **endHour** (Date) - Required - The end hour date object.
### Returns
- **Record** - The start and end hour information.
```
--------------------------------
### Start Edit
Source: https://ej2.syncfusion.com/javascript/documentation/grid/ej1-api-migration
Examples for initiating the edit mode.
```javascript
var gridObj = $("#Grid").data("ejGrid");
gridObj.startEdit($(".gridcontent tr").first());
```
```javascript
var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.startEdit(gridObj.selectRow(0))
```
--------------------------------
### getDoubleRange
Source: https://ej2.syncfusion.com/javascript/documentation/api/chart3d/chart3DSeries
Gets a range of values between the specified start and end points.
```APIDOC
## getDoubleRange(start, end)
### Description
Gets a range of values between the specified start and end points. Returns a Chart3DRangeValues object.
### Parameters
- **start** (number) - Required - The starting point of the range.
- **end** (number) - Required - The ending point of the range.
### Returns
- **Chart3DRangeValues**
```
--------------------------------
### Get Batch Changes
Source: https://ej2.syncfusion.com/javascript/documentation/grid/ej1-api-migration
Examples for retrieving batch edit changes.
```javascript
var gridObj = $("#Grid").data("ejGrid");
gridObj.getBatchChanges();
```
```javascript
var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.editModule.getBatchChanges()
```
--------------------------------
### Get Expanded Nodes
Source: https://ej2.syncfusion.com/javascript/documentation/treeview/ej1-api-migration
Example of retrieving expanded nodes in EJ1.
```javascript
$("#tree").ejTreeView({
fields: {dataSource: treeData, id: "id", parentId: "pid", text: "name", hasChild: "hasChild"}
});
var treeObj = $("#tree").data("ejTreeView");
```
--------------------------------
### Run Application
Source: https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started
Start the local development server to view the application.
```bash
npx serve .
```
--------------------------------
### Initialize Skeleton Control via CDN
Source: https://ej2.syncfusion.com/javascript/documentation/skeleton/es5-getting-started
A complete HTML example demonstrating how to include necessary dependencies and initialize the Skeleton control.
```html
Essential JS 2
```
--------------------------------
### HTML Structure for Content Retrieval Example
Source: https://ej2.syncfusion.com/javascript/documentation/diagram/export
HTML setup for the getDiagramContent demonstration.
```html
EJ2 Diagram
```
--------------------------------
### Full Wizard Implementation
Source: https://ej2.syncfusion.com/javascript/documentation/tab/how-to/create-wizard-using-tab
Complete setup for the wizard including data sources, component initialization, and Tab configuration.
```javascript
ej.base.enableRipple(true);
var tabObj;
var availTrainGrid;
var ticketDetailGrid;
var endPoint;
var journeyDate;
var ticketType;
var startPoint;
var alertDlg;
var today = new Date();
var locations;
var selectedTrain;
var quota = [
{ id: '1', text: 'Business Class' },
{ id: '2', text: 'Economy Class' },
{ id: '4', text: 'Common Class' }
];
var gender = [
{ id: '1', text: 'Male' },
{ id: '2', text: 'Female' }
];
var berths = [
{ id: '1', text: 'Upper' },
{ id: '2', text: 'Lower' },
{ id: '3', text: 'Middle' },
{ id: '4', text: 'Window' },
{ id: '5', text: 'Aisle' }
];
var cities = [
{ name: 'Chicago', fare: 300 },
{ name: 'San Francisco', fare: 125 },
{ name: 'Los Angeles', fare: 175 },
{ name: 'Seattle', fare: 250 },
{ name: 'Florida', fare: 150 }
];
renderComponents();
function renderComponents() {
/* Initialize Tab with disabled headers for the wizard */
tabObj = new ej.navigations.Tab({
heightAdjustMode: 'None', height: 390, showCloseButton: false,
selecting: tabSelected,
items: [
{ header: { 'text': 'New Booking' }, content: '#booking' },
{ header: { 'text': 'Train List' }, content: '#selectTrain', disabled: true },
{ header: { 'text': 'Add Passenger' }, content: '#details', disabled: true },
{ header: { 'text': 'Make Payment' }, content: '#confirm', disabled: true }
]
});
tabObj.appendTo('#element');
/* Initialize the components for creating wizard */
startPoint = new ej.dropdowns.DropDownList({
width: '100%', dataSource: cities, floatLabelType: 'Auto', placeholder: 'From',
fields: { text: 'name', value: 'name' }
});
startPoint.appendTo('#startPoint');
endPoint = new ej.dropdowns.DropDownList({
width: '100%', dataSource: cities, floatLabelType: 'Auto', placeholder: 'To',
fields: { text: 'name', value: 'name' }
});
endPoint.appendTo('#endPoint');
journeyDate = new ej.calendars.DatePicker({
width: '100%', floatLabelType: 'Auto', placeholder: 'Journey Date', min: new Date(today.getTime()),
max: new Date(today.getTime() + 60 * 24 * 60 * 60 * 1000),
focus: function () { journeyDate.show(); }
});
journeyDate.appendTo('#journey_date');
ticketType = new ej.dropdowns.DropDownList({
dataSource: quota, placeholder: 'Ticket Type', floatLabelType: 'Auto', fields: { text: 'text', value: 'text' }
});
```
--------------------------------
### Full Implementation Example
Source: https://ej2.syncfusion.com/javascript/documentation/grid/how-to/enable-disable-grid-and-its-actions
Complete implementation including grid initialization and the toggle logic for the button.
```javascript
ej.grids.Grid.Inject(ej.grids.Edit, ej.grids.Toolbar);
var button = new ej.buttons.Button({}, '#primarybtn');
document.getElementById('primarybtn').onclick = function(){
var gridInst = document.getElementById("Grid").ej2_instances[0];
if (gridInst.element.classList.contains('disablegrid')) {
gridInst.element.classList.remove('disablegrid');
document.getElementById("GridParent").classList.remove('wrapper');
}
else {
gridInst.element.classList.add('disablegrid');
document.getElementById("GridParent").classList.add('wrapper');
}
};
var grid = new ej.grids.Grid({
dataSource: data,
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100, isPrimaryKey: true },
{ field: 'CustomerID', headerText: 'Customer ID', width: 120, allowEditing: false },
{ field: 'Freight', headerText: 'Freight', textAlign: 'Right', editType: 'numericedit', width: 120, format: 'C2' },
{ field: 'ShipCountry', headerText: 'Ship Country', editType: 'dropdownedit', width: 150 }
],
height: 273
});
grid.appendTo('#Grid');
```
--------------------------------
### Get Currently Edited Cell Value
Source: https://ej2.syncfusion.com/javascript/documentation/grid/ej1-api-migration
Examples for retrieving the value of the currently edited cell.
```javascript
var gridObj = $("#Grid").data("ejGrid");
gridObj.getCurrentEditCellData();
```
```javascript
var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.
editModule.getCurrentEditCellData();
```
--------------------------------
### Full Kanban Implementation Example
Source: https://ej2.syncfusion.com/javascript/documentation/kanban/getting-started
A complete HTML document demonstrating the integration of the Kanban component with external styles and scripts.
```html
Kanban Columns Header
```
--------------------------------
### HTML Setup for Breadcrumb
Source: https://ej2.syncfusion.com/javascript/documentation/breadcrumb
Example of including necessary CSS and JS files in an HTML document.
```html
Essential JS 2 - Breadcrumb
```
--------------------------------
### Start Node.js Application
Source: https://ej2.syncfusion.com/javascript/documentation/file-manager/how-to/custom-file-provider
Command to execute the application entry point.
```bash
node index.js
```
--------------------------------
### Implement full custom view configuration
Source: https://ej2.syncfusion.com/javascript/documentation/ai-assistview/custom-view
Demonstrates a complete setup including view templates and prompt request handling.
```javascript
ej.base.enableRipple(true);
// Initializes the AI Assist control
var aiAssistView = new ej.interactivechat.AIAssistView({
views: [
{
type: 'Assist',
name: "Prompt",
iconCss: 'e-icons e-assistview-icon'
},
{
type: 'Custom',
name: 'Response',
iconCss: 'e-icons e-comment-show',
viewTemplate: '
Response view content
'
}
],
promptRequest: function () {
setTimeout(function () {
var defaultResponse = 'For real-time prompt processing, connect the AIAssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.';
aiAssistView.addPromptResponse(defaultResponse);
}, 1000);
}
});
// Render initialized AI Assist.
aiAssistView.appendTo('#type');
```
```html
```
--------------------------------
### Initialize Local Development Environment
Source: https://ej2.syncfusion.com/javascript/documentation/range-navigator/getting-started
Commands to clone the quickstart repository and install project dependencies.
```bash
git clone https://github.com/angular/quickstart.git quickstart
cd quickstart
npm install
```