config(EJ2-000): V18.4.30 released
This commit is contained in:
Saranya Murugasamy
Родитель
bcba2a2ed2
Коммит
7ef7c92d2d
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@syncfusion/ej2-samples",
|
||||
"version": "18.3.35",
|
||||
"version": "18.4.30",
|
||||
"description": "Samples for Syncfusion Essential JS 2",
|
||||
"author": "Syncfusion Inc.",
|
||||
"license": "SEE LICENSE IN license",
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -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=\"//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"}
|
||||
{"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"}
|
||||
|
|
@ -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(//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"}
|
||||
{"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"}
|
||||
|
|
@ -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('//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"}
|
||||
{"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"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -56,7 +56,7 @@
|
|||
</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">
|
||||
|
|
|
|||
|
|
@ -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('//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"}
|
||||
{"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"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -96,7 +96,7 @@ import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
|||
pie.refreshSeries();
|
||||
pie.refreshChart();
|
||||
}
|
||||
document.getElementById('clubpoint').onpointermove = document.getElementById('clubpoint').ontouchmove =
|
||||
document.getElementById('clubpoint').ontouchmove =
|
||||
document.getElementById('clubpoint').onchange = (e: Event) => {
|
||||
clubchange(+(document.getElementById('clubpoint') as HTMLInputElement).value);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -16,13 +16,13 @@ AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationTooltip, Acc
|
|||
series: [
|
||||
{
|
||||
dataSource: [
|
||||
{ x: 'Argentina', y: 505370, r: '100' },
|
||||
{ x: 'Belgium', y: 551500, r: '118.7' },
|
||||
{ x: 'Cuba', y: 312685, r: '124.6' },
|
||||
{ x: 'Dominican Republic', y: 350000, r: '137.5' },
|
||||
{ x: 'Egypt', y: 301000, r: '150.8' },
|
||||
{ x: 'Kazakhstan', y: 300000, r: '155.5' },
|
||||
{ x: 'Somalia', y: 357022, r: '160.6' }
|
||||
{ x: 'Argentina', y: 505370, r: '50%' },
|
||||
{ x: 'Belgium', y: 551500, r: '70%' },
|
||||
{ x: 'Cuba', y: 312685, r: '84%' },
|
||||
{ x: 'Dominican Republic', y: 350000, r: '97%' },
|
||||
{ x: 'Egypt', y: 301000, r: '84%' },
|
||||
{ x: 'Kazakhstan', y: 300000, r: '70%' },
|
||||
{ x: 'Somalia', y: 357022, r: '90%' }
|
||||
|
||||
],
|
||||
dataLabel: {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
"directory": "chart",
|
||||
"category": "Data Visualization",
|
||||
"ftName": "chart",
|
||||
"type": "update",
|
||||
"samples": [
|
||||
{
|
||||
"url": "line",
|
||||
|
|
@ -203,7 +202,6 @@
|
|||
"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",
|
||||
|
|
|
|||
|
|
@ -723,7 +723,7 @@ function processResize(e: any): void {
|
|||
}
|
||||
}
|
||||
if (switcherPopup) {
|
||||
switcherPopup.refresh();
|
||||
switcherPopup.refreshPosition();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -176,10 +176,6 @@
|
|||
#dockSidebar {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#dockSidebar.e-sidebar .content-area{
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.e-icons::before {
|
||||
font-size: 20px;
|
||||
|
|
|
|||
|
|
@ -441,6 +441,10 @@ function contextMenuClick(args: MenuEventArgs): void {
|
|||
|
||||
}
|
||||
|
||||
function getSymbolDefaults(symbol: NodeModel): void {
|
||||
symbol.style.strokeColor = '#757575'
|
||||
}
|
||||
|
||||
function contextMenuOpen(args: DiagramBeforeMenuOpenEventArgs): void {
|
||||
let hiddenId: string[] = [];
|
||||
if (args.element.className !== 'e-menu-parent e-ul ') {
|
||||
|
|
@ -569,24 +573,25 @@ function contextMenuOpen(args: DiagramBeforeMenuOpenEventArgs): void {
|
|||
let connectorSymbols: ConnectorModel[] = [
|
||||
{
|
||||
id: 'Link1', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },
|
||||
targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 2 }
|
||||
targetDecorator: { shape: 'Arrow', style:{strokeColor: '#757575', fill: '#757575'} }, style: { strokeWidth: 2, strokeColor: '#757575' }
|
||||
},
|
||||
{
|
||||
id: 'Link2', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },
|
||||
targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 2, strokeDashArray: '4 4' }
|
||||
targetDecorator: { shape: 'Arrow', style:{strokeColor: '#757575', fill: '#757575'} }, style: { strokeWidth: 2, strokeDashArray: '4 4',strokeColor: '#757575' }
|
||||
},
|
||||
{
|
||||
id: 'Link3', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },
|
||||
targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 2 }
|
||||
targetDecorator: { shape: 'Arrow', style:{strokeColor: '#757575', fill: '#757575'} }, style: { strokeWidth: 2, strokeColor: '#757575' }
|
||||
},
|
||||
{
|
||||
id: 'link4', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 }, type: 'Orthogonal',
|
||||
targetDecorator: { style:{strokeColor: '#757575', fill: '#757575'} },
|
||||
shape: {
|
||||
type: 'Bpmn',
|
||||
flow: 'Association',
|
||||
association: 'Directional'
|
||||
}, style: {
|
||||
strokeDashArray: '2,2'
|
||||
strokeDashArray: '2,2', strokeColor: '#757575'
|
||||
},
|
||||
}
|
||||
];
|
||||
|
|
@ -597,7 +602,7 @@ function contextMenuOpen(args: DiagramBeforeMenuOpenEventArgs): void {
|
|||
{ id: 'Bpmn', expanded: true, symbols: bpmnShapes, iconCss: 'shapes', title: 'BPMN Shapes' },
|
||||
{ id: 'Connector', expanded: true, symbols: connectorSymbols, iconCss: 'shapes', title: 'Connectors' },
|
||||
],
|
||||
width: '100%', height: '471px'
|
||||
width: '100%', height: '471px', getNodeDefaults: getSymbolDefaults
|
||||
});
|
||||
palette.appendTo('#symbolpalette');
|
||||
addEvents();
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -107,6 +107,11 @@
|
|||
<input type="text" id='vertical' />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row property-panel-content" style="padding-top: 10px">
|
||||
<div class="row" style="padding-top: 8px">
|
||||
<input type="checkbox" id="checked" unchecked="false">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@ import { loadCultureFiles } from '../common/culture-loader';
|
|||
|
||||
import {
|
||||
Diagram, NodeModel, DataBinding, DiagramTools,
|
||||
ComplexHierarchicalTree, LayoutOrientation, ConnectorModel
|
||||
ComplexHierarchicalTree, LayoutOrientation, ConnectorModel, LineDistribution, ConnectionPointOrigin
|
||||
} from '@syncfusion/ej2-diagrams';
|
||||
import { DataManager } from '@syncfusion/ej2-data';
|
||||
import { NumericTextBox, ChangeEventArgs as NumericChangeEventArgs } from '@syncfusion/ej2-inputs';
|
||||
import * as Data from './diagram-data.json';
|
||||
|
||||
Diagram.Inject(DataBinding, ComplexHierarchicalTree);
|
||||
import { CheckBox } from '@syncfusion/ej2-buttons';
|
||||
Diagram.Inject(DataBinding, ComplexHierarchicalTree, LineDistribution);
|
||||
|
||||
export interface DataInfo {
|
||||
[key: string]: string;
|
||||
|
|
@ -43,6 +43,7 @@ function getConnectorDefaults(connector: ConnectorModel): ConnectorModel {
|
|||
//Configrues hierarchical tree layout
|
||||
layout: {
|
||||
type: 'ComplexHierarchicalTree',
|
||||
connectionPointOrigin: ConnectionPointOrigin.DifferentPoint,
|
||||
horizontalSpacing: 40, verticalSpacing: 40, orientation: 'TopToBottom',
|
||||
margin: { left: 10, right: 0, top: 50, bottom: 0 }
|
||||
},
|
||||
|
|
@ -66,6 +67,17 @@ function getConnectorDefaults(connector: ConnectorModel): ConnectorModel {
|
|||
created: created
|
||||
});
|
||||
diagram.appendTo('#diagram');
|
||||
let checkBoxObj: CheckBox = new CheckBox({
|
||||
checked: true, label: 'Prevent Connector Overlapping',
|
||||
change: () => {
|
||||
if (checkBoxObj.checked) {
|
||||
diagram.layout.connectionPointOrigin = ConnectionPointOrigin.DifferentPoint;
|
||||
} else {
|
||||
diagram.layout.connectionPointOrigin = ConnectionPointOrigin.SamePoint;
|
||||
}
|
||||
}
|
||||
});
|
||||
checkBoxObj.appendTo('#checked');
|
||||
function created(): void {
|
||||
diagram.fitToPage({ mode: 'Width' });
|
||||
}
|
||||
|
|
|
|||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1,18 +1,127 @@
|
|||
<script id="nodetemplate" type="text/x-template">
|
||||
<div id="gauge" style="height:100%; width:100%; overflow:hidden;"> </div>
|
||||
</script>
|
||||
<div class="control-section">
|
||||
<div id="diagram"></div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates how to host a HTML element inside a node. In this example, a Gauge control is hosted inside a HTML Node.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
This example shows how to host a control inside a node. The <code>shape</code> property of the node can be used to host HTML content inside a node. The
|
||||
<code>content</code> property of the shape allows you to define the content to be hosted.
|
||||
</p>
|
||||
<br>
|
||||
</div>
|
||||
<!-- <div><h4 style: "">DashBoard</h4></div> -->
|
||||
<html><head>
|
||||
<script id="nodetemplate" type="text/x-template">
|
||||
|
||||
${if(id == 'node')}
|
||||
<div id="diagram_control" class="diagram_border_cus">
|
||||
<div class="pane col-xs-12 col-sm-12 col-md-12 pie-container">
|
||||
<div class="pieChartHeader">
|
||||
<p class="chart-title">Total Expenses</p>
|
||||
<p id="rangeDate" class="chart-value">Jun 1 - Dec 1</p>
|
||||
</div>
|
||||
|
||||
<div id="pieChart" style="height:100%; width:49%; overflow:hidden;float:left;" margin="20px">
|
||||
</div>
|
||||
<div id="grid" style="height:100%; width:49%; overflow:hidden;float:left;" > </div>
|
||||
</div>
|
||||
</div>
|
||||
${else if(id == 'node2')}
|
||||
<div class="diagram_border_cus diagram_chart">
|
||||
<div id="lineChart" > </div>
|
||||
</div>
|
||||
${else if(id == 'node3')}
|
||||
<div class="diagram_border_cus diagram_chart">
|
||||
<div id="barChart" > </div>
|
||||
</div>
|
||||
${else if(id == 'node4')}
|
||||
<div class="diagram_border_cus diagram_border_cal">
|
||||
<div id="element_calander" >
|
||||
<input id="daterange" type="text" style="horizontal-align:Left;vertical-align:Top">
|
||||
</div>
|
||||
</div>
|
||||
${/if}
|
||||
</script>
|
||||
<script id="rowtemplate" type="text/x-template">
|
||||
<tr style="height: 30px;">
|
||||
<td>
|
||||
<div style="width: 16px; height: 16px; margin-left: 1px; border-radius: 16px; background:${color}"></div>
|
||||
</td>
|
||||
<td> ${text} </td>
|
||||
<td> ${(data.y)} </td>
|
||||
<td style="text-align:right;"> ${x} </td>
|
||||
</tr>
|
||||
</script>
|
||||
</head>
|
||||
<div id="custom-diagram" class="control-section">
|
||||
<div id="diagram"></div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample shows how to host an element of HTML within a node. The expense tracker application can be created using chart and grid components.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
This example illustrates how an HTML control is hosted inside a node. By setting <code>HTML</code> to the type property of the shape, the template node can be enabled. You can define the content to be hosted by using <code>NodeTemplate</code>.
|
||||
</p>
|
||||
<br>
|
||||
</div>
|
||||
<!-- custom code start -->
|
||||
<style>
|
||||
#diagram_control .chart-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#diagram_control .chart-title,
|
||||
#diagram_control .chart-subtitle {
|
||||
font-family: Roboto;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.02em;
|
||||
line-height: 16px;
|
||||
color: #797979 !important;
|
||||
}
|
||||
|
||||
.chart-value {
|
||||
color: #9d9d9d;
|
||||
}
|
||||
|
||||
#diagram_control {
|
||||
background-color: white;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#diagram_control .e-grid,
|
||||
#diagram_control .e-grid .e-gridheader {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.pieChartHeader {
|
||||
margin-left: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.diagram_border_cus {
|
||||
border: 1px solid transparent;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.diagram_chart {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
#element_calander .e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left),
|
||||
.e-input-group.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap,
|
||||
.e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left) {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.diagram_border_cal {
|
||||
height: 30px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
#custom-diagram .e-diagram-resize-handle.e-disabled {
|
||||
fill: #ced4da;
|
||||
opacity: 1;
|
||||
stroke: #fff;
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end-->
|
||||
</html>
|
||||
|
|
@ -4,55 +4,484 @@ import { loadCultureFiles } from '../common/culture-loader';
|
|||
*/
|
||||
|
||||
import {
|
||||
Diagram, NodeModel, HtmlModel
|
||||
Diagram, NodeModel, HtmlModel, NodeConstraints
|
||||
} from '@syncfusion/ej2-diagrams';
|
||||
import { CircularGauge, ILoadedEventArgs, GaugeTheme } from '@syncfusion/ej2-circulargauge';
|
||||
import { expenseData, startDate, endDate, MyWindow } from './complexShapes.data';
|
||||
import { DateRangePicker, RangeEventArgs } from '@syncfusion/ej2-calendars';
|
||||
import { Query, DataManager, Predicate } from '@syncfusion/ej2-data';
|
||||
import { extend } from '@syncfusion/ej2-base';
|
||||
import {
|
||||
AccumulationChart, AccumulationLegend, PieSeries, AccumulationDataLabel, AccumulationTooltip,
|
||||
IAccTextRenderEventArgs, AccumulationSelection,
|
||||
Chart, ColumnSeries, Category, Legend, Tooltip, ChartAnnotation,
|
||||
LineSeries, AreaSeries, DateTime, Logarithmic, Crosshair
|
||||
} from '@syncfusion/ej2-charts';
|
||||
AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationDataLabel, AccumulationTooltip, AccumulationSelection, ChartAnnotation);
|
||||
Chart.Inject(ColumnSeries, Category, Legend, Tooltip, ChartAnnotation, DateTime, Crosshair);
|
||||
Chart.Inject(LineSeries, AreaSeries, DateTime, Logarithmic, Legend, Tooltip);
|
||||
import { Grid, Page, Toolbar } from '@syncfusion/ej2-grids';
|
||||
Grid.Inject(Page, Toolbar);
|
||||
// custom code start
|
||||
interface IExpense {
|
||||
UniqueId: string;
|
||||
DateTime: Date;
|
||||
Category: string;
|
||||
PaymentMode: string;
|
||||
TransactionType: string;
|
||||
Description: string;
|
||||
Amount: number;
|
||||
}
|
||||
|
||||
interface IExpenseData {
|
||||
x: string;
|
||||
y: number;
|
||||
text: string;
|
||||
}
|
||||
// custom code end
|
||||
let predicateStart: Predicate = new Predicate('DateTime', 'greaterthanorequal', window.startDate);
|
||||
let predicateEnd: Predicate = new Predicate('DateTime', 'lessthanorequal', window.endDate);
|
||||
let predicate: Predicate = predicateStart.and(predicateEnd);
|
||||
// custom code start
|
||||
declare let window: MyWindow;
|
||||
let dataSource: Object[] = [];
|
||||
/* tslint:disable */
|
||||
function updateDate(list: any) {
|
||||
/* tslint:eanble */
|
||||
dataSource = list;
|
||||
}
|
||||
updateDate(expenseData);
|
||||
let linechartObj: Chart;
|
||||
let columnChartObj: Chart;
|
||||
let pie: AccumulationChart;
|
||||
let grid: Grid;
|
||||
let pieLegendData: Object[] = [];
|
||||
let pieRenderData: IExpenseData[] = [];
|
||||
let tempData: IExpense[] = <IExpense[]>dataSource;
|
||||
let legendData: IExpense[] = [];
|
||||
let pieRenderingData: Object[] = [];
|
||||
let category: string[] = [];
|
||||
let expTotal: number = 0;
|
||||
let dateRangePickerObject: DateRangePicker;
|
||||
let groupValue: number = 0;
|
||||
let hiGridData: Object[];
|
||||
window.startDate = startDate;
|
||||
window.endDate = endDate;
|
||||
window.expenseData = expenseData;
|
||||
let columnIncomeDS: any = [];
|
||||
let columnExpenseDS: any = [];
|
||||
let lineDS: any = [];
|
||||
let tempChartIncomeDS: any = {};
|
||||
let tempChartExpenseDS: any = {};
|
||||
let tempChartLineDS: any = {};
|
||||
let curDateTime: any;
|
||||
let lineD: any = [];
|
||||
// custom code end
|
||||
// tslint:disable-next-line:max-func-body-length
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let shape: HtmlModel = { type: 'HTML' };
|
||||
let node1: NodeModel = {
|
||||
id: 'node', offsetX: 450, offsetY: 200, width: 300, height: 300, shape: shape
|
||||
};
|
||||
//initialize the diagram control
|
||||
let diagram: Diagram = new Diagram({
|
||||
width: '100%', height: '640px', nodes: [node1], snapSettings: { constraints: 0 },
|
||||
nodeTemplate: '#nodetemplate', created: created
|
||||
});
|
||||
diagram.appendTo('#diagram');
|
||||
function created(): void {
|
||||
diagram.fitToPage();
|
||||
}
|
||||
//Add Gauge control to Diagram.
|
||||
let circularGauge: CircularGauge = new CircularGauge({
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
|
||||
// loadCultureFiles();
|
||||
let shape: HtmlModel = { type: 'HTML' };
|
||||
let constraints: any = NodeConstraints.Default & ~NodeConstraints.Resize & ~NodeConstraints.Rotate;
|
||||
let nodes: NodeModel[] = [{
|
||||
id: 'node', offsetX: 10, offsetY: 100, width: 1050, height: 450, shape: shape, constraints: constraints
|
||||
},
|
||||
{
|
||||
id: 'node2', offsetX: 276, offsetY: 550, width: 512, height: 408, shape: shape, constraints: constraints
|
||||
}, {
|
||||
id: 'node3', offsetX: -257, offsetY: 550, width: 512, height: 408, shape: shape, constraints: constraints
|
||||
}, {
|
||||
id: 'node4', offsetX: 409, offsetY: -151, width: 250, height: 30, shape: shape, constraints: constraints
|
||||
}, {
|
||||
id: 'node5', offsetX: -434, offsetY: -157, width: 250, height: 30, constraints: NodeConstraints.Default & ~NodeConstraints.Select,
|
||||
style: { fill: 'transparent', strokeColor: 'transparent' },
|
||||
annotations: [{
|
||||
content: 'EXPENSE TRACKER',
|
||||
style: { fontSize: 16, color: '#797979', bold: true }
|
||||
}]
|
||||
}]
|
||||
//initialize the diagram control
|
||||
let diagram: Diagram = new Diagram({
|
||||
width: '100%', height: '900px', nodes: nodes,
|
||||
backgroundColor: '#F5F5F5',
|
||||
nodeTemplate: '#nodetemplate', created: created
|
||||
});
|
||||
diagram.appendTo('#diagram');
|
||||
function created(): void {
|
||||
diagram.fitToPage();
|
||||
}
|
||||
getTotalExpense();
|
||||
initialRender();
|
||||
|
||||
pie = new AccumulationChart({
|
||||
enableSmartLabels: true,
|
||||
width: '100%',
|
||||
height: '350px',
|
||||
series: getSeries(),
|
||||
legendSettings: { visible: true },
|
||||
textRender: (args: IAccTextRenderEventArgs) => {
|
||||
args.series.dataLabel.font.size = '13px';
|
||||
pie.animateSeries = true;
|
||||
if (args.text.indexOf('Others') > -1) {
|
||||
args.text = 'Others';
|
||||
}
|
||||
},
|
||||
});
|
||||
pie.appendTo('#pieChart');
|
||||
createLegendData('pie');
|
||||
grid = new Grid({
|
||||
width: '40%',
|
||||
dataSource: pieRenderData,
|
||||
rowTemplate: '#rowtemplate',
|
||||
columns: [
|
||||
{ width: '10%', textAlign: 'Center' },
|
||||
{ width: '50%' },
|
||||
{ width: '20%' },
|
||||
{ width: '20%' }
|
||||
],
|
||||
});
|
||||
grid.appendTo('#grid');
|
||||
dateRangePickerObject = new DateRangePicker({
|
||||
format: 'MM/dd/yyyy',
|
||||
change: onDateRangeChange,
|
||||
startDate: window.startDate,
|
||||
endDate: window.endDate,
|
||||
min: new Date(2017, 0o5, 0o1),
|
||||
max: new Date(2017, 10, 30),
|
||||
showClearButton: false,
|
||||
allowEdit: false,
|
||||
presets: [
|
||||
{ label: 'Last Month', start: new Date('10/1/2017'), end: new Date('10/31/2017') },
|
||||
{ label: 'Last 3 Months', start: new Date('9/1/2017'), end: new Date('11/30/2017') },
|
||||
{ label: 'All Time', start: new Date('6/1/2017'), end: new Date('11/30/2017') }
|
||||
]
|
||||
});
|
||||
dateRangePickerObject.appendTo('#daterange');
|
||||
window.startDate = dateRangePickerObject.startDate;
|
||||
window.endDate = dateRangePickerObject.endDate;
|
||||
// custom code start
|
||||
function getSeries(): object[] {
|
||||
let series: object[] = [
|
||||
{
|
||||
dataSource: pieRenderingData,
|
||||
xName: 'text',
|
||||
yName: 'y',
|
||||
radius: '83%',
|
||||
startAngle: 0,
|
||||
endAngle: 360,
|
||||
innerRadius: '50%',
|
||||
dataLabel: {
|
||||
name: 'x',
|
||||
visible: true,
|
||||
position: 'Outside',
|
||||
connectorStyle: { length: '10%' },
|
||||
font: {
|
||||
color: 'Black',
|
||||
size: '14px',
|
||||
fontFamily: 'Roboto'
|
||||
}
|
||||
},
|
||||
axes: [{
|
||||
lineStyle: { width: 10, color: 'transparent' },
|
||||
labelStyle: {
|
||||
position: 'Inside', useRangeColor: false,
|
||||
font: { size: '12px', fontFamily: 'Roboto', fontStyle: 'Regular' }
|
||||
}, majorTicks: { height: 10, offset: 5, color: '#9E9E9E' }, minorTicks: { height: 0 },
|
||||
annotations: [{
|
||||
content: '<div><span style="font-size:14px; color:#9E9E9E; font-family:Regular">Speedometer</span></div>',
|
||||
radius: '30%', angle: 0, zIndex: '1'
|
||||
}, {
|
||||
content: '<div><span style="font-size:20px; color:#424242; font-family:Regular">65 MPH</span></div>',
|
||||
radius: '40%', angle: 180, zIndex: '1'
|
||||
}],
|
||||
startAngle: 210, endAngle: 150, minimum: 0, maximum: 120, radius: '80%',
|
||||
ranges: [{ start: 0, end: 40, color: '#30B32D' }, { start: 40, end: 80, color: '#FFDD00' },
|
||||
{ start: 80, end: 120, color: '#F03E3E' }],
|
||||
pointers: [{
|
||||
value: 65, radius: '60%', color: '#757575', pointerWidth: 8,
|
||||
cap: { radius: 7, color: '#757575' }, needleTail: { length: '18%', color: '#757575' }
|
||||
}]
|
||||
}]
|
||||
animation: { enable: false },
|
||||
palettes: ['#61EFCD', '#CDDE1F', '#FEC200', '#CA765A', '#2485FA', '#F57D7D', '#C152D2',
|
||||
'#8854D9', '#3D4EB8', '#00BCD7']
|
||||
}
|
||||
];
|
||||
return series;
|
||||
}
|
||||
// custom code end
|
||||
function onDateRangeChange(args: RangeEventArgs): void {
|
||||
window.startDate = args.startDate;
|
||||
window.endDate = args.endDate;
|
||||
lineDS = [];
|
||||
lineD = [];
|
||||
columnIncomeDS = [];
|
||||
columnExpenseDS = [];
|
||||
tempChartExpenseDS = [];
|
||||
tempChartIncomeDS = [];
|
||||
lineD = [];
|
||||
predicateStart = new Predicate("DateTime", "greaterthanorequal", args.startDate);
|
||||
predicateEnd = new Predicate("DateTime", "lessthanorequal", args.endDate);
|
||||
predicate = predicateStart.and(predicateEnd);
|
||||
// cardUpdate();
|
||||
/* tslint:disable */
|
||||
new DataManager(window.expenseData)
|
||||
.executeQuery(new Query().where(predicate.and("TransactionType", "equal", "Expense")))
|
||||
.then((e: any) => {
|
||||
getCoulmnChartExpenseDS(e);
|
||||
});
|
||||
/* tslint:enable */
|
||||
/* tslint:disable */
|
||||
new DataManager(window.expenseData)
|
||||
.executeQuery(new Query().where(predicate.and("TransactionType", "equal", "Income"))
|
||||
)
|
||||
.then((e: any) => {
|
||||
getCoulmnChartIncomeDS(e);
|
||||
columnChartObj.setProperties({
|
||||
//Initializing Chart Series
|
||||
primaryXAxis: { labelFormat: "MMM", valueType: "DateTime", edgeLabelPlacement: "Shift" },
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis: { title: "Amount", labelFormat: "c0" },
|
||||
useGroupingSeparator: true,
|
||||
series: [
|
||||
{
|
||||
type: "Column", dataSource: columnIncomeDS, legendShape: "Circle", xName: "DateTime", width: 2, yName: "Amount", name: "Income",
|
||||
marker: { visible: true, height: 10, width: 10 }, fill: "#A16EE5", border: { width: 0.5, color: "#A16EE5" }, animation: { enable: false }
|
||||
},
|
||||
{
|
||||
type: "Column", dataSource: columnExpenseDS, legendShape: "Circle", xName: "DateTime", width: 2, yName: "Amount", name: "Expense",
|
||||
marker: { visible: true, height: 10, width: 10 }, fill: "#4472C4", animation: { enable: false }
|
||||
}
|
||||
]
|
||||
});
|
||||
columnChartObj.refresh();
|
||||
lineD = [];
|
||||
getLineChartDS();
|
||||
linechartObj.setProperties({
|
||||
//Initializing Chart Series
|
||||
series: [{
|
||||
type: "Area", dataSource: lineDS, xName: "DateTime", width: 2, marker: {
|
||||
visible: true, width: 10, height: 10, fill: "white",
|
||||
border: { width: 2, color: "#0470D8" }
|
||||
}, legendShape: "Circle", yName: "Amount", name: "Amount", fill: "rgba(4, 112, 216, 0.3)",
|
||||
border: { width: 0.5, color: "#0470D8" }
|
||||
}
|
||||
]
|
||||
});
|
||||
linechartObj.refresh();
|
||||
});
|
||||
getTotalExpense();
|
||||
pie.series = [
|
||||
{
|
||||
dataSource: pieRenderingData, xName: "text", yName: "y", radius: "83%", startAngle: 0, endAngle: 360, innerRadius: "50%", dataLabel: {
|
||||
name: "x", visible: true, position: "Outside", connectorStyle: { length: "10%" }, font: { color: "Black", size: "14px" }
|
||||
},
|
||||
palettes: ["#61EFCD", "#CDDE1F", "#FEC200", "#CA765A", "#2485FA", "#F57D7D", "#C152D2", "#8854D9", "#3D4EB8", "#00BCD7"]
|
||||
}
|
||||
];
|
||||
pie.dataBind();
|
||||
pie.refresh();
|
||||
createLegendData("pieUpdate");
|
||||
grid.dataSource = pieRenderData;
|
||||
grid.dataBind();
|
||||
grid.refresh();
|
||||
}
|
||||
function initialRender(): void {
|
||||
window.startDate = startDate;
|
||||
window.endDate = endDate;
|
||||
window.expenseData = expenseData;
|
||||
predicateStart = new Predicate('DateTime', 'greaterthanorequal', window.startDate);
|
||||
predicateEnd = new Predicate('DateTime', 'lessthanorequal', window.endDate);
|
||||
predicate = predicateStart.and(predicateEnd);
|
||||
lineBarChart();
|
||||
}
|
||||
// custom code start
|
||||
// tslint:disable-next-line:max-func-body-length
|
||||
function lineBarChart() {
|
||||
new DataManager(window.expenseData)
|
||||
.executeQuery(new Query().where(predicate.and('TransactionType', 'equal', 'Expense')))
|
||||
.then((e: any) => {
|
||||
getCoulmnChartExpenseDS(e);
|
||||
});
|
||||
new DataManager(window.expenseData)
|
||||
.executeQuery(new Query().where(predicate.and('TransactionType', 'equal', 'Income')))
|
||||
.then((e: any) => {
|
||||
getCoulmnChartIncomeDS(e);
|
||||
columnChartObj = new Chart({
|
||||
width: '100%', height: '400px',
|
||||
//Initializing Primary X Axis
|
||||
primaryXAxis: { labelFormat: 'MMM', valueType: 'DateTime', intervalType: 'Months', edgeLabelPlacement: 'Shift' },
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis: { minimum: 3000, maximum: 9000, labelFormat: 'c0' },
|
||||
useGroupingSeparator: true,
|
||||
series: [
|
||||
{
|
||||
type: 'Column', dataSource: columnIncomeDS, legendShape: 'Circle', xName: 'DateTime', width: 2, yName: 'Amount',
|
||||
name: 'Income', marker: { visible: true, height: 10, width: 10 },
|
||||
fill: '#A16EE5', border: { width: 0.5, color: '#A16EE5' }, animation: { enable: false },
|
||||
},
|
||||
{
|
||||
type: 'Column', dataSource: columnExpenseDS, legendShape: 'Circle', xName: 'DateTime', width: 2, yName: 'Amount',
|
||||
name: 'Expense', marker: { visible: true, height: 10, width: 10 }, fill: '#4472C4', animation: { enable: false },
|
||||
},
|
||||
],
|
||||
annotations: [{
|
||||
// tslint:disable-next-line:max-line-length
|
||||
content: '<p style="font-family:Roboto;font-size: 16px;font-weight: 400;font-weight: 400;letter-spacing: 0.02em;line-height: 16px;color: #797979 !important;">Income - Expense</p>',
|
||||
x: '75px', y: '9%', coordinateUnits: 'Pixel', region: 'Chart'
|
||||
}],
|
||||
margin: { top: 90 }, legendSettings: { visible: true },
|
||||
titleStyle: { textAlignment: 'Near', fontWeight: '500', size: '16', color: '#000' },
|
||||
tooltip: {
|
||||
fill: '#707070', enable: true, shared: true, format: '${series.name} : ${point.y}',
|
||||
header: 'Month - ${point.x} '
|
||||
}
|
||||
});
|
||||
columnChartObj.appendTo('#barChart');
|
||||
getLineChartDS();
|
||||
line();
|
||||
});
|
||||
}
|
||||
function line(): void {
|
||||
// tslint:disable-next-line:max-line-length
|
||||
let content: string = '<p style="font-family:Roboto;font-size: 16px;font-weight: 400;font-weight: 400;letter-spacing: 0.02em;line-height: 16px;color: #797979 !important;">Account - Balance</p>';
|
||||
linechartObj = new Chart({
|
||||
width: '100%', height: '400px',
|
||||
//Initializing Primary X Axis
|
||||
primaryXAxis: { valueType: 'DateTime', labelFormat: 'MMM', majorGridLines: { width: 0 }, intervalType: 'Months' },
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis: {
|
||||
maximum: 1800,
|
||||
interval: 300,
|
||||
labelFormat: 'c0',
|
||||
},
|
||||
useGroupingSeparator: true,
|
||||
chartArea: {
|
||||
border: {
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
annotations: [{
|
||||
content: content,
|
||||
x: '75px', y: '9%', coordinateUnits: 'Pixel', region: 'Chart'
|
||||
}],
|
||||
titleStyle: {
|
||||
textAlignment: 'Near', fontWeight: '500', size: '16', color: '#000'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'Area',
|
||||
dataSource: lineDS,
|
||||
xName: 'DateTime', width: 2, marker: {
|
||||
visible: true,
|
||||
width: 10,
|
||||
height: 10,
|
||||
fill: 'white',
|
||||
border: { width: 2, color: '#0470D8' },
|
||||
},
|
||||
yName: 'Amount', name: 'Amount',
|
||||
fill: 'rgba(4, 112, 216, 0.3)',
|
||||
border: { width: 0.5, color: '#0470D8' }
|
||||
},
|
||||
|
||||
],
|
||||
margin: { top: 90 },
|
||||
tooltip: {
|
||||
fill: '#707070',
|
||||
enable: true, shared: true,
|
||||
format: '${series.name} : ${point.y}',
|
||||
header: 'Month - ${point.x} '
|
||||
}
|
||||
});
|
||||
circularGauge.appendTo('#gauge');
|
||||
|
||||
linechartObj.appendTo('#lineChart');
|
||||
}
|
||||
// custom code end
|
||||
function getTotalExpense(): void {
|
||||
let renderingData: IExpenseData[] = [];
|
||||
tempData.forEach(item => {
|
||||
if (item.TransactionType === 'Expense' && window.startDate.valueOf() <= item.DateTime.valueOf()
|
||||
&& window.endDate.valueOf() >= item.DateTime.valueOf()) {
|
||||
expTotal += Number(item.Amount);
|
||||
legendData.push(item);
|
||||
if (category.indexOf(item.Category) < 0) {
|
||||
category.push(item.Category);
|
||||
}
|
||||
}
|
||||
});
|
||||
/* tslint:disable */
|
||||
category.forEach(str => {
|
||||
let total: number = 0;
|
||||
legendData.forEach(item => {
|
||||
if (str === item.Category) {
|
||||
total += Number(item.Amount);
|
||||
}
|
||||
});
|
||||
let percent: string = ((total / expTotal) * 100).toFixed(2) + '%';
|
||||
renderingData.push({ x: str, y: total, text: percent });
|
||||
});
|
||||
pieRenderingData = new DataManager(JSON.parse(JSON.stringify(renderingData))).executeLocal((new Query().sortByDesc('y')));
|
||||
if (pieRenderingData.length > 10) {
|
||||
let temp: IExpenseData = <IExpenseData>new DataManager(JSON.parse(JSON.stringify(renderingData))).executeLocal((new Query().sortByDesc('y').range(0, 9)))[8];
|
||||
groupValue = temp.y - 1;
|
||||
hiGridData = new DataManager(JSON.parse(JSON.stringify(renderingData))).executeLocal((new Query().sortByDesc('y').skip(9)));
|
||||
}
|
||||
}
|
||||
// custom code start
|
||||
function createLegendData(initiate: string): void {
|
||||
if (pieRenderingData.length > 10) {
|
||||
pie.series[0].groupTo = groupValue.toString();
|
||||
pie.dataBind();
|
||||
pie.refresh();
|
||||
}
|
||||
if (initiate === 'pieUpdate' || pieLegendData.length === 0) {
|
||||
pieLegendData = [];
|
||||
pieLegendData = pie.visibleSeries[0].points;
|
||||
}
|
||||
pie.legendSettings.visible = false;
|
||||
pie.dataBind();
|
||||
pieRenderData = [];
|
||||
for (let i: number = 0; i < pieLegendData.length; i++) {
|
||||
let data: IExpenseData = <IExpenseData>pieLegendData[i];
|
||||
if (data.text.indexOf('Others') > -1) {
|
||||
data.x = ((data.y / expTotal) * 100).toFixed(2).toString() + '%';
|
||||
}
|
||||
pieRenderData.push(data);
|
||||
}
|
||||
}
|
||||
function getCoulmnChartExpenseDS(e: any): void {
|
||||
let result: Object[] = objectAssign(e);
|
||||
for (let i: number = 0; i < result.length - 1; i++) {
|
||||
let cur: any = result[i];
|
||||
if (cur.DateTime.getMonth() in tempChartExpenseDS) {
|
||||
curDateTime = tempChartExpenseDS[cur.DateTime.getMonth()];
|
||||
tempChartExpenseDS[cur.DateTime.getMonth()].Amount = parseInt(curDateTime.Amount, 0) + parseInt(cur.Amount, 0);
|
||||
} else {
|
||||
tempChartExpenseDS[cur.DateTime.getMonth()] = cur;
|
||||
tempChartExpenseDS[cur.DateTime.getMonth()].DateTime = new Date(new Date(tempChartExpenseDS[cur.DateTime.getMonth()].DateTime.setHours(0, 0, 0, 0)).setDate(1));
|
||||
}
|
||||
}
|
||||
for (let data in tempChartExpenseDS) {
|
||||
columnExpenseDS.push(tempChartExpenseDS[data]);
|
||||
}
|
||||
}
|
||||
function getCoulmnChartIncomeDS(e: any): void {
|
||||
let result: Object[] = objectAssign(e);
|
||||
for (let i: number = 0; i < result.length - 1; i++) {
|
||||
let cur: any = result[i];
|
||||
if (cur.DateTime.getMonth() in tempChartIncomeDS) {
|
||||
curDateTime = tempChartIncomeDS[cur.DateTime.getMonth()];
|
||||
tempChartIncomeDS[cur.DateTime.getMonth()].Amount = parseInt(curDateTime.Amount, 0) + parseInt(cur.Amount, 0);
|
||||
} else {
|
||||
tempChartIncomeDS[cur.DateTime.getMonth()] = cur;
|
||||
tempChartIncomeDS[cur.DateTime.getMonth()].DateTime = new Date(new Date(tempChartIncomeDS[cur.DateTime.getMonth()].DateTime.setHours(0, 0, 0, 0)).setDate(1));;
|
||||
}
|
||||
}
|
||||
for (let data in tempChartIncomeDS) {
|
||||
columnIncomeDS.push(tempChartIncomeDS[data]);
|
||||
}
|
||||
}
|
||||
function objectAssign(e: any): Object[] {
|
||||
let result: Object[] = [];
|
||||
let obj: any;
|
||||
obj = extend(obj, e.result, {}, true);
|
||||
for (let data: number = 0; data <= Object.keys(e.result).length; data++) {
|
||||
result.push(obj[data]);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
function getLineChartDS(): void {
|
||||
tempChartLineDS = columnIncomeDS.concat(columnExpenseDS);
|
||||
for (let i: number = 0; i < tempChartLineDS.length; i++) {
|
||||
let cur: any = tempChartLineDS[i];
|
||||
if (cur.DateTime.getMonth() in lineD) {
|
||||
curDateTime = lineD[cur.DateTime.getMonth()];
|
||||
lineD[cur.DateTime.getMonth()].Amount = Math.abs((parseInt(curDateTime.Amount, 0) - parseInt(cur.Amount, 0)));
|
||||
} else {
|
||||
lineD[cur.DateTime.getMonth()] = cur;
|
||||
}
|
||||
}
|
||||
for (let data: number = 0; data <= lineD.length; data++) {
|
||||
if (lineD[data]) {
|
||||
lineDS.push(lineD[data]);
|
||||
}
|
||||
}
|
||||
}
|
||||
// custom code end
|
||||
};
|
||||
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -70,6 +70,7 @@ function getFlowShape(id: string, shapeType: FlowShapes): NodeModel {
|
|||
}
|
||||
|
||||
function getSymbolDefaults(symbol: NodeModel): void {
|
||||
symbol.style = { strokeColor: '#757575' };
|
||||
if (symbol.id === 'Terminator' || symbol.id === 'Process' || symbol.id === 'Delay') {
|
||||
symbol.width = 80;
|
||||
symbol.height = 40;
|
||||
|
|
@ -200,23 +201,25 @@ function getSymbolInfo(symbol: NodeModel): SymbolInfo {
|
|||
let connectorSymbols: ConnectorModel[] = [
|
||||
{
|
||||
id: 'Link1', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 60, y: 60 },
|
||||
targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 1 }
|
||||
targetDecorator: { shape: 'Arrow', style: { strokeColor: '#757575', fill: '#757575' } },
|
||||
style: { strokeWidth: 1, strokeColor: '#757575' }
|
||||
},
|
||||
{
|
||||
id: 'link3', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 60, y: 60 },
|
||||
style: { strokeWidth: 1 }, targetDecorator: { shape: 'None' }
|
||||
style: { strokeWidth: 1, strokeColor: '#757575' }, targetDecorator: { shape: 'None' }
|
||||
},
|
||||
{
|
||||
id: 'Link21', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 60, y: 60 },
|
||||
targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 1 }
|
||||
targetDecorator: { shape: 'Arrow', style: { strokeColor: '#757575', fill: '#757575' } },
|
||||
style: { strokeWidth: 1, strokeColor: '#757575' }
|
||||
},
|
||||
{
|
||||
id: 'link23', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 60, y: 60 },
|
||||
style: { strokeWidth: 1 }, targetDecorator: { shape: 'None' }
|
||||
style: { strokeWidth: 1, strokeColor: '#757575' }, targetDecorator: { shape: 'None' }
|
||||
},
|
||||
{
|
||||
id: 'link33', type: 'Bezier', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 60, y: 60 },
|
||||
style: { strokeWidth: 1 }, targetDecorator: { shape: 'None' }
|
||||
style: { strokeWidth: 1, strokeColor: '#757575' }, targetDecorator: { shape: 'None' }
|
||||
},
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -1,205 +1,30 @@
|
|||
{
|
||||
"multiParentData": [
|
||||
{
|
||||
"Name": "node11",
|
||||
"fillColor": "#e7704c",
|
||||
"border": "#c15433"
|
||||
},
|
||||
{
|
||||
"Name": "node12",
|
||||
"ReportingPerson": [
|
||||
"node114"
|
||||
],
|
||||
"fillColor": "#efd46e",
|
||||
"border": "#d6b123"
|
||||
},
|
||||
{
|
||||
"Name": "node13",
|
||||
"ReportingPerson": [
|
||||
"node12"
|
||||
],
|
||||
"fillColor": "#58b087",
|
||||
"border": "#16955e"
|
||||
},
|
||||
{
|
||||
"Name": "node14",
|
||||
"ReportingPerson": [
|
||||
"node12"
|
||||
],
|
||||
"fillColor": "#58b087",
|
||||
"border": "#16955e"
|
||||
},
|
||||
{
|
||||
"Name": "node15",
|
||||
"ReportingPerson": [
|
||||
"node12"
|
||||
],
|
||||
"fillColor": "#58b087",
|
||||
"border": "#16955e"
|
||||
},
|
||||
{
|
||||
"Name": "node16",
|
||||
"ReportingPerson": [],
|
||||
"fillColor": "#14ad85"
|
||||
},
|
||||
{
|
||||
"Name": "node17",
|
||||
"ReportingPerson": [
|
||||
"node13",
|
||||
"node14",
|
||||
"node15"
|
||||
],
|
||||
"fillColor": "#659be5",
|
||||
"border": "#3a6eb5"
|
||||
},
|
||||
{
|
||||
"Name": "node18",
|
||||
"ReportingPerson": [],
|
||||
"fillColor": "#14ad85"
|
||||
},
|
||||
{
|
||||
"Name": "node19",
|
||||
"ReportingPerson": [
|
||||
"node16",
|
||||
"node17",
|
||||
"node18"
|
||||
],
|
||||
"fillColor": "#8dbe6c",
|
||||
"border": "#489911"
|
||||
},
|
||||
{
|
||||
"Name": "node110",
|
||||
"ReportingPerson": [
|
||||
"node16",
|
||||
"node17",
|
||||
"node18"
|
||||
],
|
||||
"fillColor": "#8dbe6c",
|
||||
"border": "#489911"
|
||||
},
|
||||
{
|
||||
"Name": "node111",
|
||||
"ReportingPerson": [
|
||||
"node16",
|
||||
"node17",
|
||||
"node18",
|
||||
"node116"
|
||||
],
|
||||
"fillColor": "#8dbe6c",
|
||||
"border": "#489911"
|
||||
},
|
||||
{
|
||||
"Name": "node21",
|
||||
"fillColor": "#e7704c",
|
||||
"border": "#c15433"
|
||||
},
|
||||
{
|
||||
"Name": "node22",
|
||||
"ReportingPerson": [
|
||||
"node114"
|
||||
],
|
||||
"fillColor": "#efd46e",
|
||||
"border": "#d6b123"
|
||||
},
|
||||
{
|
||||
"Name": "node23",
|
||||
"ReportingPerson": [
|
||||
"node22"
|
||||
],
|
||||
"fillColor": "#58b087",
|
||||
"border": "#16955e"
|
||||
},
|
||||
{
|
||||
"Name": "node24",
|
||||
"ReportingPerson": [
|
||||
"node22"
|
||||
],
|
||||
"fillColor": "#58b087",
|
||||
"border": "#16955e"
|
||||
},
|
||||
{
|
||||
"Name": "node25",
|
||||
"ReportingPerson": [
|
||||
"node22"
|
||||
],
|
||||
"fillColor": "#58b087",
|
||||
"border": "#16955e"
|
||||
},
|
||||
{
|
||||
"Name": "node26",
|
||||
"ReportingPerson": [],
|
||||
"fillColor": "#14ad85"
|
||||
},
|
||||
{
|
||||
"Name": "node27",
|
||||
"ReportingPerson": [
|
||||
"node23",
|
||||
"node24",
|
||||
"node25"
|
||||
],
|
||||
"fillColor": "#659be5",
|
||||
"border": "#3a6eb5"
|
||||
},
|
||||
{
|
||||
"Name": "node28",
|
||||
"ReportingPerson": [],
|
||||
"fillColor": "#14ad85"
|
||||
},
|
||||
{
|
||||
"Name": "node29",
|
||||
"ReportingPerson": [
|
||||
"node26",
|
||||
"node27",
|
||||
"node28",
|
||||
"node116"
|
||||
],
|
||||
"fillColor": "#8dbe6c",
|
||||
"border": "#489911"
|
||||
},
|
||||
{
|
||||
"Name": "node210",
|
||||
"ReportingPerson": [
|
||||
"node26",
|
||||
"node27",
|
||||
"node28"
|
||||
],
|
||||
"fillColor": "#8dbe6c",
|
||||
"border": "#489911"
|
||||
},
|
||||
{
|
||||
"Name": "node211",
|
||||
"ReportingPerson": [
|
||||
"node26",
|
||||
"node27",
|
||||
"node28"
|
||||
],
|
||||
"fillColor": "#8dbe6c",
|
||||
"border": "#489911"
|
||||
},
|
||||
{
|
||||
"Name": "node31",
|
||||
"fillColor": "#e7704c",
|
||||
"border": "#c15433"
|
||||
},
|
||||
{
|
||||
"Name": "node114",
|
||||
"ReportingPerson": [
|
||||
"node11",
|
||||
"node21",
|
||||
"node31"
|
||||
],
|
||||
"fillColor": "#f3904a",
|
||||
"border": "#d3722e"
|
||||
},
|
||||
{
|
||||
"Name": "node116",
|
||||
"ReportingPerson": [
|
||||
"node12",
|
||||
"node22"
|
||||
],
|
||||
"fillColor": "#58b087",
|
||||
"border": "#16955e"
|
||||
}
|
||||
{ "Name": "node11", "fillColor": "#e7704c", "border": "#c15433" },
|
||||
{ "Name": "node12", "ReportingPerson": ["node114"], "fillColor": "#efd46e", "border": "#d6b123" },
|
||||
{ "Name": "node13", "ReportingPerson": ["node12"], "fillColor": "#58b087", "border": "#16955e" },
|
||||
{ "Name": "node14", "ReportingPerson": ["node12"], "fillColor": "#58b087", "border": "#16955e" },
|
||||
{ "Name": "node15", "ReportingPerson": ["node12"], "fillColor": "#58b087", "border": "#16955e" },
|
||||
{ "Name": "node116", "ReportingPerson": ["node22", "node12"], "fillColor": "#58b087", "border": "#16955e" },
|
||||
{ "Name": "node16", "ReportingPerson": [], "fillColor": "#14ad85" },
|
||||
{ "Name": "node17", "ReportingPerson": ["node13", "node14", "node15"], "fillColor": "#659be5", "border": "#3a6eb5" },
|
||||
{ "Name": "node18", "ReportingPerson": [], "fillColor": "#14ad85" },
|
||||
{ "Name": "node19", "ReportingPerson": ["node16", "node17", "node18"], "fillColor": "#8dbe6c", "border": "#489911" },
|
||||
{ "Name": "node110", "ReportingPerson": ["node16", "node17", "node18"], "fillColor": "#8dbe6c", "border": "#489911" },
|
||||
{ "Name": "node111", "ReportingPerson": ["node16", "node17", "node18", "node116"], "fillColor": "#8dbe6c", "border": "#489911" },
|
||||
{ "Name": "node21", "fillColor": "#e7704c", "border": "#c15433" },
|
||||
{ "Name": "node22", "ReportingPerson": ["node114"], "fillColor": "#efd46e", "border": "#d6b123" },
|
||||
{ "Name": "node23", "ReportingPerson": ["node22"], "fillColor": "#58b087", "border": "#16955e" },
|
||||
{ "Name": "node24", "ReportingPerson": ["node22"], "fillColor": "#58b087", "border": "#16955e" },
|
||||
{ "Name": "node25", "ReportingPerson": ["node22"], "fillColor": "#58b087", "border": "#16955e" },
|
||||
{ "Name": "node26", "ReportingPerson": [], "fillColor": "#14ad85" },
|
||||
{ "Name": "node27", "ReportingPerson": ["node23", "node24", "node25"], "fillColor": "#659be5", "border": "#3a6eb5" },
|
||||
{ "Name": "node28", "ReportingPerson": [], "fillColor": "#14ad85" },
|
||||
{ "Name": "node29", "ReportingPerson": ["node26", "node27", "node28", "node116"], "fillColor": "#8dbe6c", "border": "#489911" },
|
||||
{ "Name": "node210", "ReportingPerson": ["node26", "node27", "node28"], "fillColor": "#8dbe6c", "border": "#489911" },
|
||||
{ "Name": "node211", "ReportingPerson": ["node26", "node27", "node28"], "fillColor": "#8dbe6c", "border": "#489911" },
|
||||
{ "Name": "node31", "fillColor": "#e7704c", "border": "#c15433" },
|
||||
{ "Name": "node114", "ReportingPerson": ["node11", "node21", "node31"], "fillColor": "#f3904a", "border": "#d3722e" }
|
||||
],
|
||||
"hierarchicalTree":[
|
||||
{
|
||||
|
|
@ -1199,4 +1024,5 @@
|
|||
{ "id": 61, "Label": "Staff", "parentId": 51, "branch": "subLeft" },
|
||||
{ "id": 62, "Label": "Stakeholders", "parentId": 51, "branch": "subLeft" }
|
||||
]
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ Diagram.Inject(UndoRedo, DiagramContextMenu, Snapping);
|
|||
function getSymbolDefaults(symbol: NodeModel): void {
|
||||
symbol.width = 50;
|
||||
symbol.height = 50;
|
||||
symbol.style.strokeColor = '#757575';
|
||||
symbol.constraints = NodeConstraints.Default | NodeConstraints.AllowDrop;
|
||||
}
|
||||
|
||||
|
|
@ -240,23 +241,25 @@ function contextMenuClick(args: MenuEventArgs): void {
|
|||
let connectorSymbols: ConnectorModel[] = [
|
||||
{
|
||||
id: 'Link1', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 60, y: 60 },
|
||||
targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 1 }
|
||||
targetDecorator: { shape: 'Arrow', style: { strokeColor: '#757575', fill: '#757575' } },
|
||||
style: { strokeWidth: 1, strokeColor: '#757575' }
|
||||
},
|
||||
{
|
||||
id: 'link3', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 60, y: 60 },
|
||||
style: { strokeWidth: 1 }, targetDecorator: { shape: 'None' }
|
||||
style: { strokeWidth: 1, strokeColor: '#757575' }, targetDecorator: { shape: 'None' }
|
||||
},
|
||||
{
|
||||
id: 'Link21', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 60, y: 60 },
|
||||
targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 1 }
|
||||
targetDecorator: { shape: 'Arrow', style: { strokeColor: '#757575', fill: '#757575' } },
|
||||
style: { strokeWidth: 1, strokeColor: '#757575' }
|
||||
},
|
||||
{
|
||||
id: 'link23', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 60, y: 60 },
|
||||
style: { strokeWidth: 1 }, targetDecorator: { shape: 'None' }
|
||||
style: { strokeWidth: 1, strokeColor: '#757575' }, targetDecorator: { shape: 'None' }
|
||||
},
|
||||
{
|
||||
id: 'link33', type: 'Bezier', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 60, y: 60 },
|
||||
style: { strokeWidth: 1 }, targetDecorator: { shape: 'None' }
|
||||
style: { strokeWidth: 1, strokeColor: '#757575' }, targetDecorator: { shape: 'None' }
|
||||
},
|
||||
];
|
||||
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -246,27 +246,27 @@ function createConnector(
|
|||
let connections: ConnectorModel[] = [
|
||||
{
|
||||
id: 'Link1', type: 'Orthogonal', sourcePoint: { x: 20, y: 20 }, targetPoint: { x: 60, y: 60 }, cornerRadius: 5,
|
||||
targetDecorator: { shape: 'None' }, style: { strokeWidth: 1, strokeColor: '#444' }
|
||||
targetDecorator: { shape: 'None' }, style: { strokeWidth: 1, strokeColor: '#757575' }
|
||||
},
|
||||
{
|
||||
id: 'Link11', type: 'Orthogonal', sourcePoint: { x: 20, y: 20 }, targetPoint: { x: 60, y: 60 }, cornerRadius: 5,
|
||||
targetDecorator: { shape: 'None' }, style: { strokeWidth: 1, strokeDashArray: '5,5', strokeColor: '#444' }
|
||||
targetDecorator: { shape: 'None' }, style: { strokeWidth: 1, strokeDashArray: '5,5', strokeColor: '#757575' }
|
||||
},
|
||||
{
|
||||
id: 'Link21', type: 'Straight', sourcePoint: { x: 20, y: 20 }, targetPoint: { x: 60, y: 60 },
|
||||
targetDecorator: { shape: 'None' }, style: { strokeWidth: 1, strokeColor: '#444' }
|
||||
targetDecorator: { shape: 'None' }, style: { strokeWidth: 1, strokeColor: '#757575' }
|
||||
},
|
||||
{
|
||||
id: 'Link22', type: 'Straight', sourcePoint: { x: 20, y: 20 }, targetPoint: { x: 60, y: 60 },
|
||||
targetDecorator: { shape: 'None' }, style: { strokeWidth: 1, strokeDashArray: '5,5', strokeColor: '#444' }
|
||||
targetDecorator: { shape: 'None' }, style: { strokeWidth: 1, strokeDashArray: '5,5', strokeColor: '#757575' }
|
||||
},
|
||||
{
|
||||
id: 'Link3', type: 'Orthogonal', sourcePoint: { x: 20, y: 20 }, targetPoint: { x: 60, y: 60 }, cornerRadius: 5,
|
||||
targetDecorator: { shape: 'None' }, style: { strokeWidth: 1, strokeColor: '#444' }
|
||||
targetDecorator: { shape: 'None' }, style: { strokeWidth: 1, strokeColor: '#757575' }
|
||||
},
|
||||
{
|
||||
id: 'Link31', type: 'Orthogonal', sourcePoint: { x: 20, y: 20 }, targetPoint: { x: 60, y: 60 }, cornerRadius: 5,
|
||||
targetDecorator: { shape: 'None' }, style: { strokeWidth: 1, strokeDashArray: '5,5', strokeColor: '#444' }
|
||||
targetDecorator: { shape: 'None' }, style: { strokeWidth: 1, strokeDashArray: '5,5', strokeColor: '#757575' }
|
||||
}
|
||||
];
|
||||
let palette: SymbolPalette = new SymbolPalette({
|
||||
|
|
@ -284,7 +284,7 @@ function createConnector(
|
|||
symbol.height = 40;
|
||||
symbol.offsetX = 20;
|
||||
symbol.offsetY = 20;
|
||||
symbol.style = { fill: 'white', strokeWidth: 1, strokeColor: '#444' };
|
||||
symbol.style = { fill: 'white', strokeWidth: 1, strokeColor: '#757575' };
|
||||
},
|
||||
getSymbolInfo: (symbol: NodeModel): SymbolInfo => {
|
||||
return { fit: true };
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -127,7 +127,7 @@ function getSymbolDefaults(symbol: NodeModel): void {
|
|||
if (symbol.id === 'arrow1') {
|
||||
symbol.width = 75; symbol.height = 60;
|
||||
symbol.offsetX = 160; symbol.offsetY = 135;
|
||||
symbol.style.strokeColor = '#5C90DF';
|
||||
symbol.style.strokeColor = '#757575';
|
||||
symbol.style.fill = 'white';
|
||||
} else {
|
||||
if (symbol.id === 'remoteController') {
|
||||
|
|
@ -454,8 +454,8 @@ function onFileRemove(args: RemovingEventArgs): void {
|
|||
];
|
||||
let sourcePoint: PointModel = { x: 0, y: 0 };
|
||||
let targetPoint: PointModel = { x: 40, y: 40 };
|
||||
let targetDecorator: DecoratorModel = { shape: 'Arrow' };
|
||||
let style: StrokeStyleModel = { strokeWidth: 2 };
|
||||
let targetDecorator: DecoratorModel = { shape: 'Arrow', style:{strokeColor: '#757575', fill: '#757575'} };
|
||||
let style: StrokeStyleModel = { strokeWidth: 2, strokeColor: '#757575' };
|
||||
|
||||
// initializes the connector symbols to the UML Shapes in the symbol palette.
|
||||
let connectorSymbols: ConnectorModel[] = [
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -3,6 +3,7 @@
|
|||
"directory": "diagram",
|
||||
"category": "Data Visualization",
|
||||
"ftName": "diagram",
|
||||
"type": "update",
|
||||
"samples": [
|
||||
{
|
||||
"url": "default-functionalities",
|
||||
|
|
@ -48,7 +49,8 @@
|
|||
},
|
||||
{
|
||||
"url": "custom-shapes",
|
||||
"name": "Complex Shapes",
|
||||
"name": "HTML Shapes",
|
||||
"type": "update",
|
||||
"description": "This sample demonstrates how to host a HTML elements inside a node. In this example, a Gauge control is hosted inside a HTML Node.",
|
||||
"category": "Getting Started"
|
||||
},
|
||||
|
|
@ -145,6 +147,7 @@
|
|||
{
|
||||
"url": "complex-hierarchical-tree",
|
||||
"name": "Complex Hierarchical Tree",
|
||||
"type": "update",
|
||||
"description": "This sample demonstrates a complex hierarchical template that is built from an external data source using complex hierarchical tree algorithm.",
|
||||
"category": "Automatic Layouts"
|
||||
},
|
||||
|
|
@ -231,6 +234,13 @@
|
|||
"name": "Fishbone Diagram",
|
||||
"description": "This sample visually represents a simple fishbone diagram (Ishikawa). Diagram nodes and annotations are used to define fishbone diagrams.",
|
||||
"category": "Static Diagram"
|
||||
},
|
||||
{
|
||||
"url": "virtualization",
|
||||
"name": "Virtualization",
|
||||
"type": "new",
|
||||
"description": "This sample demonstrates the default UI virtualization functionality. Scroll the diagram for UI virtualization.",
|
||||
"category": "Getting Started"
|
||||
}
|
||||
]
|
||||
}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -114,23 +114,25 @@ let flowshapes: NodeModel[] = [
|
|||
let connectorSymbols: ConnectorModel[] = [
|
||||
{
|
||||
id: 'Link1', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },
|
||||
targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 2 }
|
||||
targetDecorator: { shape: 'Arrow', style: { strokeColor: '#757575', fill: '#757575' } },
|
||||
style: { strokeWidth: 2, strokeColor: '#757575' }
|
||||
},
|
||||
{
|
||||
id: 'link2', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },
|
||||
style: { strokeWidth: 2 }, targetDecorator: { shape: 'None' }
|
||||
style: { strokeWidth: 2, strokeColor: '#757575' }, targetDecorator: { shape: 'None' }
|
||||
},
|
||||
{
|
||||
id: 'Link3', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },
|
||||
targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 2 }
|
||||
targetDecorator: { shape: 'Arrow', style: { strokeColor: '#757575', fill: '#757575' } },
|
||||
style: { strokeWidth: 2, strokeColor: '#757575' }
|
||||
},
|
||||
{
|
||||
id: 'link4', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },
|
||||
style: { strokeWidth: 2 }, targetDecorator: { shape: 'None' }
|
||||
style: { strokeWidth: 2, strokeColor: '#757575' }, targetDecorator: { shape: 'None' }
|
||||
},
|
||||
{
|
||||
id: 'link5', type: 'Bezier', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },
|
||||
style: { strokeWidth: 2 }, targetDecorator: { shape: 'None' }
|
||||
style: { strokeWidth: 2, strokeColor: '#757575' }, targetDecorator: { shape: 'None' }
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -220,6 +222,7 @@ function getSymbolDefaults(symbol: NodeModel): void {
|
|||
symbol.height = 50;
|
||||
}
|
||||
symbol.style.strokeWidth = 2;
|
||||
symbol.style.strokeColor = '#757575';
|
||||
}
|
||||
function getSymbolInfo(symbol: NodeModel): SymbolInfo {
|
||||
return { fit: true };
|
||||
|
|
|
|||
|
|
@ -349,7 +349,7 @@ function getConnectorDefaults(connector: ConnectorModel): ConnectorModel {
|
|||
{
|
||||
id: 'flow', expanded: true, title: 'Flow Shapes', symbols: [
|
||||
{
|
||||
id: 'Terminator', addInfo: { tooltip: 'Terminator' }, width: 50, height: 60, shape: { type: 'Flow', shape: 'Terminator' }, style: { strokeWidth: 1 }, ports: [
|
||||
id: 'Terminator', addInfo: { tooltip: 'Terminator' }, width: 50, height: 60, shape: { type: 'Flow', shape: 'Terminator' }, style: { strokeWidth: 1, strokeColor: "#757575" }, ports: [
|
||||
{ offset: { x: 0, y: 0.5 }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Draw },
|
||||
{ offset: { x: 0.5, y: 0 }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Draw },
|
||||
{ offset: { x: 1, y: 0.5 }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Draw },
|
||||
|
|
@ -357,7 +357,7 @@ function getConnectorDefaults(connector: ConnectorModel): ConnectorModel {
|
|||
]
|
||||
},
|
||||
{
|
||||
id: 'Process', addInfo: { tooltip: 'Process' }, width: 50, height: 60, shape: { type: 'Flow', shape: 'Process' }, style: { strokeWidth: 1 }, ports: [
|
||||
id: 'Process', addInfo: { tooltip: 'Process' }, width: 50, height: 60, shape: { type: 'Flow', shape: 'Process' }, style: { strokeWidth: 1, strokeColor: "#757575" }, ports: [
|
||||
{ offset: { x: 0, y: 0.5 }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Draw },
|
||||
{ offset: { x: 0.5, y: 0 }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Draw },
|
||||
{ offset: { x: 1, y: 0.5 }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Draw },
|
||||
|
|
@ -365,7 +365,7 @@ function getConnectorDefaults(connector: ConnectorModel): ConnectorModel {
|
|||
]
|
||||
},
|
||||
{
|
||||
id: 'Decision', addInfo: { tooltip: 'Decision' }, width: 50, height: 50, shape: { type: 'Flow', shape: 'Decision' }, style: { strokeWidth: 1 }, ports: [
|
||||
id: 'Decision', addInfo: { tooltip: 'Decision' }, width: 50, height: 50, shape: { type: 'Flow', shape: 'Decision' }, style: { strokeWidth: 1, strokeColor: "#757575" }, ports: [
|
||||
{ offset: { x: 0, y: 0.5 }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Draw },
|
||||
{ offset: { x: 0.5, y: 0 }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Draw },
|
||||
{ offset: { x: 1, y: 0.5 }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Draw },
|
||||
|
|
@ -373,7 +373,7 @@ function getConnectorDefaults(connector: ConnectorModel): ConnectorModel {
|
|||
]
|
||||
},
|
||||
{
|
||||
id: 'Document', addInfo: { tooltip: 'Document' }, width: 50, height: 50, shape: { type: 'Flow', shape: 'Document' }, style: { strokeWidth: 1 }, ports: [
|
||||
id: 'Document', addInfo: { tooltip: 'Document' }, width: 50, height: 50, shape: { type: 'Flow', shape: 'Document' }, style: { strokeWidth: 1, strokeColor: "#757575" }, ports: [
|
||||
{ offset: { x: 0, y: 0.5 }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Draw },
|
||||
{ offset: { x: 0.5, y: 0 }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Draw },
|
||||
{ offset: { x: 1, y: 0.5 }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Draw },
|
||||
|
|
@ -386,7 +386,7 @@ function getConnectorDefaults(connector: ConnectorModel): ConnectorModel {
|
|||
{ offset: { x: 0.5, y: 0 }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Draw },
|
||||
{ offset: { x: 1, y: 0.5 }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Draw },
|
||||
{ offset: { x: 0.5, y: 1 }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Draw }
|
||||
], style: { strokeWidth: 1 }
|
||||
], style: { strokeWidth: 1, strokeColor: "#757575" }
|
||||
},
|
||||
{
|
||||
id: 'Data', addInfo: { tooltip: 'Data' }, width: 50, height: 50, shape: { type: 'Flow', shape: 'Data' }, ports: [
|
||||
|
|
@ -394,7 +394,7 @@ function getConnectorDefaults(connector: ConnectorModel): ConnectorModel {
|
|||
{ offset: { x: 0.5, y: 0 }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Draw },
|
||||
{ offset: { x: 1, y: 0.5 }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Draw },
|
||||
{ offset: { x: 0.5, y: 1 }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Draw }
|
||||
], style: { strokeWidth: 1 }
|
||||
], style: { strokeWidth: 1, strokeColor: "#757575" }
|
||||
},
|
||||
]
|
||||
},
|
||||
|
|
@ -408,8 +408,8 @@ function getConnectorDefaults(connector: ConnectorModel): ConnectorModel {
|
|||
type: 'SwimLane', lanes: [
|
||||
{
|
||||
id: 'lane1',
|
||||
style: { strokeColor: 'black' }, height: 60, width: 150,
|
||||
header: { width: 50, height: 50, style: { strokeColor: 'black', fontSize: 11 } },
|
||||
style: { strokeColor: "#757575" }, height: 60, width: 150,
|
||||
header: { width: 50, height: 50, style: { strokeColor: "#757575", fontSize: 11 } },
|
||||
}
|
||||
],
|
||||
orientation: 'Horizontal', isLane: true
|
||||
|
|
@ -425,8 +425,8 @@ function getConnectorDefaults(connector: ConnectorModel): ConnectorModel {
|
|||
lanes: [
|
||||
{
|
||||
id: 'lane1',
|
||||
style: { strokeColor: 'black' }, height: 150, width: 60,
|
||||
header: { width: 50, height: 50, style: { strokeColor: 'black', fontSize: 11 } },
|
||||
style: { strokeColor: "#757575" }, height: 150, width: 60,
|
||||
header: { width: 50, height: 50, style: { strokeColor: "#757575", fontSize: 11 } },
|
||||
}
|
||||
],
|
||||
orientation: 'Vertical', isLane: true
|
||||
|
|
@ -440,22 +440,24 @@ function getConnectorDefaults(connector: ConnectorModel): ConnectorModel {
|
|||
id: 'Verticalphase', addInfo: { tooltip: 'Vertical phase' },
|
||||
shape: {
|
||||
type: 'SwimLane',
|
||||
phases: [{ style: { strokeWidth: 1, strokeDashArray: '3,3', strokeColor: '#A9A9A9' }, }],
|
||||
phases: [{ style: { strokeWidth: 1, strokeDashArray: '3,3', strokeColor: "#757575" }, }],
|
||||
annotations: [{ text: '' }],
|
||||
orientation: 'Vertical', isPhase: true
|
||||
},
|
||||
height: 60,
|
||||
width: 140
|
||||
width: 140,
|
||||
style: {strokeColor: "#757575"}
|
||||
}, {
|
||||
id: 'Horizontalphase', addInfo: { tooltip: 'Horizontal phase' },
|
||||
shape: {
|
||||
type: 'SwimLane',
|
||||
phases: [{ style: { strokeWidth: 1, strokeDashArray: '3,3', strokeColor: '#A9A9A9' }, }],
|
||||
phases: [{ style: { strokeWidth: 1, strokeDashArray: '3,3', strokeColor: "#757575" }, }],
|
||||
annotations: [{ text: '' }],
|
||||
orientation: 'Horizontal', isPhase: true
|
||||
},
|
||||
height: 60,
|
||||
width: 140
|
||||
width: 140,
|
||||
style: {strokeColor: "#757575"}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -463,19 +465,19 @@ function getConnectorDefaults(connector: ConnectorModel): ConnectorModel {
|
|||
id: 'connectors', expanded: true, symbols: [
|
||||
{
|
||||
id: 'Link1', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },
|
||||
targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 1 }
|
||||
targetDecorator: { shape: 'Arrow', style:{strokeColor: "#757575", fill: "#757575"} }, style: { strokeWidth: 1, strokeColor: "#757575" }
|
||||
},
|
||||
{
|
||||
id: 'Link2', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },
|
||||
targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 1, strokeDashArray: '4 4' }
|
||||
targetDecorator: { shape: 'Arrow', style:{strokeColor: "#757575", fill: "#757575"} }, style: { strokeWidth: 1, strokeDashArray: '4 4', strokeColor: "#757575" }
|
||||
},
|
||||
{
|
||||
id: 'Link21', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 60, y: 60 },
|
||||
targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 1 }
|
||||
targetDecorator: { shape: 'Arrow', style:{strokeColor: "#757575", fill: "#757575"} }, style: { strokeWidth: 1, strokeColor: "#757575" }
|
||||
},
|
||||
{
|
||||
id: 'Link22', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 60, y: 60 },
|
||||
targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 1, strokeDashArray: '4 4' }
|
||||
targetDecorator: { shape: 'Arrow', style:{strokeColor: "#757575", fill: "#757575"} }, style: { strokeWidth: 1, strokeDashArray: '4 4', strokeColor: "#757575" }
|
||||
}
|
||||
], title: 'Connectors'
|
||||
}
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -45,23 +45,25 @@ let basicShapes: NodeModel[] = [
|
|||
let connectorSymbols: ConnectorModel[] = [
|
||||
{
|
||||
id: 'Link1', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },
|
||||
targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 2 }
|
||||
targetDecorator: { shape: 'Arrow', style: { strokeColor: '#757575', fill: '#757575' } },
|
||||
style: { strokeWidth: 2, strokeColor: '#757575' }
|
||||
},
|
||||
{
|
||||
id: 'link3', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },
|
||||
style: { strokeWidth: 2 }, targetDecorator: { shape: 'None' }
|
||||
style: { strokeWidth: 2, strokeColor: '#757575' }, targetDecorator: { shape: 'None' }
|
||||
},
|
||||
{
|
||||
id: 'Link21', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },
|
||||
targetDecorator: { shape: 'Arrow' }, style: { strokeWidth: 2 }
|
||||
targetDecorator: { shape: 'Arrow', style: { strokeColor: '#757575', fill: '#757575' } },
|
||||
style: { strokeWidth: 2, strokeColor: '#757575' }
|
||||
},
|
||||
{
|
||||
id: 'link23', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },
|
||||
style: { strokeWidth: 2 }, targetDecorator: { shape: 'None' }
|
||||
style: { strokeWidth: 2, strokeColor: '#757575' }, targetDecorator: { shape: 'None' }
|
||||
},
|
||||
{
|
||||
id: 'link33', type: 'Bezier', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },
|
||||
style: { strokeWidth: 2 }, targetDecorator: { shape: 'None' }
|
||||
style: { strokeWidth: 2, strokeColor: '#757575' }, targetDecorator: { shape: 'None' }
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -75,7 +77,7 @@ function getNodeDefaults(symbol: NodeModel): NodeModel {
|
|||
symbol.width = 50;
|
||||
symbol.height = 40;
|
||||
}
|
||||
symbol.style = { strokeWidth: 2 };
|
||||
symbol.style = { strokeWidth: 2, strokeColor: '#757575' };
|
||||
return symbol;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -37,9 +37,9 @@ let umlActivityShapes: NodeModel[] = [
|
|||
function getConnectorStyle(dashArrayed?: boolean): StrokeStyleModel {
|
||||
let style: StrokeStyleModel = {};
|
||||
if (dashArrayed) {
|
||||
style = { strokeWidth: 2, strokeColor: '#444', strokeDashArray: '4 4' };
|
||||
style = { strokeWidth: 2, strokeColor: '#757575', strokeDashArray: '4 4' };
|
||||
} else {
|
||||
style = { strokeWidth: 2, strokeColor: '#444' };
|
||||
style = { strokeWidth: 2, strokeColor: '#757575' };
|
||||
}
|
||||
return style;
|
||||
|
||||
|
|
@ -78,9 +78,9 @@ function setPaletteNodeDefaults(symbol: NodeModel): NodeModel {
|
|||
symbol.width = 50; symbol.height = 50;
|
||||
}
|
||||
if (symbol.id === 'InitialNode' || symbol.id === 'FinalNode' || symbol.id === 'JoinNode' || symbol.id === 'ForkNode') {
|
||||
symbol.style.fill = '#444';
|
||||
symbol.style.fill = '#757575';
|
||||
}
|
||||
symbol.style.strokeColor = '#444';
|
||||
symbol.style.strokeColor = '#757575';
|
||||
return symbol;
|
||||
}
|
||||
|
||||
|
|
@ -88,7 +88,7 @@ function setPaletteNodeDefaults(symbol: NodeModel): NodeModel {
|
|||
function getConnectors(): ConnectorModel[] {
|
||||
let sourcePoint: PointModel = { x: 0, y: 0 };
|
||||
let targetPoint: PointModel = { x: 40, y: 40 };
|
||||
let targetDecorator: DecoratorModel = { shape: 'Arrow', style: { fill: '#444', strokeColor: '#444' } };
|
||||
let targetDecorator: DecoratorModel = { shape: 'Arrow', style: { fill: '#757575', strokeColor: '#757575' } };
|
||||
let connectorSymbols: ConnectorModel[] = [
|
||||
{
|
||||
id: 'Link2', sourcePoint: sourcePoint, targetPoint: targetPoint,
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,122 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
/**
|
||||
* Virtualization
|
||||
*/
|
||||
import { virtualizationData } from './complexShapes.data';
|
||||
import { DataManager } from '@syncfusion/ej2-data';
|
||||
import {
|
||||
Diagram, ConnectorModel, DataBinding, ZoomOptions, HierarchicalTree, NodeModel, SnapConstraints,
|
||||
DiagramConstraints, Rect, DiagramTools
|
||||
} from '@syncfusion/ej2-diagrams';
|
||||
Diagram.Inject(DataBinding, HierarchicalTree);
|
||||
import { Toolbar, ClickEventArgs } from '@syncfusion/ej2-navigations';
|
||||
let bound: Rect = new Rect(100, 100, 500, 100);
|
||||
let virtualData: any = new DataManager(dataVirtualization());
|
||||
function dataVirtualization(): any {
|
||||
let i: number = 0;
|
||||
let j: number;
|
||||
let k: number;
|
||||
let name: string;
|
||||
let parentName: string;
|
||||
|
||||
let data: any = [];
|
||||
parentName = virtualizationData[0].Name;
|
||||
data.push({ 'Name': parentName, 'Parent': '' });
|
||||
i++;
|
||||
for (j = 1; j < 100; j++) {
|
||||
name = virtualizationData[i].Name;
|
||||
data.push({ 'Name': name, 'Parent': parentName });
|
||||
i++;
|
||||
for (k = 0; k < 2; k++) {
|
||||
data.push({ 'Name': virtualizationData[i].Name, 'Parent': name });
|
||||
i++;
|
||||
}
|
||||
}
|
||||
return data;
|
||||
}
|
||||
function getNodeDefaults(obj: any): NodeModel {
|
||||
obj.shape = { type: 'Text', content: obj.data.Name, shape: 'Rectangle', cornerRadius: 5 };
|
||||
obj.style = { fill: '#659be5', strokeColor: 'none', color: 'white', strokeWidth: 2 };
|
||||
obj.backgroundColor = '#659be5';
|
||||
obj.margin = { left: 5, right: 5, bottom: 5, top: 5 };
|
||||
obj.width = 80;
|
||||
obj.height = 30;
|
||||
return obj;
|
||||
}
|
||||
|
||||
function getConnectorDefaults(connector: ConnectorModel): void {
|
||||
connector.type = 'Orthogonal';
|
||||
connector.cornerRadius = 7;
|
||||
connector.targetDecorator.height = 7;
|
||||
connector.targetDecorator.width = 7;
|
||||
connector.style.strokeColor = '#6d6d6d';
|
||||
}
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
//Initializes diagram control
|
||||
let diagram: Diagram = new Diagram({
|
||||
width: '100%', height: 500,
|
||||
//Configrues hierarchical tree layout
|
||||
layout: {
|
||||
type: 'HierarchicalTree',
|
||||
margin: { left: 10, top: 10 },
|
||||
horizontalSpacing: 40.0,
|
||||
verticalSpacing: 50.0,
|
||||
orientation: 'TopToBottom',
|
||||
},
|
||||
getNodeDefaults: getNodeDefaults,
|
||||
getConnectorDefaults: getConnectorDefaults,
|
||||
|
||||
//Configures data source
|
||||
dataSourceSettings: {
|
||||
dataSource: virtualData,
|
||||
parentId: 'Parent',
|
||||
id: 'Name'
|
||||
},
|
||||
//Disables all interactions except zoom/pan
|
||||
tool: DiagramTools.ZoomPan,
|
||||
//Enables the virtualization constraint
|
||||
constraints: DiagramConstraints.Default | DiagramConstraints.Virtualization,
|
||||
snapSettings: { constraints: SnapConstraints.None },
|
||||
created: () => {
|
||||
//fit the diagram to the page with respect to mode and region
|
||||
diagram.fitToPage(
|
||||
{
|
||||
mode: 'Page',
|
||||
region: 'CustomBounds',
|
||||
margin: { left: 50, right: 50 },
|
||||
customBounds: bound
|
||||
});
|
||||
},
|
||||
});
|
||||
diagram.appendTo('#diagram');
|
||||
diagram.fitToPage();
|
||||
let toolbarObj: Toolbar = new Toolbar({
|
||||
clicked: onItemClick,
|
||||
items: [
|
||||
{ type: 'Button', tooltipText: 'ZoomIn', text: 'Zoom In', prefixIcon: 'e-ddb-icons e-zoomin' }, { type: 'Separator' },
|
||||
{ type: 'Button', tooltipText: 'ZoomOut', text: 'Zoom Out', prefixIcon: 'e-ddb-icons e-zoomout' }, { type: 'Separator' },
|
||||
{ type: 'Button', tooltipText: 'Reset', text: 'Reset', prefixIcon: 'e-ddb-icons e-reset' }
|
||||
]
|
||||
});
|
||||
toolbarObj.appendTo('#toolbar');
|
||||
function onItemClick(args: ClickEventArgs): void {
|
||||
switch (args.item.text) {
|
||||
case 'Zoom In':
|
||||
let zoomin: ZoomOptions = { type: 'ZoomIn', zoomFactor: 0.2 };
|
||||
diagram.zoomTo(zoomin);
|
||||
break;
|
||||
case 'Zoom Out':
|
||||
let zoomout: ZoomOptions = { type: 'ZoomOut', zoomFactor: 0.2 };
|
||||
diagram.zoomTo(zoomout);
|
||||
break;
|
||||
case 'Reset':
|
||||
diagram.reset();
|
||||
diagram.fitToPage({ mode: 'Page', region: 'CustomBounds', margin: { left: 50, right: 50 }, customBounds: bound });
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
};
|
||||
|
|
@ -6,13 +6,14 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates the resize operation of the dialog control. To resize the modal dialog, select and resize a dialog using its handle (grip) within the sample container.
|
||||
This sample demonstrates the resize operation of the dialog control in all directions. To resize the modal dialog, select and resize a dialog using its handle (grip) or hover on any of the edges or border of the dialog within the sample container.
|
||||
The "open dialog" button is used to reopen the dialog if it is closed.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
Users can create resizable modal dialog by setting the enableResize property to true, which is used to change the size of a dialog dynamically and view its content with expanded mode.
|
||||
The resizeHandles property can also be configured for which directions the dialog should resize.
|
||||
When you configure the target property along with enableResize property, the dialog can be resized within its specified target container.
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import { Button } from '@syncfusion/ej2-buttons';
|
|||
content: '<span>This is a dialog with resizable support.</span>',
|
||||
showCloseIcon: true, closeOnEscape: false, width: '300px',
|
||||
enableResize: true,
|
||||
resizeHandles: ['All'],
|
||||
allowDragging: true,
|
||||
target: document.getElementById('target'),
|
||||
animationSettings: { effect: 'None' },
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
"name": "Dialog",
|
||||
"directory": "dialog",
|
||||
"category":"Layout",
|
||||
"type": "update",
|
||||
"ftName": "modal-dialog",
|
||||
"samples" : [
|
||||
{"url":"default", "name": "Default Functionalities", "description":"The example demonstrates the default rendering of the JavaScript dialog, which supports modal and non-modal (modeless), built-in buttons, and more.", "category":"Dialog","api":{"Dialog":["header","content","showCloseIcon","buttons","closeOnEscape","target","width","animationSettings","open","close","visible","show","hide"] } },
|
||||
|
|
@ -10,7 +11,7 @@
|
|||
{"url":"template", "name": "Template", "description":"This example demonstrates how to customize user interface elements like the header, footer, and content of the JavaScript dialog control using a template.", "category":"Dialog","api":{"Dialog":["width","header","content","target","isModal","animationSettings","buttons","open","close","show","hide"] } },
|
||||
{"url":"dialog-contents-via-ajax", "description":"The example demonstrates how to load the content of the JavaScript dialog control from external sources such as a file or website using Ajax library.", "name": "Ajax Content", "category":"Dialog","api":{"Dialog":["header","showCloseIcon","width","target","animationSettings","open","close","content","show"] } },
|
||||
{"url":"draggable", "name": "Draggable", "description":"This example shows how to enable drag-and-drop actions in the JavaScript dialog control to help reposition the dialog efficiently.", "category":"Dialog","api":{"Dialog":["width","header","content","target","allowDragging","animationSettings","open","close","closeOnEscape"] }},
|
||||
{"url":"resizable", "description":"This example shows how to create resizable modal in the JavaScript dialog to change the size of a dialog efficiently and view its content more comfortably.", "name": "Resizable", "category":"Dialog","api":{"Dialog":["header","showCloseIcon","width","target","animationSettings","open","close","content","show","enableResize"] } },
|
||||
{"url":"resizable", "type": "update", "description":"This example shows how to create resizable modal in the JavaScript dialog to change the size of a dialog efficiently and view its content more comfortably.", "name": "Resizable", "category":"Dialog","api":{"Dialog":["header","showCloseIcon","width","target","animationSettings","open","close","content","show","enableResize"] } },
|
||||
{"url":"position", "name": "Positioning", "description":"This example demonstrates how to display the JavaScript dialog control at various built-in and custom positions.", "category":"Dialog","api":{"Dialog":["width","header","target","footerTemplate","open","close","closeOnEscape","position","showCloseIcon"] }},
|
||||
{"url":"animation", "name": "Animation", "description":"This example demonstrates how to open or close the JavaScript dialog with various animation effects, and how to customize the animation duration and delay.", "category":"Dialog","api":{"Dialog":["header","showCloseIcon","width","target","animationSettings","open","content","buttons"] } },
|
||||
{"url":"multiple-dialogs", "name": "Multiple Dialogs", "description":"This example shows how to display multiple dialogs sequentially and open multiple dialogs simultaneously for both modal and modeless JavaScript dialogs.", "category":"Dialog","api":{"Dialog":["width","header","target","animationSettings","open","close","closeOnEscape","buttons"] } },
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -17,6 +17,19 @@ import { Dialog, DialogUtility } from '@syncfusion/ej2-popups';
|
|||
'New', 'Open', 'Separator', 'Undo',
|
||||
'Redo',
|
||||
'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'
|
||||
},
|
||||
'Separator',
|
||||
'Image',
|
||||
'Table',
|
||||
'Hyperlink',
|
||||
|
|
@ -38,20 +51,7 @@ import { Dialog, DialogUtility } from '@syncfusion/ej2-popups';
|
|||
'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'
|
||||
},
|
||||
'UpdateFields'
|
||||
]
|
||||
});
|
||||
DocumentEditorContainer.Inject(Toolbar);
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,30 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
|
||||
import { TitleBar } from './title-bar';
|
||||
import * as data from './data-notes.json';
|
||||
|
||||
/**
|
||||
* Default document editor sample
|
||||
*/
|
||||
(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' });
|
||||
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 = 'Footnotes and Endnotes';
|
||||
titleBar.updateDocumentTitle();
|
||||
|
||||
container.documentChange = (): void => {
|
||||
titleBar.updateDocumentTitle();
|
||||
container.documentEditor.focusIn();
|
||||
};
|
||||
|
||||
|
||||
};
|
||||
|
|
@ -492,7 +492,12 @@ L10n.load({
|
|||
'Update Fields': 'تحديث الحقول',
|
||||
'Update cross reference fields': 'تحديث حقول الإسناد الترافقي',
|
||||
'Track Changes': 'تتبع التغييرات التي تم إجراؤها في المستند',
|
||||
'TrackChanges': 'تعقب التغيرات'
|
||||
'TrackChanges': 'تعقب التغيرات',
|
||||
'Insert Footnote': 'أدخل حاشية سفلية',
|
||||
'Insert Endnote': 'أدخل تعليق ختامي',
|
||||
'Footnote Tooltip': 'أدخل حاشية سفلية (Alt + Ctrl + F).',
|
||||
'Endnote Tooltip': 'أدخل تعليقًا ختاميًا (Alt + Ctrl + F).'
|
||||
|
||||
},
|
||||
'colorpicker': {
|
||||
'Apply': 'تطبيق',
|
||||
|
|
|
|||
|
|
@ -1044,7 +1044,7 @@
|
|||
{
|
||||
"url": "table-of-contents",
|
||||
"name": "Table of Contents",
|
||||
"category": "Editing Features",
|
||||
"category": "References",
|
||||
"description": "The Document Editor supports table of contents with options for including hyperlink, page number, right-aligned tabs, and styles.",
|
||||
"api": {
|
||||
"DocumentEditor": [
|
||||
|
|
@ -1343,7 +1343,6 @@
|
|||
"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": [
|
||||
|
|
@ -1375,6 +1374,122 @@
|
|||
"resize"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"url": "notes",
|
||||
"name": "Footnotes and Endnotes",
|
||||
"category": "References",
|
||||
"type":"new",
|
||||
"description": "The DocumentEditor provides support to insert footnotes and endnotes to provide more information about something in the document.",
|
||||
"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"
|
||||
],
|
||||
"Selection": [
|
||||
"contextType",
|
||||
"characterFormat",
|
||||
"paragraphFormat",
|
||||
"sectionFormat",
|
||||
"cellFormat",
|
||||
"imageFormat",
|
||||
"goToPage",
|
||||
"goToHeader",
|
||||
"goToFooter",
|
||||
"closeHeaderFooter"
|
||||
],
|
||||
"SelectionCharacterFormat": [
|
||||
"bold",
|
||||
"italic",
|
||||
"underline",
|
||||
"fontFamily",
|
||||
"fontSize",
|
||||
"fontColor",
|
||||
"highlightColor",
|
||||
"strikethrough",
|
||||
"baselineAlignment"
|
||||
],
|
||||
"SelectionParagraphFormat": [
|
||||
"textAlignment",
|
||||
"lineSpacing",
|
||||
"styleName"
|
||||
],
|
||||
"SelectionSectionFormat": [
|
||||
"differentFirstPage",
|
||||
"differentOddAndEvenPages",
|
||||
"headerDistance",
|
||||
"footerDistance"
|
||||
],
|
||||
"SelectionCellFormat": [
|
||||
"topMargin",
|
||||
"bottomMargin",
|
||||
"leftMargin",
|
||||
"rightMargin",
|
||||
"verticalAlignment",
|
||||
"background"
|
||||
],
|
||||
"SelectionImageFormat": [
|
||||
"width",
|
||||
"height",
|
||||
"resize"
|
||||
],
|
||||
"Editor": [
|
||||
"insertImage",
|
||||
"toggleBold",
|
||||
"toggleItalic",
|
||||
"toggleUnderline",
|
||||
"toggleStrikethrough",
|
||||
"toggleSubscript",
|
||||
"toggleSuperscript",
|
||||
"toggleTextAlignment",
|
||||
"increaseIndent",
|
||||
"decreaseIndent",
|
||||
"applyNumbering",
|
||||
"applyBullet",
|
||||
"applyStyle",
|
||||
"clearList",
|
||||
"clearFormatting",
|
||||
"canMergeCells",
|
||||
"mergeCells",
|
||||
"applyBorders",
|
||||
"insertPageNumber",
|
||||
"insertTableOfContents",
|
||||
"insertRow",
|
||||
"insertColumn",
|
||||
"deleteRow",
|
||||
"deleteColumn"
|
||||
],
|
||||
"EditorHistory": [
|
||||
"undo",
|
||||
"redo",
|
||||
"canUndo",
|
||||
"canRedo"
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -2010,4 +2010,394 @@ export let resources: object[] = [
|
|||
{ resourceId: 3, resourceName: 'Margaret Buchanan', resourceGroup: 'Approval Team', isExpand: false },
|
||||
{ resourceId: 4, resourceName: 'Fuller King', resourceGroup: 'Development Team', isExpand: false },
|
||||
{ resourceId: 5, resourceName: 'Davolio Fuller', resourceGroup: 'Approval Team', isExpand: true }
|
||||
];
|
||||
];
|
||||
|
||||
export let splitTasksData: object[] = [
|
||||
{
|
||||
TaskID: 1,
|
||||
TaskName: 'Project Schedule',
|
||||
StartDate: new Date('02/04/2019'),
|
||||
EndDate: new Date('03/10/2019'),
|
||||
subtasks: [
|
||||
{
|
||||
TaskID: 2,
|
||||
TaskName: 'Planning',
|
||||
StartDate: new Date('02/04/2019'),
|
||||
subtasks: [
|
||||
{
|
||||
TaskID: 3, TaskName: 'Plan timeline', StartDate: new Date('02/04/2019'), EndDate: new Date('02/10/2019'),
|
||||
Duration: 10, Progress: '60',
|
||||
Segments: [
|
||||
{ StartDate: new Date('02/04/2019'), Duration: 2 },
|
||||
{ StartDate: new Date('02/05/2019'), Duration: 5 },
|
||||
{ StartDate: new Date('02/08/2019'), Duration: 3 }
|
||||
]
|
||||
},
|
||||
{
|
||||
TaskID: 4, TaskName: 'Plan budget', StartDate: new Date('02/04/2019'), EndDate: new Date('02/10/2019'),
|
||||
Duration: 10, Progress: '90'
|
||||
},
|
||||
{
|
||||
TaskID: 5, TaskName: 'Allocate resources', StartDate: new Date('02/04/2019'), EndDate: new Date('02/10/2019'),
|
||||
Duration: 10, Progress: '75',
|
||||
Segments: [
|
||||
{ StartDate: new Date('02/04/2019'), Duration: 4 },
|
||||
{ StartDate: new Date('02/08/2019'), Duration: 2 }
|
||||
]
|
||||
},
|
||||
{
|
||||
TaskID: 6, TaskName: 'Planning complete', StartDate: new Date('02/21/2019'), EndDate: new Date('02/21/2019'),
|
||||
Duration: 0, Predecessor: '3FS,5FS'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
TaskID: 7,
|
||||
TaskName: 'Design',
|
||||
StartDate: new Date('02/25/2019'),
|
||||
subtasks: [
|
||||
{
|
||||
TaskID: 8, TaskName: 'Software Specification', StartDate: new Date('02/25/2019'), EndDate: new Date('03/02/2019'),
|
||||
Duration: 5, Progress: '60', Predecessor: '6FS'
|
||||
},
|
||||
{
|
||||
TaskID: 9, TaskName: 'Develop prototype', StartDate: new Date('02/25/2019'), EndDate: new Date('03/02/2019'),
|
||||
Duration: 5, Progress: '100', Predecessor: '6FS',
|
||||
Segments: [
|
||||
{ StartDate: new Date('02/25/2019'), Duration: 2 },
|
||||
{ StartDate: new Date('02/28/2019'), Duration: 3 }
|
||||
]
|
||||
},
|
||||
{
|
||||
TaskID: 10, TaskName: 'Get approval from customer', StartDate: new Date('02/25/2019'),
|
||||
EndDate: new Date('03/01/2019'), Duration: 4, Progress: '100', Predecessor: '9FS'
|
||||
},
|
||||
{
|
||||
TaskID: 11, TaskName: 'Design complete', StartDate: new Date('02/25/2019'), EndDate: new Date('02/25/2019'),
|
||||
Duration: 0, Predecessor: '10FS'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
export let tempData: any[] = [
|
||||
{
|
||||
TaskID: 1,
|
||||
TaskName: 'Product concept',
|
||||
StartDate: new Date('04/02/2019'),
|
||||
EndDate: new Date('04/21/2019'),
|
||||
parentID: 0
|
||||
},
|
||||
{
|
||||
TaskID: 2,
|
||||
TaskName: 'Defining the product and its usage',
|
||||
StartDate: new Date('04/02/2019'),
|
||||
Duration: 3,
|
||||
Progress: 30,
|
||||
parentID: 1
|
||||
},
|
||||
{
|
||||
TaskID: 3,
|
||||
TaskName: 'Defining target audience',
|
||||
StartDate: new Date('04/02/2019'),
|
||||
parentID: 1,
|
||||
Duration: 3
|
||||
},
|
||||
{
|
||||
TaskID: 4,
|
||||
TaskName: 'Prepare product sketch and notes',
|
||||
StartDate: new Date('04/05/2019'),
|
||||
Duration: 2,
|
||||
parentID: 1,
|
||||
Progress: 30
|
||||
},
|
||||
{
|
||||
TaskID: 5,
|
||||
TaskName: 'Concept approval',
|
||||
StartDate: new Date('04/08/2019'),
|
||||
parentID: 0,
|
||||
Duration: 0
|
||||
},
|
||||
{
|
||||
TaskID: 6,
|
||||
TaskName: 'Market research',
|
||||
StartDate: new Date('04/02/2019'),
|
||||
parentID: 0,
|
||||
EndDate: new Date('04/21/2019')
|
||||
},
|
||||
{
|
||||
TaskID: 7,
|
||||
TaskName: 'Demand analysis',
|
||||
StartDate: new Date('04/04/2019'),
|
||||
EndDate: new Date('04/21/2019'),
|
||||
parentID: 6
|
||||
},
|
||||
{
|
||||
TaskID: 8,
|
||||
TaskName: 'Customer strength',
|
||||
StartDate: new Date('04/09/2019'),
|
||||
Duration: 4,
|
||||
parentID: 7,
|
||||
Progress: 30
|
||||
},
|
||||
{
|
||||
TaskID: 9,
|
||||
TaskName: 'Market opportunity analysis',
|
||||
StartDate: new Date('04/09/2019'),
|
||||
Duration: 4,
|
||||
parentID: 7
|
||||
},
|
||||
{
|
||||
TaskID: 10,
|
||||
TaskName: 'Competitor analysis',
|
||||
StartDate: new Date('04/15/2019'),
|
||||
Duration: 4,
|
||||
parentID: 6,
|
||||
Progress: 30
|
||||
},
|
||||
{
|
||||
TaskID: 11,
|
||||
TaskName: 'Product strength analsysis',
|
||||
StartDate: new Date('04/15/2019'),
|
||||
Duration: 4,
|
||||
parentID: 6
|
||||
},
|
||||
{
|
||||
TaskID: 12,
|
||||
TaskName: 'Research complete',
|
||||
StartDate: new Date('04/18/2019'),
|
||||
Duration: 0,
|
||||
parentID: 6
|
||||
},
|
||||
{
|
||||
TaskID: 13,
|
||||
TaskName: 'Product design and development',
|
||||
StartDate: new Date('04/04/2019'),
|
||||
parentID: 0,
|
||||
EndDate: new Date('04/21/2019')
|
||||
},
|
||||
{
|
||||
TaskID: 14,
|
||||
TaskName: 'Functionality design',
|
||||
StartDate: new Date('04/19/2019'),
|
||||
Duration: 3,
|
||||
parentID: 13,
|
||||
Progress: 30
|
||||
},
|
||||
{
|
||||
TaskID: 15,
|
||||
TaskName: 'Quality design',
|
||||
StartDate: new Date('04/19/2019'),
|
||||
Duration: 3,
|
||||
parentID: 13
|
||||
},
|
||||
{
|
||||
TaskID: 16,
|
||||
TaskName: 'Define reliability',
|
||||
StartDate: new Date('04/24/2019'),
|
||||
Duration: 2,
|
||||
Progress: 30,
|
||||
parentID: 13
|
||||
},
|
||||
{
|
||||
TaskID: 17,
|
||||
TaskName: 'Identifying raw materials',
|
||||
StartDate: new Date('04/24/2019'),
|
||||
Duration: 2,
|
||||
parentID: 13
|
||||
},
|
||||
{
|
||||
TaskID: 18,
|
||||
TaskName: 'Define cost plan',
|
||||
StartDate: new Date('04/04/2019'),
|
||||
parentID: 13,
|
||||
EndDate: new Date('04/21/2019')
|
||||
},
|
||||
{
|
||||
TaskID: 19,
|
||||
TaskName: 'Manufacturing cost',
|
||||
StartDate: new Date('04/26/2019'),
|
||||
Duration: 2,
|
||||
Progress: 30,
|
||||
parentID: 18
|
||||
},
|
||||
{
|
||||
TaskID: 20,
|
||||
TaskName: 'Selling cost',
|
||||
StartDate: new Date('04/26/2019'),
|
||||
Duration: 2,
|
||||
parentID: 18
|
||||
},
|
||||
{
|
||||
TaskID: 21,
|
||||
TaskName: 'Development of the final design',
|
||||
StartDate: new Date('04/30/2019'),
|
||||
parentID: 13,
|
||||
EndDate: new Date('04/21/2019')
|
||||
},
|
||||
{
|
||||
TaskID: 22,
|
||||
TaskName: 'Defining dimensions and package volume',
|
||||
StartDate: new Date('04/30/2019'),
|
||||
Duration: 2,
|
||||
parentID: 21,
|
||||
Progress: 30
|
||||
},
|
||||
{
|
||||
TaskID: 23,
|
||||
TaskName: 'Develop design to meet industry standards',
|
||||
StartDate: new Date('05/02/2019'),
|
||||
Duration: 2,
|
||||
parentID: 21
|
||||
},
|
||||
{
|
||||
TaskID: 24,
|
||||
TaskName: 'Include all the details',
|
||||
StartDate: new Date('05/06/2019'),
|
||||
Duration: 3,
|
||||
parentID: 21
|
||||
},
|
||||
{
|
||||
TaskID: 25,
|
||||
TaskName: 'CAD computer-aided design',
|
||||
StartDate: new Date('05/09/2019'),
|
||||
Duration: 3,
|
||||
parentID: 13,
|
||||
Progress: 30
|
||||
},
|
||||
{
|
||||
TaskID: 26,
|
||||
TaskName: 'CAM computer-aided manufacturing',
|
||||
StartDate: new Date('09/14/2019'),
|
||||
Duration: 3,
|
||||
parentID: 13
|
||||
},
|
||||
{
|
||||
TaskID: 27,
|
||||
TaskName: 'Design complete',
|
||||
StartDate: new Date('05/16/2019'),
|
||||
Duration: 0,
|
||||
parentID: 13
|
||||
},
|
||||
{
|
||||
TaskID: 28,
|
||||
TaskName: 'Prototype testing',
|
||||
StartDate: new Date('05/17/2019'),
|
||||
Duration: 4,
|
||||
Progress: 30,
|
||||
parentID: 0
|
||||
},
|
||||
{
|
||||
TaskID: 29,
|
||||
TaskName: 'Include feedback',
|
||||
StartDate: new Date('05/17/2019'),
|
||||
Duration: 4,
|
||||
parentID: 0
|
||||
},
|
||||
{
|
||||
TaskID: 30,
|
||||
TaskName: 'Manufacturing',
|
||||
StartDate: new Date('05/23/2019'),
|
||||
Duration: 5,
|
||||
Progress: 30,
|
||||
parentID: 0
|
||||
},
|
||||
{
|
||||
TaskID: 31,
|
||||
TaskName: 'Assembling materials to finsihed goods',
|
||||
StartDate: new Date('05/30/2019'),
|
||||
Duration: 5,
|
||||
parentID: 0
|
||||
},
|
||||
{
|
||||
TaskID: 32,
|
||||
TaskName: 'Feedback and testing',
|
||||
StartDate: new Date('04/04/2019'),
|
||||
parentID: 0,
|
||||
EndDate: new Date('04/21/2019'),
|
||||
},
|
||||
{
|
||||
TaskID: 33,
|
||||
TaskName: 'Internal testing and feedback',
|
||||
StartDate: new Date('06/06/2019'),
|
||||
Duration: 3,
|
||||
parentID: 32,
|
||||
Progress: 45
|
||||
},
|
||||
{
|
||||
TaskID: 34,
|
||||
TaskName: 'Customer testing and feedback',
|
||||
StartDate: new Date('06/11/2019'),
|
||||
Duration: 3,
|
||||
parentID: 32,
|
||||
Progress: 50
|
||||
},
|
||||
{
|
||||
TaskID: 35,
|
||||
TaskName: 'Final product development',
|
||||
StartDate: new Date('04/04/2019'),
|
||||
parentID: 0,
|
||||
EndDate: new Date('04/21/2019'),
|
||||
},
|
||||
{
|
||||
TaskID: 36,
|
||||
TaskName: 'Important improvements',
|
||||
StartDate: new Date('06/14/2019'),
|
||||
Duration: 4,
|
||||
Progress: 30,
|
||||
parentID: 35
|
||||
},
|
||||
{
|
||||
TaskID: 37,
|
||||
TaskName: 'Address any unforeseen issues',
|
||||
StartDate: new Date('06/14/2019'),
|
||||
Duration: 4,
|
||||
Progress: 30,
|
||||
parentID: 35
|
||||
},
|
||||
{
|
||||
TaskID: 38,
|
||||
TaskName: 'Final product',
|
||||
StartDate: new Date('04/04/2019'),
|
||||
parentID: 0,
|
||||
EndDate: new Date('04/21/2019'),
|
||||
},
|
||||
{
|
||||
TaskID: 39,
|
||||
TaskName: 'Branding product',
|
||||
StartDate: new Date('06/20/2019'),
|
||||
Duration: 4,
|
||||
parentID: 38
|
||||
},
|
||||
{
|
||||
TaskID: 40,
|
||||
TaskName: 'Marketing and presales',
|
||||
StartDate: new Date('06/26/2019'),
|
||||
Duration: 4,
|
||||
Progress: 30,
|
||||
parentID: 38
|
||||
}
|
||||
];
|
||||
export let virtualData: any[] = [];
|
||||
let projId: number = 1;
|
||||
for (let i: number = 0; i < 50; i++) {
|
||||
let x: number = virtualData.length + 1;
|
||||
let parent: any = {};
|
||||
/* tslint:disable:no-string-literal */
|
||||
parent['TaskID'] = x;
|
||||
parent['TaskName'] = 'Project' + (projId++);
|
||||
virtualData.push(parent);
|
||||
for (let j: number = 0; j < tempData.length; j++) {
|
||||
let subtasks: any = {};
|
||||
/* tslint:disable:no-string-literal */
|
||||
subtasks['TaskID'] = tempData[j].TaskID + x;
|
||||
subtasks['TaskName'] = tempData[j].TaskName;
|
||||
subtasks['StartDate'] = tempData[j].StartDate;
|
||||
subtasks['Duration'] = tempData[j].Duration;
|
||||
subtasks['Progress'] = tempData[j].Progress;
|
||||
subtasks['parentID'] = tempData[j].parentID + x;
|
||||
virtualData.push(subtasks);
|
||||
}
|
||||
}
|
||||
|
|
@ -28,6 +28,7 @@ Gantt.Inject(Selection, DayMarkers);
|
|||
child: 'SubTasks'
|
||||
},
|
||||
columns: [
|
||||
{ field: 'TaskId', visible: false },
|
||||
{ field: 'TaskName', headerText: 'Task Name', width: '250', clipMode: 'EllipsisWithTooltip' },
|
||||
{ field: 'StartDate' },
|
||||
{ field: 'Duration' },
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
"directory": "gantt",
|
||||
"category": "Calendars",
|
||||
"ftName": "gantt",
|
||||
"type": "update",
|
||||
"samples": [
|
||||
{
|
||||
"url": "default",
|
||||
|
|
@ -567,6 +568,33 @@
|
|||
},
|
||||
"description": "This demo demonstrates the key combinations used to perform corresponding Gantt actions in Syncfusion Essential JS2 Gantt."
|
||||
},
|
||||
{
|
||||
"url": "split-tasks",
|
||||
"name": "Split Tasks",
|
||||
"category": "Gantt",
|
||||
"type": "new",
|
||||
"api": {
|
||||
"Gantt": [
|
||||
"dataSource",
|
||||
"taskFields",
|
||||
"treeColumnIndex",
|
||||
"height",
|
||||
"projectStartDate",
|
||||
"projectEndDate",
|
||||
"resourceFields",
|
||||
"resources",
|
||||
"resourceInfo",
|
||||
"editSettings",
|
||||
"toolbar",
|
||||
"splitterSettings",
|
||||
"allowSelection",
|
||||
"highlightWeekends",
|
||||
"workUnit",
|
||||
"enableContextMenu"
|
||||
]
|
||||
},
|
||||
"description": "This demo explains how to interrupt the already scheduled tasks using the Syncfusion TypeScript Gantt control."
|
||||
},
|
||||
{
|
||||
"url": "column-menu",
|
||||
"name": "Column Menu",
|
||||
|
|
@ -883,6 +911,38 @@
|
|||
]
|
||||
},
|
||||
"description": "This demo for Essential JS 2 Gantt control how the rows can be dragged within the gantt using the row drag-and-drop feature."
|
||||
}
|
||||
},
|
||||
{
|
||||
"url": "virtual-scroll",
|
||||
"name": "Virtual Scrolling",
|
||||
"category": "Gantt",
|
||||
"type": "new",
|
||||
"api": {
|
||||
"Gantt": [
|
||||
"dataSource",
|
||||
"taskFields",
|
||||
"columns",
|
||||
"treeColumnIndex",
|
||||
"height",
|
||||
"highlightWeekends",
|
||||
"allowRowDragAndDrop",
|
||||
"splitterSettings",
|
||||
"labelSettings",
|
||||
"projectStartDate",
|
||||
"projectEndDate",
|
||||
"selectionSettings",
|
||||
"allowSorting",
|
||||
"allowFiltering",
|
||||
"allowRowDragAndDrop",
|
||||
"enableContextMenu",
|
||||
"enableVirtualization",
|
||||
"editSettings",
|
||||
"toolbar",
|
||||
"allowSelection",
|
||||
"timelineSettings"
|
||||
]
|
||||
},
|
||||
"description": "This demo for Essential JS 2 Gantt control how the rows can be dragged within the gantt using the row drag-and-drop feature."
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<div class="control-section">
|
||||
<div class="content-wrapper">
|
||||
<div id="SplitTasks">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="action-description">
|
||||
<p>This sample demonstrates the split tasks support in the Gantt Chart. This support allows an interruption in
|
||||
the task due to circumstances such as the occurrence of an unplanned event or reprioritization of already planned events.
|
||||
Sometimes a task may be interrupted due to unexpected situations. In such situtations, the pending work can be split into segments
|
||||
and the work can be resumed at a different date.</p>
|
||||
</div>
|
||||
|
||||
<div id="description">
|
||||
<p>The split tasks can be called the segments of a task. A task can be split into any number of segments with a minimum of one time unit cell. Segments
|
||||
can be defined in the <code>taskFields.segments</code> property. Segments can be created or merged by two ways: Using Edit Dialog and Context Menu.
|
||||
</p>
|
||||
<p>A task must have a duration of minimum two time unit cells in order to be split. Similarly, milestone tasks or parent tasks cannot be split into segments.</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
/**
|
||||
* resource.ts file
|
||||
*/
|
||||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
/**
|
||||
* resource.ts file
|
||||
*/
|
||||
import { splitTasksData } from './data-source';
|
||||
|
||||
import { Gantt, Selection, DayMarkers, Toolbar, Edit, ContextMenu } from '@syncfusion/ej2-gantt';
|
||||
|
||||
Gantt.Inject(Selection, DayMarkers, Toolbar, Edit, ContextMenu);
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let gantt: Gantt = new Gantt(
|
||||
{
|
||||
dataSource: splitTasksData,
|
||||
taskFields: {
|
||||
id: 'TaskID',
|
||||
name: 'TaskName',
|
||||
startDate: 'StartDate',
|
||||
endDate: 'EndDate',
|
||||
duration: 'Duration',
|
||||
progress: 'Progress',
|
||||
dependency: 'Predecessor',
|
||||
child: 'subtasks',
|
||||
segments: 'Segments'
|
||||
},
|
||||
editSettings: {
|
||||
allowAdding: true,
|
||||
allowEditing: true,
|
||||
allowDeleting: true,
|
||||
allowTaskbarEditing: true,
|
||||
showDeleteConfirmDialog: true
|
||||
},
|
||||
columns: [
|
||||
{ field: 'TaskID', width: 60 },
|
||||
{ field: 'TaskName', headerText: 'Job Name', width: '250', clipMode: 'EllipsisWithTooltip' },
|
||||
{ field: 'StartDate' },
|
||||
{ field: 'EndDate' },
|
||||
{ field: 'Duration' },
|
||||
{ field: 'Progress' },
|
||||
{ field: 'Predecessor' }
|
||||
],
|
||||
toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'],
|
||||
enableContextMenu: true,
|
||||
allowSelection: true,
|
||||
height: '450px',
|
||||
treeColumnIndex: 1,
|
||||
highlightWeekends: true,
|
||||
splitterSettings: {
|
||||
columnIndex: 2
|
||||
},
|
||||
labelSettings: {
|
||||
leftLabel: 'TaskName',
|
||||
taskLabel: '${Progress}%'
|
||||
},
|
||||
projectStartDate: new Date('01/30/2019'),
|
||||
projectEndDate: new Date('03/04/2019')
|
||||
});
|
||||
gantt.appendTo('#SplitTasks');
|
||||
};
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<div class="control-section">
|
||||
<div class="content-wrapper">
|
||||
<div id="VirtualScroll">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="action-description">
|
||||
<p>This sample demonstrates the Virtual Scroll support in the Gantt Chart. This feature allows users to load a large amount of data effectively.
|
||||
It also reduces the DOM element's weight by virtually updating DOM during the vertical scroll.</p>
|
||||
</div>
|
||||
|
||||
<div id="description">
|
||||
<p>Virtualization support is used to render large number tasks in Gantt with effective performance. In this mode all the tasks are
|
||||
fetched from data source initially, then some of the records are rendered in DOM which are compact to the current viewport area.
|
||||
While scrolling tasks are updated in DOM as per current viewport position. This mode can be enabled by setting
|
||||
<code>enableVirtualization</code> property as true. </p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { Gantt, Selection, VirtualScroll } from '@syncfusion/ej2-gantt';
|
||||
import { virtualData } from './data-source';
|
||||
|
||||
/**
|
||||
* Virtual scroll sample
|
||||
*/
|
||||
Gantt.Inject(Selection, VirtualScroll);
|
||||
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let gantt: Gantt = new Gantt({
|
||||
dataSource: virtualData,
|
||||
treeColumnIndex: 1,
|
||||
taskFields: {
|
||||
id: 'TaskID',
|
||||
name: 'TaskName',
|
||||
startDate: 'StartDate',
|
||||
duration: 'Duration',
|
||||
progress: 'Progress',
|
||||
parentID: 'parentID'
|
||||
},
|
||||
enableVirtualization: true,
|
||||
columns: [
|
||||
{ field: 'TaskID' },
|
||||
{ field: 'TaskName' },
|
||||
{ field: 'StartDate' },
|
||||
{ field: 'Duration' },
|
||||
{ field: 'Progress' },
|
||||
],
|
||||
allowSelection: true,
|
||||
gridLines: 'Both',
|
||||
height: '450px',
|
||||
splitterSettings: {
|
||||
columnIndex: 2
|
||||
},
|
||||
labelSettings: {
|
||||
taskLabel: 'Progress'
|
||||
},
|
||||
});
|
||||
gantt.appendTo('#VirtualScroll');
|
||||
};
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
<p>
|
||||
This sample demonstrates the way of filtering Grid columns using menu, checkbox and excel filter UI. In this sample, click the filtering
|
||||
icon from column header to show filter UI for a particular column. You can change the filter type from the properties
|
||||
panel.
|
||||
panel and while Excel filter type is selected, you can sort the column using the sorting option available in the excel filter dialog.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
|
||||
import { Grid, Filter, Page, Selection, FilterType } from '@syncfusion/ej2-grids';
|
||||
import { Grid, Filter, Page, Selection, FilterType, Sort } from '@syncfusion/ej2-grids';
|
||||
import { orderDataSource } from './data-source';
|
||||
|
||||
Grid.Inject(Filter, Page, Selection);
|
||||
Grid.Inject(Filter, Page, Selection, Sort);
|
||||
|
||||
/**
|
||||
* Filtering sample
|
||||
|
|
@ -21,6 +21,7 @@ Grid.Inject(Filter, Page, Selection);
|
|||
dataSource: orderDataSource,
|
||||
allowPaging: true,
|
||||
allowFiltering: true,
|
||||
allowSorting: true,
|
||||
filterSettings: { type: 'Menu' },
|
||||
columns: [
|
||||
{ field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },
|
||||
|
|
|
|||
|
|
@ -0,0 +1,60 @@
|
|||
<div class="control-section">
|
||||
<div class="content-wrapper">
|
||||
<div class="freezeprop">
|
||||
<div class="freezecol">
|
||||
<div class="freezecol">
|
||||
<span>
|
||||
Column
|
||||
</span>
|
||||
</div>
|
||||
<div class="freezecol"><input type="text" tabindex="1" id="column"></div>
|
||||
</div>
|
||||
<div class="freezecol">
|
||||
<div class="freezecol">
|
||||
<span>
|
||||
Freeze Direction
|
||||
</span>
|
||||
</div>
|
||||
<div class="freezecol"><input type="text" tabindex="1" id="FreezeDirection"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="Grid">
|
||||
</div>
|
||||
<div id="alertDialog"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- custom code start -->
|
||||
<style>
|
||||
.freezeprop {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.freezecol {
|
||||
display: inline-block;
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end -->
|
||||
<div id="action-description">
|
||||
<p>This sample demonstrates the frozen rows and columns feature of the Grid. Scroll the movable content
|
||||
vertically/horizontally to view the frozen rows/columns
|
||||
with the content.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
The freezing feature enables the user to freeze certain rows/columns at both sides to scroll remaining movable
|
||||
content. This can be achieved by setting <code><a target="_blank" class="code"
|
||||
href="https://ej2.syncfusion.com/documentation/grid/scrolling.html#frozen-rows-and-columns">
|
||||
Freeze
|
||||
</a></code> property in column settings.
|
||||
</p>
|
||||
<p> In this demo sample, the <b>ShipCountry</b> column freezed at left side and <b>CustomerID</b> column freezed at
|
||||
right side using <code>Column->Freeze</code>property.</p>
|
||||
<p> Grid features are segregated into individual feature-wise modules. To use frozen rows and columns feature, we
|
||||
need to inject <code><a target="_blank" class="code"
|
||||
href="https://ej2.syncfusion.com/documentation/grid/scrolling.html#frozen-rows-and-columns">
|
||||
Freeze
|
||||
</a></code> module using the <code>Grid.Inject(Freeze)</code> method.</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { Grid, Freeze, freezeDirection, Column } from '@syncfusion/ej2-grids';
|
||||
import { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
|
||||
import { Dialog } from '@syncfusion/ej2-popups';
|
||||
import { Query, DataManager } from '@syncfusion/ej2-data';
|
||||
import { orderData } from './data-source';
|
||||
|
||||
Grid.Inject(Freeze);
|
||||
|
||||
/**
|
||||
* Grid frozen rows and columns sample
|
||||
*/
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let data: Object = new DataManager(orderData as JSON[]).executeLocal(new Query().take(50));
|
||||
let grid: Grid = new Grid(
|
||||
{
|
||||
dataSource: data,
|
||||
height: 410,
|
||||
enableHover: false,
|
||||
frozenRows: 2,
|
||||
columns: [
|
||||
{ field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },
|
||||
{ field: 'Freight', width: 125, format: 'C2', textAlign: 'Right' },
|
||||
{ field: 'CustomerID', headerText: 'Customer ID', width: 130, freeze: 'Right' },
|
||||
{ field: 'OrderDate', headerText: 'Order Date', width: 150, format: 'yMd', textAlign: 'Right' },
|
||||
{ field: 'ShipName', headerText: 'Ship Name', width: 300 },
|
||||
{ field: 'ShipAddress', headerText: 'Ship Address', width: 270 },
|
||||
{ field: 'ShipCity', headerText: 'Ship City', width: 250 },
|
||||
{ field: 'ShipCountry', headerText: 'Ship Country', width: 250, freeze: 'Left' }
|
||||
]
|
||||
});
|
||||
grid.appendTo('#Grid');
|
||||
|
||||
let alertDialogObj: Dialog = new Dialog({
|
||||
header: 'Frozen',
|
||||
content: 'Atleast one Column should be Movable',
|
||||
showCloseIcon: false,
|
||||
target: '.control-section',
|
||||
buttons: [{
|
||||
click: alertDlgBtnClick, buttonModel: { content: 'OK', isPrimary: true }
|
||||
}],
|
||||
width: '300px',
|
||||
visible: false,
|
||||
animationSettings: { effect: 'None' }
|
||||
});
|
||||
alertDialogObj.appendTo('#alertDialog');
|
||||
function alertDlgBtnClick(): void {
|
||||
alertDialogObj.hide();
|
||||
}
|
||||
|
||||
let columnNames: { [key: string]: Object }[] = [
|
||||
{ id: 'OrderID', name: 'Order ID' },
|
||||
{ id: 'Freight', name: 'Freight' },
|
||||
{ id: 'CustomerID', name: 'Customer ID' },
|
||||
{ id: 'OrderDate', name: 'Order Date' },
|
||||
{ id: 'ShipName', name: 'Ship Name' },
|
||||
{ id: 'ShipAddress', name: 'Ship Address' },
|
||||
{ id: 'ShipCity', name: 'Ship City' },
|
||||
{ id: 'ShipCountry', name: 'Ship Country' }
|
||||
];
|
||||
let directions: { [key: string]: Object }[] = [
|
||||
{ id: 'Left', name: 'Left' },
|
||||
{ id: 'Right', name: 'Right' },
|
||||
{ id: 'Center', name: 'Center' }
|
||||
];
|
||||
let refresh: boolean = true;
|
||||
let columnChange: DropDownList = new DropDownList({
|
||||
dataSource: columnNames,
|
||||
fields: { text: 'name', value: 'id' },
|
||||
value: 'ShipCountry',
|
||||
change: (e: ChangeEventArgs) => {
|
||||
let columnName: any = e.value;
|
||||
let column: Column = grid.getColumnByField(columnName);
|
||||
let value: string = column.freeze === undefined ? 'Center' : column.freeze;
|
||||
refresh = dropDownDirection.value === value;
|
||||
dropDownDirection.value = value;
|
||||
|
||||
}
|
||||
});
|
||||
columnChange.appendTo('#column');
|
||||
|
||||
let dropDownDirection: DropDownList = new DropDownList({
|
||||
dataSource: directions,
|
||||
fields: { text: 'name', value: 'id' },
|
||||
value: 'Left',
|
||||
change: (e: ChangeEventArgs) => {
|
||||
if (refresh) {
|
||||
let value: string = 'Left';
|
||||
let columnName: any = columnChange.value;
|
||||
let mvblColumns: Column[] = grid.getMovableColumns();
|
||||
if (mvblColumns.length === 1 && columnName === mvblColumns[0].field && e.value !== mvblColumns[0].freeze) {
|
||||
alertDialogObj.show();
|
||||
refresh = false;
|
||||
value = 'Center';
|
||||
dropDownDirection.refresh();
|
||||
} else {
|
||||
grid.getColumnByField(columnName).freeze = e.value === 'Center' ? undefined : e.value as freezeDirection;
|
||||
grid.refreshColumns();
|
||||
}
|
||||
}
|
||||
refresh = true;
|
||||
}
|
||||
});
|
||||
dropDownDirection.appendTo('#FreezeDirection');
|
||||
|
||||
};
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { Grid, Selection, Freeze, Sort, Resize } from '@syncfusion/ej2-grids';
|
||||
import { Query, DataManager } from '@syncfusion/ej2-data';
|
||||
import { orderData } from './data-source';
|
||||
|
|
@ -12,7 +11,6 @@ Grid.Inject(Selection, Freeze, Sort, Resize);
|
|||
* Grid frozen rows and columns sample
|
||||
*/
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let data: Object = new DataManager(orderData as JSON[]).executeLocal(new Query().take(50));
|
||||
let grid: Grid = new Grid(
|
||||
{
|
||||
|
|
|
|||
|
|
@ -101,6 +101,7 @@
|
|||
href="http://ej2.syncfusion.com/documentation/grid/api-pageSettingsModel.html#currentpage">
|
||||
pageSettings->currentPage.
|
||||
</a></code></li>
|
||||
<li>Changed default pager details information using the <code>totalItemsInfo</code> locale property.</li>
|
||||
</ul>
|
||||
<p style="font-weight: 500">Injecting Module:</p>
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,16 @@ import { CheckBox } from '@syncfusion/ej2-buttons';
|
|||
import { NumericTextBox, ChangeEventArgs } from '@syncfusion/ej2-inputs';
|
||||
import { Grid, Page, Selection, PageEventArgs } from '@syncfusion/ej2-grids';
|
||||
import { productData } from './data-source';
|
||||
import { L10n } from '@syncfusion/ej2-base';
|
||||
|
||||
L10n.load({
|
||||
'en-US': {
|
||||
'pager': {
|
||||
'currentPageInfo': '',
|
||||
'totalItemsInfo': '{1} to {2} of {0}',
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Grid.Inject(Page, Selection);
|
||||
|
||||
|
|
@ -14,6 +24,7 @@ Grid.Inject(Page, Selection);
|
|||
let grid: Grid = new Grid(
|
||||
{
|
||||
dataSource: productData,
|
||||
locale: 'en-US',
|
||||
allowPaging: true,
|
||||
pageSettings: { pageCount: 2 },
|
||||
columns: [
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
{"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": "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":"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.", "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"] }},
|
||||
|
|
@ -29,14 +29,16 @@
|
|||
{"url":"row-height", "name": "Row Height", "description":"This demo for Essential JS 2 grid control shows the row height feature. Click on the toolbar icons to change row's height.", "category":"Rows", "api":{"Grid":["dataSource","toolbar","height","columns","rowHeight","toolbarClick"] }},
|
||||
{"url":"drag-and-drop", "name": "Row Drag And Drop", "description":"This demo for Essential JS 2 grid control demonstrates how the rows can be dragged between grids using the row drag-and-drop feature.", "category":"Rows", "hideOnDevice":true,"api":{"Grid":["dataSource","allowPaging","pageSettings","columns","allowRowDragAndDrop","selectionSettings","rowDropSettings","width"] }},
|
||||
{"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":"frozen-rows-columns", "name": "Default Frozen", "description":"This demo for Essential JS 2 grid control shows frozen rows/columns feature of grid. Scroll the movable content to view the frozen rows/columns.", "category":"Frozen", "api":{"Grid":["dataSource","allowSelection","columns","frozenColumns","frozenRows","height"] }},
|
||||
{"url":"frozen-api", "name": "Frozen API", "type":"new", "description":"This demo for Essential JS 2 grid control shows frozen rows/columns feature of grid. Scroll the movable content to view the frozen rows/columns with the content.", "category":"Frozen", "api":{"Grid":["dataSource","columns","frozenRows","height", "enableHover"] }},
|
||||
{"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.", "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":"filter-menu", "name": "Filter Menu", "type": "update", "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","allowSorting","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"] }},
|
||||
{"url":"paging-api", "name": "Paging API", "description":"This demo for Essential JS 2 grid control shows the usage of the paging API, use the properties panel to change the pageSize, pageCount and current page.", "category": "Paging","api":{"Grid":["dataSource","allowPaging","pageSettings","columns","actionComplete","goToPage"] }},
|
||||
{"url":"selection", "name": "Default Selection", "description":"This demo for Essential JS 2 grid control shows how to select rows or cells through simple mouse down or keyboard interaction using the selection feature.", "category":"Selection","api":{"Grid":["dataSource","allowSelection","selectionSettings","enableHover","columns"] }},
|
||||
{"url":"paging-api", "name": "Paging API", "description":"This demo for Essential JS 2 grid control shows the usage of the paging API, use the properties panel to change the pageSize, pageCount and current page.", "type": "update", "category": "Paging","api":{"Grid":["dataSource","allowPaging","pageSettings","columns","actionComplete","goToPage"] }},
|
||||
{"url":"selection", "name": "Default Selection", "type": "update", "description":"This demo for Essential JS 2 grid control shows how to select rows or cells through simple mouse down or keyboard interaction using the selection feature.", "category":"Selection","api":{"Grid":["dataSource","allowSelection","selectionSettings","enableHover","columns"] }},
|
||||
{"url":"selection-api", "name": "Selection API", "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": "Selection","api":{"Grid":["dataSource","allowPaging","pageSettings","columns","allowSelection","selectionSettings","enableHover"] }},
|
||||
{"url":"checkbox-selection", "name": "Checkbox Selection", "description":"This demo for Essential JS 2 grid control shows how the check box selection feature can be used to select grid rows.", "category":"Selection","api":{"Grid":["dataSource","allowPaging","pageSettings","columns","allowSelection","selectionSettings","enableHover"] }},
|
||||
{"url":"aggregate-default", "name": "Default Aggregate", "description":"This demo for Essential JS 2 grid control shows how the row values can be aggregated and shown in a column footer.", "category": "Aggregates","api":{"Grid":["dataSource","allowPaging","pageSettings","columns","aggregates"] } },
|
||||
|
|
@ -54,7 +56,6 @@
|
|||
{"url":"master-details-export", "name": "Hierarchy Exporting", "description":"This demo for Essential JS 2 grid control demonstrates how to export hierarchy grid in exported documents.", "category":"Exporting","api":{"Grid":["dataSource","allowExcelExport","allowPdfExport","toolbar","allowPaging","pageSettings","columns", "childGrid"] }},
|
||||
{"url":"print", "name": "Print", "description":"This demo for Essential JS 2 grid control shows how to print the grid content. Click the print button from the toolbar item to print Grid.", "category":"Exporting", "hideOnDevice":true,"api":{"Grid":["dataSource","allowPaging","toolbar","pageSettings","columns"] }},
|
||||
{"url":"column-spanning", "name": "Column Spanning", "description":"This demo for Essential JS 2 grid control demonstrates the grid with column spanning feature to span multiple adjacent cells together.", "category":"Columns", "api":{"Grid":["dataSource","allowTextWrap","columns","queryCellInfo","gridLines","width","height"] }},
|
||||
{"url":"frozen-rows-columns", "name": "Frozen Rows And Columns", "description":"This demo for Essential JS 2 grid control shows frozen rows/columns feature of grid. Scroll the movable content to view the frozen rows/columns.", "category":"Columns", "api":{"Grid":["dataSource","allowSelection","columns","frozenColumns","frozenRows","height"] }},
|
||||
{"url":"context-menu", "name": "Context Menu", "description":"This demo for Essential JS 2 grid control shows demonstrates the usage of context menu in grid. Right click anywhere on the grid to view context menu.", "category":"Data Grid", "api":{"Grid":["dataSource","allowSorting", "allowGrouping", "allowPdfExport", "allowExcelExport", "editSettings", "allowPaging", "contextMenuItems", "groupSettings", "columns"]}},
|
||||
{"url":"column-menu", "name": "Column Menu", "description":"This demo for Essential JS 2 grid control shows the usage of the various column functionalities of the column menu feature.", "category":"Columns", "api":{"Grid":["dataSource","allowSorting", "allowGrouping","showColumnMenu", "groupSettings", "columns", "allowSorting"]}},
|
||||
{"url":"foreign-key", "name": "Foreign Key Column", "description":"This demo for Essential JS 2 grid control shows the usage of a foreign key column and perform actions like filtering, sorting and editing.", "category":"Columns", "api":{"Grid":["dataSource","allowSorting", "columns", "allowFiltering", "filterSettings", "editSettings"]}},
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@
|
|||
|
||||
<div id="description">
|
||||
<p>
|
||||
Selection provides an interactive support to highlight the row or cell that you select.
|
||||
Selection provides an interactive support to highlight the row or cell or column that you select.
|
||||
Selection can be done through simple
|
||||
Mouse down or Keyboard interaction. To enable selection, set <code><a target="_blank" class="code"
|
||||
href="http://ej2.syncfusion.com/documentation/grid/api-grid.html#allowselection">
|
||||
|
|
@ -96,7 +96,7 @@
|
|||
</a></code> property. They are,</p>
|
||||
<ul>
|
||||
<li><code>single</code> - Enabled by default. Allows the user to select single row/cell at a time.</li>
|
||||
<li><code>multiple</code> - Allows the user to select more than one row/cell at a time.</li>
|
||||
<li><code>multiple</code> - Allows the user to select more than one row/cell/column at a time.</li>
|
||||
</ul>
|
||||
<p>Also, supports three modes of selection which can be set using
|
||||
<code><a target="_blank" class="code"
|
||||
|
|
@ -111,8 +111,12 @@
|
|||
Clicking any cell will select both the row and cell simultaneously.
|
||||
</li>
|
||||
</ul>
|
||||
<p>To perform the multi-selection, hold <strong>CTRL</strong> key and click the desired rows/cells.
|
||||
To select range of rows/cells, hold <strong>SHIFT</strong> key and click the rows/cells.</p>
|
||||
<p>To perform the column selection, enable the <code><a target="_blank" class="code"
|
||||
href="https://ej2.syncfusion.com/documentation/api/grid/selectionSettings/#allowcolumnselection">
|
||||
selectionSettings->allowColumnSelection
|
||||
</a></code> property.</p>
|
||||
<p>To perform the multi-selection, hold <strong>CTRL</strong> key and click the desired rows/cells/columns.
|
||||
To select range of rows/cells/columns, hold <strong>SHIFT</strong> key and click the rows/cells/columns.</p>
|
||||
<p>While using the Grid in a touch device environment, there is an option for multi-selection
|
||||
through single tap on the row and it will show a popup with the multi-selection symbol.
|
||||
Tap the icon to enable multi-selection in a single tap.
|
||||
|
|
|
|||
|
|
@ -27,16 +27,26 @@
|
|||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="width: 30%">
|
||||
<div>Enable Column Selection</div>
|
||||
</td>
|
||||
<td style="width: 70%;padding:10px 10px 10px 0px">
|
||||
<div>
|
||||
<input type="checkbox" tabindex="1" id='columnSelection' />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>This sample demonstrates the selection feature in Grid, which allows you to select row or cell through simple mouse down or keyboard interaction.
|
||||
<p>This sample demonstrates the selection feature in Grid, which allows you to select row or cell or column through simple mouse down or keyboard interaction.
|
||||
You can change type and mode from the properties panel. </p>
|
||||
</div>
|
||||
|
||||
<div id="description">
|
||||
<p>
|
||||
Selection provides an interactive support to highlight the row or cell that you select.
|
||||
Selection provides an interactive support to highlight the row or cell or column that you select.
|
||||
Selection can be done through a simple
|
||||
Mouse down or Keyboard interaction. To enable selection, set <code><a target="_blank" class="code"
|
||||
href="http://ej2.syncfusion.com/documentation/grid/api-grid.html#allowselection">
|
||||
|
|
@ -50,7 +60,7 @@
|
|||
</a></code> property. They are,</p>
|
||||
<ul>
|
||||
<li><code>Single</code> - Enabled by default. Allows the user to select single row/cell at a time.</li>
|
||||
<li><code>Multiple</code> - Allows the user to select more than one row/cell at a time.</li>
|
||||
<li><code>Multiple</code> - Allows the user to select more than one row/cell/column at a time.</li>
|
||||
</ul>
|
||||
<p>Also, supports three modes of selection which can be set using
|
||||
<code><a target="_blank" class="code"
|
||||
|
|
@ -65,8 +75,12 @@
|
|||
Clicking any cell will select the both row and cell simultaneously.
|
||||
</li>
|
||||
</ul>
|
||||
<p>To perform the multi-selection, hold <strong>CTRL</strong> key and click the desired rows/cells.
|
||||
To select range of rows/cells, hold <strong>SHIFT</strong> key and click the rows/cells.</p>
|
||||
<p>To perform the column selection, enable the <code><a target="_blank" class="code"
|
||||
href="https://ej2.syncfusion.com/documentation/api/grid/selectionSettings/#allowcolumnselection">
|
||||
selectionSettings->allowColumnSelection
|
||||
</a></code> property.</p>
|
||||
<p>To perform the multi-selection, hold <strong>CTRL</strong> key and click the desired rows/cells/columns.
|
||||
To select range of rows/cells/columns, hold <strong>SHIFT</strong> key and click the rows/cells/columns.</p>
|
||||
<p>While using the Grid in a touch device environment, there is an option for multi-selection
|
||||
through single tap on the row and it will show a popup with the multi-selection symbol.
|
||||
Tap the icon to enable multi-selection in a single tap.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
|
||||
import { Grid, SelectionType, Selection, SelectionMode } from '@syncfusion/ej2-grids';
|
||||
import { CheckBox } from '@syncfusion/ej2-buttons';
|
||||
import { Grid, SelectionType, Selection } from '@syncfusion/ej2-grids';
|
||||
import { employeeData } from './data-source';
|
||||
|
||||
Grid.Inject(Selection);
|
||||
|
|
@ -19,12 +20,20 @@ Grid.Inject(Selection);
|
|||
{ id: 'Both', mode: 'Both' }
|
||||
];
|
||||
|
||||
let selecting: any = (e: any) => {
|
||||
if (grid.selectionSettings.allowColumnSelection) {
|
||||
e.cancel = true;
|
||||
}
|
||||
};
|
||||
|
||||
let grid: Grid = new Grid(
|
||||
{
|
||||
dataSource: employeeData,
|
||||
allowSelection: true,
|
||||
selectionSettings: { type: 'Multiple' },
|
||||
enableHover: false,
|
||||
rowSelecting : selecting,
|
||||
cellSelecting: selecting,
|
||||
columns: [
|
||||
{ field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 135 },
|
||||
{ field: 'FirstName', headerText: 'Name', width: 125 },
|
||||
|
|
@ -53,9 +62,25 @@ Grid.Inject(Selection);
|
|||
fields: { text: 'mode', value: 'id' },
|
||||
value: 'Row',
|
||||
change: (e: ChangeEventArgs) => {
|
||||
let mode: string = <string>e.value;
|
||||
grid.selectionSettings.mode = <SelectionMode>mode;
|
||||
let mode: any = e.value;
|
||||
grid.selectionSettings.mode = mode ;
|
||||
}
|
||||
});
|
||||
dropDownMode.appendTo('#mode');
|
||||
|
||||
// enable/disable Column Selection
|
||||
let columnSelection: CheckBox = new CheckBox({
|
||||
change: ( e: any) => {
|
||||
grid.clearSelection();
|
||||
if (e.checked) {
|
||||
grid.selectionSettings.allowColumnSelection = true;
|
||||
dropDownMode.enabled = false;
|
||||
} else {
|
||||
grid.selectionSettings.allowColumnSelection = false;
|
||||
dropDownMode.enabled = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
columnSelection.appendTo('#columnSelection');
|
||||
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
|
||||
import { Button } from '@syncfusion/ej2-buttons';
|
||||
import { Grid, Page, Selection, Column } from '@syncfusion/ej2-grids';
|
||||
|
|
@ -9,7 +8,6 @@ Grid.Inject(Page, Selection);
|
|||
* Show Hide sample
|
||||
*/
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let columnsName: { [key: string]: Object }[] = [
|
||||
{ id: 'CategoryName', name: 'Category Name' },
|
||||
{ id: 'ProductName', name: 'Product Name' },
|
||||
|
|
|
|||
|
|
@ -737,7 +737,7 @@
|
|||
"Type": "Vegetarian",
|
||||
"Size": "Large",
|
||||
"Category": "Ready to Serve",
|
||||
"Description": "It's made using toppings of tomato, mozzarella cheese and fresh basil, which represent the red, white and green of the Italian flag.",
|
||||
"Description": "It's made using toppings of tomato, mozzarella cheese and fresh basil.",
|
||||
"Tags": "Onions, Pepper, Cheese",
|
||||
"ImageURL": "Peppy_Paneer.jpg",
|
||||
"Price": "$14.99"
|
||||
|
|
@ -762,7 +762,7 @@
|
|||
"Size": "Medium",
|
||||
"Category": "Delivered",
|
||||
"Description": "Tandoori Paneer with capsicum, red paprika and mint.",
|
||||
"Tags": "Paneer, Capsicum, Paprika, Mint",
|
||||
"Tags": "Paneer, Capsicum",
|
||||
"ImageURL": "IndianTandooriPaneer.jpg",
|
||||
"Price": "$11.99"
|
||||
},
|
||||
|
|
@ -798,7 +798,7 @@
|
|||
"Size": "Large",
|
||||
"Category": "Order",
|
||||
"Description": "Barbeque chicken with a topping of golden corn loaded with extra cheese.",
|
||||
"Tags": "Onions, BBQ, Pepper, Prawn",
|
||||
"Tags": "Onions, BBQ, Prawn",
|
||||
"ImageURL": "Chicken_Golden_Delight.jpg",
|
||||
"Price": "$14.99"
|
||||
},
|
||||
|
|
@ -810,7 +810,7 @@
|
|||
"Size": "Medium",
|
||||
"Category": "Menu",
|
||||
"Description": "Pepper Barbecue chicken with Onion.",
|
||||
"Tags": "Onions, Pepper, Chicken",
|
||||
"Tags": "Pepper, Chicken",
|
||||
"ImageURL": "Pepper_Barbeque_Onion.jpg",
|
||||
"Price": "$11.99"
|
||||
},
|
||||
|
|
@ -822,7 +822,7 @@
|
|||
"Size": "Small",
|
||||
"Category": "Delivered",
|
||||
"Description": "Grilled Chicken Rashers with Peri-Peri chicken, Onion and Capsicum.",
|
||||
"Tags": "Chicken, Onion, Capsicum",
|
||||
"Tags": "Chicken, Capsicum",
|
||||
"ImageURL": "chunky-chicken.png",
|
||||
"Price": "$4.79"
|
||||
},
|
||||
|
|
@ -834,7 +834,7 @@
|
|||
"Size": "Medium",
|
||||
"Category": "Delivered",
|
||||
"Description": "Margherita with chili sauce and double Cheese.",
|
||||
"Tags": "Onions, Pepper, Cheese",
|
||||
"Tags": "Onions, Pepper",
|
||||
"ImageURL": "Double_Cheese_Margherita.jpg",
|
||||
"Price": "$11.99"
|
||||
},
|
||||
|
|
@ -846,7 +846,7 @@
|
|||
"Size": "Large",
|
||||
"Category": "Menu",
|
||||
"Description": "Veggie Delight with Goldern Corn, Black Olives, Capsicum and red Paprika.",
|
||||
"Tags": "Goldern Corn, Capsicum, Pepper",
|
||||
"Tags": "Corn, Capsicum",
|
||||
"ImageURL": "Veggie_Paradise.jpg",
|
||||
"Price": "$14.99"
|
||||
},
|
||||
|
|
@ -870,7 +870,7 @@
|
|||
"Size": "Medium",
|
||||
"Category": "Ready to Serve",
|
||||
"Description": "Tandoori masala with Chicken Tikka, Onion, red paprika and mint.",
|
||||
"Tags": "Chicken, Tikka, Onion, Paprika, Mint",
|
||||
"Tags": "Chicken, Tikka, Paprika",
|
||||
"ImageURL": "IndianChickenTikka.jpg",
|
||||
"Price": "$11.99"
|
||||
},
|
||||
|
|
@ -894,7 +894,7 @@
|
|||
"Size": "Medium",
|
||||
"Category": "Delivered",
|
||||
"Description": "Onions and Capsicum those delectable mushrooms with paneer and golden corn to top it all.",
|
||||
"Tags": "Onions, Capsicum, Mushrooms, Paneer, Corn",
|
||||
"Tags": "Mushrooms, Corn",
|
||||
"ImageURL": "Deluxe_Veggie.jpg",
|
||||
"Price": "$11.99"
|
||||
},
|
||||
|
|
@ -906,7 +906,7 @@
|
|||
"Size": "Large",
|
||||
"Category": "Menu",
|
||||
"Description": "Crunchy, crisp capsicum, succulent mushrooms and fresh tomatoes.",
|
||||
"Tags": "Capsicum, Mushrooms, Tomatoes",
|
||||
"Tags": "Capsicum, Mushrooms",
|
||||
"ImageURL": "Farmhouse.jpg",
|
||||
"Price": "$14.99"
|
||||
},
|
||||
|
|
@ -917,10 +917,58 @@
|
|||
"Type": "Vegetarian",
|
||||
"Size": "Large",
|
||||
"Category": "Served",
|
||||
"Description": "Pizza with golden corn, exotic black olives, crunchy onions, crisp capsicum, succulent mushrooms, juicyfresh tomatoes and jalapeno with extra cheese to go all around.",
|
||||
"Tags": "Corn, Olives, Onions, Capsicum, Mushrooms, Tomatoes, Cheese",
|
||||
"Description": "Pizza with corn, olives, onions, capsicum, tomatoes and jalapeno with cheese to go all around.",
|
||||
"Tags": "Corn, Mushrooms",
|
||||
"ImageURL": "Veg_Extravaganz.jpg",
|
||||
"Price": "$14.99"
|
||||
},
|
||||
{
|
||||
"Id": 19,
|
||||
"OrderID": "Order ID - #16383",
|
||||
"Title": "Margherita",
|
||||
"Type": "Vegetarian",
|
||||
"Size": "Small",
|
||||
"Category": "Ready to Deliver",
|
||||
"Description": "Lebanese Pizza topped with tomato sauce.",
|
||||
"Tags": "Onions, Pepper, Cheese",
|
||||
"ImageURL": "Margherit.jpg",
|
||||
"Price": "$4.79"
|
||||
},
|
||||
{
|
||||
"Id": 20,
|
||||
"OrderID": "Order ID - #16384",
|
||||
"Title": "Pepper Barbecue and Onion",
|
||||
"Type": "Non-Vegetarian",
|
||||
"Size": "Medium",
|
||||
"Category": "Ready to Deliver",
|
||||
"Description": "Pepper Barbecue chicken with Onion.",
|
||||
"Tags": "Onions, Pepper, Chicken",
|
||||
"ImageURL": "Pepper_Barbeque_Onion.jpg",
|
||||
"Price": "$11.99"
|
||||
},
|
||||
{
|
||||
"Id": 21,
|
||||
"OrderID": "Order ID - #16385",
|
||||
"Title": "Veggie Paradise",
|
||||
"Type": "Vegetarian",
|
||||
"Size": "Large",
|
||||
"Category": "Ready to Deliver",
|
||||
"Description": "Veggie Delight with Goldern Corn, Black Olives, Capsicum and red Paprika.",
|
||||
"Tags": "Corn, Capsicum, Pepper",
|
||||
"ImageURL": "Veggie_Paradise.jpg",
|
||||
"Price": "$14.99"
|
||||
},
|
||||
{
|
||||
"Id": 22,
|
||||
"OrderID": "Order ID - #16386",
|
||||
"Title": "Chicken Dominator",
|
||||
"Type": "Non-Vegetarian",
|
||||
"Size": "Small",
|
||||
"Category": "Ready to Deliver",
|
||||
"Description": "Double Pepper Barbecue Chicken with Peri-Peri Chicken, Chicken Tikka, Grilled and Rashers.",
|
||||
"Tags": "Pepper, Chicken",
|
||||
"ImageURL": "Dominator.jpg",
|
||||
"Price": "$4.79"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
"directory": "kanban",
|
||||
"category": "Data Visualization",
|
||||
"ftName": "kanban",
|
||||
"type": "update",
|
||||
"samples": [
|
||||
{
|
||||
"url": "overview",
|
||||
|
|
@ -25,6 +26,14 @@
|
|||
"description": "The example explains how to configure swimlane and its related settings (sorting order, drag-and-drop, and more) in JavaScript Kanban board.",
|
||||
"api": { "Kanban": ["dataSource", "keyField", "columns", "cardSettings", "swimlaneSettings"] }
|
||||
},
|
||||
{
|
||||
"url": "workflow",
|
||||
"name": "Workflow",
|
||||
"category": "Kanban",
|
||||
"type": "new",
|
||||
"description": "The example demonstrates a workflow feature that controls the flow of cards while drag-and-drop the cards between the columns.",
|
||||
"api": { "Kanban": ["dataSource", "keyField", "columns", "cardSettings"] }
|
||||
},
|
||||
{
|
||||
"url": "stacked-header",
|
||||
"name": "Stacked Header",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,72 @@
|
|||
<div class="control-section">
|
||||
<div class="control_wrapper">
|
||||
<div id='Kanban'></div>
|
||||
</div>
|
||||
</div>
|
||||
<script id="cardTemplate" type="text/x-jsrender">
|
||||
<div>
|
||||
<div class='e-card-header'>
|
||||
<div class='e-card-header-caption'>
|
||||
<div class='e-card-header-title e-tooltip-text'>${Title}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='e-card-content e-tooltip-text'>
|
||||
<div class='e-text'>${Description}</div>
|
||||
<div class='e-card-kanban-image'><img src='./src/kanban/images/${ImageURL}' alt=''></div>
|
||||
</div>
|
||||
<div class='e-card-custom-footer'>
|
||||
${getTags(data.Tags)}
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<style>
|
||||
.e-kanban .e-card-kanban-image {
|
||||
height: 45px;
|
||||
width: 45px;
|
||||
margin-left: auto;
|
||||
}
|
||||
.e-kanban .e-card-kanban-image img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.e-kanban .e-card .e-card-tag-field {
|
||||
background: #ececec;
|
||||
color: #6b6b6b;
|
||||
margin-right: 5px;
|
||||
line-height: 1.1;
|
||||
font-size: 13px;
|
||||
border-radius: 3px;
|
||||
padding: 4px;
|
||||
}
|
||||
.e-kanban .e-card-custom-footer {
|
||||
display: flex;
|
||||
padding: 0px 12px 12px;
|
||||
line-height: 1;
|
||||
height: 35px;
|
||||
}
|
||||
.e-kanban .e-card td {
|
||||
background-color: #fff;
|
||||
}
|
||||
.e-kanban .e-card .e-card-content {
|
||||
display: flex;
|
||||
}
|
||||
.e-kanban .e-card .e-text {
|
||||
width: fit-content;
|
||||
}
|
||||
</style>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This example demonstrates the workflow functionalities that defines the flow of transition between the columns. You can drag and drop the cards between Kanban columns to see the workflow restriction.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this sample, you can drag the cards from the `Order` column and drop them into `Ready to Serve` and `Home Delivery` columns. Also, you couldn’t drag the cards from the `Delivered` column and drop the cards in the `Order` column. The action is controlled using the below properties.
|
||||
</p>
|
||||
<ul>
|
||||
<li>The <code>transitionColumns</code> property is used to allow the card transition to specified columns.</li>
|
||||
<li>The <code>allowDrag</code> property is used to enable/disable the drag action of columns.</li>
|
||||
<li>The <code>allowDrop</code> property is used to enable/disable the drop action of columns.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { Kanban } from '@syncfusion/ej2-kanban';
|
||||
import { extend } from '@syncfusion/ej2-base';
|
||||
import * as dataSource from './datasource.json';
|
||||
/**
|
||||
* Kanban Default Sample
|
||||
*/
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
interface TemplateFunction extends Window {
|
||||
getTags?: Function;
|
||||
getString?: Function;
|
||||
}
|
||||
// To maintain the property changes, extend the object.
|
||||
let data: Object[] = <Object[]>extend([], (dataSource as any).kanbanPizzaData, null, true);
|
||||
let kanbanObj: Kanban = new Kanban({ //Initialize Kanban control
|
||||
dataSource: data,
|
||||
keyField: 'Category',
|
||||
columns: [
|
||||
{ headerText: 'Order', keyField: 'Order', allowDrop: false,
|
||||
transitionColumns: ['Ready to Serve', 'Ready to Deliver'], allowToggle: true },
|
||||
{ headerText: 'Ready to Serve', keyField: 'Ready to Serve', transitionColumns: ['Served'], allowToggle: true },
|
||||
{ headerText: 'Home Delivery', keyField: 'Ready to Deliver', transitionColumns: ['Delivered'], allowToggle: true },
|
||||
{ headerText: 'Delivered', keyField: 'Delivered, Served', allowDrag: false, allowToggle: true }
|
||||
],
|
||||
cardSettings: {
|
||||
headerField: 'Id',
|
||||
template: '#cardTemplate'
|
||||
}
|
||||
});
|
||||
kanbanObj.appendTo('#Kanban'); //Render initialized Kanban control
|
||||
|
||||
(window as TemplateFunction).getTags = (data: string) => {
|
||||
let tagDiv: string = '';
|
||||
let tags: string[] = data.split(',');
|
||||
for (let tag of tags) {
|
||||
tagDiv += '<div class="e-card-tag-field">' + tag + '</div>';
|
||||
}
|
||||
return tagDiv;
|
||||
};
|
||||
};
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<div class="control-section">
|
||||
<div class="content-wrapper">
|
||||
<div id="pdfViewer" style= "height:640px; width:100%;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="action-description">
|
||||
<p>The sample demonstrates the Handwritten Signature support of PDF Viewer. The Handwritten signature reduces the paperwork of reviewing the contents and it's verified it's digitally.</p>
|
||||
</div>
|
||||
|
||||
<div id="description">
|
||||
<p>
|
||||
In the PDF Viewer component, we can explicitly open the Handwritten signature dialog using the method
|
||||
setAnnotationMode
|
||||
|
||||
</p>
|
||||
<p>
|
||||
More information on the PDF Viewer instantiation can be found in this
|
||||
<a target="_blank"
|
||||
href="https://ej2.syncfusion.com/documentation/pdfviewer/getting-started">
|
||||
documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
|
||||
ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields } from '@syncfusion/ej2-pdfviewer';
|
||||
// tslint:disable-next-line:max-line-length
|
||||
PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields);
|
||||
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let viewer: PdfViewer = new PdfViewer();
|
||||
viewer.serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
|
||||
viewer.appendTo('#pdfViewer');
|
||||
viewer.load('PDF_Succinctly.pdf', null);
|
||||
// tslint:disable-next-line
|
||||
viewer.documentLoad = function(): any {
|
||||
viewer.annotationModule.setAnnotationMode('HandWrittenSignature');
|
||||
};
|
||||
};
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
"directory": "pdfviewer",
|
||||
"category": "Viewer",
|
||||
"ftName": "pdfviewer",
|
||||
"type": "new",
|
||||
"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"
|
||||
|
|
@ -14,7 +15,10 @@
|
|||
"url":"right-to-left", "name": "Right to Left", "description":"This demo for Essential JS 2 PdfViewer shows the default rendering of the PdfViewer with Right to Left Configuration ", "category": "PDF Viewer"
|
||||
},
|
||||
{
|
||||
"url":"form-filling", "name": "Form Filling", "description":"This demo for Essential JS 2 PdfViewer shows the default rendering of the PdfViewer with Form Filling Configuration ", "category": "PDF Viewer"
|
||||
"url":"form-filling", "name": "Form Filling", "description":"This demo for Essential JS 2 PdfViewer shows the default rendering of the PdfViewer with Form Filling Configuration ", "category": "PDF Viewer"
|
||||
},
|
||||
{
|
||||
"url":"hand-written", "name": "Handwritten Signature", "description": "The sample demonstrates the Handwritten Signature support of PDF Viewer. The Handwritten signature reduces the paperwork of reviewing the contents and it's verified it's digitally", "category": "PDF Viewer", "type": "new"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -98,4 +98,7 @@
|
|||
.control-section {
|
||||
min-height: 255px !important;
|
||||
}
|
||||
#PivotViewcontainerwrapper {
|
||||
height: auto !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -44,4 +44,7 @@
|
|||
.control-section {
|
||||
min-height: 255px !important;
|
||||
}
|
||||
#PivotViewcontainerwrapper {
|
||||
height: auto !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -34,4 +34,7 @@
|
|||
.control-section {
|
||||
min-height: 255px !important;
|
||||
}
|
||||
#PivotViewcontainerwrapper {
|
||||
height: auto !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -61,4 +61,7 @@
|
|||
.control-section {
|
||||
min-height: 255px !important;
|
||||
}
|
||||
#PivotViewcontainerwrapper {
|
||||
height: auto !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -50,6 +50,8 @@ 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) {
|
||||
|
|
|
|||
|
|
@ -76,4 +76,7 @@
|
|||
overflow: auto;
|
||||
}
|
||||
}
|
||||
#PivotViewcontainerwrapper {
|
||||
height: auto !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -99,4 +99,7 @@
|
|||
overflow: auto;
|
||||
}
|
||||
}
|
||||
#PivotViewcontainerwrapper {
|
||||
height: auto !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -99,4 +99,9 @@
|
|||
The pivot table features are segregated into individual modules. To take advantage of chart support,
|
||||
we need to inject the <code>PivotChart</code> module using the <code>PivotView.Inject(PivotChart)</code> method.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
#PivotViewcontainerwrapper {
|
||||
height: auto !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -104,4 +104,7 @@
|
|||
.control-section {
|
||||
min-height: 255px !important;
|
||||
}
|
||||
#PivotViewcontainerwrapper {
|
||||
height: auto !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -29,4 +29,7 @@
|
|||
.control-section {
|
||||
min-height: 255px !important;
|
||||
}
|
||||
#PivotViewcontainerwrapper {
|
||||
height: auto !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1 +1 @@
|
|||
<p>RichTextEditor ability to load component content using Ajax post. The Ajax request performed on demand and content will update on success callback method.</p>
|
||||
<p>Rich Text Editor ability to load component content using Ajax post. The Ajax request performed on demand and content will update on success callback method.</p>
|
||||
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче