config(EJ2-000): v18.3.35 Released
This commit is contained in:
Saranya Murugasamy
Родитель
d7bccb1635
Коммит
3e07d3c6cc
49
index.html
49
index.html
|
|
@ -20,11 +20,21 @@
|
|||
<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>
|
||||
<style rel="stylesheet" id="themelink"></style>
|
||||
<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>
|
||||
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>');
|
||||
|
|
@ -140,7 +150,12 @@
|
|||
<div class='sb-header-item sb-table-cell sb-download-wrapper'>
|
||||
<a href='https://www.syncfusion.com/downloads/essential-js2' target="_blank">
|
||||
<button id='download-now' class='sb-download-btn'>
|
||||
<span class='sb-download-text'>Download Now</span>
|
||||
<span class='sb-download-text'>FREE TRIAL</span>
|
||||
</button>
|
||||
</a>
|
||||
<a href='https://www.npmjs.com/search?q=ej2-typescript' target="_blank">
|
||||
<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>
|
||||
|
|
@ -354,6 +369,38 @@
|
|||
</div>
|
||||
<div class='description-section sb-rightpane-padding'>
|
||||
</div>
|
||||
<div class="ad-wrapper">
|
||||
<div id='ad-image' class="ad-img">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="col-sm-12">
|
||||
<div id="ad-banner-head" class="ad-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="ad-cnt-pt">
|
||||
<div class="ad-cnt-icon click-icon sb-icons sb-icon-icon-selection"></div>
|
||||
<div class="cnt-text">65+ high-performance and responsive UI components</div>
|
||||
</div>
|
||||
<div class="ad-cnt-pt">
|
||||
<div class="ad-cnt-icon click-icon sb-icons sb-icon-icon-selection"></div>
|
||||
<div class="cnt-text">Dedicated support</div>
|
||||
</div>
|
||||
<div class="ad-cnt-pt">
|
||||
<div class="ad-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/essential-js2">
|
||||
<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">
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ module.exports = function (config) {
|
|||
"test-main.js",
|
||||
{ pattern: "src/**/*.*", included: false },
|
||||
{ pattern: "styles/**/*.*", included: false },
|
||||
{ pattern: "src/skipChunk.js", included: true },
|
||||
{ pattern: "src/common.min.js", included: true },
|
||||
{ pattern: "spec/**/*.spec.js", included: false },
|
||||
{ pattern: "node_modules/@syncfusion/ej2-base/**/*.js", included: false },
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@syncfusion/ej2-samples",
|
||||
"version": "18.2.44",
|
||||
"version": "18.3.35",
|
||||
"description": "Samples for Syncfusion Essential JS 2",
|
||||
"author": "Syncfusion Inc.",
|
||||
"license": "SEE LICENSE IN license",
|
||||
|
|
@ -79,8 +79,8 @@
|
|||
"@types/requirejs": "^2.1.26",
|
||||
"run-sequence": "^1.2.2",
|
||||
"typescript": "2.8.4",
|
||||
"webpack": "*",
|
||||
"webpack-cli": "*",
|
||||
"webpack": "^4.43.0",
|
||||
"webpack-cli": "^3.3.12",
|
||||
"shelljs": "*"
|
||||
},
|
||||
"scripts": {
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"col-lg-12 control-section\">\n <div class=\"sample_container\">\n <!-- Card Component -->\n <div class=\"e-card e-custom-card\">\n <div class=\"e-card-header\">\n <!-- xLarge Circle Avatar-->\n <div class=\"e-avatar e-avatar-circle e-avatar-xlarge\">\n <img src=\"//npmci.syncfusion.com/production/demos/src/avatar/images/pic02.png\" alt=\"profile_pic\">\n </div>\n  \n </div>\n <div class=\"e-card-header\">\n <div class=\"e-card-header-caption center\">\n <div class=\"e-card-header-title name\">Laura Callahan</div>\n <div class=\"e-card-sub-title\">Sales Coordinator</div>\n </div>\n </div>\n <div class=\"e-card-content\">\n <p class=\"avatar-content\"> Laura received a BA in psychology from the University of Washington. She has also completed a course\n in business French. She reads and writes French.</p>\n </div>\n </div>\n </div>\n</div>\n\n\n\n\n<style>\n .sample_container {\n max-width: 300px;\n margin: auto;\n min-height: 400px;\n }\n\n /* Card Customizations */\n\n .e-custom-card {\n position: relative;\n margin-top: 80px;\n overflow: visible;\n border-radius: 15px;\n box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);\n transition: 0.2s;\n border-width: 1px;\n padding: 1px;\n }\n\n .e-custom-card.e-card:hover {\n border-width: 1px;\n padding: 1px;\n }\n\n .e-custom-card :nth-child(2) .e-card-header-title.name {\n margin-top: 20px;\n }\n\n .sample_container p.avatar-content {\n line-height: 20px;\n font-family: inherit;\n }\n\n .e-custom-card .e-card-header {\n text-align: center;\n }\n\n .e-custom-card .e-avatar {\n font-size: 40px;\n position: absolute;\n top: calc(0% - 1.5em);\n left: calc(50% - 1.5em);\n box-shadow: 0 16px 28px -8px rgba(0, 0, 0, .36), 0 4px 15px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .2);\n }\n\n .e-card.e-custom-card :nth-child(3) {\n padding: 12px 0px 20px 0px;\n height: 130px;\n }\n\n .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title {\n font-size: 24px;\n font-weight: 500;\n line-height: normal;\n color: rgba(83, 101, 132, 0.65);\n text-shadow: 0 0 0.1px;\n }\n\n .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title {\n font-size: 12px;\n font-weight: 500;\n line-height: normal;\n color: rgba(86, 90, 97, 0.65);\n text-shadow: 0 0 0.1px;\n }\n\n .e-custom-card.e-card .e-card-content {\n overflow: visible;\n width: auto;\n margin: -5px 20px 0 20px;\n word-spacing: 1px;\n }\n\n .avatar-content {\n color: rgba(250, 200, 130, 0.6);\n margin: 0 auto;\n text-align: center;\n color: rgb(94, 94, 94);\n border: none;\n padding: 0;\n font-size: 14px;\n }\n\n .avatar-content {\n margin-bottom: 0;\n }\n\n .sample_container .name {\n margin-top: 10px;\n }\n\n .highcontrast .e-custom-card.e-card .avatar-content {\n color: rgba(255, 255, 255, 0.84);\n }\n\n .highcontrast .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title {\n color: rgba(255, 255, 255, 0.45);\n }\n\n .highcontrast .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title {\n color: rgba(255, 255, 255, 0.84);\n }\n</style>\n</div></body></html>","index.ts":"{{ripple}}\n/**\n * Sample for CSS Basic Layout Badge\n */\n\n \n//\n"}
|
||||
{"index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"col-lg-12 control-section\">\n <div class=\"sample_container\">\n <!-- Card Component -->\n <div class=\"e-card e-custom-card\">\n <div class=\"e-card-header\">\n <!-- xLarge Circle Avatar-->\n <div class=\"e-avatar e-avatar-circle e-avatar-xlarge\">\n <img src=\"//ej2.syncfusion.com/demos/src/avatar/images/pic02.png\" alt=\"profile_pic\">\n </div>\n  \n </div>\n <div class=\"e-card-header\">\n <div class=\"e-card-header-caption center\">\n <div class=\"e-card-header-title name\">Laura Callahan</div>\n <div class=\"e-card-sub-title\">Sales Coordinator</div>\n </div>\n </div>\n <div class=\"e-card-content\">\n <p class=\"avatar-content\"> Laura received a BA in psychology from the University of Washington. She has also completed a course\n in business French. She reads and writes French.</p>\n </div>\n </div>\n </div>\n</div>\n\n\n\n\n<style>\n .sample_container {\n max-width: 300px;\n margin: auto;\n min-height: 400px;\n }\n\n /* Card Customizations */\n\n .e-custom-card {\n position: relative;\n margin-top: 80px;\n overflow: visible;\n border-radius: 15px;\n box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);\n transition: 0.2s;\n border-width: 1px;\n padding: 1px;\n }\n\n .e-custom-card.e-card:hover {\n border-width: 1px;\n padding: 1px;\n }\n\n .e-custom-card :nth-child(2) .e-card-header-title.name {\n margin-top: 20px;\n }\n\n .sample_container p.avatar-content {\n line-height: 20px;\n font-family: inherit;\n }\n\n .e-custom-card .e-card-header {\n text-align: center;\n }\n\n .e-custom-card .e-avatar {\n font-size: 40px;\n position: absolute;\n top: calc(0% - 1.5em);\n left: calc(50% - 1.5em);\n box-shadow: 0 16px 28px -8px rgba(0, 0, 0, .36), 0 4px 15px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .2);\n }\n\n .e-card.e-custom-card :nth-child(3) {\n padding: 12px 0px 20px 0px;\n height: 130px;\n }\n\n .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title {\n font-size: 24px;\n font-weight: 500;\n line-height: normal;\n color: rgba(83, 101, 132, 0.65);\n text-shadow: 0 0 0.1px;\n }\n\n .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title {\n font-size: 12px;\n font-weight: 500;\n line-height: normal;\n color: rgba(86, 90, 97, 0.65);\n text-shadow: 0 0 0.1px;\n }\n\n .e-custom-card.e-card .e-card-content {\n overflow: visible;\n width: auto;\n margin: -5px 20px 0 20px;\n word-spacing: 1px;\n }\n\n .avatar-content {\n color: rgba(250, 200, 130, 0.6);\n margin: 0 auto;\n text-align: center;\n color: rgb(94, 94, 94);\n border: none;\n padding: 0;\n font-size: 14px;\n }\n\n .avatar-content {\n margin-bottom: 0;\n }\n\n .sample_container .name {\n margin-top: 10px;\n }\n\n .highcontrast .e-custom-card.e-card .avatar-content {\n color: rgba(255, 255, 255, 0.84);\n }\n\n .highcontrast .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title {\n color: rgba(255, 255, 255, 0.45);\n }\n\n .highcontrast .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title {\n color: rgba(255, 255, 255, 0.84);\n }\n</style>\n</div></body></html>","index.ts":"{{ripple}}\n/**\n * Sample for CSS Basic Layout Badge\n */\n\n \n//\n"}
|
||||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"col-lg-12 control-section\">\n <div class=\"sample_container avatar-default\">\n <div class=\"avatar-block\">\n <div class=\"e-card e-avatar-showcase\">\n <div class=\"e-card-content\">\n <!-- xSmall Avatar-->\n <div class=\"e-avatar e-avatar-xsmall image\"></div>\n <!-- Small Avatar-->\n <div class=\"e-avatar e-avatar-small image\"></div>\n <!-- Avatar-->\n <div class=\"e-avatar image\"></div>\n <!-- Large Avatar-->\n <div class=\"e-avatar e-avatar-large image\"></div>\n <!-- xLarge Avatar-->\n <div class=\"e-avatar e-avatar-xlarge image\"></div>\n </div>\n <div class=\"e-card-content\">\n <div>Default</div>\n </div>\n </div>\n </div>\n <div class=\"circleAvatar avatar-block\">\n <div class=\"e-card e-avatar-showcase\">\n <div class=\"e-card-content\">\n <!-- xSmall Circle Avatar-->\n <div class=\"e-avatar e-avatar-xsmall e-avatar-circle image\"></div>\n <!-- Small Circle Avatar-->\n <div class=\"e-avatar e-avatar-small e-avatar-circle image\"></div>\n <!-- Circle Avatar-->\n <div class=\"e-avatar e-avatar-circle image\"></div>\n <!-- Large Circle Avatar-->\n <div class=\"e-avatar e-avatar-large e-avatar-circle image\"></div>\n <!-- xLarge Circle Avatar-->\n <div class=\"e-avatar e-avatar-xlarge e-avatar-circle image\"></div>\n </div>\n <div class=\"e-card-content\">\n <div>Circle</div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n\n\n<style>\n .control-section {\n overflow: auto;\n }\n\n /* Media Quries for various devices */\n\n @media only screen and (max-width: 965px) {\n .sample_container.avatar-default {\n max-width: 332px;\n margin: auto;\n margin-top: 0;\n }\n .circleAvatar {\n margin-top: 15px;\n }\n .e-avatar-showcase.e-card {\n width: 300px;\n }\n }\n\n @media only screen and (min-width: 965px) {\n .sample_container.avatar-default {\n max-width: 825px;\n margin: auto;\n margin-top: 70px;\n }\n .e-avatar-showcase.e-card {\n width: 400px;\n }\n }\n\n .sample_container.avatar-default .avatar-block {\n display: inline-block;\n vertical-align: top;\n }\n\n /* Assinging image for avatar in 'background-image' property */\n\n .e-avatar.image {\n background-image: url(//npmci.syncfusion.com/production/demos/src/avatar/images/pic01.png);\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n }\n\n /* Card Customization */\n\n .e-avatar-showcase.e-card {\n height: 140px;\n padding: 5px;\n margin: 5px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n border-radius: 8px;\n }\n\n .e-avatar-showcase.e-card .e-card-header .e-card-header-title {\n align-self: center;\n font-size: 18px;\n letter-spacing: 1px;\n text-shadow: #eaeaea 1px 1px 2px;\n }\n\n .e-avatar-showcase.e-card .e-card-header .e-card-sub-title {\n color: rgba(0, 0, 0, 0.75);\n white-space: pre-line;\n font-size: 14px;\n text-shadow: #eaeaea 1px 1px 2px;\n }\n\n .e-avatar-showcase.e-card .e-card-header .e-card-sub-title p {\n margin: 0;\n }\n\n .e-avatar-showcase.e-card .e-card-content {\n align-self: center;\n padding: 10px 0 10px 0;\n overflow: visible;\n }\n\n .bootstrap4 .e-avatar-showcase.e-card {\n box-shadow: none;\n }\n\n</style>\n</div></body></html>","index.ts":"{{ripple}}\n/**\n * Sample for CSS Basic Layout Badge\n */\n\n \n//\n"}
|
||||
{"index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"col-lg-12 control-section\">\n <div class=\"sample_container avatar-default\">\n <div class=\"avatar-block\">\n <div class=\"e-card e-avatar-showcase\">\n <div class=\"e-card-content\">\n <!-- xSmall Avatar-->\n <div class=\"e-avatar e-avatar-xsmall image\"></div>\n <!-- Small Avatar-->\n <div class=\"e-avatar e-avatar-small image\"></div>\n <!-- Avatar-->\n <div class=\"e-avatar image\"></div>\n <!-- Large Avatar-->\n <div class=\"e-avatar e-avatar-large image\"></div>\n <!-- xLarge Avatar-->\n <div class=\"e-avatar e-avatar-xlarge image\"></div>\n </div>\n <div class=\"e-card-content\">\n <div>Default</div>\n </div>\n </div>\n </div>\n <div class=\"circleAvatar avatar-block\">\n <div class=\"e-card e-avatar-showcase\">\n <div class=\"e-card-content\">\n <!-- xSmall Circle Avatar-->\n <div class=\"e-avatar e-avatar-xsmall e-avatar-circle image\"></div>\n <!-- Small Circle Avatar-->\n <div class=\"e-avatar e-avatar-small e-avatar-circle image\"></div>\n <!-- Circle Avatar-->\n <div class=\"e-avatar e-avatar-circle image\"></div>\n <!-- Large Circle Avatar-->\n <div class=\"e-avatar e-avatar-large e-avatar-circle image\"></div>\n <!-- xLarge Circle Avatar-->\n <div class=\"e-avatar e-avatar-xlarge e-avatar-circle image\"></div>\n </div>\n <div class=\"e-card-content\">\n <div>Circle</div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n\n\n<style>\n .control-section {\n overflow: auto;\n }\n\n /* Media Quries for various devices */\n\n @media only screen and (max-width: 965px) {\n .sample_container.avatar-default {\n max-width: 332px;\n margin: auto;\n margin-top: 0;\n }\n .circleAvatar {\n margin-top: 15px;\n }\n .e-avatar-showcase.e-card {\n width: 300px;\n }\n }\n\n @media only screen and (min-width: 965px) {\n .sample_container.avatar-default {\n max-width: 825px;\n margin: auto;\n margin-top: 70px;\n }\n .e-avatar-showcase.e-card {\n width: 400px;\n }\n }\n\n .sample_container.avatar-default .avatar-block {\n display: inline-block;\n vertical-align: top;\n }\n\n /* Assinging image for avatar in 'background-image' property */\n\n .e-avatar.image {\n background-image: url(//ej2.syncfusion.com/demos/src/avatar/images/pic01.png);\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n }\n\n /* Card Customization */\n\n .e-avatar-showcase.e-card {\n height: 140px;\n padding: 5px;\n margin: 5px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n border-radius: 8px;\n }\n\n .e-avatar-showcase.e-card .e-card-header .e-card-header-title {\n align-self: center;\n font-size: 18px;\n letter-spacing: 1px;\n text-shadow: #eaeaea 1px 1px 2px;\n }\n\n .e-avatar-showcase.e-card .e-card-header .e-card-sub-title {\n color: rgba(0, 0, 0, 0.75);\n white-space: pre-line;\n font-size: 14px;\n text-shadow: #eaeaea 1px 1px 2px;\n }\n\n .e-avatar-showcase.e-card .e-card-header .e-card-sub-title p {\n margin: 0;\n }\n\n .e-avatar-showcase.e-card .e-card-content {\n align-self: center;\n padding: 10px 0 10px 0;\n overflow: visible;\n }\n\n .bootstrap4 .e-avatar-showcase.e-card {\n box-shadow: none;\n }\n\n</style>\n</div></body></html>","index.ts":"{{ripple}}\n/**\n * Sample for CSS Basic Layout Badge\n */\n\n \n//\n"}
|
||||
|
|
@ -1 +1 @@
|
|||
{"datasource.ts":"/**\n * Sample for CSS Avatar listview\n */\n\n // Listview datasource with avatar and image source fields\n export let listData: { [key: string]: Object; }[] = [\n { id: 's_01', text: 'Robert', avatar: '', pic: 'pic04' },\n { id: 's_02', text: 'Nancy', avatar: 'N', pic: '' },\n { id: 's_05', text: 'John', pic: 'pic01', avatar: '' },\n { id: 's_03', text: 'Andrew', avatar: 'A', pic: '' },\n { id: 's_06', text: 'Margaret', pic: 'pic02', avatar: '' },\n { id: 's_07', text: 'Steven', pic: 'pic03', avatar: '' },\n { id: 's_08', text: 'Michael', avatar: 'M', pic: '' }\n ];","index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"col-lg-12 control-section\">\n <!-- Listview element -->\n <div id=\"letterAvatarList\"></div>\n</div>\n\n\n\n\n<style>\n .control-section {\n overflow: auto;\n }\n\n /* Listview Customization */\n\n #letterAvatarList {\n max-width: 350px;\n margin: auto;\n border: 1px solid #dddddd;\n border-radius: 3px;\n }\n\n #letterAvatarList .listWrapper {\n width: inherit;\n height: inherit;\n position: relative;\n }\n\n #letterAvatarList .e-list-header {\n height: 54px;\n }\n\n .material #letterAvatarList .e-list-header .e-text {\n line-height: 22px;\n }\n\n .fabric #letterAvatarList .e-list-header .e-text {\n line-height: 22px;\n }\n\n .bootstrap #letterAvatarList .e-list-header .e-text {\n line-height: 13px;\n }\n\n .highcontrast #letterAvatarList .e-list-header .e-text {\n line-height: 20px;\n }\n\n #letterAvatarList .e-list-item {\n cursor: pointer;\n height: 50px;\n line-height: 44px;\n border: 0;\n }\n\n /* Badge Positioning */\n\n #letterAvatarList .e-badge {\n margin-top: 12px;\n }\n\n #letterAvatarList .listWrapper .list-text {\n width: 60%;\n display: inline-block;\n vertical-align: middle;\n margin: 0 50px;\n }\n\n /* Avatar Positioning */\n\n #letterAvatarList .listWrapper .e-avatar {\n position: absolute;\n top: calc(100% - 40px);\n font-size: 10px;\n left: 5px;\n }\n\n /* Avatar Background Customization */\n\n #letterAvatarList .e-list-item:nth-child(1) .e-avatar {\n background-color: #039BE5;\n }\n\n #letterAvatarList .e-list-item:nth-child(3) .e-avatar {\n background-color: #E91E63;\n }\n\n #letterAvatarList .e-list-item:nth-child(5) .e-avatar {\n background-color: #009688;\n }\n\n /* Avatar images using 'background-image' property */\n\n .pic01 {\n background-image: url('//npmci.syncfusion.com/production/demos/src/avatar/images/pic01.png');\n }\n\n .pic02 {\n background-image: url('//npmci.syncfusion.com/production/demos/src/avatar/images/pic02.png');\n }\n\n .pic03 {\n background-image: url('//npmci.syncfusion.com/production/demos/src/avatar/images/pic03.png');\n }\n\n .pic04 {\n background-image: url('//npmci.syncfusion.com/production/demos/src/avatar/images/pic04.png');\n }\n\n .bootstrap4 #letterAvatarList .e-list-item {\n line-height: 30px;\n padding: 8px 16px 8px 16px;\n }\n\n .bootstrap4 #letterAvatarList .e-list-item .e-avatar {\n top: calc(100% - 48px);\n }\n\n</style>\n</div></body></html>","index.ts":"{{ripple}}\n/**\n * Sample for CSS Avatar listview\n */\nimport { ListView } from '@syncfusion/ej2-lists';\nimport { listData } from './datasource';\n\n \n\n let letterAvatarList: ListView = new ListView({\n // Bind listview datasource\n dataSource: listData,\n // Assign header title\n headerTitle: 'Contacts',\n // Enable header title\n showHeader: true,\n // Assign list-item template\n template: '<div class=\"listWrapper\">' +\n '${if(avatar!==\"\")}' +\n '<span class=\"e-avatar e-avatar-small e-avatar-circle\">${avatar}</span>' +\n '${else}' +\n '<span class=\"${pic} e-avatar e-avatar-small e-avatar-circle\"> </span>' +\n '${/if}' +\n '<span class=\"list-text\">' +\n '${text} </span> </div>',\n // Assign sorting order\n sortOrder: 'Ascending'\n });\n letterAvatarList.appendTo('#letterAvatarList');\n"}
|
||||
{"datasource.ts":"/**\n * Sample for CSS Avatar listview\n */\n\n // Listview datasource with avatar and image source fields\n export let listData: { [key: string]: Object; }[] = [\n { id: 's_01', text: 'Robert', avatar: '', pic: 'pic04' },\n { id: 's_02', text: 'Nancy', avatar: 'N', pic: '' },\n { id: 's_05', text: 'John', pic: 'pic01', avatar: '' },\n { id: 's_03', text: 'Andrew', avatar: 'A', pic: '' },\n { id: 's_06', text: 'Margaret', pic: 'pic02', avatar: '' },\n { id: 's_07', text: 'Steven', pic: 'pic03', avatar: '' },\n { id: 's_08', text: 'Michael', avatar: 'M', pic: '' }\n ];","index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"col-lg-12 control-section\">\n <!-- Listview element -->\n <div id=\"letterAvatarList\"></div>\n</div>\n\n\n\n\n<style>\n .control-section {\n overflow: auto;\n }\n\n /* Listview Customization */\n\n #letterAvatarList {\n max-width: 350px;\n margin: auto;\n border: 1px solid #dddddd;\n border-radius: 3px;\n }\n\n #letterAvatarList .listWrapper {\n width: inherit;\n height: inherit;\n position: relative;\n }\n\n #letterAvatarList .e-list-header {\n height: 54px;\n }\n\n .material #letterAvatarList .e-list-header .e-text {\n line-height: 22px;\n }\n\n .fabric #letterAvatarList .e-list-header .e-text {\n line-height: 22px;\n }\n\n .bootstrap #letterAvatarList .e-list-header .e-text {\n line-height: 13px;\n }\n\n .highcontrast #letterAvatarList .e-list-header .e-text {\n line-height: 20px;\n }\n\n #letterAvatarList .e-list-item {\n cursor: pointer;\n height: 50px;\n line-height: 44px;\n border: 0;\n }\n\n /* Badge Positioning */\n\n #letterAvatarList .e-badge {\n margin-top: 12px;\n }\n\n #letterAvatarList .listWrapper .list-text {\n width: 60%;\n display: inline-block;\n vertical-align: middle;\n margin: 0 50px;\n }\n\n /* Avatar Positioning */\n\n #letterAvatarList .listWrapper .e-avatar {\n position: absolute;\n top: calc(100% - 40px);\n font-size: 10px;\n left: 5px;\n }\n\n /* Avatar Background Customization */\n\n #letterAvatarList .e-list-item:nth-child(1) .e-avatar {\n background-color: #039BE5;\n }\n\n #letterAvatarList .e-list-item:nth-child(3) .e-avatar {\n background-color: #E91E63;\n }\n\n #letterAvatarList .e-list-item:nth-child(5) .e-avatar {\n background-color: #009688;\n }\n\n /* Avatar images using 'background-image' property */\n\n .pic01 {\n background-image: url('//ej2.syncfusion.com/demos/src/avatar/images/pic01.png');\n }\n\n .pic02 {\n background-image: url('//ej2.syncfusion.com/demos/src/avatar/images/pic02.png');\n }\n\n .pic03 {\n background-image: url('//ej2.syncfusion.com/demos/src/avatar/images/pic03.png');\n }\n\n .pic04 {\n background-image: url('//ej2.syncfusion.com/demos/src/avatar/images/pic04.png');\n }\n\n .bootstrap4 #letterAvatarList .e-list-item {\n line-height: 30px;\n padding: 8px 16px 8px 16px;\n }\n\n .bootstrap4 #letterAvatarList .e-list-item .e-avatar {\n top: calc(100% - 48px);\n }\n\n</style>\n</div></body></html>","index.ts":"{{ripple}}\n/**\n * Sample for CSS Avatar listview\n */\nimport { ListView } from '@syncfusion/ej2-lists';\nimport { listData } from './datasource';\n\n \n\n let letterAvatarList: ListView = new ListView({\n // Bind listview datasource\n dataSource: listData,\n // Assign header title\n headerTitle: 'Contacts',\n // Enable header title\n showHeader: true,\n // Assign list-item template\n template: '<div class=\"listWrapper\">' +\n '${if(avatar!==\"\")}' +\n '<span class=\"e-avatar e-avatar-small e-avatar-circle\">${avatar}</span>' +\n '${else}' +\n '<span class=\"${pic} e-avatar e-avatar-small e-avatar-circle\"> </span>' +\n '${/if}' +\n '<span class=\"list-text\">' +\n '${text} </span> </div>',\n // Assign sorting order\n sortOrder: 'Ascending'\n });\n letterAvatarList.appendTo('#letterAvatarList');\n"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -49,6 +49,21 @@
|
|||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.e-rtl .list_svg {
|
||||
margin-left: 16px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.listWrapper .e-badge {
|
||||
float: right;
|
||||
margin-top: 16px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.e-rtl .listWrapper .e-badge {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.list_text {
|
||||
width: 60%;
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ import { dataSource } from './datasource';
|
|||
// Assign template
|
||||
template: '<div class="listWrapper" style="width: inherit;height: inherit;"><span class="${icons} list_svg"> </span>' +
|
||||
'<span class="list_text">${text} </span>' +
|
||||
'<span class="${badge}" style="float: right;margin-top: 16px;font-size: 12px;">${messages}</span></div>',
|
||||
'<span class="${badge}">${messages}</span></div>',
|
||||
|
||||
// Map fields
|
||||
fields: { groupBy: 'type' },
|
||||
|
|
|
|||
|
|
@ -56,12 +56,12 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample illustrates a customization of feature bar and comparative bar type in terms of color and width.
|
||||
This sample illustrates a customization of feature bar and comparative bar type in terms of color and width
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
Tooltip is enabled in this example, to see the tooltip in action, hover a feature bar or comparative bar on the bullet chart
|
||||
Tooltip is enabled in this example, to see the tooltip in action, hover a feature bar or comparative bar on the bullet chart.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"col-lg-12 control-section card-control-section basic_card_layout\">\n <div class=\"e-card-resize-container\">\n <div class=\"row\">\n <div class=\"row card-layout\">\n <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n <!-- Basic Card Layout -->\n <div tabindex=\"0\" class=\"e-card\" id=\"basic_card\">\n <div class=\"e-card-header\">\n <div class=\"e-card-header-caption\">\n <div class=\"e-card-header-title\">Debunking Five Data Science Myths</div>\n <div class=\"e-card-sub-title\">By John Doe | Jan 20, 2018 </div>\n </div>\n </div>\n <div class=\"e-card-content\">\n Tech evangelists are currently pounding their pulpits about all things AI, machine learning, analytics—anything that sounds\n like the future and probably involves lots of numbers. Many of these topics can be grouped under\n the intimidating term data science.\n </div>\n <div class=\"e-card-actions\">\n <button class=\"e-btn e-outline e-primary\">\n Read More\n </button>\n </div>\n </div>\n </div>\n <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n <!-- Weather Card Layout -->\n <div tabindex=\"0\" class=\"e-card\" id=\"weather_card\">\n <div class=\"e-card-header\">\n <div class=\"e-card-header-caption\">\n <div class=\"e-card-header-title\">Today</div>\n <div class=\"e-card-sub-title\"> New York - Scattered Showers.</div>\n </div>\n </div>\n <div class=\"e-card-header weather_report\">\n <div class=\"e-card-header-image\"></div>\n <div class=\"e-card-header-caption\">\n <div class=\"e-card-header-title\">1º / -4º</div>\n <div class=\"e-card-sub-title\">Chance for snow: 100%</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n<style>\n /* Weather Card Layout Customization */\n\n .card-control-section.basic_card_layout #weather_card.e-card {\n background-image: url('//npmci.syncfusion.com/production/demos/src/card/images/weather.png');\n }\n\n .card-control-section.basic_card_layout #weather_card.e-card .e-card-header-caption .e-card-header-title,\n .card-control-section.basic_card_layout #weather_card.e-card .e-card-header-caption .e-card-sub-title {\n color: white;\n }\n\n .highcontrast .card-control-section.basic_card_layout #weather_card.e-card .e-card-header.weather_report .e-card-header-image {\n border: none;\n }\n\n .card-control-section.basic_card_layout #weather_card.e-card .weather_report .e-card-header-caption {\n text-align: right;\n }\n\n .card-control-section.basic_card_layout #weather_card.e-card .e-card-header.weather_report .e-card-header-image {\n background-image: url('//npmci.syncfusion.com/production/demos/src/card/images/rainy.svg');\n }\n\n .card-control-section.basic_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\n width: 100%;\n padding: 10px;\n }\n\n .card-control-section.basic_card_layout .card-layout {\n margin: auto;\n max-width: 400px;\n }\n\n @media (min-width: 870px) {\n .card-control-section.basic_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\n width: 50%;\n }\n\n .card-control-section.basic_card_layout .card-layout {\n max-width: 870px;\n }\n }\n</style>\n</div></body></html>","index.ts":"{{ripple}}\n/**\n * Sample for CSS Basic Layout Cards.\n */\n\n \n //\n\n"}
|
||||
{"index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"col-lg-12 control-section card-control-section basic_card_layout\">\n <div class=\"e-card-resize-container\">\n <div class=\"row\">\n <div class=\"row card-layout\">\n <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n <!-- Basic Card Layout -->\n <div tabindex=\"0\" class=\"e-card\" id=\"basic_card\">\n <div class=\"e-card-header\">\n <div class=\"e-card-header-caption\">\n <div class=\"e-card-header-title\">Debunking Five Data Science Myths</div>\n <div class=\"e-card-sub-title\">By John Doe | Jan 20, 2018 </div>\n </div>\n </div>\n <div class=\"e-card-content\">\n Tech evangelists are currently pounding their pulpits about all things AI, machine learning, analytics—anything that sounds\n like the future and probably involves lots of numbers. Many of these topics can be grouped under\n the intimidating term data science.\n </div>\n <div class=\"e-card-actions\">\n <button class=\"e-btn e-outline e-primary\">\n Read More\n </button>\n </div>\n </div>\n </div>\n <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n <!-- Weather Card Layout -->\n <div tabindex=\"0\" class=\"e-card\" id=\"weather_card\">\n <div class=\"e-card-header\">\n <div class=\"e-card-header-caption\">\n <div class=\"e-card-header-title\">Today</div>\n <div class=\"e-card-sub-title\"> New York - Scattered Showers.</div>\n </div>\n </div>\n <div class=\"e-card-header weather_report\">\n <div class=\"e-card-header-image\"></div>\n <div class=\"e-card-header-caption\">\n <div class=\"e-card-header-title\">1º / -4º</div>\n <div class=\"e-card-sub-title\">Chance for snow: 100%</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n<style>\n /* Weather Card Layout Customization */\n\n .card-control-section.basic_card_layout #weather_card.e-card {\n background-image: url('//ej2.syncfusion.com/demos/src/card/images/weather.png');\n }\n\n .card-control-section.basic_card_layout #weather_card.e-card .e-card-header-caption .e-card-header-title,\n .card-control-section.basic_card_layout #weather_card.e-card .e-card-header-caption .e-card-sub-title {\n color: white;\n }\n\n .highcontrast .card-control-section.basic_card_layout #weather_card.e-card .e-card-header.weather_report .e-card-header-image {\n border: none;\n }\n\n .card-control-section.basic_card_layout #weather_card.e-card .weather_report .e-card-header-caption {\n text-align: right;\n }\n\n .card-control-section.basic_card_layout #weather_card.e-card .e-card-header.weather_report .e-card-header-image {\n background-image: url('//ej2.syncfusion.com/demos/src/card/images/rainy.svg');\n }\n\n .card-control-section.basic_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\n width: 100%;\n padding: 10px;\n }\n\n .card-control-section.basic_card_layout .card-layout {\n margin: auto;\n max-width: 400px;\n }\n\n @media (min-width: 870px) {\n .card-control-section.basic_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\n width: 50%;\n }\n\n .card-control-section.basic_card_layout .card-layout {\n max-width: 870px;\n }\n }\n</style>\n</div></body></html>","index.ts":"{{ripple}}\n/**\n * Sample for CSS Basic Layout Cards.\n */\n\n \n //\n\n"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -198,6 +198,20 @@
|
|||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"url": "stacked-step-area",
|
||||
"name": "Stacked Step Area",
|
||||
"description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the stacking step area series.",
|
||||
"category": "Area Charts",
|
||||
"type": "new",
|
||||
"api": {
|
||||
"Chart": [
|
||||
"primaryXAxis",
|
||||
"primaryYAxis",
|
||||
"series"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"url": "stacked-area-100",
|
||||
"name": "100% Stacked Area",
|
||||
|
|
@ -839,7 +853,6 @@
|
|||
"name": "Smart Labels",
|
||||
"description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to arrange the labels smartly without overlapping with each other.",
|
||||
"category": "Accumulation Charts",
|
||||
"type": "update",
|
||||
"api": {
|
||||
"AccumulationChart": [
|
||||
"series",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
<div class="control-section">
|
||||
<div id="container" align="center"></div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample visualizes the data about electricity production using stacked stepped area chart.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure the Stacked StepArea type charts. This series forms the step line progress, by connecting points through vertical and horizontal lines with area filled.
|
||||
You can use <code>dashArray</code>, <code>width</code>, <code>fill</code> properties to customize the area. <code>marker</code> and <code>dataLabel</code> are used to represent individual data and its value.
|
||||
</p>
|
||||
<br>
|
||||
<p style="font-weight: 500">Injecting Module</p>
|
||||
<p>
|
||||
Chart component features are segregated into individual feature-wise modules. To use step area series, we need to inject
|
||||
<code>StackingStepAreaSeries</code> module using <code>Chart.Inject(StackingStepAreaSeries)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the Stacked StepArea series can be found in this
|
||||
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
#control-container {
|
||||
padding: 0px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { Chart, StackingStepAreaSeries, Legend, ILoadedEventArgs, ChartTheme } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(StackingStepAreaSeries, Legend);
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
|
||||
/**
|
||||
* Sample for StepArea Series
|
||||
*/
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let chart: Chart = new Chart({
|
||||
primaryXAxis: {
|
||||
valueType: 'Double',
|
||||
majorGridLines: { width: 0 },
|
||||
edgeLabelPlacement: 'Shift',
|
||||
},
|
||||
primaryYAxis: {
|
||||
title: 'Production (Billion as kWh)',
|
||||
valueType: 'Double',
|
||||
labelFormat: '{value}B',
|
||||
lineStyle: { width: 0 },
|
||||
majorTickLines: { width: 0 }
|
||||
},
|
||||
chartArea: {
|
||||
border: {
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'StackingStepArea',
|
||||
dataSource: [{ x: 2000, y: 416 }, { x: 2001, y: 490 }, { x: 2002, y: 470 }, { x: 2003, y: 500 },
|
||||
{ x: 2004, y: 449 }, { x: 2005, y: 470 }, { x: 2006, y: 437 }, { x: 2007, y: 458 },
|
||||
{ x: 2008, y: 500 }, { x: 2009, y: 473 }, { x: 2010, y: 520 }, { x: 2011, y: 509 }],
|
||||
name: 'Renewable',
|
||||
xName: 'x',
|
||||
yName: 'y',
|
||||
fill: '#56CCF2',
|
||||
opacity: 0.5
|
||||
},
|
||||
{
|
||||
type: 'StackingStepArea',
|
||||
dataSource: [{ x: 2000, y: 180 }, { x: 2001, y: 240 }, { x: 2002, y: 370 }, { x: 2003, y: 200 },
|
||||
{ x: 2004, y: 229 }, { x: 2005, y: 210 }, { x: 2006, y: 337 }, { x: 2007, y: 258 },
|
||||
{ x: 2008, y: 300 }, { x: 2009, y: 173 }, { x: 2010, y: 220 }, { x: 2011, y: 309 }],
|
||||
name: 'Non-Renewable',
|
||||
xName: 'x',
|
||||
yName: 'y',
|
||||
fill: '#2F80ED',
|
||||
opacity: 0.5
|
||||
},
|
||||
],
|
||||
//Initializing Chart title
|
||||
title: 'Electricity- Production',
|
||||
width: Browser.isDevice ? '100%' : '60%',
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.chart.theme = <ChartTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
|
|
@ -2,7 +2,6 @@
|
|||
"name": "Circular Gauge",
|
||||
"directory": "circular-gauge",
|
||||
"category": "Data Visualization",
|
||||
"type": "update",
|
||||
"ftName": "circulargauge",
|
||||
"samples": [
|
||||
{
|
||||
|
|
@ -60,7 +59,6 @@
|
|||
{
|
||||
"url": "gradient-color",
|
||||
"name": "Gradient Color",
|
||||
"type": "new",
|
||||
"category": "Circular Gauge"
|
||||
},
|
||||
{
|
||||
|
|
@ -108,7 +106,6 @@
|
|||
{
|
||||
"url": "export",
|
||||
"name": "Print & Export",
|
||||
"type": "update",
|
||||
"category": "Export",
|
||||
"description": "This demo for Essential JS2 Circular Gauge control demonstrates the export and print methode of circular gauge."
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1105,7 +1105,9 @@ function controlSelect(arg: any): void {
|
|||
toggleLeftPane();
|
||||
}
|
||||
window.hashString = '#/' + theme + path;
|
||||
setTimeout(() => { location.hash = '#/' + theme + path; }, 600);
|
||||
setTimeout(() => {
|
||||
location.hash = '#/' + theme + path;
|
||||
}, 600);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -177,6 +177,10 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
#dockSidebar.e-sidebar .content-area{
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.e-icons::before {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -67,20 +67,20 @@ function getConnectorDefaults(connector: ConnectorModel): ConnectorModel {
|
|||
let gridlines: GridlinesModel = { lineColor: '#e0e0e0', lineIntervals: interval };
|
||||
|
||||
let port: PointPortModel[] = [
|
||||
{ id:'Port1', offset: { x: 0, y: 0.5 }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Draw },
|
||||
{ id:'Port2',offset: { x: 0.5, y: 0 }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Draw },
|
||||
{ id:'Port3',offset: { x: 1, y: 0.5 }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Draw },
|
||||
{ id:'Port4',offset: { x: 0.5, y: 1 }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Draw }
|
||||
{ id:'Port1', offset: { x: 0, y: 0.5 }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Default | PortConstraints.Draw },
|
||||
{ id:'Port2',offset: { x: 0.5, y: 0 }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Default | PortConstraints.Draw },
|
||||
{ id:'Port3',offset: { x: 1, y: 0.5 }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Default | PortConstraints.Draw },
|
||||
{ id:'Port4',offset: { x: 0.5, y: 1 }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Default | PortConstraints.Draw }
|
||||
]
|
||||
let nodes: NodeModel[] = [
|
||||
{
|
||||
id: 'swimlane',
|
||||
shape: {
|
||||
type: 'SwimLane',
|
||||
orientation: 'Horizontal',
|
||||
header: {
|
||||
annotation: { content: 'SALES PROCESS FLOW CHART', style: { fill: 'transparent' } },
|
||||
height: 50, style: { fontSize: 11 },
|
||||
orientation: 'Horizontal',
|
||||
},
|
||||
lanes: [
|
||||
{
|
||||
|
|
@ -196,7 +196,7 @@ function getConnectorDefaults(connector: ConnectorModel): ConnectorModel {
|
|||
phases: [
|
||||
{
|
||||
id: 'phase1', offset: 170,
|
||||
header: { content: { content: 'Phase' } }
|
||||
header: { annotation: { content: 'Phase' } }
|
||||
},
|
||||
],
|
||||
phaseSize: 20,
|
||||
|
|
|
|||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,291 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
|
||||
import { TitleBar } from './title-bar';
|
||||
import { ListView, SelectEventArgs } from '@syncfusion/ej2-lists';
|
||||
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
|
||||
import * as data from './data-mail-merge.json';
|
||||
import { Dialog, DialogUtility } from '@syncfusion/ej2-popups';
|
||||
/**
|
||||
* Default document editor sample
|
||||
*/
|
||||
// tslint:disable:max-func-body-length
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let hostUrl: string = 'https://ej2services.syncfusion.com/production/web-services/';
|
||||
let container: DocumentEditorContainer = new DocumentEditorContainer({enableToolbar: true, height: '590px',
|
||||
toolbarItems: [
|
||||
'New', 'Open', 'Separator', 'Undo',
|
||||
'Redo',
|
||||
'Separator',
|
||||
'Image',
|
||||
'Table',
|
||||
'Hyperlink',
|
||||
'Bookmark',
|
||||
'TableOfContents',
|
||||
'Separator',
|
||||
'Header',
|
||||
'Footer',
|
||||
'PageSetup',
|
||||
'PageNumber',
|
||||
'Break',
|
||||
'Separator',
|
||||
'Find',
|
||||
'Separator',
|
||||
'Comments',
|
||||
'TrackChanges',
|
||||
'Separator',
|
||||
'LocalClipboard',
|
||||
'RestrictEditing',
|
||||
'Separator',
|
||||
'FormFields',
|
||||
'UpdateFields',
|
||||
'Separator',
|
||||
{
|
||||
prefixIcon: 'sf-icon-InsertMergeField',
|
||||
tooltipText: 'Insert Field',
|
||||
text: onWrapText('Insert Field'),
|
||||
id: 'InsertField'
|
||||
},
|
||||
{
|
||||
prefixIcon: 'sf-icon-FinishMerge',
|
||||
tooltipText: 'Merge Document',
|
||||
text: onWrapText('Merge Document'),
|
||||
id: 'MergeDocument'
|
||||
},
|
||||
]
|
||||
});
|
||||
DocumentEditorContainer.Inject(Toolbar);
|
||||
container.serviceUrl = hostUrl + 'api/documenteditor/';
|
||||
container.appendTo('#container');
|
||||
let titleBar: TitleBar = new TitleBar(document.getElementById('documenteditor_titlebar'), container.documentEditor, true);
|
||||
container.documentEditor.open(JSON.stringify((<any>data)));
|
||||
container.documentEditor.documentName = 'Mail Merge';
|
||||
titleBar.updateDocumentTitle();
|
||||
container.documentChange = (): void => {
|
||||
titleBar.updateDocumentTitle();
|
||||
container.documentEditor.focusIn();
|
||||
};
|
||||
function onWrapText(text: string): string {
|
||||
let content: string = '';
|
||||
let index: number = text.lastIndexOf(' ');
|
||||
content = text.slice(0, index);
|
||||
text.slice(index);
|
||||
content += '<div class="e-de-text-wrap">' + text.slice(index) + '</div>';
|
||||
return content;
|
||||
}
|
||||
container.toolbarClick = (args: ClickEventArgs): void => {
|
||||
switch (args.item.id) {
|
||||
case 'MergeDocument':
|
||||
mergeDocument();
|
||||
break;
|
||||
case 'InsertField':
|
||||
showInsertFielddialog();
|
||||
break;
|
||||
}
|
||||
};
|
||||
let waitingPopUp: HTMLElement;
|
||||
let inActiveDiv: HTMLElement;
|
||||
let listData: { [key: string]: Object }[] = [
|
||||
{
|
||||
text: 'ProductName',
|
||||
category: 'Drag or click the field to insert.',
|
||||
htmlAttributes: { draggable: true }
|
||||
},
|
||||
{
|
||||
text: 'ShipName',
|
||||
category: 'Drag or click the field to insert.',
|
||||
htmlAttributes: { draggable: true }
|
||||
},
|
||||
{
|
||||
text: 'CustomerID',
|
||||
category: 'Drag or click the field to insert.',
|
||||
htmlAttributes: { draggable: true }
|
||||
},
|
||||
{
|
||||
text: 'Quantity',
|
||||
category: 'Drag or click the field to insert.',
|
||||
htmlAttributes: { draggable: true }
|
||||
},
|
||||
{
|
||||
text: 'UnitPrice',
|
||||
category: 'Drag or click the field to insert.',
|
||||
htmlAttributes: { draggable: true }
|
||||
},
|
||||
{
|
||||
text: 'Discount',
|
||||
category: 'Drag or click the field to insert.',
|
||||
htmlAttributes: { draggable: true }
|
||||
},
|
||||
{
|
||||
text: 'ShipAddress',
|
||||
category: 'Drag or click the field to insert.',
|
||||
htmlAttributes: { draggable: true }
|
||||
},
|
||||
{
|
||||
text: 'ShipCity',
|
||||
category: 'Drag or click the field to insert.',
|
||||
htmlAttributes: { draggable: true }
|
||||
},
|
||||
{
|
||||
text: 'ShipCountry',
|
||||
category: 'Drag or click the field to insert.',
|
||||
htmlAttributes: { draggable: true }
|
||||
},
|
||||
{
|
||||
text: 'OrderId',
|
||||
category: 'Drag or click the field to insert.',
|
||||
htmlAttributes: { draggable: true }
|
||||
},
|
||||
{
|
||||
text: 'OrderDate',
|
||||
category: 'Drag or click the field to insert.',
|
||||
htmlAttributes: { draggable: true }
|
||||
}
|
||||
];
|
||||
let listDivElement: HTMLElement = document.getElementById('listview');
|
||||
let listView: ListView = new ListView({
|
||||
dataSource: listData,
|
||||
fields: { tooltip: 'category' },
|
||||
select: onselect
|
||||
});
|
||||
listView.appendTo(listDivElement);
|
||||
document.getElementById('listview').addEventListener('dragstart', (event: any): void => {
|
||||
event.dataTransfer.setData('Text', event.target.innerText);
|
||||
event.target.classList.add('de-drag-target');
|
||||
});
|
||||
function onselect(args: SelectEventArgs): void {
|
||||
let fieldName: any = args.text;
|
||||
listView.selectItem(undefined);
|
||||
insertField(fieldName);
|
||||
}
|
||||
function insertField(fieldName: any): void {
|
||||
let fileName: any = fieldName.replace(/\n/g, '').replace(/\r/g, '').replace(/\r\n/g, '');
|
||||
let fieldCode: any = 'MERGEFIELD ' + fileName + ' \\* MERGEFORMAT ';
|
||||
container.documentEditor.editor.insertField(fieldCode, '«' + fieldName + '»');
|
||||
container.documentEditor.focusIn();
|
||||
}
|
||||
|
||||
// Prevent default drag over for document editor element
|
||||
document.getElementById('container').addEventListener('dragover', (event: any): void => {
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
// Drop Event for document editor element
|
||||
document.getElementById('container').addEventListener('drop', (e: any) => {
|
||||
let text: string = e.dataTransfer.getData('Text');
|
||||
container.documentEditor.selection.select({ x: e.offsetX, y: e.offsetY, extend: false });
|
||||
insertField(text);
|
||||
});
|
||||
|
||||
document.addEventListener('dragend', (event: any) => {
|
||||
if (event.target.classList.contains('de-drag-target')) {
|
||||
event.target.classList.remove('de-drag-target');
|
||||
}
|
||||
});
|
||||
function showInsertFielddialog(): void {
|
||||
let instance: any = this;
|
||||
if (document.getElementById('insert_merge_field') === null || document.getElementById('insert_merge_field') === undefined) {
|
||||
let fieldcontainer: any = document.createElement('div');
|
||||
fieldcontainer.id = 'insert_merge_field';
|
||||
document.body.appendChild(fieldcontainer);
|
||||
insertFieldDialogObj.appendTo('#insert_merge_field');
|
||||
fieldcontainer.parentElement.style.position = 'fixed';
|
||||
fieldcontainer.style.width = 'auto';
|
||||
fieldcontainer.style.height = 'auto';
|
||||
}
|
||||
insertFieldDialogObj.close = (): void => { container.documentEditor.focusIn(); };
|
||||
insertFieldDialogObj.beforeOpen = (): void => { container.documentEditor.focusIn(); };
|
||||
insertFieldDialogObj.show();
|
||||
let fieldNameTextBox: any = document.getElementById('field_text');
|
||||
fieldNameTextBox.value = '';
|
||||
}
|
||||
function closeFieldDialog(): void {
|
||||
insertFieldDialogObj.hide();
|
||||
container.documentEditor.focusIn();
|
||||
}
|
||||
let insertFieldDialogObj: Dialog = new Dialog({
|
||||
header: 'Merge Field',
|
||||
content:
|
||||
'<div class="dialogContent">'
|
||||
// tslint:disable-next-line:max-line-length
|
||||
+ '<label class="e-insert-field-label">Name:</label></br><input type="text" id="field_text" class="e-input" placeholder="Type a field to insert eg. FirstName">'
|
||||
+ '</div>',
|
||||
showCloseIcon: true,
|
||||
isModal: true,
|
||||
width: 'auto',
|
||||
height: 'auto',
|
||||
close: closeFieldDialog,
|
||||
buttons: [
|
||||
{
|
||||
'click': (): void => {
|
||||
let fieldNameTextBox: any = document.getElementById('field_text');
|
||||
let fieldName: any = fieldNameTextBox.value;
|
||||
if (fieldName !== '') {
|
||||
container.documentEditor.editor.insertField('MERGEFIELD ' + fieldName + ' \\* MERGEFORMAT');
|
||||
}
|
||||
insertFieldDialogObj.hide();
|
||||
container.documentEditor.focusIn();
|
||||
},
|
||||
buttonModel: {
|
||||
content: 'Ok',
|
||||
cssClass: 'e-flat',
|
||||
isPrimary: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
'click': (): void => {
|
||||
insertFieldDialogObj.hide();
|
||||
container.documentEditor.focusIn();
|
||||
},
|
||||
buttonModel: {
|
||||
content: 'Cancel',
|
||||
cssClass: 'e-flat',
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
function mergeDocument(): void {
|
||||
container.documentEditor.saveAsBlob('Docx').then((blob: Blob) => {
|
||||
let exportedDocumment: Blob = blob;
|
||||
let fileReader: any = new FileReader();
|
||||
fileReader.onload = (): void => {
|
||||
let base64String: any = fileReader.result;
|
||||
let responseData: any = {
|
||||
fileName: container.documentEditor.documentName + '.docx',
|
||||
documentData: base64String
|
||||
};
|
||||
waitingPopUp = document.getElementById('waiting-popup');
|
||||
inActiveDiv = document.getElementById('popup-overlay');
|
||||
showHideWaitingIndicator(true);
|
||||
let baseUrl: string = hostUrl + 'api/documenteditor/MailMerge';
|
||||
let httpRequest: XMLHttpRequest = new XMLHttpRequest();
|
||||
httpRequest.open('POST', baseUrl, true);
|
||||
httpRequest.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
|
||||
httpRequest.onreadystatechange = () => {
|
||||
if (httpRequest.readyState === 4) {
|
||||
if (httpRequest.status === 200 || httpRequest.status === 304) {
|
||||
container.documentEditor.open(httpRequest.responseText);
|
||||
} else {
|
||||
// Failed to merge document
|
||||
DialogUtility.alert({
|
||||
title: 'Information',
|
||||
content: 'failure to merge document',
|
||||
showCloseIcon: true,
|
||||
closeOnEscape: true,
|
||||
});
|
||||
}
|
||||
showHideWaitingIndicator(false);
|
||||
}
|
||||
};
|
||||
httpRequest.send(JSON.stringify((<any>responseData)));
|
||||
};
|
||||
fileReader.readAsDataURL(blob);
|
||||
});
|
||||
}
|
||||
function showHideWaitingIndicator(show: boolean): void {
|
||||
inActiveDiv.style.display = show ? 'block' : 'none';
|
||||
waitingPopUp.style.display = show ? 'block' : 'none';
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -86,7 +86,7 @@ body {
|
|||
.overlay {
|
||||
z-index: 10;
|
||||
display: none;
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
background-color: #383838;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -1253,7 +1253,6 @@
|
|||
"url": "comments",
|
||||
"name": "Comments",
|
||||
"category": "Review",
|
||||
"type":"update",
|
||||
"description": "The Document Editor component supports add and edit comments in a Word document for comment discussion.",
|
||||
"api": {
|
||||
"Editor": [
|
||||
|
|
@ -1272,7 +1271,6 @@
|
|||
"url": "track-changes",
|
||||
"name": "Track Changes",
|
||||
"category": "Review",
|
||||
"type":"new",
|
||||
"description": "The Document Editor component supports add and edit comments in a Word document for comment discussion.",
|
||||
"api": {
|
||||
"DocumentEditor": [
|
||||
|
|
@ -1309,7 +1307,6 @@
|
|||
"url": "form-fields",
|
||||
"name": "Form Fields",
|
||||
"category": "Editing Features",
|
||||
"type":"new",
|
||||
"description": "The Document Editor component supports add and edit comments in a Word document for comment discussion.",
|
||||
"api": {
|
||||
"DocumentEditor": [
|
||||
|
|
@ -1341,7 +1338,43 @@
|
|||
"resize"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"url": "mail-merge",
|
||||
"name": "Mail Merge",
|
||||
"category": "Mail Merge",
|
||||
"type":"new",
|
||||
"description": "The Document Editor component provides support to mail merge document with the help of Syncfusion DocIO.",
|
||||
"api": {
|
||||
"DocumentEditor": [
|
||||
"isReadOnly",
|
||||
"enableAllModules",
|
||||
"acceptTab",
|
||||
"documentName",
|
||||
"pageOutline",
|
||||
"selection",
|
||||
"editor",
|
||||
"editorHistory",
|
||||
"enableLocalPaste",
|
||||
"pageCount",
|
||||
"zoomFactor",
|
||||
"documentChange",
|
||||
"viewChange",
|
||||
"selectionChange",
|
||||
"requestNavigate",
|
||||
"contentChange",
|
||||
"open",
|
||||
"print",
|
||||
"openBlank",
|
||||
"focusIn",
|
||||
"save",
|
||||
"showDialog",
|
||||
"showOptionsPane",
|
||||
"fitPage",
|
||||
"getStyleNames",
|
||||
"resize"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
<div class="col-lg-12 control-section dropdowntree-icons">
|
||||
<input type="text" id="icons" />
|
||||
</div>
|
||||
<!-- custom code start -->
|
||||
|
||||
<style>
|
||||
.dropdowntree-icons .control-wrapper {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
width: 380px;
|
||||
max-width: 380px;
|
||||
padding-top: 15px
|
||||
}
|
||||
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
background-position: -10px -412px
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end -->
|
||||
|
||||
<div id="action-description">
|
||||
<p>This sample explains you about the Dropdown Tree item that can be configured by the icons or images. Click on the
|
||||
icon or double click on it to expand or collapse and to show the icons or images that are configured with the
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
"directory": "drop-down-tree",
|
||||
"category": "Dropdowns",
|
||||
"ftName": "dropdown-tree",
|
||||
"type": "update",
|
||||
"samples": [
|
||||
{
|
||||
"url": "default",
|
||||
|
|
@ -79,7 +78,6 @@
|
|||
"name": "Filtering",
|
||||
"description": "This example demonstrates how the filtering functionalities works based on the typed characters in the JavaScript drop-down tree control.",
|
||||
"category": "Dropdown Tree",
|
||||
"type": "new",
|
||||
"api": {
|
||||
"DropDownTree": [
|
||||
"placeholder",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div class="col-lg-12 control-section">
|
||||
<div style="margin: 0 auto; width:350px;">
|
||||
<div style="margin: 0 auto; max-width:350px;">
|
||||
<input type="text" id="template" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import * as dataSource from './dataSource.json';
|
|||
headerTemplate: '#headerTemplate',
|
||||
itemTemplate: '#itemTemplate',
|
||||
footerTemplate: '#footerTemplate',
|
||||
width: '350px',
|
||||
width: '100%',
|
||||
cssClass: 'ddt-template',
|
||||
placeholder: 'Select an employee',
|
||||
popupHeight: '250px'
|
||||
|
|
|
|||
|
|
@ -43,6 +43,7 @@
|
|||
"Permission": "Permission",
|
||||
"Ascending": "Ascending",
|
||||
"Descending": "Descending",
|
||||
"None": "None",
|
||||
"View-LargeIcons": "Large icons",
|
||||
"View-Details": "Details",
|
||||
"Search": "Search",
|
||||
|
|
@ -60,8 +61,10 @@
|
|||
"Content-Rename-Confirmation": "If you change a file name extension, the file might become unstable. Are you sure you want to change it?",
|
||||
"Header-Delete": "Delete File",
|
||||
"Content-Delete": "Are you sure you want to delete this file?",
|
||||
"Header-Multiple-Delete": "Delete Multiple Files",
|
||||
"Content-Multiple-Delete": "Are you sure you want to delete these {0} files?",
|
||||
"Header-Folder-Delete": "Delete Folder",
|
||||
"Content-Folder-Delete": "Are you sure you want to delete this folder?",
|
||||
"Header-Multiple-Delete": "Delete Multiple Items",
|
||||
"Content-Multiple-Delete": "Are you sure you want to delete these {0} items?",
|
||||
"Header-Duplicate": "File/Folder exists",
|
||||
"Content-Duplicate": "{0} already exists. Do you want to rename and paste?",
|
||||
"Header-Upload": "Upload Files",
|
||||
|
|
@ -129,6 +132,7 @@
|
|||
"Permission": "Genehmigung",
|
||||
"Ascending": "Aufsteigend",
|
||||
"Descending": "Absteigend",
|
||||
"None": "Keiner",
|
||||
"View-LargeIcons": "Große Icons",
|
||||
"View-Details": "Einzelheiten",
|
||||
"Search": "Suche",
|
||||
|
|
@ -146,8 +150,10 @@
|
|||
"Content-Rename-Confirmation": "Wenn Sie eine Dateinamenerweiterung ändern, wird die Datei möglicherweise instabil. Möchten Sie sie wirklich ändern?",
|
||||
"Header-Delete": "Datei löschen",
|
||||
"Content-Delete": "Möchten Sie diese Datei wirklich löschen?",
|
||||
"Header-Multiple-Delete": "Mehrere Dateien löschen",
|
||||
"Content-Multiple-Delete": "Möchten Sie diese {0} Dateien wirklich löschen?",
|
||||
"Header-Folder-Delete": "Lösche Ordner",
|
||||
"Content-Folder-Delete": "Möchten Sie diesen Ordner wirklich löschen?",
|
||||
"Header-Multiple-Delete": "Mehrere Elemente löschen",
|
||||
"Content-Multiple-Delete": "Möchten Sie diese {0} -Elemente wirklich löschen?",
|
||||
"Header-Duplicate": "Datei / Ordner existiert",
|
||||
"Content-Duplicate": "{0} existiert bereits. Möchten Sie umbenennen und einfügen?",
|
||||
"Header-Upload": "Daten hochladen",
|
||||
|
|
@ -215,6 +221,7 @@
|
|||
"Permission": "Autorisation",
|
||||
"Ascending": "Ascendant",
|
||||
"Descending": "Descendant",
|
||||
"None": "Aucun",
|
||||
"View-LargeIcons": "Grandes icônes",
|
||||
"View-Details": "Détails",
|
||||
"Search": "Chercher",
|
||||
|
|
@ -232,8 +239,10 @@
|
|||
"Content-Rename-Confirmation": "Si vous modifiez une extension de nom de fichier, le fichier peut devenir instable. Voulez-vous vraiment le changer?",
|
||||
"Header-Delete": "Supprimer le fichier",
|
||||
"Content-Delete": "Êtes-vous sûr de vouloir supprimer ce fichier?",
|
||||
"Header-Multiple-Delete": "Supprimer plusieurs fichiers",
|
||||
"Content-Multiple-Delete": "Êtes-vous sûr de vouloir supprimer ces {0} fichiers?",
|
||||
"Header-Folder-Delete": "Supprimer le dossier",
|
||||
"Content-Folder-Delete": "Voulez-vous vraiment supprimer ce dossier?",
|
||||
"Header-Multiple-Delete": "Supprimer plusieurs éléments",
|
||||
"Content-Multiple-Delete": "Voulez-vous vraiment supprimer ces {0} éléments?",
|
||||
"Header-Duplicate": "Fichier / Dossier existe",
|
||||
"Content-Duplicate": "{0} existe déjà. Voulez-vous renommer et coller?",
|
||||
"Header-Upload": "Télécharger des fichiers",
|
||||
|
|
@ -301,6 +310,7 @@
|
|||
"Permission": "الإذن",
|
||||
"Ascending": "تصاعدي",
|
||||
"Descending": "ترتيب تنازلي",
|
||||
"None": "لا شيء",
|
||||
"View-LargeIcons": "الرموز الكبيرة",
|
||||
"View-Details": "تفاصيل",
|
||||
"Search": "بحث",
|
||||
|
|
@ -318,8 +328,10 @@
|
|||
"Content-Rename-Confirmation": "إذا قمت بتغيير ملحق اسم الملف , فقد يصبح الملف غير مستقر. هل تريد بالتأكيد تغييره؟",
|
||||
"Header-Delete": "حذف ملف",
|
||||
"Content-Delete": "هل أنت متأكد أنك تريد حذف هذا الملف؟",
|
||||
"Header-Multiple-Delete": "حذف ملفات متعددة",
|
||||
"Content-Multiple-Delete": "هل أنت متأكد من أنك تريد حذف هذه الملفات {0}؟",
|
||||
"Header-Folder-Delete": "احذف المجلد",
|
||||
"Content-Folder-Delete": "هل أنت متأكد أنك تريد حذف هذا المجلد؟",
|
||||
"Header-Multiple-Delete": "حذف عناصر متعددة",
|
||||
"Content-Multiple-Delete": "هل أنت متأكد أنك تريد حذف هذه العناصر {0}؟",
|
||||
"Header-Duplicate": "الملف / المجلد موجود",
|
||||
"Content-Duplicate": "{0} موجود بالفعل. هل تريد إعادة التسمية واللصق؟",
|
||||
"Header-Upload": "تحميل الملفات",
|
||||
|
|
@ -387,6 +399,7 @@
|
|||
"Permission": "允许",
|
||||
"Ascending": "上升",
|
||||
"Descending": "降序",
|
||||
"None": "没有",
|
||||
"View-LargeIcons": "大图标",
|
||||
"View-Details": "细节",
|
||||
"Search": "搜索",
|
||||
|
|
@ -404,8 +417,10 @@
|
|||
"Content-Rename-Confirmation": "如果更改文件扩展名,文件可能会变得不稳定。您确定要更改它吗？",
|
||||
"Header-Delete": "删除文件",
|
||||
"Content-Delete": "你确定要删除这个文件吗？",
|
||||
"Header-Multiple-Delete": "删除多个文件",
|
||||
"Content-Multiple-Delete": "您确定要删除这些{0}文件吗？",
|
||||
"Header-Folder-Delete": "删除资料夹",
|
||||
"Content-Folder-Delete": "您确定要删除此文件夹吗？",
|
||||
"Header-Multiple-Delete": "删除多个项目",
|
||||
"Content-Multiple-Delete": "您确定要删除这{0}个项目吗？",
|
||||
"Header-Duplicate": "文件/文件夹存在",
|
||||
"Content-Duplicate": "{0}已经存在。您要重命名和粘贴吗？",
|
||||
"Header-Upload": "上传文件",
|
||||
|
|
|
|||
|
|
@ -24,7 +24,8 @@ Gantt.Inject(Selection, DayMarkers, Toolbar, Edit);
|
|||
dependency: 'Predecessor',
|
||||
resourceInfo: 'resources',
|
||||
work: 'work',
|
||||
child: 'subtasks'
|
||||
child: 'subtasks',
|
||||
type: 'taskType'
|
||||
},
|
||||
editSettings: {
|
||||
allowAdding: true,
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
"name": "Gantt",
|
||||
"directory": "gantt",
|
||||
"category": "Calendars",
|
||||
"type": "update",
|
||||
"ftName": "gantt",
|
||||
"samples": [
|
||||
{
|
||||
|
|
@ -119,7 +118,6 @@
|
|||
"url": "resource-view",
|
||||
"name": "Resource View",
|
||||
"category": "Resources",
|
||||
"type": "update",
|
||||
"api": {
|
||||
"Gantt": [
|
||||
"dataSource",
|
||||
|
|
@ -150,7 +148,6 @@
|
|||
"url": "resource-multi-taskbar",
|
||||
"name": "Resource Multi Taskbar",
|
||||
"category": "Resources",
|
||||
"type": "new",
|
||||
"api": {
|
||||
"Gantt": [
|
||||
"dataSource",
|
||||
|
|
@ -386,7 +383,6 @@
|
|||
"url": "editing",
|
||||
"name": "Editing",
|
||||
"category": "Gantt",
|
||||
"type": "update",
|
||||
"api": {
|
||||
"Gantt": [
|
||||
"dataSource",
|
||||
|
|
@ -435,38 +431,10 @@
|
|||
},
|
||||
"description": "This example demonstrates the various selection support of row and cell with different type in Syncfusion Essential JS2 Gantt"
|
||||
},
|
||||
{
|
||||
"url": "filtering",
|
||||
"name": "Filtering",
|
||||
"category": "Gantt",
|
||||
"api": {
|
||||
"Gantt": [
|
||||
"dataSource",
|
||||
"dateFormat",
|
||||
"taskFields",
|
||||
"columns",
|
||||
"treeColumnIndex",
|
||||
"height",
|
||||
"timelineSettings",
|
||||
"labelSettings",
|
||||
"toolbar",
|
||||
"allowFiltering",
|
||||
"includeWeekend",
|
||||
"timelineSettings",
|
||||
"splitterSettings",
|
||||
"durationUnit",
|
||||
"dayWorkingTime",
|
||||
"projectStartDate",
|
||||
"projectEndDate"
|
||||
]
|
||||
},
|
||||
"description": "This example demonstrates the filtering support with filter menu option for various types of columns in Gantt"
|
||||
},
|
||||
{
|
||||
"url": "contextMenu",
|
||||
"name": "Context Menu",
|
||||
"category": "Gantt",
|
||||
"type": "update",
|
||||
"api": {
|
||||
"Gantt": [
|
||||
"dataSource",
|
||||
|
|
@ -527,6 +495,33 @@
|
|||
},
|
||||
"description": "This demo explains how to export Gantt content to Excel and CSV documents using the Syncfusion TypeScript Gantt control."
|
||||
},
|
||||
{
|
||||
"url": "filtering",
|
||||
"name": "Filtering",
|
||||
"category": "Gantt",
|
||||
"api": {
|
||||
"Gantt": [
|
||||
"dataSource",
|
||||
"dateFormat",
|
||||
"taskFields",
|
||||
"columns",
|
||||
"treeColumnIndex",
|
||||
"height",
|
||||
"timelineSettings",
|
||||
"labelSettings",
|
||||
"toolbar",
|
||||
"allowFiltering",
|
||||
"includeWeekend",
|
||||
"timelineSettings",
|
||||
"splitterSettings",
|
||||
"durationUnit",
|
||||
"dayWorkingTime",
|
||||
"projectStartDate",
|
||||
"projectEndDate"
|
||||
]
|
||||
},
|
||||
"description": "This example demonstrates the filtering support with filter menu option for various types of columns in Gantt"
|
||||
},
|
||||
{
|
||||
"url": "events",
|
||||
"name": "Events",
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ Gantt.Inject(DayMarkers, Selection);
|
|||
span.style.marginLeft = '5px';
|
||||
span.style.marginRight = '5px';
|
||||
for (let index: number = 0; index < value.length; index++) {
|
||||
img.src = 'src/gantt/images/' + value[index].resourceName + '.png';
|
||||
img.src = 'https://ej2.syncfusion.com/demos/src/gantt/images/' + value[index].resourceName + '.png';
|
||||
span.innerHTML = value[index].resourceName;
|
||||
out = out + img.outerHTML + span.outerHTML;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,6 +53,83 @@ export function getTradeData(dataCount?: number): object {
|
|||
}
|
||||
return tradeData;
|
||||
}
|
||||
export let lazyLoadData: Object[] = [];
|
||||
export function createLazyLoadData(): void {
|
||||
if (lazyLoadData.length) {
|
||||
return;
|
||||
}
|
||||
let customerid: string[] = ['VINET', 'TOMSP', 'HANAR', 'VICTE', 'SUPRD', 'HANAR', 'CHOPS', 'RICSU', 'WELLI', 'HILAA',
|
||||
'ERNSH', 'CENTC', 'OTTIK', 'QUEDE', 'RATTC', 'ERNSH', 'FOLKO', 'BLONP', 'WARTH', 'FRANK', 'GROSR', 'WHITC', 'WARTH',
|
||||
'SPLIR', 'RATTC', 'QUICK', 'VINET', 'MAGAA', 'TORTU', 'MORGK', 'BERGS', 'LEHMS', 'BERGS', 'ROMEY', 'ROMEY', 'LILAS',
|
||||
'LEHMS', 'QUICK', 'QUICK', 'RICAR', 'REGGC', 'BSBEV', 'COMMI', 'QUEDE', 'TRADH', 'TORTU', 'RATTC', 'VINET', 'LILAS',
|
||||
'BLONP', 'HUNGO', 'RICAR', 'MAGAA', 'WANDK', 'SUPRD', 'GODOS', 'TORTU', 'OLDWO', 'ROMEY', 'LONEP', 'ANATR', 'HUNGO',
|
||||
'THEBI', 'DUMON', 'WANDK', 'QUICK', 'RATTC', 'ISLAT', 'RATTC', 'LONEP', 'ISLAT', 'TORTU', 'WARTH', 'ISLAT', 'PERIC',
|
||||
'KOENE', 'SAVEA', 'KOENE', 'BOLID', 'FOLKO', 'FURIB', 'SPLIR', 'LILAS', 'BONAP', 'MEREP', 'WARTH', 'VICTE',
|
||||
'HUNGO', 'PRINI', 'FRANK', 'OLDWO', 'MEREP', 'BONAP', 'SIMOB', 'FRANK', 'LEHMS', 'WHITC', 'QUICK', 'RATTC', 'FAMIA'];
|
||||
|
||||
let product: string[] = ['Chai', 'Chang', 'Aniseed Syrup', 'Chef Anton\'s Cajun Seasoning', 'Chef Anton\'s Gumbo Mix',
|
||||
'Grandma\'s Boysenberry Spread', 'Uncle Bob\'s Organic Dried Pears', 'Northwoods Cranberry Sauce', 'Mishi Kobe Niku',
|
||||
'Ikura', 'Queso Cabrales', 'Queso Manchego La Pastora', 'Konbu', 'Tofu', 'Genen Shouyu', 'Pavlova', 'Alice Mutton',
|
||||
'Carnarvon Tigers', 'Teatime Chocolate Biscuits', 'Sir Rodney\'s Marmalade', 'Sir Rodney\'s Scones',
|
||||
'Gustaf\'s Knäckebröd', 'Tunnbröd', 'Guaraná Fantástica', 'NuNuCa Nuß-Nougat-Creme', 'Gumbär Gummibärchen',
|
||||
'Schoggi Schokolade', 'Rössle Sauerkraut', 'Thüringer Rostbratwurst', 'Nord-Ost Matjeshering', 'Gorgonzola Telino',
|
||||
'Mascarpone Fabioli', 'Geitost', 'Sasquatch Ale', 'Steeleye Stout', 'Inlagd Sill',
|
||||
'Gravad lax', 'Côte de Blaye', 'Chartreuse verte', 'Boston Crab Meat', 'Jack\'s New England Clam Chowder',
|
||||
'Singaporean Hokkien Fried Mee', 'Ipoh Coffee', 'Gula Malacca', 'Rogede sild', 'Spegesild', 'Zaanse koeken',
|
||||
'Chocolade', 'Maxilaku', 'Valkoinen suklaa', 'Manjimup Dried Apples', 'Filo Mix', 'Perth Pasties',
|
||||
'Tourtière', 'Pâté chinois', 'Gnocchi di nonna Alice', 'Ravioli Angelo', 'Escargots de Bourgogne',
|
||||
'Raclette Courdavault', 'Camembert Pierrot', 'Sirop d\'érable',
|
||||
'Tarte au sucre', 'Vegie-spread', 'Wimmers gute Semmelknödel', 'Louisiana Fiery Hot Pepper Sauce',
|
||||
'Louisiana Hot Spiced Okra', 'Laughing Lumberjack Lager', 'Scottish Longbreads',
|
||||
'Gudbrandsdalsost', 'Outback Lager', 'Flotemysost', 'Mozzarella di Giovanni', 'Röd Kaviar', 'Longlife Tofu',
|
||||
'Rhönbräu Klosterbier', 'Lakkalikööri', 'Original Frankfurter grüne Soße'];
|
||||
|
||||
let customername: string[] = ['Maria', 'Ana Trujillo', 'Antonio Moreno', 'Thomas Hardy', 'Christina Berglund',
|
||||
'Hanna Moos', 'Frédérique Citeaux', 'Martín Sommer', 'Laurence Lebihan', 'Elizabeth Lincoln',
|
||||
'Victoria Ashworth', 'Patricio Simpson', 'Francisco Chang', 'Yang Wang', 'Pedro Afonso', 'Elizabeth Brown',
|
||||
'Sven Ottlieb', 'Janine Labrune', 'Ann Devon', 'Roland Mendel', 'Aria Cruz', 'Diego Roel',
|
||||
'Martine Rancé', 'Maria Larsson', 'Peter Franken', 'Carine Schmitt', 'Paolo Accorti', 'Lino Rodriguez',
|
||||
'Eduardo Saavedra', 'José Pedro Freyre', 'André Fonseca', 'Howard Snyder', 'Manuel Pereira',
|
||||
'Mario Pontes', 'Carlos Hernández', 'Yoshi Latimer', 'Patricia McKenna', 'Helen Bennett', 'Philip Cramer',
|
||||
'Daniel Tonini', 'Annette Roulet', 'Yoshi Tannamuri', 'John Steel', 'Renate Messner', 'Jaime Yorres',
|
||||
'Carlos González', 'Felipe Izquierdo', 'Fran Wilson', 'Giovanni Rovelli', 'Catherine Dewey', 'Jean Fresnière',
|
||||
'Alexander Feuer', 'Simon Crowther', 'Yvonne Moncada', 'Rene Phillips', 'Henriette Pfalzheim',
|
||||
'Marie Bertrand', 'Guillermo Fernández', 'Georg Pipps', 'Isabel de Castro', 'Bernardo Batista', 'Lúcia Carvalho',
|
||||
'Horst Kloss', 'Sergio Gutiérrez', 'Paula Wilson', 'Maurizio Moroni', 'Janete Limeira', 'Michael Holz',
|
||||
'Alejandra Camino', 'Jonas Bergulfsen', 'Jose Pavarotti', 'Hari Kumar', 'Jytte Petersen', 'Dominique Perrier',
|
||||
'Art Braunschweiger', 'Pascale Cartrain', 'Liz Nixon', 'Liu Wong', 'Karin Josephs', 'Miguel Angel Paolino',
|
||||
'Anabela Domingues', 'Helvetius Nagy', 'Palle Ibsen', 'Mary Saveley', 'Paul Henriot', 'Rita Müller',
|
||||
'Pirkko Koskitalo', 'Paula Parente', 'Karl Jablonski', 'Matti Karttunen', 'Zbyszek Piestrzeniewicz'];
|
||||
|
||||
let customeraddress: string[] = ['507 - 20th Ave. E.\r\nApt. 2A', '908 W. Capital Way', '722 Moss Bay Blvd.',
|
||||
'4110 Old Redmond Rd.', '14 Garrett Hill', 'Coventry House\r\nMiner Rd.', 'Edgeham Hollow\r\nWinchester Way',
|
||||
'4726 - 11th Ave. N.E.', '7 Houndstooth Rd.', '59 rue de l\'Abbaye', 'Luisenstr. 48', '908 W. Capital Way',
|
||||
'722 Moss Bay Blvd.', '4110 Old Redmond Rd.', '14 Garrett Hill', 'Coventry House\r\nMiner Rd.',
|
||||
'Edgeham Hollow\r\nWinchester Way',
|
||||
'7 Houndstooth Rd.', '2817 Milton Dr.', 'Kirchgasse 6', 'Sierras de Granada 9993', 'Mehrheimerstr. 369',
|
||||
'Rua da Panificadora, 12', '2817 Milton Dr.', 'Mehrheimerstr. 369'];
|
||||
|
||||
let quantityperunit: string[] = ['10 boxes x 20 bags', '24 - 12 oz bottles', '12 - 550 ml bottles',
|
||||
'48 - 6 oz jars', '36 boxes', '12 - 8 oz jars', '12 - 1 lb pkgs.', '12 - 12 oz jars',
|
||||
'18 - 500 g pkgs.', '12 - 200 ml jars',
|
||||
'1 kg pkg.', '10 - 500 g pkgs.', '2 kg box', '40 - 100 g pkgs.', '24 - 250 ml bottles', '32 - 500 g boxes',
|
||||
'20 - 1 kg tins', '16 kg pkg.', '10 boxes x 12 pieces', '30 gift boxes', '24 pkgs. x 4 pieces', '24 - 500 g pkgs.',
|
||||
'12 - 250 g pkgs.',
|
||||
'12 - 355 ml cans', '20 - 450 g glasses', '100 - 250 g bags'];
|
||||
|
||||
let orderID: number = 10248;
|
||||
for (let i: number = 0; i < 20000; i++) {
|
||||
lazyLoadData.push({
|
||||
'OrderID': orderID + i,
|
||||
'CustomerID': customerid[Math.floor(Math.random() * customerid.length)],
|
||||
'CustomerName': customername[Math.floor(Math.random() * customername.length)],
|
||||
'CustomerAddress': customeraddress[Math.floor(Math.random() * customeraddress.length)],
|
||||
'ProductName': product[Math.floor(Math.random() * product.length)],
|
||||
'ProductID': i,
|
||||
'Quantity': quantityperunit[Math.floor(Math.random() * quantityperunit.length)]
|
||||
});
|
||||
}
|
||||
}
|
||||
export let virtualData: Object[] = [];
|
||||
export function dataSource(): void {
|
||||
let names: string[] = ['VINET', 'TOMSP', 'HANAR', 'VICTE', 'SUPRD', 'HANAR', 'CHOPS', 'RICSU', 'WELLI', 'HILAA', 'ERNSH', 'CENTC',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
<div class="control-section">
|
||||
<div class="content-wrapper">
|
||||
<div id="Grid"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="action-description">
|
||||
<p>This sample demonstrates the lazy load grouping feature of the Grid component.</p>
|
||||
</div>
|
||||
|
||||
<div id="description">
|
||||
<p>
|
||||
The Lazy load grouping, allows the Grid to render only the initial level caption rows in collapsed state while grouping.
|
||||
The child rows of each caption will render only when we expand the captions.
|
||||
To enable lazy load grouping, set <code><a target="_blank" class="code"
|
||||
href="http://ej2.syncfusion.com/documentation/grid/api-groupSettings.html#enablelazyloading">
|
||||
groupSettings->enableLazyLoading</a></code> property as true.
|
||||
</p>
|
||||
<p style="font-weight: 500">Injecting Module:</p>
|
||||
<p>
|
||||
Grid features are segregated into individual feature-wise modules.
|
||||
To use lazy load grouping feature, we need to inject
|
||||
<code> LazyLoadGroup </code> using the <code>Grid.Inject(LazyLoadGroup)</code> section.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { Grid, Page, Group, LazyLoadGroup } from '@syncfusion/ej2-grids';
|
||||
import { lazyLoadData, createLazyLoadData } from './data-source';
|
||||
/**
|
||||
* lazy load grouping sample
|
||||
*/
|
||||
Grid.Inject(Page, Group, LazyLoadGroup);
|
||||
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
/* create lazyLoadData */
|
||||
createLazyLoadData();
|
||||
let grid: Grid = new Grid(
|
||||
{
|
||||
dataSource: lazyLoadData,
|
||||
allowPaging: true,
|
||||
allowGrouping: true,
|
||||
groupSettings: { enableLazyLoading: true, columns: ['ProductName', 'CustomerName'] },
|
||||
columns: [
|
||||
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
|
||||
{ field: 'ProductName', headerText: 'Product Name', width: 160 },
|
||||
{ field: 'ProductID', headerText: 'Product ID', textAlign: 'Right', width: 120 },
|
||||
{ field: 'CustomerID', headerText: 'Customer ID', width: 120 },
|
||||
{ field: 'CustomerName', headerText: 'Customer Name', width: 160 }
|
||||
]
|
||||
});
|
||||
grid.appendTo('#Grid');
|
||||
};
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { Grid, Page, Selection } from '@syncfusion/ej2-grids';
|
||||
import { orderData } from './data-source';
|
||||
|
||||
|
|
@ -7,6 +8,7 @@ Grid.Inject(Page, Selection);
|
|||
* Local Data sample
|
||||
*/
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let grid: Grid = new Grid(
|
||||
{
|
||||
dataSource: orderData,
|
||||
|
|
|
|||
|
|
@ -7,7 +7,8 @@
|
|||
"samples" : [
|
||||
{"url":"grid-overview", "name": "Overview", "description":"This demo for Essential JS 2 grid control is an overview of how to display and manipulate large data with configuration options.", "category":"Data Grid","api":{"Grid":["dataSource","enableVirtualization","allowFiltering","allowSorting","allowSelection","selectionSettings","height","columns","dataBound","actionComplete","load"] }},
|
||||
{"url":"default", "name": "Default Functionalities", "description":"This demo for Essential JS 2 grid control shows the default rendering of the grid control with minimum configuration.", "category":"Data Grid","api":{"Grid":["columns","dataSource"] }},
|
||||
{"url":"grouping", "name": "Grouping", "description":"This demo for Essential JS 2 grid control demonstrates the grouping feature of the grid control. The grid control has options to group records based on columns.", "category":"Data Grid","api":{"Grid":["dataSource","allowPaging","allowSorting","groupSettings","pageSettings","allowGrouping","height","columns"] }},
|
||||
{"url":"grouping", "name": "Default Grouping", "description":"This demo for Essential JS 2 grid control demonstrates the grouping feature of the grid control. The grid control has options to group records based on columns.", "category":"Grouping","api":{"Grid":["dataSource","allowPaging","allowSorting","groupSettings","pageSettings","allowGrouping","height","columns"] }},
|
||||
{"url":"lazy-load-grouping", "name": "Lazy Load Grouping", "description":"This demo for Essential JS 2 grid control demonstrates the usage of the lazy load grouping feature.", "type": "new", "category":"Grouping","api":{"Grid":["dataSource","allowPaging","allowGrouping","groupSettings","height","columns"] }},
|
||||
{"url":"grid-lines", "name": "GridLines" , "description":"This demo for Essential JS 2 grid control demonstrates the visibility of the grid lines that separate the rows and columns.", "category":"Data Grid","api":{"Grid":["dataSource","gridLines","columns"] }},
|
||||
{"url":"scrolling", "name": "Default Scrolling", "description":"This demo for Essential JS 2 grid control shows the usage of the horizontal and vertical scrollbars to view grid content that exceeds the grid area.", "category":"Scrolling","api":{"Grid":["dataSource","height","width","columns"] }},
|
||||
{"url":"virtual-scrolling", "name": "Virtual Scrolling", "description":"This demo demonstrates how to use Essential JS 2 grid to show a large data view without performance degradation by rendering only the required rows and columns.", "category":"Scrolling","api":{"Grid":["dataSource","enableVirtualization","enableColumnVirtualization","dataBound","height","columns"] }},
|
||||
|
|
@ -30,7 +31,7 @@
|
|||
{"url":"drag-drop-within-grid", "name": "Row Drag And Drop Within Grid", "category":"Rows", "description":"This demo for Essential JS 2 grid control demonstrates how the rows can be dragged within the grids using the row drag-and-drop feature.", "hideOnDevice":true,"api":{"Grid":["dataSource","allowPaging","pageSettings","columns","allowRowDragAndDrop","selectionSettings","rowDropSettings","width","persistSelection"] }},
|
||||
{"url":"sorting", "name": "Multi Sorting", "description":"This demo for Essential JS 2 grid control shows the grid multisorting feature. Using this feature, grid rows can be sorted by two or more columns.", "category":"Sorting","api":{"Grid":["dataSource","allowSelection","selectionSettings","columns","enableHover"] }},
|
||||
{"url":"sorting-api", "name": "Sorting API", "description":"This demo for Essential JS 2 grid control shows the usage of the sorting API in grid. Use the properties panel to sort/unsort columns using API.", "category":"Sorting","api":{"Grid":["dataSource","allowPaging","allowSelection","selectionSettings","enableHover","columns","pageSettings"] }},
|
||||
{"url":"filter", "name": "Default Filtering", "description":"This demo for Essential JS 2 grid control shows how to place a filter bar row in the header to filter grid rows.", "type": "update", "category":"Filtering","api":{"Grid":["allowFiltering","dataSource","allowPaging","pageSettings","columns"] }},
|
||||
{"url":"filter", "name": "Default Filtering", "description":"This demo for Essential JS 2 grid control shows how to place a filter bar row in the header to filter grid rows.", "category":"Filtering","api":{"Grid":["allowFiltering","dataSource","allowPaging","pageSettings","columns"] }},
|
||||
{"url":"filter-menu", "name": "Filter Menu", "description":"This demo for Essential JS 2 grid control demonstrates a way of filtering rows using a menu, check box, and Excel filter UI.", "category":"Filtering", "api":{"Grid":["allowFiltering","filterSettings","dataSource","allowPaging","pageSettings","columns"] }},
|
||||
{"url":"search", "name": "Search", "description":"This demo for Essential JS 2 grid control shows the content searching feature. Use the search box from toolbar to search for records in grid.", "category":"Filtering","api":{"Grid":["dataSource","allowPaging","pageSettings","columns","toolbar"] }},
|
||||
{"url":"default-paging", "name": "Default Paging", "description":"This demo for Essential JS 2 grid control shows how you can display the contents of the grid in page segments using the paging feature.", "category": "Paging","api":{"Grid":["dataSource","allowPaging","pageSettings","columns"] }},
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
{
|
||||
"name": "HeatMap Chart",
|
||||
"directory": "heatmap-chart",
|
||||
"type":"update",
|
||||
"ftName": "heatmap-chart",
|
||||
"category": "Data Visualization",
|
||||
"samples": [
|
||||
|
|
@ -306,7 +305,6 @@
|
|||
"url": "color-range",
|
||||
"name": "Color Range",
|
||||
"category": "Features",
|
||||
"type":"new",
|
||||
"description": "This demo for Essential JS2 Heatmap control demonstrates applying color gradient mode for the heatmap cells.",
|
||||
"sourceFiles": [{"displayName": "color-range.ts", "path": "./src/heatmap-chart/color-range.ts"},
|
||||
{"displayName": "color-range.html", "path": "./src/heatmap-chart/color-range.html"},
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ import * as dataSource from './datasource.json';
|
|||
let priorityData: string[] = ['Low', 'Normal', 'Critical', 'Release Breaker', 'High'];
|
||||
function onDialogOpen(args: DialogEventArgs): void {
|
||||
if (args.requestType !== 'Delete') {
|
||||
let curData: { [key: string]: Object } = args.data;
|
||||
let curData: { [key: string]: Object } = args.data as { [key: string]: Object };
|
||||
let filledTextBox: TextBox = new TextBox({});
|
||||
filledTextBox.appendTo(args.element.querySelector('#Id') as HTMLInputElement);
|
||||
let numericObj: NumericTextBox = new NumericTextBox({
|
||||
|
|
@ -68,7 +68,7 @@ import * as dataSource from './datasource.json';
|
|||
}
|
||||
let count: number = 31;
|
||||
document.getElementById('addNew').onclick = (e: Event): void => {
|
||||
let curData: object = {
|
||||
let curData: Object = {
|
||||
Id: 'Task ' + count, Status: 'Open', Priority: 'Normal', Assignee: 'Andrew Fuller', Estimate: 0, Tags: '', Summary: ''
|
||||
};
|
||||
kanbanObj.openDialog('Add', curData);
|
||||
|
|
|
|||
|
|
@ -62,16 +62,16 @@ import * as dataSource from './datasource.json';
|
|||
appendElement('Kanban <b>Data Bound</b> event called<hr>');
|
||||
}
|
||||
function OnCardRendered(args: CardRenderedEventArgs): void {
|
||||
appendElement('Kanban - ' + args.data.Id + ' - <b>Card Rendered</b> event called<hr>');
|
||||
appendElement('Kanban - ' + (args.data as { [key: string]: Object }).Id + ' - <b>Card Rendered</b> event called<hr>');
|
||||
}
|
||||
function OnQueryCellInfo(): void {
|
||||
appendElement('Kanban <b>Query Cell Info</b> event called<hr>');
|
||||
}
|
||||
function OnCardClick(args: CardClickEventArgs): void {
|
||||
appendElement('Kanban - ' + args.data.Id + ' - <b>Card Click</b> event called<hr>');
|
||||
appendElement('Kanban - ' + (args.data as { [key: string]: Object }).Id + ' - <b>Card Click</b> event called<hr>');
|
||||
}
|
||||
function OnCardDoubleClick(args: CardClickEventArgs): void {
|
||||
appendElement('Kanban - ' + args.data.Id + ' - <b>Card Double Click</b> event called<hr>');
|
||||
appendElement('Kanban - ' + (args.data as { [key: string]: Object }).Id + ' - <b>Card Double Click</b> event called<hr>');
|
||||
}
|
||||
function OnDragStart(): void {
|
||||
appendElement('Kanban <b>Drag Start</b> event called<hr>');
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
"directory": "kanban",
|
||||
"category": "Data Visualization",
|
||||
"ftName": "kanban",
|
||||
"type": "preview",
|
||||
"samples": [
|
||||
{
|
||||
"url": "overview",
|
||||
|
|
@ -16,7 +15,6 @@
|
|||
"url": "default",
|
||||
"name": "Default Functionalities",
|
||||
"category": "Kanban",
|
||||
"type": "update",
|
||||
"description": "The example demonstrates the default functionalities of JS Kanban with very minimal essential settings such as data source, columns, and card details.",
|
||||
"api": { "Kanban": ["dataSource", "keyField", "columns", "cardSettings"] }
|
||||
},
|
||||
|
|
@ -45,7 +43,6 @@
|
|||
"url": "search-filter",
|
||||
"name": "Search and Filter Cards",
|
||||
"category": "Kanban",
|
||||
"type": "new",
|
||||
"description": "The example demo shows how to filter the cards and make searching when more number of cards on a JavaScript Kanban board that helps you to focus.",
|
||||
"api": { "Kanban": [ "dataSource", "keyField", "columns", "cardSettings", "swimlaneSettings", "query"] }
|
||||
},
|
||||
|
|
@ -53,7 +50,6 @@
|
|||
"url": "sorting",
|
||||
"name": "Sorting Cards",
|
||||
"category": "Kanban",
|
||||
"type": "new",
|
||||
"description": "The example demonstrates how to sort the cards in the ascending or descending based on the data source order or indexing or custom field on the Kanban board.",
|
||||
"api": { "Kanban": ["dataSource", "keyField", "columns", "cardSettings", "sortSettings"] }
|
||||
},
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
"name": "Linear Gauge",
|
||||
"directory": "linear-gauge",
|
||||
"category": "Data Visualization",
|
||||
"type": "update",
|
||||
"ftName": "lineargauge",
|
||||
"samples": [
|
||||
{
|
||||
|
|
@ -50,7 +49,6 @@
|
|||
{
|
||||
"url": "gradient-color",
|
||||
"name": "Gradient Color",
|
||||
"type": "new",
|
||||
"description": "This demo for Essential JS2 Linear Gauge control visualizes the gradient support for pointers and ranges.",
|
||||
"category": "Linear Gauge"
|
||||
},
|
||||
|
|
@ -71,7 +69,6 @@
|
|||
{
|
||||
"url": "export",
|
||||
"name": "Print & Export",
|
||||
"type": "update",
|
||||
"description": "This demo for Essential JS2 Linear Gauge control will print and export linear gauge into different format.",
|
||||
"category": "Linear Gauge",
|
||||
"api":{"LinearGauge": ["axes"]}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n\n<div class=\"control-section\">\n <div id=\"maps\"></div>\n <div style=\"float: right; margin-right: 10px;\">Source:\n <a href=\"https://en.wikipedia.org/wiki/Africa\" target=\"_blank\">en.wikipedia.org</a>\n </div>\n</div>\n<!-- gradient color-->\n<svg height=\"150\" width=\"400\">\n <defs>\n <linearGradient id=\"grad1\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n <stop offset=\"0%\" style=\"stop-color:#C5494B;stop-opacity:1\"/>\n <stop offset=\"100%\" style=\"stop-color:#4C134F;stop-opacity:1\"/>\n </linearGradient>\n </defs>\n</svg>\n<!-- annotation content -->\n<div id=\"maps-annotation\" style=\"display: none;\">\n <div id=\"annotation\">\n <div>\n <p style=\"margin-left:10px;font-size:13px;font-weight:500\">Facts about Africa</p>\n </div>\n <hr style=\"margin-top:-3px;margin-bottom:10px;border:0.5px solid #DDDDDD\">\n <div>\n <ul style=\"list-style-type:disc; margin-left:-20px;margin-bottom:2px; font-weight:400\">\n <li>Africa is the second largest and second most populated continent in the world.</li>\n <li style=\"padding-top:5px;\">Africa has 54 sovereign states and 10 non-sovereign territories.</li>\n <li style=\"padding-top:5px;\">Algeria is the largest country in Africa, where as Mayotte is the smallest.</li>\n </ul>\n </div>\n </div>\n</div>\n<!-- source link-->\n<div id=\"compass-maps\" style=\"display: none;\">\n <img src=\"//ej2.syncfusion.com/demos/src/maps/images/compass.svg\" height=\"75px\" width=\"75px\">\n</div>\n\n<!-- style for annotation -->\n<style>\n #annotation {\n color: #DDDDDD;\n\t\tfont-size: 12px;\n\t\tfont-family: Roboto;\n background: #3E464C;\n margin: 20px;\n padding: 10px;\n -webkit-border-radius: 2px;\n -moz-border-radius: 2px;\n border-radius: 2px;\n width: 300px;\n -moz-box-shadow: 0px 2px 5px #666;\n -webkit-box-shadow: 0px 2px 5px #666;\n box-shadow: 0px 2px 5px #666;\n }\n .country-label {\n color: white;\n font-size: 25px;\n }\n</style>\n\n</div></body></html>","index.ts":"{{ripple}}\n/**\n * Maps Annotation\n */\nimport { Maps, Annotations, Marker, MapsTheme, ILoadEventArgs, MapAjax } from '@syncfusion/ej2-maps';\nMaps.Inject(Annotations, Marker);\n\n\n let maps: Maps = new Maps({\n\n zoomSettings: {\n enable: false\n },\n annotations: [\n {\n content: '#maps-annotation',\n x: '0%', y: '70%'\n }, {\n content: '#compass-maps',\n x: '80%', y: '5%'\n }\n ],\n layers: [\n {\n shapeDataPath: 'name',\n shapePropertyPath: 'name',\n shapeData: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/africa-continent.json'),\n shapeSettings: {\n fill: 'url(#grad1)'\n },\n markerSettings: [\n {\n visible: true,\n template: '<h3 style=\"color:white\">{{:name}}</h3>',\n animationDuration: 1,\n dataSource: [{\n name: 'Africa', latitude: 13.97274101999902, longitude: 20.390625\n }]\n }\n ]\n }\n ]\n });\n maps.appendTo('#maps');\n"}
|
||||
{"index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n\n<div class=\"control-section\">\n <div id=\"maps\"></div>\n <div style=\"float: right; margin-right: 10px;\">Source:\n <a href=\"https://en.wikipedia.org/wiki/Africa\" target=\"_blank\">en.wikipedia.org</a>\n </div>\n</div>\n<!-- gradient color-->\n<svg height=\"150\" width=\"400\">\n <defs>\n <linearGradient id=\"grad1\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n <stop offset=\"0%\" style=\"stop-color:#C5494B;stop-opacity:1\"/>\n <stop offset=\"100%\" style=\"stop-color:#4C134F;stop-opacity:1\"/>\n </linearGradient>\n </defs>\n</svg>\n<!-- annotation content -->\n<div id=\"maps-annotation\" style=\"display: none;\">\n <div id=\"annotation\">\n <div>\n <p style=\"margin-left:10px;font-size:13px;font-weight:500\">Facts about Africa</p>\n </div>\n <hr style=\"margin-top:-3px;margin-bottom:10px;border:0.5px solid #DDDDDD\">\n <div>\n <ul style=\"list-style-type:disc; margin-left:-20px;margin-bottom:2px; font-weight:400\">\n <li>Africa is the second largest and second most populated continent in the world.</li>\n <li style=\"padding-top:5px;\">Africa has 54 sovereign states and 10 non-sovereign territories.</li>\n <li style=\"padding-top:5px;\">Algeria is the largest country in Africa, where as Mayotte is the smallest.</li>\n </ul>\n </div>\n </div>\n</div>\n<!-- source link-->\n<div id=\"compass-maps\" style=\"display: none;\">\n <img src=\"//npmci.syncfusion.com/production/demos/src/maps/images/compass.svg\" height=\"75px\" width=\"75px\">\n</div>\n\n<!-- style for annotation -->\n<style>\n #annotation {\n color: #DDDDDD;\n\t\tfont-size: 12px;\n\t\tfont-family: Roboto;\n background: #3E464C;\n margin: 20px;\n padding: 10px;\n -webkit-border-radius: 2px;\n -moz-border-radius: 2px;\n border-radius: 2px;\n width: 300px;\n -moz-box-shadow: 0px 2px 5px #666;\n -webkit-box-shadow: 0px 2px 5px #666;\n box-shadow: 0px 2px 5px #666;\n }\n .country-label {\n color: white;\n font-size: 25px;\n }\n</style>\n\n</div></body></html>","index.ts":"{{ripple}}\n/**\n * Maps Annotation\n */\nimport { Maps, Annotations, Marker, MapsTheme, ILoadEventArgs, MapAjax } from '@syncfusion/ej2-maps';\nMaps.Inject(Annotations, Marker);\n\n\n let maps: Maps = new Maps({\n\n zoomSettings: {\n enable: false\n },\n annotations: [\n {\n content: '#maps-annotation',\n x: '0%', y: '70%'\n }, {\n content: '#compass-maps',\n x: '80%', y: '5%'\n }\n ],\n layers: [\n {\n shapeDataPath: 'name',\n shapePropertyPath: 'name',\n shapeData: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/africa-continent.json'),\n shapeSettings: {\n fill: 'url(#grad1)'\n },\n markerSettings: [\n {\n visible: true,\n template: '<h3 style=\"color:white\">{{:name}}</h3>',\n animationDuration: 1,\n dataSource: [{\n name: 'Africa', latitude: 13.97274101999902, longitude: 20.390625\n }]\n }\n ]\n }\n ]\n });\n maps.appendTo('#maps');\n"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"col-lg-9 control-section\">\n <div id=\"datalabel\"></div>\n</div>\n<!-- property panel-->\n<div class=\"col-lg-3 property-section\">\n <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n <tbody>\n <tr style=\"height: 50px\">\n <td style=\"width: 80%\">\n <div>Show Labels</div>\n </td>\n <td>\n <input type=\"checkbox\" checked id=\"select\" style=\"margin-top: 15px\">\n </td>\n </tr> \n <tr style=\"height: 50px\">\n <td style=\"width: 60%\">\n <div>Smart label mode</div>\n </td>\n <td style=\"width: 40%\">\n <select id=\"smartlabelmode\" style=\"margin-left: -25px\">\n <option value=\"Trim\">Trim</option>\n <option value=\"None\">None</option> \n <option value=\"Hide\">Hide</option>\n </select>\n </td>\n </tr>\n <tr style=\"height: 50px\">\n <td style=\"width: 60%\">\n <div>Intersect action</div>\n </td>\n <td style=\"width: 40%;\">\n <select id=\"intersectaction\" style=\"margin-left: -25px\">\n <option value=\"None\">None</option>\n <option value=\"Trim\">Trim</option>\n <option value=\"Hide\">Hide</option>\n </select>\n </td>\n </tr>\n </tbody></table>\n \n </div>\n \n <!-- custom code start-->\n <style>\n #control-container {\n padding: 0px !important;\n }\n </style>\n\n<style>\n #control-container {\n padding: 0px !important;\n }\n</style>\n<!-- customcode end-->\n</div></body></html>","index.ts":"{{ripple}}\n/**\n * Maps datalabel sample\n */\nimport { Maps, MapsTooltip, DataLabel, ILoadEventArgs, MapsTheme, SmartLabelMode, IntersectAction, MapAjax } from '@syncfusion/ej2-maps';\nimport { DropDownList } from '@syncfusion/ej2-dropdowns';\nMaps.Inject(MapsTooltip, DataLabel);\n\n\n let maps: Maps = new Maps({\n\n zoomSettings: {\n enable: false\n },\n layers: [\n {\n dataLabelSettings: {\n visible: true,\n labelPath: 'name',\n smartLabelMode: 'Trim'\n },\n shapeData: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/usa.json'),\n shapeSettings: {\n autofill: true\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n },\n }\n ]\n });\n maps.appendTo('#datalabel');\n// code for property panel\n let intersectaction: DropDownList = new DropDownList({\n index: 0,\n placeholder: 'Select intersect action',\n width: 120,\n change: () => {\n maps.layers[0].dataLabelSettings.intersectionAction = <IntersectAction>intersectaction.value;\n maps.refresh();\n }\n });\n intersectaction.appendTo('#intersectaction');\n let smartlabelmode: DropDownList = new DropDownList({\n index: 0,\n placeholder: 'Select smartlabel mode',\n width: 120,\n change: () => {\n maps.layers[0].dataLabelSettings.smartLabelMode = <SmartLabelMode>smartlabelmode.value;\n maps.refresh();\n }\n });\n smartlabelmode.appendTo('#smartlabelmode');\n document.getElementById('select').onchange = () => {\n let element: HTMLInputElement = <HTMLInputElement>(document.getElementById('select'));\n maps.layers[0].dataLabelSettings.visible = element.checked;\n maps.refresh();\n };\n"}
|
||||
{"index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"col-lg-9 control-section\">\n <div id=\"datalabel\"></div>\n</div>\n<!-- property panel-->\n<div class=\"col-lg-3 property-section\">\n <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n <tbody>\n <tr style=\"height: 50px\">\n <td style=\"width: 80%\">\n <div>Show Labels</div>\n </td>\n <td>\n <input type=\"checkbox\" checked id=\"select\" style=\"margin-top: 15px\">\n </td>\n </tr> \n <tr style=\"height: 50px\">\n <td style=\"width: 60%\">\n <div>Smart label mode</div>\n </td>\n <td style=\"width: 40%\">\n <select id=\"smartlabelmode\" style=\"margin-left: -25px\">\n <option value=\"Trim\">Trim</option>\n <option value=\"None\">None</option> \n <option value=\"Hide\">Hide</option>\n </select>\n </td>\n </tr>\n <tr style=\"height: 50px\">\n <td style=\"width: 60%\">\n <div>Intersect action</div>\n </td>\n <td style=\"width: 40%;\">\n <select id=\"intersectaction\" style=\"margin-left: -25px\">\n <option value=\"None\">None</option>\n <option value=\"Trim\">Trim</option>\n <option value=\"Hide\">Hide</option>\n </select>\n </td>\n </tr>\n </tbody></table>\n \n </div>\n \n <!-- custom code start-->\n <style>\n #control-container {\n padding: 0px !important;\n }\n </style>\n\n<style>\n #control-container {\n padding: 0px !important;\n }\n</style>\n<!-- customcode end-->\n</div></body></html>","index.ts":"{{ripple}}\n/**\n * Maps datalabel sample\n */\nimport { Maps, MapsTooltip, DataLabel, ILoadEventArgs, MapsTheme, SmartLabelMode, IntersectAction, MapAjax } from '@syncfusion/ej2-maps';\nimport { DropDownList } from '@syncfusion/ej2-dropdowns';\nMaps.Inject(MapsTooltip, DataLabel);\n\n\n let maps: Maps = new Maps({\n\n zoomSettings: {\n enable: false\n },\n layers: [\n {\n dataLabelSettings: {\n visible: true,\n labelPath: 'name',\n smartLabelMode: 'Trim'\n },\n shapeData: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/usa.json'),\n shapeSettings: {\n autofill: true\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n },\n }\n ]\n });\n maps.appendTo('#datalabel');\n// code for property panel\n let intersectaction: DropDownList = new DropDownList({\n index: 0,\n placeholder: 'Select intersect action',\n width: 120,\n change: () => {\n maps.layers[0].dataLabelSettings.intersectionAction = <IntersectAction>intersectaction.value;\n maps.refresh();\n }\n });\n intersectaction.appendTo('#intersectaction');\n let smartlabelmode: DropDownList = new DropDownList({\n index: 0,\n placeholder: 'Select smartlabel mode',\n width: 120,\n change: () => {\n maps.layers[0].dataLabelSettings.smartLabelMode = <SmartLabelMode>smartlabelmode.value;\n maps.refresh();\n }\n });\n smartlabelmode.appendTo('#smartlabelmode');\n document.getElementById('select').onchange = () => {\n let element: HTMLInputElement = <HTMLInputElement>(document.getElementById('select'));\n maps.layers[0].dataLabelSettings.visible = element.checked;\n maps.refresh();\n };\n"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"control-section\">\n <div id=\"maps\" align=\"center\"></div>\n <!-- source link -->\n <div style=\"float: right; margin-right: 10px;\">Source:\n <a href=\"https://en.wikipedia.org/wiki/2009_Sumatra_earthquakes\" target=\"_blank\">en.wikipedia.org</a>\n </div>\n</div>\n\n \n <div id=\"template\" style=\"display:none\">\n <div class=\"pulse-container\">\n <div class=\"pulse-box\">\n <div class=\"pulse-css\"></div>\n </div> \n </div>\n </div>\n<!--style for marker -->\n<style>\n.pulse-css {\n width: 20px;\n height: 20px;\n -webkit-border-radius: 20px;\n -moz-border-radius: 20px;\n border-radius: 20px;\n background:#E94430;\n position: relative;\n}\n.pulse-css:before, .pulse-css:after {\n content: '';\n width: 20px;\n height: 20px;\n -webkit-border-radius: 20px;\n -moz-border-radius: 20px;\n border-radius: 20px;\n background-color: #E94430;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n margin: auto;\n transform: scale(0.5);\n transform-origin: center center;\n animation: pulse-me 3s linear infinite;\n}\n.pulse-css:after {\n animation-delay: 2s;\n}\n@keyframes pulse-me {\n 0% {\n transform: scale(0.5);\n opacity: 0;\n }\n 50% {\n opacity: 0.3;\n }\n 70% {\n opacity: 0.1;\n }\n 100% {\n transform: scale(5);\n opacity: 0;\n }\n}\n</style>\n</div></body></html>","index.ts":"{{ripple}}\n/**\n * Earth quake map sample\n */\nimport { Maps, Zoom, Marker, ILoadEventArgs, MapsTheme, MapAjax } from '@syncfusion/ej2-maps';\nMaps.Inject(Zoom, Marker);\n\n\n let maps: Maps = new Maps({\n\n centerPosition: {\n latitude: 1.5053645409602877,\n longitude: 105.14038085937499\n },\n zoomSettings: {\n enable: false,\n zoomFactor: 7,\n mouseWheelZoom: false,\n toolbars: []\n },\n mapsArea: {\n background: '#AEE2FA'\n },\n titleSettings: {\n text: '7.6 Magnitude earthquake strikes Sumatra - 2009',\n textStyle: {\n size: '18px'\n }\n },\n layers: [\n {\n animationDuration: 1000,\n shapeDataPath: 'name',\n shapePropertyPath: 'name',\n shapeData: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/asia.json'),\n markerSettings: [{\n visible: true,\n height: 100,\n width: 100,\n template: '#template',\n animationDuration: 0,\n dataSource: [{\n latitude: 1.625758360412755, longitude: 98.5693359375\n }]\n }],\n shapeSettings: {\n fill: '#FFFDCF',\n border: {\n color: '#3497C3 ',\n width: 0.5\n }\n },\n dataLabelSettings: {\n visible: true,\n labelPath: 'name',\n smartLabelMode: 'Hide'\n }\n }\n ]\n });\n maps.appendTo('#maps');\n"}
|
||||
{"index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"control-section\">\n <div id=\"maps\" align=\"center\"></div>\n <!-- source link -->\n <div style=\"float: right; margin-right: 10px;\">Source:\n <a href=\"https://en.wikipedia.org/wiki/2009_Sumatra_earthquakes\" target=\"_blank\">en.wikipedia.org</a>\n </div>\n</div>\n\n \n <div id=\"template\" style=\"display:none\">\n <div class=\"pulse-container\">\n <div class=\"pulse-box\">\n <div class=\"pulse-css\"></div>\n </div> \n </div>\n </div>\n<!--style for marker -->\n<style>\n.pulse-css {\n width: 20px;\n height: 20px;\n -webkit-border-radius: 20px;\n -moz-border-radius: 20px;\n border-radius: 20px;\n background:#E94430;\n position: relative;\n}\n.pulse-css:before, .pulse-css:after {\n content: '';\n width: 20px;\n height: 20px;\n -webkit-border-radius: 20px;\n -moz-border-radius: 20px;\n border-radius: 20px;\n background-color: #E94430;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n margin: auto;\n transform: scale(0.5);\n transform-origin: center center;\n animation: pulse-me 3s linear infinite;\n}\n.pulse-css:after {\n animation-delay: 2s;\n}\n@keyframes pulse-me {\n 0% {\n transform: scale(0.5);\n opacity: 0;\n }\n 50% {\n opacity: 0.3;\n }\n 70% {\n opacity: 0.1;\n }\n 100% {\n transform: scale(5);\n opacity: 0;\n }\n}\n</style>\n</div></body></html>","index.ts":"{{ripple}}\n/**\n * Earth quake map sample\n */\nimport { Maps, Zoom, Marker, ILoadEventArgs, MapsTheme, MapAjax } from '@syncfusion/ej2-maps';\nMaps.Inject(Zoom, Marker);\n\n\n let maps: Maps = new Maps({\n\n centerPosition: {\n latitude: 1.5053645409602877,\n longitude: 105.14038085937499\n },\n zoomSettings: {\n enable: false,\n zoomFactor: 7,\n mouseWheelZoom: false,\n toolbars: []\n },\n mapsArea: {\n background: '#AEE2FA'\n },\n titleSettings: {\n text: '7.6 Magnitude earthquake strikes Sumatra - 2009',\n textStyle: {\n size: '18px'\n }\n },\n layers: [\n {\n animationDuration: 1000,\n shapeDataPath: 'name',\n shapePropertyPath: 'name',\n shapeData: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/asia.json'),\n markerSettings: [{\n visible: true,\n height: 100,\n width: 100,\n template: '#template',\n animationDuration: 0,\n dataSource: [{\n latitude: 1.625758360412755, longitude: 98.5693359375\n }]\n }],\n shapeSettings: {\n fill: '#FFFDCF',\n border: {\n color: '#3497C3 ',\n width: 0.5\n }\n },\n dataLabelSettings: {\n visible: true,\n labelPath: 'name',\n smartLabelMode: 'Hide'\n }\n }\n ]\n });\n maps.appendTo('#maps');\n"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"control-section\">\n <div id=\"container\" align=\"center\"></div>\n <!-- source link-->\n <div style=\"float: right; margin-right: 10px;\">Source:\n <a href=\"https://en.wikipedia.org/wiki/List_of_states_and_union_territories_of_India_by_population\" target=\"_blank\">en.wikipedia.org</a>\n </div>\n</div>\n\n \n</div></body></html>","index.ts":"{{ripple}}\n/**\n * Heat Map sample\n */\nimport { Maps, Marker, MapsTooltip, Legend, ILoadEventArgs, MapsTheme, MapAjax } from '@syncfusion/ej2-maps';\nMaps.Inject(Marker, MapsTooltip, Legend);\n\n\n\n let maps: Maps = new Maps({\n\n format: 'n',\n useGroupingSeparator: true,\n titleSettings: {\n text: \"State wise India's population - 2011\",\n textStyle: {\n size: '16px'\n }\n },\n legendSettings: {\n visible: true,\n mode: 'Interactive',\n position: 'Bottom',\n height: '10',\n width: '350',\n labelDisplayMode: 'Trim',\n alignment: 'Center'\n },\n zoomSettings: {\n enable: false\n },\n layers: [\n {\n shapeData: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/india.json'),\n shapePropertyPath: 'NAME_1',\n shapeDataPath: 'Name',\n dataSource: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/heatmap-datasource.json'),\n tooltipSettings: {\n visible: true,\n valuePath: 'population',\n format: 'State: ${Name} <br> Population: ${population}'\n },\n shapeSettings: {\n border: {\n width: 0.2,\n color: 'white'\n },\n colorValuePath: 'population',\n colorMapping: [{\n from: 60000, to: 400000, color: '#9fdfdf', label: '<0.4M'\n },\n {\n from: 400000, to: 10000000, color: '#79d2d2', label: '0.4-10M'\n },\n {\n from: 10000000, to: 20000000, color: '#53C6C6', label: '10-20M'\n },\n {\n from: 20000000, to: 70000000, color: '#39acac', label: '20-70M'\n },\n {\n from: 70000000, to: 100000000, color: '#339999', label: '70-100M'\n },\n {\n from: 100000000, to: 200000000, color: '#2d8686', label: '>100M'\n }\n ]\n }\n }\n ]\n });\n maps.appendTo('#container');\n\n"}
|
||||
{"index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"control-section\">\n <div id=\"container\" align=\"center\"></div>\n <!-- source link-->\n <div style=\"float: right; margin-right: 10px;\">Source:\n <a href=\"https://en.wikipedia.org/wiki/List_of_states_and_union_territories_of_India_by_population\" target=\"_blank\">en.wikipedia.org</a>\n </div>\n</div>\n\n \n</div></body></html>","index.ts":"{{ripple}}\n/**\n * Heat Map sample\n */\nimport { Maps, Marker, MapsTooltip, Legend, ILoadEventArgs, MapsTheme, MapAjax } from '@syncfusion/ej2-maps';\nMaps.Inject(Marker, MapsTooltip, Legend);\n\n\n\n let maps: Maps = new Maps({\n\n format: 'n',\n useGroupingSeparator: true,\n titleSettings: {\n text: \"State wise India's population - 2011\",\n textStyle: {\n size: '16px'\n }\n },\n legendSettings: {\n visible: true,\n mode: 'Interactive',\n position: 'Bottom',\n height: '10',\n width: '350',\n labelDisplayMode: 'Trim',\n alignment: 'Center'\n },\n zoomSettings: {\n enable: false\n },\n layers: [\n {\n shapeData: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/india.json'),\n shapePropertyPath: 'NAME_1',\n shapeDataPath: 'Name',\n dataSource: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/heatmap-datasource.json'),\n tooltipSettings: {\n visible: true,\n valuePath: 'population',\n format: 'State: ${Name} <br> Population: ${population}'\n },\n shapeSettings: {\n border: {\n width: 0.2,\n color: 'white'\n },\n colorValuePath: 'population',\n colorMapping: [{\n from: 60000, to: 400000, color: '#9fdfdf', label: '<0.4M'\n },\n {\n from: 400000, to: 10000000, color: '#79d2d2', label: '0.4-10M'\n },\n {\n from: 10000000, to: 20000000, color: '#53C6C6', label: '10-20M'\n },\n {\n from: 20000000, to: 70000000, color: '#39acac', label: '20-70M'\n },\n {\n from: 70000000, to: 100000000, color: '#339999', label: '70-100M'\n },\n {\n from: 100000000, to: 200000000, color: '#2d8686', label: '>100M'\n }\n ]\n }\n }\n ]\n });\n maps.appendTo('#container');\n\n"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"col-lg-9 control-section\">\n <div class=\"content-wrapper\">\n <div id=\"container\"></div>\n <!--source link-->\n <div style=\"float: right; margin-right: 10px;\">Source:\n <a href=\"https://en.wikipedia.org/wiki/List_of_U.S._states_and_territories_by_population\" target=\"_blank\">en.wikipedia.org</a>\n </div>\n </div>\n </div>\n <div class=\"col-lg-3 property-section\">\n <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n <tbody><tr id=\"button-control\" style=\"height: 50px\">\n <td align=\"center\">\n <div>\n <button id=\"togglebtn\" style=\"text-transform:none !important;width: 80px;\">Print</button>\n </div>\n </td>\n </tr>\n </tbody></table>\n </div>\n \n \n\n\n</div></body></html>","index.ts":"{{ripple}}\n/**\n * Changing exporting sample.\n */\nimport { Maps, ILoadEventArgs, MapsTheme, ITooltipRenderEventArgs, MapsTooltip, Legend, MapAjax, Print } from '@syncfusion/ej2-maps';\nimport { Button } from '@syncfusion/ej2-buttons';\nMaps.Inject(Legend, MapsTooltip, Print);\n\n\n let maps: Maps = new Maps({\n\n tooltipRender: (args: ITooltipRenderEventArgs) => {\n if (args.options.toString().indexOf('population') > -1) {\n args.cancel = true;\n }\n },\n allowPrint: true,\n format: 'n',\n useGroupingSeparator: true,\n titleSettings: {\n text: 'State-wise US population - 2010',\n textStyle: {\n size: '16px'\n },\n },\n legendSettings: {\n visible: true,\n mode: 'Interactive',\n position: 'Bottom',\n height: '10',\n width: '350',\n labelDisplayMode: 'Trim',\n alignment: 'Center'\n },\n layers: [\n {\n shapeData: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/usa.json'),\n shapeDataPath: 'name',\n shapePropertyPath: 'name',\n dataSource: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/print-datasource.json'),\n shapeSettings: {\n border: {\n width: 0.5,\n color: 'gray'\n },\n colorValuePath: 'population',\n colorMapping: [\n {\n from: 580000, to: 2800000, color: '#dae8f1', label: '<3M'\n },\n {\n from: 2800000, to: 5280000, color: '#b0cde1', label: '3-6M'\n },\n {\n from: 5280000, to: 8260000, color: '#90bad8', label: '6-9M'\n },\n {\n from: 8260000, to: 11660000, color: '#6ea7d2', label: '9-12M'\n },\n {\n from: 11660000, to: 19600000, color: '#4c96cb', label: '12-20M'\n },\n {\n from: 19600000, to: 26500000, color: '#3182bd', label: '20-25M'\n },\n {\n from: 26500000, to: 38400000, color: '#004374', label: '>25M'\n }\n ]\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'population',\n format: 'State: ${name} <br> Population: ${population}'\n }\n }\n ]\n });\n maps.appendTo('#container');\n // onclick event\n let togglebtn: Button = new Button({\n iconCss: 'e-icons e-play-icon', cssClass: 'e-flat', isPrimary: true\n });\n togglebtn.appendTo('#togglebtn');\n document.getElementById('togglebtn').onclick = () => {\n maps.print();\n };\n"}
|
||||
{"index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"col-lg-9 control-section\">\n <div class=\"content-wrapper\">\n <div id=\"container\"></div>\n <!--source link-->\n <div style=\"float: right; margin-right: 10px;\">Source:\n <a href=\"https://en.wikipedia.org/wiki/List_of_U.S._states_and_territories_by_population\" target=\"_blank\">en.wikipedia.org</a>\n </div>\n </div>\n </div>\n <div class=\"col-lg-3 property-section\">\n <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n <tbody><tr id=\"button-control\" style=\"height: 50px\">\n <td align=\"center\">\n <div>\n <button id=\"togglebtn\" style=\"text-transform:none !important;width: 80px;\">Print</button>\n </div>\n </td>\n </tr>\n </tbody></table>\n </div>\n \n \n\n\n</div></body></html>","index.ts":"{{ripple}}\n/**\n * Changing exporting sample.\n */\nimport { Maps, ILoadEventArgs, MapsTheme, ITooltipRenderEventArgs, MapsTooltip, Legend, MapAjax, Print } from '@syncfusion/ej2-maps';\nimport { Button } from '@syncfusion/ej2-buttons';\nMaps.Inject(Legend, MapsTooltip, Print);\n\n\n let maps: Maps = new Maps({\n\n tooltipRender: (args: ITooltipRenderEventArgs) => {\n if (args.options.toString().indexOf('population') > -1) {\n args.cancel = true;\n }\n },\n allowPrint: true,\n format: 'n',\n useGroupingSeparator: true,\n titleSettings: {\n text: 'State-wise US population - 2010',\n textStyle: {\n size: '16px'\n },\n },\n legendSettings: {\n visible: true,\n mode: 'Interactive',\n position: 'Bottom',\n height: '10',\n width: '350',\n labelDisplayMode: 'Trim',\n alignment: 'Center'\n },\n layers: [\n {\n shapeData: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/usa.json'),\n shapeDataPath: 'name',\n shapePropertyPath: 'name',\n dataSource: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/print-datasource.json'),\n shapeSettings: {\n border: {\n width: 0.5,\n color: 'gray'\n },\n colorValuePath: 'population',\n colorMapping: [\n {\n from: 580000, to: 2800000, color: '#dae8f1', label: '<3M'\n },\n {\n from: 2800000, to: 5280000, color: '#b0cde1', label: '3-6M'\n },\n {\n from: 5280000, to: 8260000, color: '#90bad8', label: '6-9M'\n },\n {\n from: 8260000, to: 11660000, color: '#6ea7d2', label: '9-12M'\n },\n {\n from: 11660000, to: 19600000, color: '#4c96cb', label: '12-20M'\n },\n {\n from: 19600000, to: 26500000, color: '#3182bd', label: '20-25M'\n },\n {\n from: 26500000, to: 38400000, color: '#004374', label: '>25M'\n }\n ]\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'population',\n format: 'State: ${name} <br> Population: ${population}'\n }\n }\n ]\n });\n maps.appendTo('#container');\n // onclick event\n let togglebtn: Button = new Button({\n iconCss: 'e-icons e-play-icon', cssClass: 'e-flat', isPrimary: true\n });\n togglebtn.appendTo('#togglebtn');\n document.getElementById('togglebtn').onclick = () => {\n maps.print();\n };\n"}
|
||||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"col-lg-9 control-section\">\n <div id=\"container\" align=\"center\"></div>\n <!-- source link-->\n <div style=\"float: right; margin-right: 10px;\">Source:\n <a href=\"https://en.wikipedia.org/wiki/List_of_members_of_the_United_Nations_Security_Council\" target=\"_blank\">en.wikipedia.org</a>\n </div>\n</div>\n<!-- property panel-->\n<div class=\"col-lg-3 property-section\">\n <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n <tbody><tr style=\"height: 50px\">\n <td style=\"width: 60%\">\n <div>Projection Type</div>\n </td>\n <td style=\"width: 40%;\">\n <select name=\"projectionType\" id=\"projectiontype\" style=\"margin-left: -25px\">\n <option value=\"Mercator\">Mercator</option>\n <option value=\"Equirectangular\">Equirectangular</option> \n <option value=\"Miller\">Miller</option>\n <option value=\"Eckert3\">Eckert3</option>\n <option value=\"Eckert5\">Eckert5</option>\n <option value=\"Eckert6\">Eckert6</option>\n <option value=\"Winkel3\">Winkel3</option> \n <option value=\"AitOff\">AitOff</option>\n </select>\n </td>\n </tr>\n </tbody></table>\n</div>\n\n \n\n</div></body></html>","index.ts":"{{ripple}}/**\n * Changing projection sample\n */\nimport { Maps, Zoom, Legend, ProjectionType, MapsTooltip, ILoadEventArgs, MapsTheme, MapAjax } from '@syncfusion/ej2-maps';\nimport { DropDownList } from '@syncfusion/ej2-dropdowns';\nMaps.Inject(Zoom, Legend, MapsTooltip);\n\n/**\n * code for maps\n */\n\n\n let maps: Maps = new Maps({\n\n titleSettings: {\n text: 'Members of the UN Security Council',\n textStyle: {\n size: '16px'\n },\n subtitleSettings: {\n text: '- In 2017',\n alignment: 'Far'\n }\n },\n legendSettings: {\n visible: true\n },\n zoomSettings: {\n enable: false\n },\n layers: [\n {\n shapeData: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/world-map.json'),\n shapeDataPath: 'Country',\n shapePropertyPath: 'name',\n dataSource: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/projection-datasource.json'),\n tooltipSettings: {\n visible: true,\n valuePath: 'Country',\n },\n shapeSettings: {\n fill: '#E5E5E5',\n colorMapping: [\n {\n value: 'Permanent',\n color: '#EDB46F'\n },\n {\n color: '#F1931B',\n value: 'Non-Permanent'\n }\n ],\n colorValuePath: 'Membership'\n }\n }\n ]\n });\n maps.appendTo('#container');\n // code for property panel \n let projection: DropDownList = new DropDownList({\n index: 0,\n placeholder: 'Select projection type',\n width: 120,\n change: () => {\n maps.projectionType = <ProjectionType>projection.value;\n maps.refresh();\n }\n });\n projection.appendTo('#projectiontype');\n"}
|
||||
{"index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"col-lg-9 control-section\">\n <div id=\"container\" align=\"center\"></div>\n <!-- source link-->\n <div style=\"float: right; margin-right: 10px;\">Source:\n <a href=\"https://en.wikipedia.org/wiki/List_of_members_of_the_United_Nations_Security_Council\" target=\"_blank\">en.wikipedia.org</a>\n </div>\n</div>\n<!-- property panel-->\n<div class=\"col-lg-3 property-section\">\n <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n <tbody><tr style=\"height: 50px\">\n <td style=\"width: 60%\">\n <div>Projection Type</div>\n </td>\n <td style=\"width: 40%;\">\n <select name=\"projectionType\" id=\"projectiontype\" style=\"margin-left: -25px\">\n <option value=\"Mercator\">Mercator</option>\n <option value=\"Equirectangular\">Equirectangular</option> \n <option value=\"Miller\">Miller</option>\n <option value=\"Eckert3\">Eckert3</option>\n <option value=\"Eckert5\">Eckert5</option>\n <option value=\"Eckert6\">Eckert6</option>\n <option value=\"Winkel3\">Winkel3</option> \n <option value=\"AitOff\">AitOff</option>\n </select>\n </td>\n </tr>\n </tbody></table>\n</div>\n\n \n\n</div></body></html>","index.ts":"{{ripple}}/**\n * Changing projection sample\n */\nimport { Maps, Zoom, Legend, ProjectionType, MapsTooltip, ILoadEventArgs, MapsTheme, MapAjax } from '@syncfusion/ej2-maps';\nimport { DropDownList } from '@syncfusion/ej2-dropdowns';\nMaps.Inject(Zoom, Legend, MapsTooltip);\n\n/**\n * code for maps\n */\n\n\n let maps: Maps = new Maps({\n\n titleSettings: {\n text: 'Members of the UN Security Council',\n textStyle: {\n size: '16px'\n },\n subtitleSettings: {\n text: '- In 2017',\n alignment: 'Far'\n }\n },\n legendSettings: {\n visible: true\n },\n zoomSettings: {\n enable: false\n },\n layers: [\n {\n shapeData: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/world-map.json'),\n shapeDataPath: 'Country',\n shapePropertyPath: 'name',\n dataSource: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/projection-datasource.json'),\n tooltipSettings: {\n visible: true,\n valuePath: 'Country',\n },\n shapeSettings: {\n fill: '#E5E5E5',\n colorMapping: [\n {\n value: 'Permanent',\n color: '#EDB46F'\n },\n {\n color: '#F1931B',\n value: 'Non-Permanent'\n }\n ],\n colorValuePath: 'Membership'\n }\n }\n ]\n });\n maps.appendTo('#container');\n // code for property panel \n let projection: DropDownList = new DropDownList({\n index: 0,\n placeholder: 'Select projection type',\n width: 120,\n change: () => {\n maps.projectionType = <ProjectionType>projection.value;\n maps.refresh();\n }\n });\n projection.appendTo('#projectiontype');\n"}
|
||||
|
|
@ -3,7 +3,6 @@
|
|||
"directory": "maps",
|
||||
"category": "Data Visualization",
|
||||
"ftName": "maps",
|
||||
"type": "update",
|
||||
"samples": [{
|
||||
"url": "default",
|
||||
"name": "Default Functionalities",
|
||||
|
|
@ -368,7 +367,6 @@
|
|||
"name": "Print",
|
||||
"description": "This demo for Essential JS2 Maps control illustrates the printing functionality in the maps control.",
|
||||
"category": "Print and Export",
|
||||
"type": "update",
|
||||
"api": {
|
||||
"Maps": [
|
||||
"titleSettings",
|
||||
|
|
@ -386,7 +384,6 @@
|
|||
{
|
||||
"url": "export",
|
||||
"name": "Export",
|
||||
"type": "update",
|
||||
"description": "This demo for Essential JS2 Maps control illustrates the exporting functionality in the maps control.",
|
||||
"category": "Print and Export",
|
||||
"api": {
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<!-- tooltip template-->\n<div id=\"template\" style=\"display:none\">\n <div class=\"toolback\">\n <div class=\"listing2\">\n <center>\n ${country} \n </center>\n </div>\n <hr style=\"margin-top: 2px;margin-bottom:5px;border:0.5px solid #DDDDDD\">\n <div>\n <span class=\"listing1\">Finalist : </span><span class=\"listing2\">${value1}</span>\n </div> \n <div>\n <span class=\"listing1\">Win : </span><span class=\"listing2\">${value2}</span>\n </div>\n </div>\n \n</div>\n\n<div class=\"control-section\">\n <div id=\"container\" align=\"center\"></div>\n <!-- source link-->\n <div style=\"float: right; margin-right: 10px;\">Source:\n <a href=\"https://en.wikipedia.org/wiki/List_of_Cricket_World_Cup_finals\" target=\"_blank\">en.wikipedia.org</a>\n </div>\n</div>\n\n\n<!-- style for tooltip template -->\n<style>\n .toolback {\n border-radius: 4px;\n border: 1px #abb9c6;\n opacity: 90%;\n background: rgba(53, 63, 76, 0.90);\n box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.40);\n padding-bottom: 5px;\n padding-top: 10px;\n padding-left: 10px;\n padding-right: 10px;\n width: 90px;\n }\n .listing1 {\n font-size:13px;\n color:#cccccc\n }\n .listing2 {\n font-size:13px;\n color:#ffffff;\n font-weight: 500;\n }\n</style>\n \n</div></body></html>","index.ts":"{{ripple}}\n/**\n * Maps Tooltip\n */\nimport { Maps, MapsTooltip, Legend, ITooltipRenderEventArgs, ILoadEventArgs, MapsTheme, MapAjax } from '@syncfusion/ej2-maps';\nMaps.Inject(MapsTooltip, Legend);\n\n\n\n let maps: Maps = new Maps({\n\n tooltipRender: (args: ITooltipRenderEventArgs) => {\n if (!args.options['data']) {\n args.cancel = true;\n }\n },\n titleSettings: {\n text: 'Finalist in Cricket World Cup',\n textStyle: {\n size: '16px'\n }\n },\n zoomSettings: {\n enable: false\n },\n legendSettings: {\n visible: true,\n mode: 'Interactive',\n position: 'Left',\n orientation: 'Vertical',\n height: '70%',\n width: '10'\n },\n layers: [\n {\n shapeData: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/world-map.json'),\n shapePropertyPath: 'name',\n shapeDataPath: 'name',\n dataSource: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/tooltip-datasource.json'),\n tooltipSettings: {\n visible: true,\n valuePath: 'name',\n template: '#template'\n },\n shapeSettings: {\n fill: '#E5E5E5',\n colorMapping: [\n {\n value: '1',\n color: '#b3daff'\n },\n {\n color: '#80c1ff',\n value: '2'\n },\n {\n color: '#1a90ff',\n value: '3'\n },\n {\n color: '#005cb3',\n value: '7'\n }\n ],\n colorValuePath: 'value1'\n }\n }\n ]\n });\n maps.appendTo('#container');\n\n"}
|
||||
{"index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<!-- tooltip template-->\n<div id=\"template\" style=\"display:none\">\n <div class=\"toolback\">\n <div class=\"listing2\">\n <center>\n ${country} \n </center>\n </div>\n <hr style=\"margin-top: 2px;margin-bottom:5px;border:0.5px solid #DDDDDD\">\n <div>\n <span class=\"listing1\">Finalist : </span><span class=\"listing2\">${value1}</span>\n </div> \n <div>\n <span class=\"listing1\">Win : </span><span class=\"listing2\">${value2}</span>\n </div>\n </div>\n \n</div>\n\n<div class=\"control-section\">\n <div id=\"container\" align=\"center\"></div>\n <!-- source link-->\n <div style=\"float: right; margin-right: 10px;\">Source:\n <a href=\"https://en.wikipedia.org/wiki/List_of_Cricket_World_Cup_finals\" target=\"_blank\">en.wikipedia.org</a>\n </div>\n</div>\n\n\n<!-- style for tooltip template -->\n<style>\n .toolback {\n border-radius: 4px;\n border: 1px #abb9c6;\n opacity: 90%;\n background: rgba(53, 63, 76, 0.90);\n box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.40);\n padding-bottom: 5px;\n padding-top: 10px;\n padding-left: 10px;\n padding-right: 10px;\n width: 90px;\n }\n .listing1 {\n font-size:13px;\n color:#cccccc\n }\n .listing2 {\n font-size:13px;\n color:#ffffff;\n font-weight: 500;\n }\n</style>\n \n</div></body></html>","index.ts":"{{ripple}}\n/**\n * Maps Tooltip\n */\nimport { Maps, MapsTooltip, Legend, ITooltipRenderEventArgs, ILoadEventArgs, MapsTheme, MapAjax } from '@syncfusion/ej2-maps';\nMaps.Inject(MapsTooltip, Legend);\n\n\n\n let maps: Maps = new Maps({\n\n tooltipRender: (args: ITooltipRenderEventArgs) => {\n if (!args.options['data']) {\n args.cancel = true;\n }\n },\n titleSettings: {\n text: 'Finalist in Cricket World Cup',\n textStyle: {\n size: '16px'\n }\n },\n zoomSettings: {\n enable: false\n },\n legendSettings: {\n visible: true,\n mode: 'Interactive',\n position: 'Left',\n orientation: 'Vertical',\n height: '70%',\n width: '10'\n },\n layers: [\n {\n shapeData: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/world-map.json'),\n shapePropertyPath: 'name',\n shapeDataPath: 'name',\n dataSource: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/tooltip-datasource.json'),\n tooltipSettings: {\n visible: true,\n valuePath: 'name',\n template: '#template'\n },\n shapeSettings: {\n fill: '#E5E5E5',\n colorMapping: [\n {\n value: '1',\n color: '#b3daff'\n },\n {\n color: '#80c1ff',\n value: '2'\n },\n {\n color: '#1a90ff',\n value: '3'\n },\n {\n color: '#005cb3',\n value: '7'\n }\n ],\n colorValuePath: 'value1'\n }\n }\n ]\n });\n maps.appendTo('#container');\n\n"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -150,11 +150,7 @@ L10n.load({
|
|||
'Free Text': 'نص حر',
|
||||
'Import Failed': 'نوع ملف سلمان أو اسم الملف غير صالح ؛ يرجى تحديد ملف سلمانصالح',
|
||||
'File not found': 'لم يتم العثور على ملف سلمان المستورد في الموقع المطلوب',
|
||||
'Export Failed': 'شل إجراء تصدير التعليقات التوضيحية ؛ يرجى التأكد من إضافة التعليقات التوضيحية بشكل صحيح',
|
||||
'Highlight context': 'تسليط الضوء',
|
||||
'Underline context': 'تسطير',
|
||||
'Strikethrough context': 'الإضراب من خلال',
|
||||
'Draw Ink': 'رسم الحبر'
|
||||
'Export Failed': 'شل إجراء تصدير التعليقات التوضيحية ؛ يرجى التأكد من إضافة التعليقات التوضيحية بشكل صحيح'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,10 +3,9 @@
|
|||
"directory": "pdfviewer",
|
||||
"category": "Viewer",
|
||||
"ftName": "pdfviewer",
|
||||
"type": "update",
|
||||
"samples": [
|
||||
{
|
||||
"url":"default", "name": "Default Functionalities", "description": "This demo for Essential JS 2 PdfViewer shows the default rendering of the PdfViewer with minimum configuration.", "category": "PDF Viewer", "type": "update"
|
||||
"url":"default", "name": "Default Functionalities", "description": "This demo for Essential JS 2 PdfViewer shows the default rendering of the PdfViewer with minimum configuration.", "category": "PDF Viewer"
|
||||
},
|
||||
{
|
||||
"url":"custom-toolbar", "name": "Custom Toolbar", "description":"This demo for Essential JS 2 PdfViewer shows the default rendering of the PdfViewer with custom toolbar configuration.", "category": "PDF Viewer"
|
||||
|
|
|
|||
|
|
@ -50,8 +50,6 @@ let Pivot_Data: IDataSet[] = (pivotData as any).data;
|
|||
fieldCnt--;
|
||||
}
|
||||
values = fieldCollections[fields[0]];
|
||||
valuesddl.dataSource = values;
|
||||
valuesddl.dataBind();
|
||||
isInitial = false;
|
||||
}
|
||||
for (let field of pivotObj.dataSourceSettings.filterSettings) {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div class="control-section" style="overflow:auto;">
|
||||
<div id="dropdown-control" style="margin-bottom:5px;">
|
||||
<table style="width: 350px;">
|
||||
<table style="width: 300px; margin-left: 10px;">
|
||||
<tbody>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
|
|
@ -39,6 +39,6 @@
|
|||
}
|
||||
.control-section {
|
||||
min-height: 255px !important;
|
||||
padding-top: 5px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -69,9 +69,11 @@ let data: IDataSet[] = (localData as any).data;
|
|||
placeholder: 'Content Type',
|
||||
change: (args: ChangeEventArgs) => {
|
||||
if (args.value === 'JSON') {
|
||||
pivotObj.engineModule.fieldList = undefined;
|
||||
pivotObj.dataSourceSettings = jsonReport;
|
||||
} else if (args.value === 'CSV') {
|
||||
csvReport.dataSource = getCSVData();
|
||||
pivotObj.engineModule.fieldList = undefined;
|
||||
pivotObj.dataSourceSettings = csvReport;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,6 @@
|
|||
{
|
||||
"de": {
|
||||
"pivotview": {
|
||||
"png": "PNG",
|
||||
"jpeg": "JPEG",
|
||||
"svg": "SVG",
|
||||
"pie": "Kuchen",
|
||||
"funnel": "Trichter",
|
||||
"doughnut": "Krapfen",
|
||||
"pyramid": "Pyramide",
|
||||
"showLegend": "Legende anzeigen",
|
||||
"exit": "Ausgang",
|
||||
"invalidJSON": "Ungültige JSON-Daten",
|
||||
"invalidCSV": "Ungültige CSV-Daten",
|
||||
"all": "alles",
|
||||
"multipleItems": "mehrere Artikel",
|
||||
"Sum": "Summe",
|
||||
|
|
@ -266,7 +255,7 @@
|
|||
"no": "Nein",
|
||||
"numberFormatMenu": "Zahlenformatierung ...",
|
||||
"conditionalFormatingMenu": "Bedingte Formatierung...",
|
||||
"removeCalculatedField": "Möchten Sie dieses berechnete Feld wirklich löschen?",
|
||||
"removeCalculatedField":"Möchten Sie dieses berechnete Feld wirklich löschen?",
|
||||
"replaceConfirmBefore": "Ein Bericht mit dem Namen ",
|
||||
"replaceConfirmAfter": " ist bereits vorhanden. Möchten Sie es ersetzen?"
|
||||
},
|
||||
|
|
@ -437,17 +426,6 @@
|
|||
},
|
||||
"ar": {
|
||||
"pivotview": {
|
||||
"png": "بي إن جي",
|
||||
"jpeg": "JPEG",
|
||||
"svg": "SVG",
|
||||
"pie": "فطيرة",
|
||||
"funnel": "قمع",
|
||||
"doughnut": "الدونات",
|
||||
"pyramid": "هرم",
|
||||
"showLegend": "إظهار الأسطورة",
|
||||
"exit": "خروج",
|
||||
"invalidJSON": "بيانات JSON غير صالحة",
|
||||
"invalidCSV": "بيانات CSV غير صالحة",
|
||||
"all": "الكل",
|
||||
"multipleItems": "عناصر متعددة",
|
||||
"Sum": "مجموع",
|
||||
|
|
@ -702,7 +680,7 @@
|
|||
"no": "لا",
|
||||
"numberFormatMenu": "تنسيق الأرقام ...",
|
||||
"conditionalFormatingMenu": "تنسيق مشروط...",
|
||||
"removeCalculatedField": "هل أنت متأكد أنك تريد حذف هذا الحقل المحسوب؟",
|
||||
"removeCalculatedField":"هل أنت متأكد أنك تريد حذف هذا الحقل المحسوب؟",
|
||||
"replaceConfirmBefore": "تقرير مسمى ",
|
||||
"replaceConfirmAfter": "موجود مسبقا. هل تريد استبدالها؟ "
|
||||
},
|
||||
|
|
@ -872,17 +850,6 @@
|
|||
},
|
||||
"en": {
|
||||
"pivotview": {
|
||||
"png": "PNG",
|
||||
"jpeg": "JPEG",
|
||||
"svg": "SVG",
|
||||
"pie": "Pie",
|
||||
"funnel": "Funnel",
|
||||
"doughnut": "Doughnut",
|
||||
"pyramid": "Pyramid",
|
||||
"showLegend": "Show Legend",
|
||||
"exit": "Exit",
|
||||
"invalidJSON": "Invalid JSON data",
|
||||
"invalidCSV": "Invalid CSV data",
|
||||
"all": "All",
|
||||
"multipleItems": "Multiple items",
|
||||
"Sum": "Sum",
|
||||
|
|
@ -1137,7 +1104,7 @@
|
|||
"no": "No",
|
||||
"numberFormatMenu": "Number Formatting...",
|
||||
"conditionalFormatingMenu": "Conditional Formatting...",
|
||||
"removeCalculatedField": "Are you sure you want to delete this calculated field?",
|
||||
"removeCalculatedField":"Are you sure you want to delete this calculated field?",
|
||||
"replaceConfirmBefore": "A report named ",
|
||||
"replaceConfirmAfter": " already exists. Do you want to replace it?"
|
||||
},
|
||||
|
|
@ -1307,17 +1274,6 @@
|
|||
},
|
||||
"zh": {
|
||||
"pivotview": {
|
||||
"png": "PNG",
|
||||
"jpeg": "JPEG格式",
|
||||
"svg": "SVG",
|
||||
"pie": "馅饼",
|
||||
"funnel": "漏斗",
|
||||
"doughnut": "甜甜圈",
|
||||
"pyramid": "金字塔",
|
||||
"showLegend": "显示图例",
|
||||
"exit": "出口",
|
||||
"invalidJSON": "无效的CSV数据",
|
||||
"invalidCSV": "无效的CSV数据",
|
||||
"all": "所有",
|
||||
"multipleItems": "多个项目",
|
||||
"Sum": "和",
|
||||
|
|
@ -1572,7 +1528,7 @@
|
|||
"no": "沒有",
|
||||
"numberFormatMenu": "數字格式...",
|
||||
"conditionalFormatingMenu": "條件格式...",
|
||||
"removeCalculatedField": "您确定要删除此计算字段吗？",
|
||||
"removeCalculatedField":"您确定要删除此计算字段吗？",
|
||||
"replaceConfirmBefore": "一份名为 ",
|
||||
"replaceConfirmAfter": " 已经存在。您要更换吗？"
|
||||
},
|
||||
|
|
@ -1742,17 +1698,6 @@
|
|||
},
|
||||
"fr-CH": {
|
||||
"pivotview": {
|
||||
"png": "PNG",
|
||||
"jpeg": "JPEG",
|
||||
"svg": "SVG",
|
||||
"pie": "Tarte",
|
||||
"funnel": "Entonnoir",
|
||||
"doughnut": "Donut",
|
||||
"pyramid": "Pyramide",
|
||||
"showLegend": "Afficher la légende",
|
||||
"exit": "Sortie",
|
||||
"invalidJSON": "Données JSON non valides",
|
||||
"invalidCSV": "Données CSV non valides",
|
||||
"all": "tout",
|
||||
"multipleItems": "plusieurs articles",
|
||||
"Sum": "Somme",
|
||||
|
|
@ -2007,7 +1952,7 @@
|
|||
"no": "Non",
|
||||
"numberFormatMenu": "Formatage des nombres ...",
|
||||
"conditionalFormatingMenu": "Mise en forme conditionnelle...",
|
||||
"removeCalculatedField": "Voulez-vous vraiment supprimer ce champ calculé?",
|
||||
"removeCalculatedField":"Voulez-vous vraiment supprimer ce champ calculé?",
|
||||
"replaceConfirmBefore": "Un rapport nommé ",
|
||||
"replaceConfirmAfter": " existe déjà. Voulez-vous le remplacer?"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ PivotView.Inject(FieldList, GroupingBar, CalculatedField, Toolbar, ConditionalFo
|
|||
]
|
||||
},
|
||||
width: '100%',
|
||||
height: 600,
|
||||
height: 500,
|
||||
toolbarRender: function (args: ToolbarArgs): void {
|
||||
args.customToolbar.splice(6, 0, {
|
||||
type: 'Separator'
|
||||
|
|
|
|||
|
|
@ -92,10 +92,6 @@
|
|||
the report dynamically.
|
||||
</br>
|
||||
</p>
|
||||
<p>
|
||||
The drill down/up operation in the accumulation charts, such as pie, doughnut, funnel and pyramid, can be performed using the context menu on the click over the appropriate series.
|
||||
</br>
|
||||
</p>
|
||||
<p>
|
||||
<strong>Injecting Module:</strong>
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div class="control-section" style="overflow:auto;">
|
||||
<div id="dropdown-control" style="margin-bottom:5px;">
|
||||
<table style="width: 350px;">
|
||||
<table style="width: 300px; margin-left: 10px;">
|
||||
<tbody>
|
||||
<tr style="height: 50px">
|
||||
<td>
|
||||
|
|
@ -49,6 +49,6 @@
|
|||
|
||||
<style>
|
||||
.control-section {
|
||||
padding-top: 5px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -29,6 +29,7 @@ enableRipple(false);
|
|||
|
||||
let csvReport: IDataOptions = {
|
||||
url: 'https://bi.syncfusion.com/productservice/api/sales',
|
||||
dataSource: undefined,
|
||||
type: 'CSV',
|
||||
expandAll: false,
|
||||
enableSorting: true,
|
||||
|
|
@ -62,8 +63,10 @@ enableRipple(false);
|
|||
placeholder: 'Content Type',
|
||||
change: (args: ChangeEventArgs) => {
|
||||
if (args.value === 'JSON') {
|
||||
pivotObj.engineModule.fieldList = undefined;
|
||||
pivotObj.dataSourceSettings = jsonReport;
|
||||
} else if (args.value === 'CSV') {
|
||||
pivotObj.engineModule.fieldList = undefined;
|
||||
pivotObj.dataSourceSettings = csvReport;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
"name": "Pivot Table",
|
||||
"directory": "pivot-table",
|
||||
"category": "Grids",
|
||||
"type": "update",
|
||||
"samples": [
|
||||
{
|
||||
"url": "default",
|
||||
|
|
@ -14,7 +13,6 @@
|
|||
"url": "local",
|
||||
"name": "Local Data",
|
||||
"category": "Data Binding",
|
||||
"type": "update",
|
||||
"description": "This demo for Essential JS2 Pivot Table control demonstrate the basic rendering of the pivot table with local JSON or CSV data",
|
||||
"sourceFiles":[
|
||||
{ "displayName": "local.ts", "path":"src/pivot-table/local.ts" },
|
||||
|
|
@ -27,7 +25,6 @@
|
|||
"url": "remote",
|
||||
"name": "Remote Data",
|
||||
"category": "Data Binding",
|
||||
"type": "update",
|
||||
"description": "This demo for Essential JS2 Pivot Table control demonstrate the basic rendering of the pivot table with remote JSON or CSV data"
|
||||
},
|
||||
{
|
||||
|
|
@ -39,7 +36,6 @@
|
|||
{
|
||||
"url": "pivot-chart",
|
||||
"name": "Pivot Chart",
|
||||
"type": "update",
|
||||
"category": "Integration",
|
||||
"description": "This demo for Essential JS2 Pivot Table control demonstrate the basic rendering of the pivot table data into a simple pivot chart"
|
||||
},
|
||||
|
|
@ -89,7 +85,6 @@
|
|||
"url": "toolbar",
|
||||
"name": "Toolbar",
|
||||
"category": "User Interaction",
|
||||
"type": "update",
|
||||
"description": "This demo for Essential JS2 Pivot Table control demonstrate the toolbar feature with pivot table and pivot chart"
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ let Pivot_Data: IDataSet[] = (pivotData as any).data;
|
|||
filters: [{ name: 'Product_Categories', caption: 'Product Categories' }]
|
||||
},
|
||||
width: '100%',
|
||||
height:600,
|
||||
height: 450,
|
||||
saveReport: function (args: SaveReportArgs): void {
|
||||
let reports: SaveReportArgs[] = [];
|
||||
let isSaved: boolean = false;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { ProgressBar, ProgressAnnotation, ILoadedEventArgs, ProgressTheme } from '@syncfusion/ej2-progressbar';
|
||||
import { ProgressBar, ProgressAnnotation, ILoadedEventArgs, ProgressTheme } from '@syncfusion/ej2-progressbar';
|
||||
import { EmitType } from '@syncfusion/ej2-base';
|
||||
import { Button } from '@syncfusion/ej2-buttons';
|
||||
ProgressBar.Inject(ProgressAnnotation);
|
||||
|
|
@ -34,7 +34,7 @@ ProgressBar.Inject(ProgressAnnotation);
|
|||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.progressBar.theme = <ProgressTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
switch (selectedTheme) {
|
||||
case 'material':
|
||||
args.progressBar.annotations[0].content = annotationElementContent(annotationColors[0], args.progressBar.element.id);
|
||||
|
|
|
|||
|
|
@ -17,11 +17,11 @@ ProgressBar.Inject(ProgressAnnotation);
|
|||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.progressBar.theme = <ProgressTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
if(selectedTheme === 'highcontrast') {
|
||||
for (let i = 0; i < div.length; i++) {
|
||||
div[i].setAttribute('style', 'color:white');
|
||||
}
|
||||
}
|
||||
if (selectedTheme === 'highcontrast') {
|
||||
for (let i: number = 0; i < div.length; i++) {
|
||||
div[i].setAttribute('style', 'color:white');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
let button: Button = new Button();
|
||||
|
|
|
|||
|
|
@ -45,11 +45,11 @@ ProgressBar.Inject(ProgressAnnotation);
|
|||
load: progressLoad,
|
||||
progressCompleted: (args: IProgressValueEventArgs) => {
|
||||
clearTimeout(clearTimeout1);
|
||||
clearTimeout1 = setTimeout(
|
||||
clearTimeout1 = +setTimeout(
|
||||
() => {
|
||||
//tslint:disable-next-line
|
||||
pausePlay.annotations[0].content = '<img src="src/progress-bar/images/' + (pausePlay.theme).toLowerCase() + '-Play.svg"></img>';
|
||||
pausePlay.dataBind();
|
||||
//tslint:disable-next-line
|
||||
pausePlay.annotations[0].content = '<img src="src/progress-bar/images/' + (pausePlay.theme).toLowerCase() + '-Play.svg"></img>';
|
||||
pausePlay.dataBind();
|
||||
},
|
||||
2000);
|
||||
},
|
||||
|
|
@ -75,11 +75,11 @@ ProgressBar.Inject(ProgressAnnotation);
|
|||
},
|
||||
progressCompleted: (args: IProgressValueEventArgs) => {
|
||||
clearTimeout(clearTimeout2);
|
||||
clearTimeout2 = setTimeout(
|
||||
clearTimeout2 = +setTimeout(
|
||||
() => {
|
||||
//tslint:disable-next-line
|
||||
downloadProgress.annotations[0].content = '<img src="src/progress-bar/images/' + (downloadProgress.theme).toLowerCase() + '-Tick.svg"></img>';
|
||||
downloadProgress.dataBind();
|
||||
//tslint:disable-next-line
|
||||
downloadProgress.annotations[0].content = '<img src="src/progress-bar/images/' + (downloadProgress.theme).toLowerCase() + '-Tick.svg"></img>';
|
||||
downloadProgress.dataBind();
|
||||
},
|
||||
2000);
|
||||
},
|
||||
|
|
@ -97,7 +97,7 @@ ProgressBar.Inject(ProgressAnnotation);
|
|||
width: '160px',
|
||||
height: '160px',
|
||||
cornerRadius: 'Round',
|
||||
startAngle: 180,
|
||||
startAngle: 180,
|
||||
endAngle: 180,
|
||||
animation: {
|
||||
enable: true,
|
||||
|
|
|
|||
|
|
@ -9,19 +9,18 @@ import { Button } from '@syncfusion/ej2-buttons';
|
|||
// tslint:disable-next-line:max-func-body-length
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
|
||||
let progressLoad: EmitType<ILoadedEventArgs> = (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.progressBar.theme = <ProgressTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
if(args.progressBar.theme === 'Material') {
|
||||
args.progressBar.trackColor = '#eee';
|
||||
}
|
||||
if(selectedTheme === 'highcontrast') {
|
||||
args.progressBar.labelStyle.color = '#000000';
|
||||
args.progressBar.trackColor = '#969696';
|
||||
}
|
||||
if (args.progressBar.theme === 'Material') {
|
||||
args.progressBar.trackColor = '#eee';
|
||||
}
|
||||
if (selectedTheme === 'highcontrast') {
|
||||
args.progressBar.labelStyle.color = '#000000';
|
||||
args.progressBar.trackColor = '#969696';
|
||||
}
|
||||
};
|
||||
|
||||
let button: Button = new Button();
|
||||
|
|
@ -34,8 +33,8 @@ import { Button } from '@syncfusion/ej2-buttons';
|
|||
width: '100%',
|
||||
showProgressValue: true,
|
||||
value: 40,
|
||||
trackThickness:24,
|
||||
progressThickness:24,
|
||||
trackThickness: 24,
|
||||
progressThickness: 24,
|
||||
labelStyle: {
|
||||
textAlignment: 'Center',
|
||||
text: '40% Complete (Success)',
|
||||
|
|
@ -56,8 +55,8 @@ import { Button } from '@syncfusion/ej2-buttons';
|
|||
width: '100%',
|
||||
showProgressValue: true,
|
||||
value: 50,
|
||||
trackThickness:24,
|
||||
progressThickness:24,
|
||||
trackThickness: 24,
|
||||
progressThickness: 24,
|
||||
role: 'Info',
|
||||
load: progressLoad,
|
||||
labelStyle: {
|
||||
|
|
@ -80,11 +79,11 @@ import { Button } from '@syncfusion/ej2-buttons';
|
|||
role: 'Warning',
|
||||
load: progressLoad,
|
||||
value: 60,
|
||||
trackThickness:24,
|
||||
progressThickness:24,
|
||||
trackThickness: 24,
|
||||
progressThickness: 24,
|
||||
labelStyle: {
|
||||
textAlignment: 'Center',
|
||||
text: '60% Complete (Warning)',
|
||||
text: '60% Complete (Warning)',
|
||||
color: '#ffffff'
|
||||
},
|
||||
animation: {
|
||||
|
|
@ -100,8 +99,8 @@ import { Button } from '@syncfusion/ej2-buttons';
|
|||
width: '100%',
|
||||
showProgressValue: true,
|
||||
value: 70,
|
||||
trackThickness:24,
|
||||
progressThickness:24,
|
||||
trackThickness: 24,
|
||||
progressThickness: 24,
|
||||
role: 'Danger',
|
||||
load: progressLoad,
|
||||
labelStyle: {
|
||||
|
|
|
|||
|
|
@ -10,18 +10,17 @@ import { Button } from '@syncfusion/ej2-buttons';
|
|||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let div: HTMLCollection = document.getElementsByClassName('progressbar-label');
|
||||
|
||||
let progressLoad: EmitType<ILoadedEventArgs> = (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.progressBar.theme = <ProgressTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
if(selectedTheme === 'highcontrast') {
|
||||
for (let i = 0; i < div.length; i++) {
|
||||
if (selectedTheme === 'highcontrast') {
|
||||
for (let i: number = 0; i < div.length; i++) {
|
||||
div[i].setAttribute('style', 'color:white');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
let button: Button = new Button();
|
||||
button = new Button({ cssClass: 'e-outline', isPrimary: true });
|
||||
|
|
@ -98,10 +97,10 @@ import { Button } from '@syncfusion/ej2-buttons';
|
|||
|
||||
let replayBtn: HTMLElement = document.getElementById('reLoad') as HTMLElement;
|
||||
replayBtn.onclick = () => {
|
||||
uploadProgress.refresh();
|
||||
successProgress.refresh();
|
||||
warningsProgress.refresh();
|
||||
errorProgress.refresh();
|
||||
activeProgress.refresh();
|
||||
};
|
||||
uploadProgress.refresh();
|
||||
successProgress.refresh();
|
||||
warningsProgress.refresh();
|
||||
errorProgress.refresh();
|
||||
activeProgress.refresh();
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { ProgressBar, ILoadedEventArgs, ProgressTheme, ProgressAnnotation} from '@syncfusion/ej2-progressbar';
|
||||
import { ProgressBar, ILoadedEventArgs, ProgressTheme, ProgressAnnotation } from '@syncfusion/ej2-progressbar';
|
||||
ProgressBar.Inject(ProgressAnnotation);
|
||||
|
||||
/**
|
||||
|
|
@ -8,7 +8,6 @@ ProgressBar.Inject(ProgressAnnotation);
|
|||
// tslint:disable-next-line:max-func-body-length
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
|
||||
let linearProgress: ProgressBar = new ProgressBar({
|
||||
type: 'Linear',
|
||||
height: '30',
|
||||
|
|
@ -18,7 +17,7 @@ ProgressBar.Inject(ProgressAnnotation);
|
|||
gapWidth: 5,
|
||||
trackThickness: 15,
|
||||
progressThickness: 15,
|
||||
cornerRadius:'Square',
|
||||
cornerRadius: 'Square',
|
||||
animation: {
|
||||
enable: true,
|
||||
duration: 2000
|
||||
|
|
@ -28,9 +27,9 @@ ProgressBar.Inject(ProgressAnnotation);
|
|||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.progressBar.theme = <ProgressTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
if(selectedTheme === 'highcontrast') {
|
||||
args.progressBar.trackColor = '#969696';
|
||||
}
|
||||
if (selectedTheme === 'highcontrast') {
|
||||
args.progressBar.trackColor = '#969696';
|
||||
}
|
||||
}
|
||||
});
|
||||
linearProgress.appendTo('#linearSegment');
|
||||
|
|
@ -53,28 +52,34 @@ ProgressBar.Inject(ProgressAnnotation);
|
|||
annotations: [{
|
||||
content: '<div id="point1" style="font-size:24px;font-weight:bold;color:#0078D6"><span></span></div>'
|
||||
}],
|
||||
cornerRadius:'Square',
|
||||
cornerRadius: 'Square',
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.progressBar.theme = <ProgressTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
|
||||
switch (selectedTheme) {
|
||||
case 'material':
|
||||
args.progressBar.annotations[0].content = '<div id="point1" style="font-size:24px;font-weight:bold;color:#e91e63"><span></span></div>';
|
||||
args.progressBar.annotations[0].content =
|
||||
'<div id="point1" style="font-size:24px;font-weight:bold;color:#e91e63"><span></span></div>';
|
||||
break;
|
||||
case 'fabric':
|
||||
args.progressBar.annotations[0].content = '<div id="point1" style="font-size:24px;font-weight:bold;color:#0078D6"><span></span></div>';
|
||||
args.progressBar.annotations[0].content =
|
||||
'<div id="point1" style="font-size:24px;font-weight:bold;color:#0078D6"><span></span></div>';
|
||||
break;
|
||||
case 'bootstrap':
|
||||
args.progressBar.annotations[0].content = '<div id="point1" style="font-size:24px;font-weight:bold;color:#317ab9"><span></span></div>';
|
||||
args.progressBar.annotations[0].content =
|
||||
'<div id="point1" style="font-size:24px;font-weight:bold;color:#317ab9"><span></span></div>';
|
||||
break;
|
||||
case 'bootstrap4':
|
||||
args.progressBar.annotations[0].content = '<div id="point1" style="font-size:24px;font-weight:bold;color:#007bff"><span></span></div>';
|
||||
args.progressBar.annotations[0].content =
|
||||
'<div id="point1" style="font-size:24px;font-weight:bold;color:#007bff"><span></span></div>';
|
||||
break;
|
||||
default:
|
||||
args.progressBar.trackColor = '#969696';
|
||||
args.progressBar.annotations[0].content = '<div id="point1" style="font-size:24px;font-weight:bold;color:#FFD939"><span></span></div>';
|
||||
args.progressBar.annotations[0].content =
|
||||
'<div id="point1" style="font-size:24px;font-weight:bold;color:#FFD939"><span></span></div>';
|
||||
break;
|
||||
|
||||
}
|
||||
|
|
@ -82,13 +87,13 @@ ProgressBar.Inject(ProgressAnnotation);
|
|||
});
|
||||
circularProgress.appendTo('#circularSegment');
|
||||
|
||||
let timer = setInterval(timing,2500)
|
||||
function timing() {
|
||||
if(circularProgress.value >= circularProgress.maximum) {
|
||||
clearInterval(timer)
|
||||
} else {
|
||||
circularProgress.value += 20
|
||||
linearProgress.value += 20
|
||||
let timer: number = setInterval(timing, 2500);
|
||||
function timing(): void {
|
||||
if (circularProgress.value >= circularProgress.maximum) {
|
||||
clearInterval(timer);
|
||||
} else {
|
||||
circularProgress.value += 20;
|
||||
linearProgress.value += 20;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ ProgressBar.Inject(ProgressAnnotation);
|
|||
width: '160px',
|
||||
height: '160px',
|
||||
enableRtl: false,
|
||||
progressColor: "white",
|
||||
progressColor: 'white',
|
||||
radius: '100%',
|
||||
innerRadius: '190%',
|
||||
trackThickness: 80,
|
||||
|
|
@ -29,6 +29,7 @@ ProgressBar.Inject(ProgressAnnotation);
|
|||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.progressBar.theme = <ProgressTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
// tslint:disable-next-line:align
|
||||
switch (selectedTheme) {
|
||||
case 'material':
|
||||
args.progressBar.trackColor = '#e91e63';
|
||||
|
|
@ -42,7 +43,8 @@ ProgressBar.Inject(ProgressAnnotation);
|
|||
case 'highcontrast':
|
||||
args.progressBar.trackColor = '#FFD939';
|
||||
args.progressBar.progressColor = '#000000';
|
||||
args.progressBar.annotations[0].content = '<div id="point1" style="font-size:20px;font-weight:bold;color:#000000;fill:#000000"><span>60%</span></div>';
|
||||
args.progressBar.annotations[0].content =
|
||||
'<div id="point1" style="font-size:20px;font-weight:bold;color:#000000;fill:#000000"><span>60%</span></div>';
|
||||
break;
|
||||
default:
|
||||
args.progressBar.trackColor = '#007bff';
|
||||
|
|
|
|||
|
|
@ -3,14 +3,12 @@
|
|||
"directory": "progress-bar",
|
||||
"category": "Notifications",
|
||||
"ftName": "progress-bar",
|
||||
"type": "update",
|
||||
"samples": [
|
||||
{
|
||||
"url": "linear",
|
||||
"name": "Linear",
|
||||
"description":"This demo for Essential JS2 Progress Bar control shows the linear rendering of progress bar",
|
||||
"category": "Progress Bar",
|
||||
"type": "update",
|
||||
"api": {
|
||||
"ProgressBar": [
|
||||
"value",
|
||||
|
|
@ -67,7 +65,6 @@
|
|||
"name": "Labels",
|
||||
"description":"This demo for Essential JS2 Progress Bar control shows the label of progress bar",
|
||||
"category": "Progress Bar",
|
||||
"type": "update",
|
||||
"api": {
|
||||
"ProgressBar": [
|
||||
"value",
|
||||
|
|
@ -96,7 +93,6 @@
|
|||
"name": "Stripes",
|
||||
"description":"This demo for Essential JS2 Progress Bar control shows the striped progress bar",
|
||||
"category": "Progress Bar",
|
||||
"type": "new",
|
||||
"api": {
|
||||
"ProgressBar": [
|
||||
"value",
|
||||
|
|
@ -110,7 +106,6 @@
|
|||
"name": "Progress Segment",
|
||||
"description":"This demo for Essential JS2 Progress Bar control shows active state of progress bar",
|
||||
"category": "Progress Bar",
|
||||
"type": "new",
|
||||
"api": {
|
||||
"ProgressBar": [
|
||||
"value",
|
||||
|
|
|
|||
|
|
@ -9,18 +9,17 @@ import { Button } from '@syncfusion/ej2-buttons';
|
|||
// tslint:disable-next-line:max-func-body-length
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
|
||||
let progressLoad: EmitType<ILoadedEventArgs> = (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.progressBar.theme = <ProgressTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
if(args.progressBar.theme === 'Material') {
|
||||
args.progressBar.trackColor = '#eee';
|
||||
}
|
||||
if(selectedTheme === 'highcontrast') {
|
||||
args.progressBar.trackColor = '#969696';
|
||||
}
|
||||
if (args.progressBar.theme === 'Material') {
|
||||
args.progressBar.trackColor = '#eee';
|
||||
}
|
||||
if (selectedTheme === 'highcontrast') {
|
||||
args.progressBar.trackColor = '#969696';
|
||||
}
|
||||
};
|
||||
|
||||
let button: Button = new Button();
|
||||
|
|
@ -41,7 +40,7 @@ import { Button } from '@syncfusion/ej2-buttons';
|
|||
duration: 2000,
|
||||
delay: 0,
|
||||
},
|
||||
load:progressLoad
|
||||
load: progressLoad
|
||||
});
|
||||
dangerProgress.appendTo('#danger');
|
||||
let warningProgress: ProgressBar = new ProgressBar({
|
||||
|
|
@ -58,7 +57,7 @@ import { Button } from '@syncfusion/ej2-buttons';
|
|||
duration: 2000,
|
||||
delay: 0,
|
||||
},
|
||||
load:progressLoad
|
||||
load: progressLoad
|
||||
});
|
||||
warningProgress.appendTo('#warning');
|
||||
let infoProgress: ProgressBar = new ProgressBar({
|
||||
|
|
@ -75,7 +74,7 @@ import { Button } from '@syncfusion/ej2-buttons';
|
|||
duration: 2000,
|
||||
delay: 0,
|
||||
},
|
||||
load:progressLoad
|
||||
load: progressLoad
|
||||
});
|
||||
infoProgress.appendTo('#info');
|
||||
|
||||
|
|
@ -93,36 +92,36 @@ import { Button } from '@syncfusion/ej2-buttons';
|
|||
duration: 2000,
|
||||
delay: 0,
|
||||
},
|
||||
load:progressLoad
|
||||
load: progressLoad
|
||||
});
|
||||
successProgress.appendTo('#success');
|
||||
|
||||
let animationBtn: HTMLElement = document.getElementById('animation') as HTMLElement;
|
||||
animationBtn.onclick = () => {
|
||||
if(!dangerProgress.animation.enable) {
|
||||
dangerProgress.animation.enable = true;
|
||||
animationBtn.innerHTML = 'Stop Animation';
|
||||
dangerProgress.refresh();
|
||||
if (!dangerProgress.animation.enable) {
|
||||
dangerProgress.animation.enable = true;
|
||||
animationBtn.innerHTML = 'Stop Animation';
|
||||
dangerProgress.refresh();
|
||||
} else {
|
||||
dangerProgress.animation.enable = false;
|
||||
animationBtn.innerHTML = 'Start Animation';
|
||||
dangerProgress.refresh();
|
||||
dangerProgress.animation.enable = false;
|
||||
animationBtn.innerHTML = 'Start Animation';
|
||||
dangerProgress.refresh();
|
||||
}
|
||||
if(!warningProgress.animation.enable) {
|
||||
if (!warningProgress.animation.enable) {
|
||||
warningProgress.animation.enable = true;
|
||||
warningProgress.refresh();
|
||||
} else {
|
||||
warningProgress.animation.enable = false;
|
||||
warningProgress.refresh();
|
||||
}
|
||||
if(!infoProgress.animation.enable) {
|
||||
if (!infoProgress.animation.enable) {
|
||||
infoProgress.animation.enable = true;
|
||||
infoProgress.refresh();
|
||||
} else {
|
||||
infoProgress.animation.enable = false;
|
||||
infoProgress.refresh();
|
||||
}
|
||||
if(!successProgress.animation.enable) {
|
||||
if (!successProgress.animation.enable) {
|
||||
successProgress.animation.enable = true;
|
||||
successProgress.refresh();
|
||||
} else {
|
||||
|
|
@ -130,4 +129,4 @@ import { Button } from '@syncfusion/ej2-buttons';
|
|||
successProgress.refresh();
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -22,8 +22,7 @@ Schedule.Inject(TimelineViews, Resize, DragAndDrop);
|
|||
resources: ['MeetingRoom']
|
||||
},
|
||||
resources: [{
|
||||
field: 'RoomId', title: 'Room Type',
|
||||
name: 'MeetingRoom', allowMultiple: true,
|
||||
field: 'RoomId', title: 'Room Type', name: 'MeetingRoom', allowMultiple: true,
|
||||
dataSource: [
|
||||
{ text: 'Room A', id: 1, color: '#98AFC7' },
|
||||
{ text: 'Room B', id: 2, color: '#99c68e' },
|
||||
|
|
@ -39,7 +38,6 @@ Schedule.Inject(TimelineViews, Resize, DragAndDrop);
|
|||
textField: 'text', idField: 'id', colorField: 'color'
|
||||
}],
|
||||
eventSettings: {
|
||||
dataSource: <Object[]>extend([], (dataSource as any).roomData, null, true),
|
||||
fields: {
|
||||
id: 'Id',
|
||||
subject: { title: 'Summary', name: 'Subject' },
|
||||
|
|
@ -47,15 +45,19 @@ Schedule.Inject(TimelineViews, Resize, DragAndDrop);
|
|||
description: { title: 'Comments', name: 'Description' },
|
||||
startTime: { title: 'From', name: 'StartTime' },
|
||||
endTime: { title: 'To', name: 'EndTime' }
|
||||
}
|
||||
},
|
||||
dataSource: <Object[]>extend([], (dataSource as any).roomData, null, true)
|
||||
}
|
||||
});
|
||||
scheduleObj.appendTo('#Schedule');
|
||||
|
||||
//custom code start
|
||||
function onChange(args: ChangeEventArgs): void {
|
||||
scheduleObj.rowAutoHeight = args.checked;
|
||||
}
|
||||
new CheckBox({ label: 'Row Auto Height', checked: true, change: onChange }, '#adaptive-rows');
|
||||
let checkboxObj: CheckBox = new CheckBox({
|
||||
label: 'Row Auto Height', checked: true,
|
||||
change: (args: ChangeEventArgs): void => {
|
||||
scheduleObj.rowAutoHeight = args.checked;
|
||||
}
|
||||
});
|
||||
checkboxObj.appendTo('#adaptive-rows');
|
||||
//custom code end
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -27,10 +27,10 @@ Schedule.Inject(TimelineViews, TimelineMonth, Resize, DragAndDrop);
|
|||
field: 'TaskId', title: 'Category', name: 'Categories', allowMultiple: true,
|
||||
dataSource: [
|
||||
{ text: 'Nancy', id: 1, groupId: 1, color: '#df5286' },
|
||||
{ text: 'Steven', id: 2, groupId: 1, color: '#7fa900' },
|
||||
{ text: 'Robert', id: 3, groupId: 2, color: '#ea7a57' },
|
||||
{ text: 'Smith', id: 4, groupId: 2, color: '#5978ee' },
|
||||
{ text: 'Micheal', id: 5, groupId: 3, color: '#df5286' }
|
||||
{ text: 'Micheal', id: 5, groupId: 3, color: '#df5286' },
|
||||
{ text: 'Steven', id: 2, groupId: 1, color: '#7fa900' },
|
||||
{ text: 'Smith', id: 4, groupId: 2, color: '#5978ee' }
|
||||
],
|
||||
textField: 'text', idField: 'id', groupIDField: 'groupId', colorField: 'color'
|
||||
}]
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ Schedule.Inject(Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop);
|
|||
width: '100%',
|
||||
height: '650px',
|
||||
selectedDate: new Date(2018, 1, 15),
|
||||
eventSettings: { dataSource: data },
|
||||
eventSettings: { dataSource: extend([], (dataSource as { [key: string]: Object }).zooEventsData, null, true) as Object[] },
|
||||
eventRendered: (args: EventRenderedArgs) => applyCategoryColor(args, scheduleObj.currentView)
|
||||
});
|
||||
scheduleObj.appendTo('#Schedule');
|
||||
|
|
|
|||
|
|
@ -0,0 +1,922 @@
|
|||
<div class="col-lg-12 control-section">
|
||||
<div class="content-wrapper">
|
||||
<div class="schedule-overview">
|
||||
<div class="overview-header">
|
||||
<div class="overview-titlebar">
|
||||
<div class="left-panel">
|
||||
<div class="schedule-overview-title" style="border: 1px solid transparent;">Scheduler
|
||||
Overview Functionalities</div>
|
||||
</div>
|
||||
<div class="center-panel">
|
||||
<button id="timezoneBtn">UTC</button>
|
||||
<button id="timeBtn">Time</button>
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<div class="control-panel">
|
||||
<button id="printBtn">Print</button>
|
||||
</div>
|
||||
<div class="control-panel" style="display: inline-flex;padding-left:15px;">
|
||||
<div class="e-icons e-schedule-import e-btn-icon e-icon-left" style="line-height: 40px;">
|
||||
</div>
|
||||
<input type='file' id='icalendar' name='iCalendar' />
|
||||
</div>
|
||||
<div class="control-panel">
|
||||
<button id="exporting">Export</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview-toolbar">
|
||||
<div style="height: 70px;width: calc(100% - 90px);">
|
||||
<div id="toolbar_options"></div>
|
||||
</div>
|
||||
<div style="height:70px;width:90px;">
|
||||
<button id="settingsBtn">Settings</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview-content">
|
||||
<div class="left-panel">
|
||||
<div class="overview-scheduler">
|
||||
<div id="scheduler"></div>
|
||||
<ul id="ContextMenu"></ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-panel hide">
|
||||
<div class="control-panel e-css">
|
||||
<div class="col-row">
|
||||
<div class="col-left">
|
||||
<label style="line-height: 34px; margin: 0;">First Day of Week</label>
|
||||
</div>
|
||||
<div class="col-right">
|
||||
<input type="text" id="weekFirstDay" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-row">
|
||||
<div class="col-left">
|
||||
<label style="line-height: 34px; margin: 0;">Work week</label>
|
||||
</div>
|
||||
<div class="col-right">
|
||||
<input type="text" id="workWeekDays" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-row">
|
||||
<div class="col-left">
|
||||
<label style="line-height: 34px; margin: 0;">Resources</label>
|
||||
</div>
|
||||
<div class="col-right">
|
||||
<input type="text" id="resources" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-row">
|
||||
<div class="col-left">
|
||||
<label style="line-height: 34px; margin: 0;">Timezone</label>
|
||||
</div>
|
||||
<div class="col-right">
|
||||
<input type="text" id="timezone" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-row">
|
||||
<div class="col-left">
|
||||
<label style="line-height: 34px; margin: 0;">Day Start Hour</label>
|
||||
</div>
|
||||
<div class="col-right">
|
||||
<input type="text" id="dayStartHour" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-row">
|
||||
<div class="col-left">
|
||||
<label style="line-height: 34px; margin: 0;">Day End Hour</label>
|
||||
</div>
|
||||
<div class="col-right">
|
||||
<input type="text" id="dayEndHour" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-row">
|
||||
<div class="col-left">
|
||||
<label style="line-height: 34px; margin: 0;">Work Start Hour</label>
|
||||
</div>
|
||||
<div class="col-right">
|
||||
<input type="text" id="workHourStart" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-row">
|
||||
<div class="col-left">
|
||||
<label style="line-height: 34px; margin: 0;">Work End Hour</label>
|
||||
</div>
|
||||
<div class="col-right">
|
||||
<input type="text" id="workHourEnd" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-row">
|
||||
<div class="col-left">
|
||||
<label style="line-height: 34px; margin: 0;">Slot Duration</label>
|
||||
</div>
|
||||
<div class="col-right">
|
||||
<input type="text" id="slotDuration" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-row">
|
||||
<div class="col-left">
|
||||
<label style="line-height: 34px; margin: 0;">Slot Interval</label>
|
||||
</div>
|
||||
<div class="col-right">
|
||||
<input type="text" id="slotInterval" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="action-description">
|
||||
<p>This sample demonstrates the overview of Javascript Scheduler with its overall features. Use the toolbar buttons
|
||||
to play with Scheduler functionalities.</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>The Javascript Scheduler is a fully-features calendar component that is used to manage appointments with multiple
|
||||
resources. The data can be pulled from the <code>DataManager</code> component or <code>IEnumerable</code> of
|
||||
objects or Restful web services and bind the data fields using <code>ScheduleEventSettings.ScheduleField</code>.
|
||||
</p>
|
||||
<p>In this demo, Javascript Scheduler features such as Multiple views, Templates (Date Header, Quick Info),
|
||||
Resources, Grouping, Timezone, Timescale, etc... are used along with multiple resources.</p>
|
||||
</div>
|
||||
|
||||
<script id="date-header-template" type="text/x-template">
|
||||
<div><div class="date-text">${getDateHeaderText(data.date)}</div>${getWeather(data.date)}</div>
|
||||
</script>
|
||||
|
||||
<script id="header-template" type="text/x-template">
|
||||
<div class="quick-info-header">
|
||||
<div class="quick-info-header-content" style="${getHeaderStyles(data)}">
|
||||
<div class="quick-info-title">${if (elementType == "cell")}Add Appointment${else}Appointment Details${/if}</div>
|
||||
<div class="duration-text">${getHeaderDetails(data)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script id="content-template" type="text/x-template">
|
||||
<div class="quick-info-content">
|
||||
${if (elementType == "cell")}
|
||||
<div class="e-cell-content">
|
||||
<div class="content-area">
|
||||
<input id="title" placeholder="Title" />
|
||||
</div>
|
||||
<div class="content-area">
|
||||
<input id="eventType" placeholder="Choose Type" />
|
||||
</div>
|
||||
<div class="content-area">
|
||||
<input id="notes" placeholder="Notes" />
|
||||
</div>
|
||||
</div>
|
||||
${else}
|
||||
<div class="event-content">
|
||||
<div class="meeting-type-wrap">
|
||||
<label>Subject</label>:
|
||||
<span>${Subject}</span>
|
||||
</div>
|
||||
<div class="meeting-subject-wrap">
|
||||
<label>Type</label>:
|
||||
<span>${getEventType(data)}</span>
|
||||
</div>
|
||||
<div class="notes-wrap">
|
||||
<label>Notes</label>:
|
||||
<span>${Description}</span>
|
||||
</div>
|
||||
</div>
|
||||
${/if}
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script id="footer-template" type="text/x-template">
|
||||
<div class="quick-info-footer">
|
||||
${if (elementType == "cell")}
|
||||
<div class="cell-footer">
|
||||
<button id="more-details">More Details</button>
|
||||
<button id="add">Add</button>
|
||||
</div>
|
||||
${else}
|
||||
<div class="event-footer">
|
||||
<button id="delete">Delete</button>
|
||||
<button id="more-details">More Details</button>
|
||||
</div>
|
||||
${/if}
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<!-- custom code start -->
|
||||
<style type="text/css">
|
||||
.material .e-schedule-clock::before {
|
||||
content: "\e20c";
|
||||
}
|
||||
|
||||
.fabric .e-schedule-clock::before,
|
||||
.highcontrast .e-schedule-clock::before {
|
||||
content: "\e97f";
|
||||
}
|
||||
|
||||
.bootstrap .e-schedule-clock::before {
|
||||
content: "\e93e";
|
||||
}
|
||||
|
||||
.bootstrap4 .e-schedule-clock::before {
|
||||
content: "\e7c7";
|
||||
}
|
||||
|
||||
.material .e-schedule-timezone::before,
|
||||
.bootstrap .e-schedule-timezone::before {
|
||||
content: "\e30e";
|
||||
}
|
||||
|
||||
.fabric .e-schedule-timezone::before,
|
||||
.highcontrast .e-schedule-timezone::before {
|
||||
content: "\e311";
|
||||
}
|
||||
|
||||
.bootstrap4 .e-schedule-timezone::before {
|
||||
content: "\e7c9";
|
||||
}
|
||||
|
||||
.material .e-schedule-print::before {
|
||||
content: "\e813";
|
||||
}
|
||||
|
||||
.fabric .e-schedule-print::before,
|
||||
.bootstrap .e-schedule-print::before,
|
||||
.highcontrast .e-schedule-print::before {
|
||||
content: "\e7df";
|
||||
}
|
||||
|
||||
.bootstrap4 .e-schedule-print::before {
|
||||
content: "\e743";
|
||||
}
|
||||
|
||||
.bootstrap4 .e-schedule-import::before {
|
||||
content: "\e77a";
|
||||
}
|
||||
|
||||
.material .e-schedule-ical-export::before,
|
||||
.fabric .e-schedule-ical-export::before {
|
||||
content: "\e711";
|
||||
}
|
||||
|
||||
.bootstrap .e-schedule-ical-export::before {
|
||||
content: "\e702";
|
||||
}
|
||||
|
||||
.bootstrap4 .e-schedule-ical-export::before {
|
||||
content: "\e780";
|
||||
}
|
||||
|
||||
.highcontrast .e-schedule-ical-export::before {
|
||||
content: "\e712";
|
||||
}
|
||||
|
||||
.material .e-schedule-excel-export::before {
|
||||
content: "\e700";
|
||||
}
|
||||
|
||||
.fabric .e-schedule-excel-export::before,
|
||||
.highcontrast .e-schedule-excel-export::before {
|
||||
content: "\242";
|
||||
}
|
||||
|
||||
.bootstrap .e-schedule-excel-export::before {
|
||||
content: "\e70b";
|
||||
}
|
||||
|
||||
.bootstrap4 .e-schedule-excel-export::before {
|
||||
content: "\e74e";
|
||||
}
|
||||
|
||||
.material .e-schedule-add-event::before,
|
||||
.fabric .e-schedule-add-event::before,
|
||||
.bootstrap .e-schedule-add-event::before,
|
||||
.highcontrast .e-schedule-add-event::before {
|
||||
content: "\e823";
|
||||
}
|
||||
|
||||
.bootstrap4 .e-schedule-add-event::before {
|
||||
content: "\e759";
|
||||
}
|
||||
|
||||
.material .e-schedule-add-recurrence-event::before,
|
||||
.bootstrap .e-schedule-add-recurrence-event::before {
|
||||
content: "\e308";
|
||||
}
|
||||
|
||||
.fabric .e-schedule-add-recurrence-event::before,
|
||||
.highcontrast .e-schedule-add-recurrence-event::before {
|
||||
content: "\e309";
|
||||
}
|
||||
|
||||
.bootstrap4 .e-schedule-add-recurrence-event::before {
|
||||
content: "\e7c8";
|
||||
}
|
||||
|
||||
.material .e-schedule-day-view::before {
|
||||
content: "\e31b";
|
||||
}
|
||||
|
||||
.fabric .e-schedule-day-view::before,
|
||||
.highcontrast .e-schedule-day-view::before {
|
||||
content: "\e317";
|
||||
}
|
||||
|
||||
.bootstrap .e-schedule-day-view::before {
|
||||
content: "\e318";
|
||||
}
|
||||
|
||||
.bootstrap4 .e-schedule-day-view::before {
|
||||
content: "\e7b8";
|
||||
}
|
||||
|
||||
.material .e-schedule-week-view::before {
|
||||
content: "\e315";
|
||||
}
|
||||
|
||||
.fabric .e-schedule-week-view::before,
|
||||
.highcontrast .e-schedule-week-view::before {
|
||||
content: "\e31f";
|
||||
}
|
||||
|
||||
.bootstrap .e-schedule-week-view::before {
|
||||
content: "\e320";
|
||||
}
|
||||
|
||||
.bootstrap4 .e-schedule-week-view::before {
|
||||
content: "\e7c0";
|
||||
}
|
||||
|
||||
.material .e-schedule-workweek-view::before {
|
||||
content: "\e314";
|
||||
}
|
||||
|
||||
.fabric .e-schedule-workweek-view::before,
|
||||
.highcontrast .e-schedule-workweek-view::before {
|
||||
content: "\e323";
|
||||
}
|
||||
|
||||
.bootstrap .e-schedule-workweek-view::before {
|
||||
content: "\e319";
|
||||
}
|
||||
|
||||
.bootstrap4 .e-schedule-workweek-view::before {
|
||||
content: "\e7c0";
|
||||
}
|
||||
|
||||
.material .e-schedule-month-view::before,
|
||||
.material .e-schedule-year-view::before {
|
||||
content: "\e93c";
|
||||
}
|
||||
|
||||
.fabric .e-schedule-month-view::before,
|
||||
.fabric .e-schedule-year-view::before,
|
||||
.highcontrast .e-schedule-month-view::before,
|
||||
.highcontrast .e-schedule-year-view::before {
|
||||
content: "\ea90";
|
||||
}
|
||||
|
||||
.bootstrap .e-schedule-month-view::before,
|
||||
.bootstrap .e-schedule-year-view::before {
|
||||
content: "\ea8f";
|
||||
}
|
||||
|
||||
.bootstrap4 .e-schedule-month-view::before,
|
||||
.bootstrap4 .e-schedule-year-view::before {
|
||||
content: "\e7c4";
|
||||
}
|
||||
|
||||
.material .e-schedule-agenda-view::before {
|
||||
content: "\e31d";
|
||||
}
|
||||
|
||||
.fabric .e-schedule-agenda-view::before,
|
||||
.highcontrast .e-schedule-agenda-view::before {
|
||||
content: "\e316";
|
||||
}
|
||||
|
||||
.bootstrap .e-schedule-agenda-view::before {
|
||||
content: "\e31a";
|
||||
}
|
||||
|
||||
.bootstrap4 .e-schedule-agenda-view::before {
|
||||
content: "\e7bd";
|
||||
}
|
||||
|
||||
.e-schedule-toolbar-settings::before {
|
||||
content: "\e679";
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.material .schedule-overview .overview-toolbar .e-toolbar {
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.material .schedule-overview .overview-header .overview-titlebar .e-upload.calendar-import .e-upload-browse-btn {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.highcontrast .schedule-overview .overview-header .overview-titlebar {
|
||||
background-color: #ffd939;
|
||||
}
|
||||
|
||||
.highcontrast .schedule-overview .overview-header,
|
||||
.highcontrast .schedule-overview .overview-content {
|
||||
border: 1px solid #969696;
|
||||
}
|
||||
|
||||
.highcontrast .schedule-overview .overview-content {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.highcontrast .schedule-overview .overview-toolbar .e-toolbar,
|
||||
.highcontrast .schedule-overview .overview-toolbar .e-toolbar .e-toolbar-items .e-toolbar-item.e-separator,
|
||||
.highcontrast .schedule-overview .overview-toolbar .e-toolbar .e-hscroll .e-scroll-nav.e-scroll-left-nav,
|
||||
.highcontrast .schedule-overview .overview-toolbar .e-toolbar .e-hscroll .e-scroll-nav.e-scroll-right-nav {
|
||||
border-color: #969696;
|
||||
}
|
||||
|
||||
.material .schedule-overview .overview-toolbar .overview-toolbar-settings,
|
||||
.material .schedule-overview .overview-content .right-panel .control-panel {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.fabric .schedule-overview .overview-toolbar .overview-toolbar-settings,
|
||||
.fabric .schedule-overview .overview-content .right-panel .control-panel {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.bootstrap .schedule-overview .overview-toolbar .overview-toolbar-settings,
|
||||
.bootstrap .schedule-overview .overview-content .right-panel .control-panel {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.highcontrast .schedule-overview .overview-toolbar .overview-toolbar-settings,
|
||||
.highcontrast .schedule-overview .overview-content .right-panel .control-panel {
|
||||
background-color: #000000;
|
||||
border-color: #969696;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.schedule-overview .overview-header {
|
||||
border: 1px solid #007bff;
|
||||
}
|
||||
|
||||
.schedule-overview .overview-header .overview-titlebar {
|
||||
background-color: #007bff;
|
||||
color: #ffffff;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
padding: 0 10px;
|
||||
font-family: inherit;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.schedule-overview .overview-header .overview-titlebar .right-panel {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.schedule-overview .overview-header .overview-titlebar .e-upload.calendar-import {
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.schedule-overview .overview-header .overview-titlebar .e-upload.calendar-import button,
|
||||
.schedule-overview .overview-header .overview-titlebar .e-upload.calendar-import button:focus,
|
||||
.schedule-overview .overview-header .overview-titlebar .e-upload.calendar-import button:hover {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.schedule-overview .overview-header .overview-titlebar .title-bar-btn,
|
||||
.schedule-overview .overview-header .overview-titlebar .title-bar-btn:hover,
|
||||
.schedule-overview .overview-header .overview-titlebar .title-bar-btn:focus,
|
||||
.schedule-overview .overview-header .overview-titlebar .e-dropdown-btn,
|
||||
.schedule-overview .overview-header .overview-titlebar .e-dropdown-btn.e-btn {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
font-family: inherit;
|
||||
border-color: transparent;
|
||||
border-radius: 2px;
|
||||
color: inherit;
|
||||
font-size: 12px;
|
||||
text-transform: capitalize;
|
||||
height: 40px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.schedule-overview .overview-toolbar {
|
||||
display: flex;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.schedule-overview .overview-toolbar .e-toolbar {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.schedule-overview .overview-toolbar .e-toolbar .e-toolbar-item .e-tbar-btn.e-tbtn-txt {
|
||||
display: inline-grid;
|
||||
}
|
||||
|
||||
.schedule-overview .overview-toolbar .e-toolbar .e-toolbar-item.e-template {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.schedule-overview .overview-toolbar .overview-toolbar-settings {
|
||||
border-radius: 0;
|
||||
background-color: #f8f9fa;
|
||||
border-color: rgba(0, 0, 0, 0.15);
|
||||
border-left-width: 0;
|
||||
border-top-width: 0;
|
||||
box-shadow: none;
|
||||
color: #495057;
|
||||
height: 72px;
|
||||
line-height: 1.6;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.schedule-overview .overview-content {
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
border-top: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.schedule-overview .overview-content .left-panel {
|
||||
height: 600px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.schedule-overview .overview-content .right-panel {
|
||||
display: block;
|
||||
height: 600px;
|
||||
transform: translateX(0%);
|
||||
transition: transform .5s ease, width 500ms;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.schedule-overview .overview-content .right-panel.hide {
|
||||
display: none;
|
||||
transform: translateX(100%);
|
||||
transition: transform .5s ease, width 500ms;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.schedule-overview .overview-content .right-panel .control-panel {
|
||||
background: rgba(248, 249, 250, 1);
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.15);
|
||||
font-size: 14px;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.schedule-overview .overview-content .right-panel .control-panel .col-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.schedule-overview .overview-content .right-panel .control-panel label {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.schedule-overview .overview-content .right-panel .control-panel .col-left {
|
||||
flex: 0 0 41.666667%;
|
||||
max-width: 41.666667%;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.schedule-overview .overview-content .right-panel .control-panel .col-right {
|
||||
flex: 0 0 58.333333%;
|
||||
max-width: 58.333333%;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.schedule-overview .overview-scheduler {
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.schedule-overview .e-schedule .e-vertical-view .e-header-cells {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.schedule-overview .e-schedule .date-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.schedule-overview .e-schedule.e-device .date-text {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.schedule-overview .e-schedule .weather-image {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.schedule-overview .e-schedule .weather-text {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.schedule-overview .e-schedule-toolbar .e-views,
|
||||
.schedule-overview .e-schedule-toolbar .e-schedule-seperator,
|
||||
.schedule-workweek.e-multi-select-list-wrapper.e-checkbox .e-filter-parent,
|
||||
.schedule-resource.e-multi-select-list-wrapper.e-checkbox .e-filter-parent {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.schedule-overview .e-timeline-view .e-resource-left-td,
|
||||
.schedule-overview .e-timeline-month-view .e-resource-left-td {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.schedule-resource.e-multi-select-list-wrapper.e-checkbox .e-list-parent li:first-child {
|
||||
background-image: none;
|
||||
opacity: .5;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.schedule-overview .quick-info-header {
|
||||
background-color: white;
|
||||
padding: 8px 18px;
|
||||
}
|
||||
|
||||
.schedule-overview .quick-info-header-content {
|
||||
justify-content: flex-end;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 5px 10px 5px;
|
||||
}
|
||||
|
||||
.schedule-overview .quick-info-title {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
letter-spacing: 0.48px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.schedule-overview .duration-text {
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.33px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.schedule-overview .content-area {
|
||||
padding: 10px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.schedule-overview .event-content {
|
||||
height: 90px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.schedule-overview .meeting-type-wrap,
|
||||
.schedule-overview .meeting-subject-wrap,
|
||||
.schedule-overview .notes-wrap {
|
||||
font-size: 11px;
|
||||
color: #666;
|
||||
letter-spacing: 0.33px;
|
||||
height: 24px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.schedule-overview .event-content div label {
|
||||
display: inline-block;
|
||||
min-width: 45px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.schedule-overview .event-content div span {
|
||||
font-size: 11px;
|
||||
color: #151515;
|
||||
letter-spacing: 0.33px;
|
||||
line-height: 14px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.schedule-overview .cell-footer.e-btn {
|
||||
background-color: #ffffff;
|
||||
border-color: #878787;
|
||||
color: #878787;
|
||||
}
|
||||
|
||||
.schedule-overview .cell-footer {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.schedule-overview .e-quick-popup-wrapper .e-cell-popup .e-popup-content {
|
||||
padding: 0 14px;
|
||||
}
|
||||
|
||||
.schedule-overview .e-quick-popup-wrapper .e-event-popup .e-popup-footer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.schedule-overview .e-quick-popup-wrapper .e-popup-footer button:first-child {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.schedule-overview .calendar-import.e-upload {
|
||||
border: 0;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.schedule-overview .calendar-import.e-upload .e-file-select-wrap {
|
||||
padding: 0
|
||||
}
|
||||
|
||||
.schedule-overview .calendar-import.e-upload .e-file-select-wrap .e-file-drop,
|
||||
.calendar-import .e-upload-files {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.quick-info-header {
|
||||
background-color: white;
|
||||
padding: 8px 18px;
|
||||
}
|
||||
|
||||
.quick-info-header-content {
|
||||
justify-content: flex-end;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 5px 10px 5px;
|
||||
}
|
||||
|
||||
.quick-info-title {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
letter-spacing: 0.48px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.duration-text {
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.33px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.event-content {
|
||||
height: 90px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.meeting-type-wrap,
|
||||
.meeting-subject-wrap,
|
||||
.notes-wrap {
|
||||
font-size: 11px;
|
||||
color: #666;
|
||||
letter-spacing: 0.33px;
|
||||
height: 24px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.event-content div label {
|
||||
display: inline-block;
|
||||
min-width: 45px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.event-content div span {
|
||||
font-size: 11px;
|
||||
color: #151515;
|
||||
letter-spacing: 0.33px;
|
||||
line-height: 14px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.cell-footer.e-btn {
|
||||
background-color: #ffffff;
|
||||
border-color: #878787;
|
||||
color: #878787;
|
||||
}
|
||||
|
||||
.cell-footer {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.e-quick-popup-wrapper .e-cell-popup .e-popup-content {
|
||||
padding: 0 14px;
|
||||
}
|
||||
|
||||
.e-quick-popup-wrapper .e-event-popup .e-popup-footer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.e-quick-popup-wrapper .e-popup-footer button:first-child {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.schedule-context-menu .e-menu-item .new::before {
|
||||
content: '\e7f9';
|
||||
}
|
||||
|
||||
.schedule-context-menu .e-menu-item .edit::before {
|
||||
content: '\ea9a';
|
||||
}
|
||||
|
||||
.schedule-context-menu .e-menu-item .recurrence::before {
|
||||
content: '\e308';
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.schedule-context-menu .e-menu-item .today::before {
|
||||
content: '\e322';
|
||||
}
|
||||
|
||||
.schedule-context-menu .e-menu-item .delete::before {
|
||||
content: '\e94a';
|
||||
}
|
||||
|
||||
.e-bigger .schedule-context-menu ul .e-menu-item .e-menu-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.schedule-context-menu ul .e-menu-item .e-menu-icon {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.highcontrast .schedule-context-menu .e-menu-item .today::before,
|
||||
.fabric .schedule-context-menu .e-menu-item .today::before {
|
||||
content: '\e321';
|
||||
}
|
||||
|
||||
.bootstrap .schedule-context-menu .e-menu-item .today::before {
|
||||
content: '\e312';
|
||||
}
|
||||
|
||||
.highcontrast .schedule-context-menu .e-menu-item .delete::before,
|
||||
.fabric .schedule-context-menu .e-menu-item .delete::before {
|
||||
content: '\eb00';
|
||||
}
|
||||
|
||||
.highcontrast .schedule-context-menu .e-menu-item .new::before,
|
||||
.fabric .schedule-context-menu .e-menu-item .new::before {
|
||||
content: '\e823';
|
||||
}
|
||||
|
||||
.highcontrast .schedule-context-menu .e-menu-item .recurrence::before,
|
||||
.fabric .schedule-context-menu .e-menu-item .recurrence::before {
|
||||
content: '\e309';
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.schedule-overview.e-schedule .e-vertical-view .e-header-cells,
|
||||
.schedule-overview.e-schedule .e-timeline-month-view .e-header-cells {
|
||||
padding: 0;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.schedule-overview.e-schedule .date-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.schedule-overview.e-schedule.e-device .date-text {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.schedule-overview.e-schedule .weather-image {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.schedule-overview.e-schedule .weather-text {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.schedule-overview.e-schedule .e-month-view .weather-image {
|
||||
float: right;
|
||||
margin: -20px 2px 0 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end -->
|
||||
|
|
@ -0,0 +1,739 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { addClass, closest, extend, isNullOrUndefined, remove, removeClass, Browser, Internationalization } from '@syncfusion/ej2-base';
|
||||
import { Button, Switch, ChangeEventArgs as SwitchEventArgs } from '@syncfusion/ej2-buttons';
|
||||
import { TimePicker, ChangeEventArgs as TimeEventArgs } from '@syncfusion/ej2-calendars';
|
||||
import { DataManager, Predicate, Query } from '@syncfusion/ej2-data';
|
||||
import { DropDownList, MultiSelect, ChangeEventArgs, CheckBoxSelection, MultiSelectChangeEventArgs } from '@syncfusion/ej2-dropdowns';
|
||||
import { TextBox, Uploader, SelectedEventArgs } from '@syncfusion/ej2-inputs';
|
||||
import {
|
||||
ContextMenu, BeforeOpenCloseMenuEventArgs, Toolbar, ClickEventArgs, MenuEventArgs as ContextMenuEventArgs
|
||||
} from '@syncfusion/ej2-navigations';
|
||||
import {
|
||||
Schedule, Day, Week, WorkWeek, Month, Year, Agenda, TimelineViews, TimelineMonth, TimelineYear, EJ2Instance, Resize, DragAndDrop,
|
||||
ICalendarExport, ICalendarImport, Print, ExcelExport, ResourcesModel, CurrentAction, CellClickEventArgs, PopupOpenEventArgs, Timezone
|
||||
} from '@syncfusion/ej2-schedule';
|
||||
import { DropDownButton, MenuEventArgs } from '@syncfusion/ej2-splitbuttons';
|
||||
import { tz } from 'moment-timezone';
|
||||
|
||||
MultiSelect.Inject(CheckBoxSelection);
|
||||
// tslint:disable-next-line:max-line-length
|
||||
Schedule.Inject(Day, Week, WorkWeek, Month, Year, Agenda, TimelineViews, TimelineMonth, TimelineYear, DragAndDrop, Resize, ExcelExport, ICalendarExport, ICalendarImport, Print);
|
||||
|
||||
/**
|
||||
* Schedule Overview sample
|
||||
*/
|
||||
|
||||
// tslint:disable-next-line:max-func-body-length
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
|
||||
interface TemplateFunction extends Window {
|
||||
getHeaderDetails?: Function;
|
||||
getHeaderStyles?: Function;
|
||||
getEventType?: Function;
|
||||
getResourceData?: Function;
|
||||
getDateHeaderText?: Function;
|
||||
getWeather?: Function;
|
||||
}
|
||||
|
||||
let intlObj: Internationalization = new Internationalization();
|
||||
(window as TemplateFunction).getDateHeaderText = (value: Date) => {
|
||||
return intlObj.formatDate(value, { skeleton: 'Ed' });
|
||||
};
|
||||
(window as TemplateFunction).getWeather = (date: Date) => {
|
||||
let imgPath: string;
|
||||
let celsius: string;
|
||||
switch (date.getDay()) {
|
||||
case 0:
|
||||
imgPath = 'src/schedule/images/weather-clear.svg';
|
||||
celsius = '25°C';
|
||||
break;
|
||||
case 1:
|
||||
imgPath = 'src/schedule/images/weather-clouds.svg';
|
||||
celsius = '18°C';
|
||||
break;
|
||||
case 2:
|
||||
imgPath = 'src/schedule/images/weather-rain.svg';
|
||||
celsius = '10°C';
|
||||
break;
|
||||
case 3:
|
||||
imgPath = 'src/schedule/images/weather-clouds.svg';
|
||||
celsius = '16°C';
|
||||
break;
|
||||
case 4:
|
||||
imgPath = 'src/schedule/images/weather-rain.svg';
|
||||
celsius = '8°C';
|
||||
break;
|
||||
case 5:
|
||||
imgPath = 'src/schedule/images/weather-clear.svg';
|
||||
celsius = '27°C';
|
||||
break;
|
||||
case 6:
|
||||
imgPath = 'src/schedule/images/weather-clouds.svg';
|
||||
celsius = '17°C';
|
||||
break;
|
||||
}
|
||||
return '<img class="weather-image" src="' + imgPath + '"/><div class="weather-text">' + celsius + '</div>';
|
||||
};
|
||||
|
||||
(window as TemplateFunction).getResourceData = (data: { [key: string]: Object }) => {
|
||||
let resources: ResourcesModel = scheduleObj.getResourceCollections().slice(-1)[0];
|
||||
let resourceData: { [key: string]: Object } = (resources.dataSource as Object[]).filter((resource: { [key: string]: Object }) =>
|
||||
resource.CalendarId === data.CalendarId)[0] as { [key: string]: Object };
|
||||
return resourceData;
|
||||
};
|
||||
|
||||
(window as TemplateFunction).getHeaderDetails = (eventObj: { [key: string]: Date }) => {
|
||||
return intlObj.formatDate(eventObj.StartTime, { type: 'date', skeleton: 'full' }) + ' (' +
|
||||
intlObj.formatDate(eventObj.StartTime, { skeleton: 'hm' }) + ' - ' +
|
||||
intlObj.formatDate(eventObj.EndTime, { skeleton: 'hm' }) + ')';
|
||||
};
|
||||
|
||||
(window as TemplateFunction).getHeaderStyles = (data: { [key: string]: Object }) => {
|
||||
if (data.elementType === 'event') {
|
||||
let resourceData: { [key: string]: Object } = (window as TemplateFunction).getResourceData(data);
|
||||
return 'background:' + resourceData.CalendarColor + '; color: #FFFFFF;';
|
||||
} else {
|
||||
return 'align-items: center; color: #919191;';
|
||||
}
|
||||
};
|
||||
|
||||
(window as TemplateFunction).getEventType = (data: { [key: string]: Date }) => {
|
||||
let resourceData: { [key: string]: Object } = (window as TemplateFunction).getResourceData(data);
|
||||
return resourceData.CalendarText;
|
||||
};
|
||||
|
||||
let updateLiveTime: Function = (): void => {
|
||||
let scheduleTimezone: string = scheduleObj ? scheduleObj.timezone : 'Etc/GMT';
|
||||
let timeBtn: Element = document.querySelector('.schedule-overview #timeBtn');
|
||||
if (timeBtn) {
|
||||
timeBtn.innerHTML = '<span class="e-btn-icon e-icons e-schedule-clock e-icon-left"></span>' +
|
||||
new Date().toLocaleTimeString('en-US', { timeZone: scheduleTimezone });
|
||||
}
|
||||
};
|
||||
|
||||
let generateEvents: Function = (): Object[] => {
|
||||
let eventData: Object[] = [];
|
||||
let eventSubjects: string[] = [
|
||||
'Bering Sea Gold', 'Technology', 'Maintenance', 'Meeting', 'Travelling', 'Annual Conference', 'Birthday Celebration',
|
||||
'Farewell Celebration', 'Wedding Aniversary', 'Alaska: The Last Frontier', 'Deadest Catch', 'Sports Day', 'MoonShiners',
|
||||
'Close Encounters', 'HighWay Thru Hell', 'Daily Planet', 'Cash Cab', 'Basketball Practice', 'Rugby Match', 'Guitar Class',
|
||||
'Music Lessons', 'Doctor checkup', 'Brazil - Mexico', 'Opening ceremony', 'Final presentation'
|
||||
];
|
||||
let weekDate: Date = new Date(new Date().setDate(new Date().getDate() - new Date().getDay()));
|
||||
let startDate: Date = new Date(weekDate.getFullYear(), weekDate.getMonth(), weekDate.getDate(), 10, 0);
|
||||
let endDate: Date = new Date(weekDate.getFullYear(), weekDate.getMonth(), weekDate.getDate(), 11, 30);
|
||||
eventData.push({
|
||||
Id: 1,
|
||||
Subject: eventSubjects[Math.floor(Math.random() * (24 - 0 + 1) + 0)],
|
||||
StartTime: startDate,
|
||||
EndTime: endDate,
|
||||
Location: '',
|
||||
Description: 'Event Scheduled',
|
||||
RecurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR;INTERVAL=1;COUNT=10;',
|
||||
IsAllDay: false,
|
||||
IsReadonly: false,
|
||||
CalendarId: 1
|
||||
});
|
||||
for (let a: number = 0, id: number = 2; a < 500; a++) {
|
||||
let month: number = Math.floor(Math.random() * (11 - 0 + 1) + 0);
|
||||
let date: number = Math.floor(Math.random() * (28 - 1 + 1) + 1);
|
||||
let hour: number = Math.floor(Math.random() * (23 - 0 + 1) + 0);
|
||||
let minutes: number = Math.floor(Math.random() * (59 - 0 + 1) + 0);
|
||||
let start: Date = new Date(new Date().getFullYear(), month, date, hour, minutes, 0);
|
||||
let end: Date = new Date(start.getTime());
|
||||
end.setHours(end.getHours() + 2);
|
||||
let startDate: Date = new Date(start.getTime());
|
||||
let endDate: Date = new Date(end.getTime());
|
||||
eventData.push({
|
||||
Id: id,
|
||||
Subject: eventSubjects[Math.floor(Math.random() * (24 - 0 + 1) + 0)],
|
||||
StartTime: startDate,
|
||||
EndTime: endDate,
|
||||
Location: '',
|
||||
Description: 'Event Scheduled',
|
||||
IsAllDay: id % 10 === 0,
|
||||
IsReadonly: endDate < new Date(),
|
||||
CalendarId: (a % 4) + 1
|
||||
});
|
||||
id++;
|
||||
}
|
||||
if (Browser.isIE) {
|
||||
Timezone.prototype.offset = (date: Date, timezone: string): number => tz.zone(timezone).utcOffset(date.getTime());
|
||||
}
|
||||
let overviewEvents: { [key: string]: Date }[] = extend([], eventData, null, true) as { [key: string]: Date }[];
|
||||
let timezone: Timezone = new Timezone();
|
||||
let utcTimezone: never = 'UTC' as never;
|
||||
let currentTimezone: never = timezone.getLocalTimezoneName() as never;
|
||||
for (let event of overviewEvents) {
|
||||
event.StartTime = timezone.convert(event.StartTime, utcTimezone, currentTimezone);
|
||||
event.EndTime = timezone.convert(event.EndTime, utcTimezone, currentTimezone);
|
||||
}
|
||||
return overviewEvents;
|
||||
};
|
||||
|
||||
let buttonClickActions: Function = (e: Event) => {
|
||||
let quickPopup: HTMLElement = scheduleObj.element.querySelector('.e-quick-popup-wrapper') as HTMLElement;
|
||||
let getSlotData: Function = (): { [key: string]: Object } => {
|
||||
let cellDetails: CellClickEventArgs = scheduleObj.getCellDetails(scheduleObj.getSelectedElements());
|
||||
let eventObj: { [key: string]: Object } = {};
|
||||
eventObj.Id = scheduleObj.getEventMaxID();
|
||||
eventObj.Subject = ((quickPopup.querySelector('#title') as EJ2Instance).ej2_instances[0] as TextBox).value;
|
||||
eventObj.StartTime = new Date(+cellDetails.startTime);
|
||||
eventObj.EndTime = new Date(+cellDetails.endTime);
|
||||
eventObj.Description = ((quickPopup.querySelector('#notes') as EJ2Instance).ej2_instances[0] as TextBox).value;
|
||||
eventObj.CalendarId = ((quickPopup.querySelector('#eventType') as EJ2Instance).ej2_instances[0] as DropDownList).value;
|
||||
return eventObj;
|
||||
};
|
||||
if ((e.target as HTMLElement).id === 'add') {
|
||||
scheduleObj.addEvent(getSlotData());
|
||||
} else if ((e.target as HTMLElement).id === 'delete') {
|
||||
let currentAction: CurrentAction;
|
||||
if ((scheduleObj.activeEventData.event as { [key: string]: string }).RecurrenceRule) {
|
||||
currentAction = 'DeleteOccurrence';
|
||||
}
|
||||
scheduleObj.deleteEvent(scheduleObj.activeEventData.event as { [key: string]: Object }, currentAction);
|
||||
} else {
|
||||
let isCellPopup: boolean = quickPopup.firstElementChild.classList.contains('e-cell-popup');
|
||||
let eventDetails: { [key: string]: Object } = isCellPopup ? getSlotData() :
|
||||
scheduleObj.activeEventData.event as { [key: string]: Object };
|
||||
let currentAction: CurrentAction = isCellPopup ? 'Add' : 'Save';
|
||||
if (eventDetails.RecurrenceRule) {
|
||||
currentAction = 'EditOccurrence';
|
||||
}
|
||||
scheduleObj.openEditor(eventDetails, currentAction, true);
|
||||
}
|
||||
scheduleObj.closeQuickInfoPopup();
|
||||
};
|
||||
|
||||
let isTimelineView: boolean = false;
|
||||
|
||||
let timezoneBtn: Button = new Button({ iconCss: 'e-icons e-schedule-timezone', cssClass: 'title-bar-btn', disabled: true });
|
||||
timezoneBtn.appendTo('#timezoneBtn');
|
||||
|
||||
let timeBtn: Button = new Button({ iconCss: 'e-icons e-schedule-clock', cssClass: 'title-bar-btn', disabled: true });
|
||||
timeBtn.appendTo('#timeBtn');
|
||||
|
||||
let printBtn: Button = new Button({ iconCss: 'e-icons e-schedule-print', cssClass: 'title-bar-btn' });
|
||||
printBtn.appendTo('#printBtn');
|
||||
printBtn.element.onclick = () => { scheduleObj.print(); };
|
||||
|
||||
let importObj: Uploader = new Uploader({
|
||||
allowedExtensions: '.ics',
|
||||
cssClass: 'calendar-import',
|
||||
buttons: { browse: 'Import' },
|
||||
multiple: false,
|
||||
showFileList: false,
|
||||
selected: (args: SelectedEventArgs) => scheduleObj.importICalendar((<HTMLInputElement>args.event.target).files[0])
|
||||
});
|
||||
importObj.appendTo('#icalendar');
|
||||
|
||||
let exportObj: DropDownButton = new DropDownButton({
|
||||
items: [
|
||||
{ text: 'iCalendar', iconCss: 'e-icons e-schedule-ical-export' },
|
||||
{ text: 'Excel', iconCss: 'e-icons e-schedule-excel-export' }
|
||||
],
|
||||
select: (args: MenuEventArgs) => {
|
||||
if (args.item.text === 'Excel') {
|
||||
let exportDatas: { [key: string]: Object }[] = [];
|
||||
let eventCollection: Object[] = scheduleObj.getEvents();
|
||||
let resourceCollection: ResourcesModel[] = scheduleObj.getResourceCollections();
|
||||
let resourceData: { [key: string]: Object }[] = resourceCollection[0].dataSource as { [key: string]: Object }[];
|
||||
for (let resource of resourceData) {
|
||||
let data: Object[] = eventCollection.filter((e: { [key: string]: Object }) => e.CalendarId === resource.CalendarId);
|
||||
exportDatas = exportDatas.concat(data as { [key: string]: Object }[]);
|
||||
}
|
||||
scheduleObj.exportToExcel({
|
||||
exportType: 'xlsx', customData: exportDatas, fields: ['Id', 'Subject', 'StartTime', 'EndTime', 'CalendarId']
|
||||
});
|
||||
} else {
|
||||
scheduleObj.exportToICalendar();
|
||||
}
|
||||
}
|
||||
});
|
||||
exportObj.appendTo('#exporting');
|
||||
|
||||
let timelineTemplate: string = '<div style="height: 46px; line-height: 23px;"><div class="icon-child" style="text-align: center;">' +
|
||||
'<button id="timeline_views"></button></div><div class="text-child" style="font-size: 14px;">Timeline Views</div></div>';
|
||||
let weekNumberTemplate: string = '<div style="height: 46px; line-height: 23px;"><div class="icon-child" style="text-align: center;">' +
|
||||
'<button id="week_number"></button></div><div class="text-child" style="font-size: 14px;">Week Number</div></div>';
|
||||
let groupTemplate: string = '<div style="height: 46px; line-height: 23px;"><div class="icon-child" style="text-align: center;">' +
|
||||
'<button id="grouping"></button></div><div class="text-child" style="font-size: 14px;">Grouping</div></div>';
|
||||
let gridlineTemplate: string = '<div style="height: 46px; line-height: 23px;"><div class="icon-child" style="text-align: center;">' +
|
||||
'<button id="gridlines"></button></div><div class="text-child" style="font-size: 14px;">Gridlines</div></div>';
|
||||
let autoHeightTemplate: string = '<div style="height: 46px; line-height: 23px;"><div class="icon-child" style="text-align: center;">' +
|
||||
'<button id="row_auto_height"></button></div><div class="text-child" style="font-size: 14px;">Row Auto Height</div></div>';
|
||||
let tooltipTemplate: string = '<div style="height: 46px; line-height: 23px;"><div class="icon-child" style="text-align: center;">' +
|
||||
'<button id="tooltip"></button></div><div class="text-child" style="font-size: 14px;">Tooltip</div></div>';
|
||||
|
||||
let toolbarObj: Toolbar = new Toolbar({
|
||||
height: 70,
|
||||
overflowMode: 'Scrollable',
|
||||
scrollStep: 100,
|
||||
items: [
|
||||
{ prefixIcon: 'e-icons e-schedule-add-event', tooltipText: 'New Event', text: 'New Event' },
|
||||
{ prefixIcon: 'e-icons e-schedule-add-recurrence-event', tooltipText: 'New Recurring Event', text: 'New Recurring Event' },
|
||||
{ type: 'Separator' },
|
||||
{ prefixIcon: 'e-icons e-schedule-day-view', tooltipText: 'Day', text: 'Day' },
|
||||
{ prefixIcon: 'e-icons e-schedule-week-view', tooltipText: 'Week', text: 'Week' },
|
||||
{ prefixIcon: 'e-icons e-schedule-workweek-view', tooltipText: 'WorkWeek', text: 'WorkWeek' },
|
||||
{ prefixIcon: 'e-icons e-schedule-month-view', tooltipText: 'Month', text: 'Month' },
|
||||
{ prefixIcon: 'e-icons e-schedule-year-view', tooltipText: 'Year', text: 'Year' },
|
||||
{ prefixIcon: 'e-icons e-schedule-agenda-view', tooltipText: 'Agenda', text: 'Agenda' },
|
||||
{ tooltipText: 'Timeline Views', text: 'Timeline Views', template: timelineTemplate },
|
||||
{ type: 'Separator' },
|
||||
{ tooltipText: 'Week Number', text: 'Week Number', template: weekNumberTemplate },
|
||||
{ tooltipText: 'Grouping', text: 'Grouping', template: groupTemplate },
|
||||
{ tooltipText: 'Gridlines', text: 'Gridlines', template: gridlineTemplate },
|
||||
{ tooltipText: 'Row Auto Height', text: 'Row Auto Height', template: autoHeightTemplate },
|
||||
{ tooltipText: 'Tooltip', text: 'Tooltip', template: tooltipTemplate }
|
||||
],
|
||||
created: () => {
|
||||
setInterval(() => { updateLiveTime(); }, 1000);
|
||||
|
||||
let timelineView: Switch = new Switch({
|
||||
checked: false,
|
||||
change: (args: SwitchEventArgs) => {
|
||||
isTimelineView = args.checked;
|
||||
switch (scheduleObj.currentView) {
|
||||
case 'Day':
|
||||
case 'TimelineDay':
|
||||
scheduleObj.currentView = isTimelineView ? 'TimelineDay' : 'Day';
|
||||
break;
|
||||
case 'Week':
|
||||
case 'TimelineWeek':
|
||||
scheduleObj.currentView = isTimelineView ? 'TimelineWeek' : 'Week';
|
||||
break;
|
||||
case 'WorkWeek':
|
||||
case 'TimelineWorkWeek':
|
||||
scheduleObj.currentView = isTimelineView ? 'TimelineWorkWeek' : 'WorkWeek';
|
||||
break;
|
||||
case 'Month':
|
||||
case 'TimelineMonth':
|
||||
scheduleObj.currentView = isTimelineView ? 'TimelineMonth' : 'Month';
|
||||
break;
|
||||
case 'Year':
|
||||
case 'TimelineYear':
|
||||
scheduleObj.currentView = isTimelineView ? 'TimelineYear' : 'Year';
|
||||
break;
|
||||
case 'Agenda':
|
||||
scheduleObj.currentView = 'Agenda';
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
timelineView.appendTo('#timeline_views');
|
||||
let weekNumber: Switch = new Switch({
|
||||
checked: false,
|
||||
change: (args: SwitchEventArgs) => { scheduleObj.showWeekNumber = args.checked; }
|
||||
});
|
||||
weekNumber.appendTo('#week_number');
|
||||
let grouping: Switch = new Switch({
|
||||
checked: true,
|
||||
change: (args: SwitchEventArgs) => { scheduleObj.group.resources = args.checked ? ['Calendars'] : []; }
|
||||
});
|
||||
grouping.appendTo('#grouping');
|
||||
let gridlines: Switch = new Switch({
|
||||
checked: true,
|
||||
change: (args: SwitchEventArgs) => { scheduleObj.timeScale.enable = args.checked; }
|
||||
});
|
||||
gridlines.appendTo('#gridlines');
|
||||
let rowAutoHeight: Switch = new Switch({
|
||||
checked: false,
|
||||
change: (args: SwitchEventArgs) => { scheduleObj.rowAutoHeight = args.checked; }
|
||||
});
|
||||
rowAutoHeight.appendTo('#row_auto_height');
|
||||
let tooltip: Switch = new Switch({
|
||||
checked: false,
|
||||
change: (args: SwitchEventArgs) => { scheduleObj.eventSettings.enableTooltip = args.checked; }
|
||||
});
|
||||
tooltip.appendTo('#tooltip');
|
||||
|
||||
(document.querySelector('#settingsBtn') as HTMLButtonElement).onclick = () => {
|
||||
let settingsPanel: Element = document.querySelector('.overview-content .right-panel');
|
||||
if (settingsPanel.classList.contains('hide')) {
|
||||
removeClass([settingsPanel], 'hide');
|
||||
} else {
|
||||
addClass([settingsPanel], 'hide');
|
||||
}
|
||||
scheduleObj.refreshEvents();
|
||||
};
|
||||
},
|
||||
clicked: (args: ClickEventArgs) => {
|
||||
switch (args.item.text) {
|
||||
case 'Day':
|
||||
scheduleObj.currentView = isTimelineView ? 'TimelineDay' : 'Day';
|
||||
break;
|
||||
case 'Week':
|
||||
scheduleObj.currentView = isTimelineView ? 'TimelineWeek' : 'Week';
|
||||
break;
|
||||
case 'WorkWeek':
|
||||
scheduleObj.currentView = isTimelineView ? 'TimelineWorkWeek' : 'WorkWeek';
|
||||
break;
|
||||
case 'Month':
|
||||
scheduleObj.currentView = isTimelineView ? 'TimelineMonth' : 'Month';
|
||||
break;
|
||||
case 'Year':
|
||||
scheduleObj.currentView = isTimelineView ? 'TimelineYear' : 'Year';
|
||||
break;
|
||||
case 'Agenda':
|
||||
scheduleObj.currentView = 'Agenda';
|
||||
break;
|
||||
case 'New Event':
|
||||
let date: Date = scheduleObj.selectedDate;
|
||||
let eventData: Object = {
|
||||
Id: scheduleObj.getEventMaxID(),
|
||||
Subject: '',
|
||||
StartTime: new Date(date.getFullYear(), date.getMonth(), date.getDate(), new Date().getHours(), 0, 0),
|
||||
EndTime: new Date(date.getFullYear(), date.getMonth(), date.getDate(), new Date().getHours() + 1, 0, 0),
|
||||
Location: '',
|
||||
Description: '',
|
||||
IsAllDay: false,
|
||||
CalendarId: 1
|
||||
};
|
||||
scheduleObj.openEditor(eventData, 'Add', true);
|
||||
break;
|
||||
case 'New Recurring Event':
|
||||
let dates: Date = scheduleObj.selectedDate;
|
||||
let recEventData: Object = {
|
||||
Id: scheduleObj.getEventMaxID(),
|
||||
Subject: '',
|
||||
StartTime: new Date(dates.getFullYear(), dates.getMonth(), dates.getDate(), new Date().getHours(), 0, 0),
|
||||
EndTime: new Date(dates.getFullYear(), dates.getMonth(), dates.getDate(), new Date().getHours() + 1, 0, 0),
|
||||
Location: '',
|
||||
Description: '',
|
||||
IsAllDay: false,
|
||||
CalendarId: 1
|
||||
};
|
||||
scheduleObj.openEditor(recEventData, 'Add', true, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
toolbarObj.appendTo('#toolbar_options');
|
||||
|
||||
let settingsBtn: Button = new Button({
|
||||
iconCss: 'e-icons e-schedule-toolbar-settings',
|
||||
cssClass: 'overview-toolbar-settings', iconPosition: 'Top'
|
||||
});
|
||||
settingsBtn.appendTo('#settingsBtn');
|
||||
|
||||
let resourceData: { [key: string]: Object }[] = [
|
||||
{ CalendarText: 'My Calendar', CalendarId: 1, CalendarColor: '#c43081' },
|
||||
{ CalendarText: 'Company', CalendarId: 2, CalendarColor: '#ff7f50' },
|
||||
{ CalendarText: 'Birthday', CalendarId: 3, CalendarColor: '#AF27CD' },
|
||||
{ CalendarText: 'Holiday', CalendarId: 4, CalendarColor: '#808000' }
|
||||
];
|
||||
|
||||
let scheduleObj: Schedule = new Schedule({
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
cssClass: 'schedule-overview',
|
||||
views: [
|
||||
'Day', 'Week', 'WorkWeek', 'Month', 'Year', 'Agenda', 'TimelineDay',
|
||||
'TimelineWeek', 'TimelineWorkWeek', 'TimelineMonth', 'TimelineYear'
|
||||
],
|
||||
timezone: 'UTC',
|
||||
group: { resources: ['Calendars'] },
|
||||
resources: [{
|
||||
field: 'CalendarId', title: 'Calendars', name: 'Calendars', allowMultiple: true,
|
||||
textField: 'CalendarText', idField: 'CalendarId', colorField: 'CalendarColor',
|
||||
dataSource: resourceData, query: new Query().where('CalendarId', 'equal', 1)
|
||||
}],
|
||||
dateHeaderTemplate: '#date-header-template',
|
||||
quickInfoTemplates: {
|
||||
header: '#header-template',
|
||||
content: '#content-template',
|
||||
footer: '#footer-template'
|
||||
},
|
||||
eventSettings: { dataSource: generateEvents() },
|
||||
popupOpen: (args: PopupOpenEventArgs) => {
|
||||
if (args.type === 'QuickInfo') {
|
||||
let titleObj: TextBox = new TextBox({ placeholder: 'Title' });
|
||||
titleObj.appendTo(args.element.querySelector('#title') as HTMLElement);
|
||||
let typeObj: DropDownList = new DropDownList({
|
||||
dataSource: resourceData,
|
||||
placeholder: 'Choose Type',
|
||||
fields: { text: 'CalendarText', value: 'CalendarId' },
|
||||
index: 0
|
||||
});
|
||||
typeObj.appendTo(args.element.querySelector('#eventType') as HTMLElement);
|
||||
let notesObj: TextBox = new TextBox({ placeholder: 'Notes' });
|
||||
notesObj.appendTo(args.element.querySelector('#notes') as HTMLElement);
|
||||
|
||||
let moreDetailsBtn: HTMLButtonElement = args.element.querySelector('#more-details') as HTMLButtonElement;
|
||||
if (moreDetailsBtn) {
|
||||
let moreObj: Button = new Button({
|
||||
content: 'More Details', cssClass: 'e-flat',
|
||||
isPrimary: args.element.firstElementChild.classList.contains('e-event-popup')
|
||||
});
|
||||
moreObj.appendTo(moreDetailsBtn);
|
||||
moreDetailsBtn.onclick = (e: Event) => { buttonClickActions(e); };
|
||||
}
|
||||
let addBtn: HTMLButtonElement = args.element.querySelector('#add') as HTMLButtonElement;
|
||||
if (addBtn) {
|
||||
new Button({ content: 'Add', cssClass: 'e-flat', isPrimary: true }, addBtn);
|
||||
addBtn.onclick = (e: Event) => { buttonClickActions(e); };
|
||||
}
|
||||
let deleteBtn: HTMLButtonElement = args.element.querySelector('#delete') as HTMLButtonElement;
|
||||
if (deleteBtn) {
|
||||
new Button({ content: 'Delete', cssClass: 'e-flat' }, deleteBtn);
|
||||
deleteBtn.onclick = (e: Event) => { buttonClickActions(e); };
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
scheduleObj.appendTo('#scheduler');
|
||||
|
||||
let selectedTarget: Element;
|
||||
let menuObj: ContextMenu = new ContextMenu({
|
||||
target: '.e-schedule',
|
||||
items: [
|
||||
{ text: 'New Event', iconCss: 'e-icons new', id: 'Add' },
|
||||
{ text: 'New Recurring Event', iconCss: 'e-icons recurrence', id: 'AddRecurrence' },
|
||||
{ text: 'Today', iconCss: 'e-icons today', id: 'Today' },
|
||||
{ text: 'Edit Event', iconCss: 'e-icons edit', id: 'Save' },
|
||||
{ text: 'Delete Event', iconCss: 'e-icons delete', id: 'Delete' },
|
||||
{
|
||||
text: 'Delete Event', id: 'DeleteRecurrenceEvent', iconCss: 'e-icons delete',
|
||||
items: [
|
||||
{ text: 'Delete Occurrence', id: 'DeleteOccurrence' },
|
||||
{ text: 'Delete Series', id: 'DeleteSeries' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Edit Event', id: 'EditRecurrenceEvent', iconCss: 'e-icons edit',
|
||||
items: [
|
||||
{ text: 'Edit Occurrence', id: 'EditOccurrence' },
|
||||
{ text: 'Edit Series', id: 'EditSeries' }
|
||||
]
|
||||
}
|
||||
],
|
||||
beforeOpen: (args: BeforeOpenCloseMenuEventArgs) => {
|
||||
let newEventElement: HTMLElement = document.querySelector('.e-new-event') as HTMLElement;
|
||||
if (newEventElement) {
|
||||
remove(newEventElement);
|
||||
removeClass([document.querySelector('.e-selected-cell')], 'e-selected-cell');
|
||||
}
|
||||
let targetElement: HTMLElement = <HTMLElement>args.event.target;
|
||||
if (closest(targetElement, '.e-contextmenu')) {
|
||||
return;
|
||||
}
|
||||
selectedTarget = closest(targetElement, '.e-appointment,.e-work-cells,' +
|
||||
'.e-vertical-view .e-date-header-wrap .e-all-day-cells,.e-vertical-view .e-date-header-wrap .e-header-cells');
|
||||
if (isNullOrUndefined(selectedTarget)) {
|
||||
args.cancel = true;
|
||||
return;
|
||||
}
|
||||
if (selectedTarget.classList.contains('e-appointment')) {
|
||||
let eventObj: { [key: string]: Object } = <{ [key: string]: Object }>scheduleObj.getEventDetails(selectedTarget);
|
||||
if (eventObj.RecurrenceRule) {
|
||||
menuObj.showItems(['EditRecurrenceEvent', 'DeleteRecurrenceEvent'], true);
|
||||
menuObj.hideItems(['Add', 'AddRecurrence', 'Today', 'Save', 'Delete'], true);
|
||||
} else {
|
||||
menuObj.showItems(['Save', 'Delete'], true);
|
||||
menuObj.hideItems(['Add', 'AddRecurrence', 'Today', 'EditRecurrenceEvent', 'DeleteRecurrenceEvent'], true);
|
||||
}
|
||||
return;
|
||||
}
|
||||
menuObj.hideItems(['Save', 'Delete', 'EditRecurrenceEvent', 'DeleteRecurrenceEvent'], true);
|
||||
menuObj.showItems(['Add', 'AddRecurrence', 'Today'], true);
|
||||
},
|
||||
select: (args: ContextMenuEventArgs) => {
|
||||
let selectedMenuItem: string = args.item.id;
|
||||
let eventObj: { [key: string]: Object };
|
||||
if (selectedTarget && selectedTarget.classList.contains('e-appointment')) {
|
||||
eventObj = <{ [key: string]: Object }>scheduleObj.getEventDetails(selectedTarget);
|
||||
}
|
||||
switch (selectedMenuItem) {
|
||||
case 'Today':
|
||||
scheduleObj.selectedDate = new Date();
|
||||
break;
|
||||
case 'Add':
|
||||
case 'AddRecurrence':
|
||||
let selectedCells: Element[] = scheduleObj.getSelectedElements();
|
||||
let activeCellsData: CellClickEventArgs =
|
||||
scheduleObj.getCellDetails(selectedCells.length > 0 ? selectedCells : selectedTarget);
|
||||
if (selectedMenuItem === 'Add') {
|
||||
scheduleObj.openEditor(activeCellsData, 'Add');
|
||||
} else {
|
||||
scheduleObj.openEditor(activeCellsData, 'Add', null, 1);
|
||||
}
|
||||
break;
|
||||
case 'Save':
|
||||
case 'EditOccurrence':
|
||||
case 'EditSeries':
|
||||
if (selectedMenuItem === 'EditSeries') {
|
||||
let query: Query = new Query().where(scheduleObj.eventFields.id, 'equal', eventObj.RecurrenceID as string | number);
|
||||
eventObj = new DataManager(scheduleObj.eventsData).executeLocal(query)[0] as { [key: string]: Object };
|
||||
}
|
||||
scheduleObj.openEditor(eventObj, selectedMenuItem);
|
||||
break;
|
||||
case 'Delete':
|
||||
scheduleObj.deleteEvent(eventObj);
|
||||
break;
|
||||
case 'DeleteOccurrence':
|
||||
case 'DeleteSeries':
|
||||
scheduleObj.deleteEvent(eventObj, selectedMenuItem);
|
||||
break;
|
||||
}
|
||||
},
|
||||
cssClass: 'schedule-context-menu'
|
||||
});
|
||||
menuObj.appendTo('#ContextMenu');
|
||||
|
||||
let weekDays: { [key: string]: Object }[] = [
|
||||
{ text: 'Sunday', value: 0 },
|
||||
{ text: 'Monday', value: 1 },
|
||||
{ text: 'Tuesday', value: 2 },
|
||||
{ text: 'Wednesday', value: 3 },
|
||||
{ text: 'Thursday', value: 4 },
|
||||
{ text: 'Friday', value: 5 },
|
||||
{ text: 'Saturday', value: 6 }
|
||||
];
|
||||
|
||||
let weekFirstDay: DropDownList = new DropDownList({
|
||||
width: 170,
|
||||
dataSource: weekDays,
|
||||
fields: { text: 'text', value: 'value' },
|
||||
popupHeight: 150,
|
||||
value: 0,
|
||||
change: (args: ChangeEventArgs) => scheduleObj.firstDayOfWeek = args.value as number
|
||||
});
|
||||
weekFirstDay.appendTo('#weekFirstDay');
|
||||
|
||||
let workweek: MultiSelect = new MultiSelect({
|
||||
cssClass: 'schedule-workweek',
|
||||
width: 170,
|
||||
dataSource: weekDays,
|
||||
fields: { text: 'text', value: 'value' },
|
||||
mode: 'CheckBox',
|
||||
enableSelectionOrder: false,
|
||||
showClearButton: false,
|
||||
showDropDownIcon: true,
|
||||
popupHeight: 150,
|
||||
value: [1, 2, 3, 4, 5],
|
||||
change: (args: MultiSelectChangeEventArgs) => scheduleObj.workDays = args.value as number[]
|
||||
});
|
||||
workweek.appendTo('#workWeekDays');
|
||||
|
||||
let resources: MultiSelect = new MultiSelect({
|
||||
cssClass: 'schedule-resource',
|
||||
width: 170,
|
||||
dataSource: resourceData,
|
||||
fields: { text: 'CalendarText', value: 'CalendarId' },
|
||||
mode: 'CheckBox',
|
||||
showClearButton: false,
|
||||
showDropDownIcon: true,
|
||||
popupHeight: 150,
|
||||
value: [1],
|
||||
change: (args: MultiSelectChangeEventArgs) => {
|
||||
let resourcePredicate: Predicate;
|
||||
for (let value of args.value) {
|
||||
if (resourcePredicate) {
|
||||
resourcePredicate = resourcePredicate.or(new Predicate('CalendarId', 'equal', value));
|
||||
} else {
|
||||
resourcePredicate = new Predicate('CalendarId', 'equal', value);
|
||||
}
|
||||
}
|
||||
scheduleObj.resources[0].query = resourcePredicate ? new Query().where(resourcePredicate) :
|
||||
new Query().where('CalendarId', 'equal', 1);
|
||||
}
|
||||
});
|
||||
resources.appendTo('#resources');
|
||||
|
||||
let timezone: DropDownList = new DropDownList({
|
||||
width: 170,
|
||||
dataSource: [
|
||||
{ text: 'UTC -12:00', value: 'Etc/GMT+12' },
|
||||
{ text: 'UTC -11:00', value: 'Etc/GMT+11' },
|
||||
{ text: 'UTC -10:00', value: 'Etc/GMT+10' },
|
||||
{ text: 'UTC -09:00', value: 'Etc/GMT+9' },
|
||||
{ text: 'UTC -08:00', value: 'Etc/GMT+8' },
|
||||
{ text: 'UTC -07:00', value: 'Etc/GMT+7' },
|
||||
{ text: 'UTC -06:00', value: 'Etc/GMT+6' },
|
||||
{ text: 'UTC -05:00', value: 'Etc/GMT+5' },
|
||||
{ text: 'UTC -04:00', value: 'Etc/GMT+4' },
|
||||
{ text: 'UTC -03:00', value: 'Etc/GMT+3' },
|
||||
{ text: 'UTC -02:00', value: 'Etc/GMT+2' },
|
||||
{ text: 'UTC -01:00', value: 'Etc/GMT+1' },
|
||||
{ text: 'UTC +00:00', value: 'Etc/GMT' },
|
||||
{ text: 'UTC +01:00', value: 'Etc/GMT-1' },
|
||||
{ text: 'UTC +02:00', value: 'Etc/GMT-2' },
|
||||
{ text: 'UTC +03:00', value: 'Etc/GMT-3' },
|
||||
{ text: 'UTC +04:00', value: 'Etc/GMT-4' },
|
||||
{ text: 'UTC +05:00', value: 'Etc/GMT-5' },
|
||||
{ text: 'UTC +05:30', value: 'Asia/Calcutta' },
|
||||
{ text: 'UTC +06:00', value: 'Etc/GMT-6' },
|
||||
{ text: 'UTC +07:00', value: 'Etc/GMT-7' },
|
||||
{ text: 'UTC +08:00', value: 'Etc/GMT-8' },
|
||||
{ text: 'UTC +09:00', value: 'Etc/GMT-9' },
|
||||
{ text: 'UTC +10:00', value: 'Etc/GMT-10' },
|
||||
{ text: 'UTC +11:00', value: 'Etc/GMT-11' },
|
||||
{ text: 'UTC +12:00', value: 'Etc/GMT-12' },
|
||||
{ text: 'UTC +13:00', value: 'Etc/GMT-13' },
|
||||
{ text: 'UTC +14:00', value: 'Etc/GMT-14' }
|
||||
],
|
||||
fields: { text: 'text', value: 'value' },
|
||||
popupHeight: 150,
|
||||
value: 'Etc/GMT',
|
||||
change: (args: ChangeEventArgs) => {
|
||||
scheduleObj.timezone = args.value as string;
|
||||
updateLiveTime();
|
||||
document.querySelector('.schedule-overview #timezoneBtn').innerHTML =
|
||||
'<span class="e-btn-icon e-icons e-schedule-timezone e-icon-left"></span>' + args.itemData.text;
|
||||
}
|
||||
});
|
||||
timezone.appendTo('#timezone');
|
||||
|
||||
let dayStartHour: TimePicker = new TimePicker({
|
||||
width: 170, value: new Date(new Date().setHours(0, 0, 0)), showClearButton: false,
|
||||
change: (args: TimeEventArgs) => {
|
||||
scheduleObj.startHour = new Internationalization().formatDate(args.value, { skeleton: 'Hm' });
|
||||
}
|
||||
});
|
||||
dayStartHour.appendTo('#dayStartHour');
|
||||
|
||||
let dayEndHour: TimePicker = new TimePicker({
|
||||
width: 170, value: new Date(new Date().setHours(23, 59, 59)), showClearButton: false,
|
||||
change: (args: TimeEventArgs) => {
|
||||
scheduleObj.endHour = new Internationalization().formatDate(args.value, { skeleton: 'Hm' });
|
||||
}
|
||||
});
|
||||
dayEndHour.appendTo('#dayEndHour');
|
||||
|
||||
let workHourStart: TimePicker = new TimePicker({
|
||||
width: 170, value: new Date(new Date().setHours(9, 0, 0)), showClearButton: false,
|
||||
change: (args: TimeEventArgs) => {
|
||||
scheduleObj.workHours.start = new Internationalization().formatDate(args.value, { skeleton: 'Hm' });
|
||||
}
|
||||
});
|
||||
workHourStart.appendTo('#workHourStart');
|
||||
|
||||
let workHourEnd: TimePicker = new TimePicker({
|
||||
width: 170, value: new Date(new Date().setHours(18, 0, 0)), showClearButton: false,
|
||||
change: (args: TimeEventArgs) => {
|
||||
scheduleObj.workHours.end = new Internationalization().formatDate(args.value, { skeleton: 'Hm' });
|
||||
}
|
||||
});
|
||||
workHourEnd.appendTo('#workHourEnd');
|
||||
|
||||
let slotDuration: DropDownList = new DropDownList({
|
||||
width: 170,
|
||||
dataSource: [60, 90, 120, 150, 180, 210, 240, 270, 300, 330, 360],
|
||||
popupHeight: 150,
|
||||
value: 60,
|
||||
change: (args: ChangeEventArgs) => scheduleObj.timeScale.interval = args.value as number
|
||||
});
|
||||
slotDuration.appendTo('#slotDuration');
|
||||
|
||||
let slotInterval: DropDownList = new DropDownList({
|
||||
width: 170,
|
||||
dataSource: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
|
||||
popupHeight: 150,
|
||||
value: 2,
|
||||
change: (args: ChangeEventArgs) => scheduleObj.timeScale.slotCount = args.value as number
|
||||
});
|
||||
slotInterval.appendTo('#slotInterval');
|
||||
|
||||
};
|
||||
|
|
@ -5,6 +5,21 @@
|
|||
"ftName": "scheduler",
|
||||
"type": "update",
|
||||
"samples": [
|
||||
{
|
||||
"url": "overview",
|
||||
"name": "Overview",
|
||||
"category": "Scheduler",
|
||||
"description": "This demo shows for Javascript Scheduler features such as Multiple views, Templates, Resources, Grouping, Timezone, Timescale, etc...",
|
||||
"type": "new",
|
||||
"hideOnDevice": true,
|
||||
"api": {
|
||||
"Schedule": [
|
||||
"height",
|
||||
"eventSettings",
|
||||
"selectedDate"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"url": "default",
|
||||
"name": "Default Functionalities",
|
||||
|
|
@ -137,7 +152,6 @@
|
|||
"url": "inline-editing",
|
||||
"name": "Inline Editing",
|
||||
"category": "Appointments",
|
||||
"type": "new",
|
||||
"description": "The example showcases the inline mode of the JS Scheduler that is used to create an appointment or edit an existing appointment's subject easily and quickly.",
|
||||
"api": {
|
||||
"Schedule": [
|
||||
|
|
@ -223,7 +237,6 @@
|
|||
"url": "year",
|
||||
"name": "Year View",
|
||||
"category": "Views",
|
||||
"type": "update",
|
||||
"description": "The example showcases the year view and Timeline year view of the JavaScript Scheduler. The views are helpful to view the events in an annual calendar view.",
|
||||
"api": {
|
||||
"Schedule": [
|
||||
|
|
@ -480,7 +493,6 @@
|
|||
{
|
||||
"url": "quick-info-template",
|
||||
"name": "Quick Info Template",
|
||||
"type": "new",
|
||||
"category": "Templates",
|
||||
"description": "The example showcases the customized quick info popups for cells and events using the templates that help to override the built-in style in the JavaScript Scheduler.",
|
||||
"api": {
|
||||
|
|
|
|||
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче