510 строки
30 KiB
HTML
510 строки
30 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<script>
|
|
var orgin = location.origin;
|
|
var baseref = location.href.split('#')[0].replace(orgin, '');
|
|
document.write('<base href=\"' + baseref + '\">');
|
|
</script>
|
|
<!-- Google Tag Manager -->
|
|
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
|
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
|
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
|
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
|
})(window,document,'script','dataLayer','GTM-W8WD8WN');</script>
|
|
<!-- End Google Tag Manager -->
|
|
<meta charset="utf-8" />
|
|
<title>Essential JS 2</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="description" content="Explore and learn Syncfusion JavaScript UI controls library using large collection of feature-wise examples for each components." />
|
|
<meta name="author" content="Syncfusion" />
|
|
<link rel="shortcut icon" href="favicon.ico" />
|
|
<link rel="manifest" href="./manifest.webmanifest">
|
|
<link href="src/common/lib/content/roboto.css" rel="stylesheet">
|
|
<link href="src/common/lib/content/bootstrap.min.css" rel="stylesheet" />
|
|
<link href="src/common/lib/highlightjs/styles/default.css" rel="stylesheet" />
|
|
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet"></link>
|
|
<!-- Theme Reference -->
|
|
<link id="themelink" href="styles/fluent2.css" rel="stylesheet" />
|
|
<link href="styles/index.css" rel="stylesheet" />
|
|
<link href="src/common/lib/content/codemirror.css" rel="stylesheet"></link>
|
|
<script src="src/skipChunk.js" type="text/javascript"></script>
|
|
<script src="src/common.min.js" type="text/javascript"></script>
|
|
<script src="src/common/embedding_model.js" type="module"></script>
|
|
<script src="src/common/azure_openai.js" type="module"></script>
|
|
<script src="src/ai-kanban/custom-model.js" type="module"></script>
|
|
<script>
|
|
var orgin = location.origin;
|
|
var baseref = location.href.split('#')[0].replace(orgin, '');
|
|
if (baseref.charAt(baseref.length - 1) !== '/') {
|
|
baseref += '/';
|
|
}
|
|
document.write('<base href="' + baseref + '">');
|
|
</script>
|
|
|
|
<script>
|
|
if (/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) {
|
|
document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/shim.min.js"><\/script>');
|
|
if (window.NodeList && !NodeList.prototype.forEach) {
|
|
NodeList.prototype.forEach = Array.prototype.forEach;
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body class='e-view' aria-busy="true">
|
|
<!-- Google Tag Manager (noscript) -->
|
|
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W8WD8WN" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
|
<!-- End Google Tag Manager (noscript) -->
|
|
<div hidden id="sync-analytics" data-queue="EJ2 - JavaScript - Demos"></div>
|
|
<aside id='left-sidebar' role="complementary" aria-labelledby="sb-toggle-left">
|
|
<div class='sb-left-pane e-view'>
|
|
<div class="sb-left-pane-header">
|
|
<div class="sb-header-top">
|
|
<div class="sb-ej2">
|
|
<div class="sb-mobile-logo"></div>
|
|
<div class="sb-name">Essential JS 2</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sb-home" role="button" tabindex="0" aria-label="Essential JS2 home page" onclick="document.getElementById('sb-home').click()">
|
|
<div class="sb-home-link sb-icons sb-icon-Home"></div>
|
|
<div class="sb-home-text">
|
|
<span>HOME</span>
|
|
</div>
|
|
<a id="sb-home" href="https://ej2.syncfusion.com/home/" aria-label="Essential JS2 home page"></a>
|
|
</div>
|
|
<div class='sb-control-navigation'>
|
|
<div id="controlTree" class='e-view'></div>
|
|
<div id="controlSamples">
|
|
<div id="sb-left-back" class="back" role="button" tabindex="0">
|
|
<div class="sb-icons sb-icon-Back"></div>
|
|
<div class='control-name'>All Controls</div>
|
|
</div>
|
|
<div id="controlList" class='e-view sb-control-list-top'></div>
|
|
</div>
|
|
</div>
|
|
<div class='sb-left-footer'>
|
|
<div class="sb-mobile-header-buttons">
|
|
<a href='https://www.syncfusion.com/javascript-ui-controls' target="_blank" aria-label="About Javascript control">
|
|
<div class="sb-mobile-header-about">
|
|
About</div>
|
|
</a>
|
|
<a href='https://www.syncfusion.com/downloads/essential-js2' target="_blank" aria-label="Pricing Javascript control">
|
|
<div class="sb-mobile-header-price">Pricing</div>
|
|
</a>
|
|
</div>
|
|
<div class='sb-left-footer-links'>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<aside id='right-sidebar' class='sb-hide'>
|
|
<div class="sb-mobile-right-pane">
|
|
<div class="sb-mobile-preference sb-hide"></div>
|
|
<div class="sb-mobile-prop-pane sb-hide"></div>
|
|
<div class="sb-mobile-right-pane-close sb-icons"></div>
|
|
</div>
|
|
</aside>
|
|
<div class="sample-browser e-view" rol>
|
|
<div class="sb-mobile-overlay sb-hide"></div>
|
|
<div id='sample-header' class="sb-header e-view" role="banner">
|
|
<div class='sb-header-left sb-left sb-table'>
|
|
<div class='sb-header-item sb-table-cell'>
|
|
<div id="sb-toggle-left" role="button" tabindex="0" class="sb-slide-nav sb-icons toggle-active sb-icon-Hamburger" aria-label="Toggle all controls navigation" aria-controls="left-sidebar"
|
|
title='toggle left pane'></div>
|
|
</div>
|
|
<div class='sb-header-item sb-table-cell'>
|
|
<div id='sb-header-text' class='e-sb-header-text'>
|
|
<span class='sb-header-text-left'>Essential Studio for</span>
|
|
<span class='sb-header-text-right' role="button" tabindex="0">JavaScript</span>
|
|
</div>
|
|
</div>
|
|
<div class='sb-header-item sb-table-cell sb-lang-toggler-wrapper'>
|
|
<span id='sb-switcher' role="button" tabindex="0" class='sb-lang-toggler sb-icons sb-icon-Dropdown' aria-label="change the samplebrowser"></span>
|
|
</div>
|
|
<!--<div class='sb-header-item sb-table-cell'>-->
|
|
<!-- <div>-->
|
|
<!-- <img src='./styles/images/Vol 3 beta_Option 2.svg'>-->
|
|
<!-- </div>-->
|
|
<!--</div> -->
|
|
|
|
</div>
|
|
<div class='sb-header-right sb-right sb-table'>
|
|
<div class="sb-header-item sb-table-cell">
|
|
<div id="header-theme-switcher" role="button" tabindex="0" class="theme-wrapper" title='Change theme of sample browser'>
|
|
<div id="sb-theme-text" class="sb-theme-text">
|
|
<span class="sb-header-text-left">CHOOSE THEME</span>
|
|
</div>
|
|
<div class="sb-theme-switcher-wrapper">
|
|
<span id="sb-theme-switcher" class="sb-theme-switch sb-icons sb-icon-Dropdown" role="presentation" aria-label="Theme selection"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sb-header-item sb-table-cell" id="sb-dark-theme">
|
|
<div class="sb-switch-btn" role="button" data-theme="dark" id="buttoncolor">
|
|
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;" id="dark-icon"
|
|
width="16" height="15" fill="currentColor" class="bi bi-moon" viewBox="0 0 16 16">
|
|
<path
|
|
d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278M4.858 1.311A7.27 7.27 0 0 0 1.025 7.71c0 4.02 3.279 7.276 7.319 7.276a7.32 7.32 0 0 0 5.205-2.162q-.506.063-1.029.063c-4.61 0-8.343-3.714-8.343-8.29 0-1.167.242-2.278.681-3.286" />
|
|
</svg>
|
|
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"
|
|
id="light-icon" width="16" height="14" fill="currentColor" class="bi bi-sun"
|
|
viewBox="0 0 16 16">
|
|
<path
|
|
d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708" />
|
|
</svg>
|
|
<span id="sb-dark-span"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sb-table-cell sb-theme-splitter sb-download-splitter"></div>
|
|
<div class='sb-header-item sb-table-cell sb-search-wrapper'>
|
|
<div class='sb-search-btn' id='sb-trigger-search' role="button" tabindex="0" aria-label="toggle sample search" title="Toggle sample search">
|
|
<span class='sb-settings sb-icons sb-icon-Search' role="presentation" aria-label="Search sample"></span>
|
|
</div>
|
|
</div>
|
|
<div class='sb-header-item sb-table-cell sb-settings-wrapper'>
|
|
<div class='sb-setting-btn' role="button" tabindex="0" aria-label="toggle settings menu" tabindex="">
|
|
<span class='sb-settings sb-icons sb-icon-Settings-Preferences'></span>
|
|
</div>
|
|
</div>
|
|
<div class="sb-header-item sb-table-cell sb-header-settings sb-icons"></div>
|
|
<div class="sb-header-splitter sb-download-splitter"></div>
|
|
<div class='sb-header-item sb-table-cell sb-download-wrapper'>
|
|
<a href='https://www.syncfusion.com/downloads?tag=es-seo-ej2-javascript-demo-menu-trail' target="_blank" aria-label="Free Trial (Opens in a new window)">
|
|
<button id='download-now' class='sb-download-btn'>
|
|
<span class='sb-download-text'>FREE TRIAL</span>
|
|
</button>
|
|
</a>
|
|
<!-- <a href='https://www.npmjs.com/search?q=ej2-typescript' target="_blank" aria-label="Install NPM">
|
|
<button class='sb-npm-btn'>
|
|
<img class="npm-svg" src="styles/images/NPM.svg" alt="npm icon"><span class="doc-npm-link">Install NPM</span>
|
|
</button>
|
|
</a> -->
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div id='sb-popup-section' class='sb-popups'>
|
|
<div id='sb-switcher-popup' role='navigation' class='sb-switch-popup'>
|
|
<ul id='switch-sb' role="list">
|
|
<li class='sb-current' role="listiem">JavaScript</li>
|
|
<li>
|
|
<a id='nextjs'>Next.js</a>
|
|
</li>
|
|
<li role="listitem">
|
|
<a id='angular'>Angular</a>
|
|
</li>
|
|
<li role="listitem">
|
|
<a id='react'>React</a>
|
|
</li>
|
|
<li role="listitem">
|
|
<a id='javascript'>JavaScript (ES5)</a>
|
|
</li>
|
|
<li role="listitem">
|
|
<a id='aspnetcore'>ASP.NET Core </a>
|
|
</li>
|
|
<li role="listitem">
|
|
<a id='aspnetmvc'>ASP.NET MVC </a>
|
|
</li>
|
|
<li role="listitem">
|
|
<a id='vue'>Vue </a>
|
|
</li>
|
|
<li role="listitem">
|
|
<a id='blazor'>Blazor </a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div id='theme-switcher-popup' class='sb-theme-popup'>
|
|
<ul id="themelist" class="options" role="list">
|
|
<li class='active' id="material3" role="listitem">
|
|
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
|
<span class="switch-text">Material 3</span>
|
|
</li>
|
|
<li class="e-list" id="bootstrap5" role="listitem">
|
|
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
|
<span class="switch-text">Bootstrap 5</span>
|
|
</li>
|
|
<li class="e-list" id="fluent2" role="listitem">
|
|
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
|
<span class="switch-text">Fluent 2</span>
|
|
</li>
|
|
<li class="e-list" id="tailwind">
|
|
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
|
<span class="switch-text">Tailwind CSS</span>
|
|
</li>
|
|
<li class="e-list" id="fluent2-highcontrast" role="listitem">
|
|
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
|
<span class="switch-text">Fluent 2 High Contrast</span>
|
|
</li>
|
|
<li class="e-list" id="highcontrast">
|
|
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
|
<span class="switch-text">High Contrast</span>
|
|
</li>
|
|
<li class="e-list" id="fluent" role="listitem">
|
|
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
|
<span class="switch-text">Fluent</span>
|
|
</li>
|
|
</ul>
|
|
<div class="sb-theme-studio"><a id="theme-studio" target="_blank" href="https://ej2.syncfusion.com/themestudio/?theme=fluent2" aria-label="Go to Theme Studio">Go to Theme Studio</a></div>
|
|
</div>
|
|
<div id='settings-popup' class='sb-setting-popup'>
|
|
<div class='sb-setting-header'>
|
|
<span> Preferences
|
|
</span>
|
|
</div>
|
|
<div class='sb-setting-content'>
|
|
<div class='sb-setting-item sb-setting-theme-section'>
|
|
<div class='setting-label'>
|
|
<div class='sb-icons sb-setting-icons sb-icon-Palette'></div>
|
|
<div class='sb-setting-text'>Theme Selection</div>
|
|
</div>
|
|
<div class='setting-content setting-theme-change'>
|
|
<select id='sb-setting-theme' class='sb-setting-theme-select'>
|
|
<option value="material3">Material 3</option>
|
|
<option value="bootstrap5">Bootstrap 5</option>
|
|
<option value="fluent2">Fluent 2</option>
|
|
<option value="tailwind">Tailwind CSS</option>
|
|
<option value="fluent2-highcontrast">Fluent 2 High Contrast</option>
|
|
<option value="highcontrast">High Contrast</option>
|
|
<option value="fluent">Fluent</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class='sb-setting-item sb-setting-theme-section' id="mobiledarkswitch">
|
|
<div class='setting-label'>
|
|
<div> <svg xmlns="http://www.w3.org/2000/svg" style="margin-right: 5px;" id="light-icon"
|
|
width="16" height="14" fill="currentColor" class="bi bi-sun" viewBox="0 0 16 16">
|
|
<path
|
|
d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708" />
|
|
</svg></div>
|
|
<div class='sb-setting-text'>Theme Mode</div>
|
|
</div>
|
|
<div class='setting-content setting-theme-change'>
|
|
<select id='sb-theme-mode' class='sb-setting-theme-select'>
|
|
<option value="lightMode">Light mode</option>
|
|
<option value="darkMode">Dark mode</option>
|
|
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class='sb-setting-item sb-responsive-section'>
|
|
<div class='setting-label'>
|
|
<div class='sb-icons sb-setting-icons sb-icon-Responsive'></div>
|
|
<div class='sb-setting-text'>Mode Selection</div>
|
|
</div>
|
|
<div class='setting-content btn-group setting-responsive'>
|
|
<div id='touch' role="button" tabindex="0" class="sb-responsive-items set-border-radious-touch" title="Increased padding for actionable items to accommodate user touches">Touch</div>
|
|
<div id='mouse' role="button" tabindex="0" class="sb-responsive-items set-border-radious-mouse" title="Default control sizes, optimized for use with mouse">Mouse</div>
|
|
</div>
|
|
</div>
|
|
<div class='sb-setting-item sb-setting-culture'>
|
|
<div class='setting-label'>
|
|
<div class='sb-icons sb-setting-icons sb-icon-Localization'></div>
|
|
<div class='sb-setting-text'>Localization</div>
|
|
</div>
|
|
<div class='setting-content'>
|
|
<input type="text" value="en" id="cultureID" style="display: none;">
|
|
<select id='sb-setting-culture' class='sb-setting-culture-select'>
|
|
<option value="en">English</option>
|
|
<option value="de">German - Germany*</option>
|
|
<option value="fr-CH">French - Switzerland*</option>
|
|
<option value="ar">Arabic*</option>
|
|
<option value="zh">Chinese - China*</option>
|
|
</select>
|
|
</div>
|
|
<div class="sb-setting-translate">
|
|
<span>*Translated by Google Translator.</span>
|
|
</div>
|
|
</div>
|
|
<div class='sb-setting-item sb-setting-currency'>
|
|
<div class='setting-label'>
|
|
<div class='sb-icons sb-setting-icons sb-icon-Currency'></div>
|
|
<div class='sb-setting-text'>Currency</div>
|
|
</div>
|
|
<div class='setting-content'>
|
|
<input type="text" value="USD" id="currencyID" style="display: none;">
|
|
<select id='sb-setting-currency' class='sb-setting-currency-content'>
|
|
<option value="USD">USD</option>
|
|
<option value="EUR">EUR</option>
|
|
<option value="AED">AED</option>
|
|
<option value="CHF">CHF</option>
|
|
<option value="CNY">CNY</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sb-content e-view">
|
|
<div class='sb-right-pane e-view' id='right-pane'>
|
|
<div class="sb-content-overlay">
|
|
<div class="sb-loading">
|
|
<svg class="circular" height="40" width="40">
|
|
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="6" stroke-miterlimit="10" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class='sb-desktop-wrapper'>
|
|
<div id='component-name' class='sb-component-name sb-rightpane-padding'>
|
|
<h1 class='sb-sample-text' aria-level="1" role="heading">Data Grid</h1>
|
|
</div>
|
|
<div id='sample-bread-crumb' class='sb-bread-crumb sb-rightpane-padding'>
|
|
<div class='sb-bread-crumb-text'>
|
|
<div class='category-text bread-ctext'> </div>
|
|
<div class='category-seperator sb-icons sb-icon-Next seperator'> </div>
|
|
<div class='component bread-ctext'></div>
|
|
<div class="component-seperator sb-icons sb-icon-Next seperator"> </div>
|
|
<div class='crumb-sample '></div>
|
|
</div>
|
|
</div>
|
|
<div class='sb-action-description sb-rightpane-padding'></div>
|
|
<div class='sb-content-tab' id='content-tab'>
|
|
<div id="sb-content" class='sb-content-section'>
|
|
<div id='sb-content-header' class="e-tab-header sb-content-tab-header">
|
|
<div>
|
|
<span class="sb-icons sb-icon-Demo"></span>
|
|
<span class="sb-tab-title"> DEMO </span>
|
|
</div>
|
|
<div>
|
|
<span class="sb-icons sb-icon-Code"></span>
|
|
<span class="sb-tab-title"> SOURCE </span>
|
|
</div>
|
|
<div>
|
|
<span class="sb-icons sb-icon-API"></span>
|
|
<span class="sb-tab-title"> API </span>
|
|
</div>
|
|
</div>
|
|
<div class="e-content sb-sample-content-area">
|
|
<div>
|
|
<div class='sb-demo-section'>
|
|
<div class="control-fluid">
|
|
<div class="container-fluid">
|
|
<div id="control-content"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class='sb-source-section'>
|
|
<div id='sb-source-tab' class="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class='sb-api-section'>
|
|
|
|
<div id='api-grid'>
|
|
<script id="template" type="text/x-template">
|
|
<a href="${link}" target="_blank">${name}</a>
|
|
</script>
|
|
<script id="template-description" type="text/x-template">
|
|
<div class='sb-sample-description'>
|
|
<div class='sb-api-content'>${description}</div>
|
|
</div>
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class='description-section sb-rightpane-padding'>
|
|
</div>
|
|
<div class="banner-wrapper">
|
|
<div id="banner-image" class="banner-img">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<div class="col-sm-12">
|
|
<div id="banner-head" class="banner-header">Transform your JavaScript web apps today with Syncfusion Javascript controls</div>
|
|
</div>
|
|
<div class="col-sm-12 cnt-area">
|
|
<div class="content-area">
|
|
<div class="banner-cnt-pt">
|
|
<div class="banner-cnt-icon click-icon sb-icons sb-icon-icon-selection"></div>
|
|
<div class="cnt-text">80+ high-performance and responsive UI components</div>
|
|
</div>
|
|
<div class="banner-cnt-pt">
|
|
<div class="banner-cnt-icon click-icon sb-icons sb-icon-icon-selection"></div>
|
|
<div class="cnt-text">Dedicated support</div>
|
|
</div>
|
|
<div class="banner-cnt-pt">
|
|
<div class="banner-cnt-icon click-icon sb-icons sb-icon-icon-selection"></div>
|
|
<div class="cnt-text">Hassle-free licensing</div>
|
|
</div>
|
|
</div>
|
|
<a style="color:#ffff;text-decoration:none;"
|
|
href="https://www.syncfusion.com/downloads?tag=es-seo-ej2-javascript-demo-ads-trail" aria-label="Try it for free (Opens in a new window)">
|
|
<div class="free-trial">TRY IT FOR FREE</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sb-footer">
|
|
<div class="sb-footer-left">
|
|
<div class="sb-footer-links">
|
|
<a href="https://ej2.syncfusion.com/documentation/" target="_blank" aria-label="Documentation (Opens in a new window)">
|
|
<div class="sb-footer-link">Documentation</div>
|
|
</a>
|
|
<a href="https://www.syncfusion.com/forums/essential-js2" target="_blank" aria-label="Forum (Opens in a new window)">
|
|
<div class="sb-footer-link">Forum</div>
|
|
</a>
|
|
<a href="https://syncfusion.com/blogs" target="_blank" aria-label="Blog (Opens in a new window)">
|
|
<div class="sb-footer-link">Blog</div>
|
|
</a>
|
|
<a href="https://www.syncfusion.com/kb" target="_blank" aria-label="Knowledge Base (Opens in a new window)">
|
|
<div class="sb-footer-link">Knowledge Base</div>
|
|
</a>
|
|
</div>
|
|
<div class="sb-footer-copyright"></div>
|
|
</div>
|
|
<div class="sb-footer-logo">
|
|
<a href="https://www.syncfusion.com/" target="_blank" aria-label="Syncfusion logo">
|
|
<div class="sb-footer-logo-icon"></div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sb-body-overlay e-view">
|
|
<div class="sb-loading">
|
|
<svg class="circular" height="40" width="40">
|
|
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="6" stroke-miterlimit="10" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="e-search-overlay sb-hide">
|
|
<div class='sb-search-input' id='search-input-wrapper' data-value=''>
|
|
<input type='text' aria-required="true" id='search-input' aria-label="search samples">
|
|
<span class='e-icons sb-reset-icon'></span>
|
|
<span class='e-icons sb-search-icon'></span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class='sb-mobilefooter e-view sample-navigation' id='mobile-footer'>
|
|
<button id='mobile-prev-sample' class="sb-navigation-prev sb-left" aria-label="previous sample">
|
|
PREVIOUS
|
|
</button>
|
|
<button id='mobile-next-sample' class="sb-navigation-next sb-right" aria-label="next sample">
|
|
NEXT
|
|
</button>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!--</div>-->
|
|
|
|
|
|
<script src="src/common/index.min.js" type="text/javascript"></script>
|
|
</body>
|
|
|
|
</html>
|