This commit is contained in:
DESKTOP-G1F3HM6\Saranya Murugasamy 2019-06-06 16:24:00 +05:30
Родитель b6e1b04e08
Коммит 3cf2e1e9fb
109 изменённых файлов: 660 добавлений и 117 удалений

29
manifest.webmanifest Normal file
Просмотреть файл

@ -0,0 +1,29 @@
{
"lang": "en",
"name": "Examples of Syncfusion JavaScript (ES5) UI Controls",
"description": "Explore and learn JavaScript (ES5) UI controls library using large collection of feature-wise examples for each components.",
"short_name": "EJ2 Angular",
"icons": [{
"src": "favicon.ico",
"sizes": "64x64"
}, {
"src": "favicon.ico",
"sizes": "128x128"
}],
"scope": "/racer/",
"start_url": "index.html",
"display": "fullscreen",
"orientation": "portrait-primary",
"theme_color": "#FFFFFF",
"background_color": "#F8F8F8",
"serviceworker": {
"src": "sw.js",
"scope": "/racer/",
"update_via_cache": "none"
},
"related_applications": [{
"platform": "play",
"url": "https://play.google.com/store/apps/details?id=com.Syncfusion.ej2",
"id": "com.Syncfusion.ej2"
}]
}

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Просмотреть файл

@ -194,4 +194,10 @@
border-bottom: 1px solid #d7d7d7; border-bottom: 1px solid #d7d7d7;
border-right: 1px solid #d7d7d7; border-right: 1px solid #d7d7d7;
} }
/* styles for highcontrast theme */
body.highcontrast .panel-content {
color: rgba(255, 255, 255, 0.54);
}
</style> </style>

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Просмотреть файл

@ -50,24 +50,15 @@ this.default = function () {
} }
function onChange(args) { function onChange(args) {
if (args.event.currentTarget.id === "floating") { if (args.event.currentTarget.id === "floating") {
if (args.checked) { dashboard.allowFloating = args.checked;
dashboard.allowFloating = true;
} else {
dashboard.allowFloating = false;
}
} }
if (args.event.currentTarget.id === "resizing") { if (args.event.currentTarget.id === "resizing") {
if (args.checked) { dashboard.allowResizing = args.checked;
dashboard.allowResizing = true;
} else {
dashboard.allowResizing = false;
}
} }
} }
document.getElementById('remove').onclick = function (e) { document.getElementById('remove').onclick = function (e) {
if (dashboardObject.panels.length != 0) { if (dashboardObject.panels.length > 0) {
for (var i = dashboardObject.panels.length - 1; i < dashboardObject.panels.length; i++) { for (var i = dashboardObject.panels.length - 1; i < dashboardObject.panels.length; i++) {
dashboardObject.removePanel(dashboardObject.panels[dashboardObject.panels.length - 1 - i].id); dashboardObject.removePanel(dashboardObject.panels[dashboardObject.panels.length - 1 - i].id);
} }

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Просмотреть файл

@ -1 +1 @@
{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/diagram/custom-shapes/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"http://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"http://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}}\"><div class=\"control-section\">\n <div id=\"diagram\"></div>\n</div>\n\n</div></body></html>","index.js":"{{ripple}}/**\n * Getting started - Html Node\n */\n\n//Add Gauge control to Diagram.\nfunction getHtmlContent() {\n var div = document.getElementById('gauge');\n var circularGauge = new ej.circulargauge.CircularGauge({\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n },\n axes: [{\n lineStyle: { width: 10, color: 'transparent' },\n labelStyle: {\n position: 'Inside', useRangeColor: false,\n font: { size: '12px', fontFamily: 'Roboto', fontStyle: 'Regular' }\n }, majorTicks: { height: 10, offset: 5, color: '#9E9E9E' }, minorTicks: { height: 0 },\n annotations: [{\n content: '<div><span style=\"font-size:14px; color:#9E9E9E; font-family:Regular\">Speedometer</span></div>',\n radius: '30%', angle: 0, zIndex: '1'\n }, {\n content: '<div><span style=\"font-size:20px; color:#424242; font-family:Regular\">65 MPH</span></div>',\n radius: '40%', angle: 180, zIndex: '1'\n }],\n startAngle: 210, endAngle: 150, minimum: 0, maximum: 120, radius: '80%',\n ranges: [{ start: 0, end: 40, color: '#30B32D' }, { start: 40, end: 80, color: '#FFDD00' },\n { start: 80, end: 120, color: '#F03E3E' }],\n pointers: [{\n value: 65, radius: '60%', color: '#757575', pointerWidth: 8,\n cap: { radius: 7, color: '#757575' }, needleTail: { length: '18%', color: '#757575' }\n }]\n }]\n });\n circularGauge.appendTo('#gauge');\n return div;\n}\n// tslint:disable-next-line:max-func-body-length\n\n var htmlcontent = '<div id=\"gauge\" style=\"height:100%; width:100%; overflow:hidden;\"> </div>';\n var shape = { type: 'HTML', content: htmlcontent };\n var node1 = {\n id: 'node', offsetX: 450, offsetY: 200, width: 300, height: 300, shape: shape\n };\n //initialize the diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '640px', nodes: [node1], snapSettings: { constraints: 0 },\n created: function() { diagram.fitToPage(); }\n });\n diagram.appendTo('#diagram');\n getHtmlContent();\n\n"} {"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/diagram/custom-shapes/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <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}}\"><div class=\"control-section\">\n <div id=\"diagram\"></div>\n</div>\n\n</div></body></html>","index.js":"{{ripple}}/**\n * Getting started - Html Node\n */\n\n//Add Gauge control to Diagram.\nfunction getHtmlContent() {\n var div = document.getElementById('gauge');\n var circularGauge = new ej.circulargauge.CircularGauge({\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.gauge.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n },\n axes: [{\n lineStyle: { width: 10, color: 'transparent' },\n labelStyle: {\n position: 'Inside', useRangeColor: false,\n font: { size: '12px', fontFamily: 'Roboto', fontStyle: 'Regular' }\n }, majorTicks: { height: 10, offset: 5, color: '#9E9E9E' }, minorTicks: { height: 0 },\n annotations: [{\n content: '<div><span style=\"font-size:14px; color:#9E9E9E; font-family:Regular\">Speedometer</span></div>',\n radius: '30%', angle: 0, zIndex: '1'\n }, {\n content: '<div><span style=\"font-size:20px; color:#424242; font-family:Regular\">65 MPH</span></div>',\n radius: '40%', angle: 180, zIndex: '1'\n }],\n startAngle: 210, endAngle: 150, minimum: 0, maximum: 120, radius: '80%',\n ranges: [{ start: 0, end: 40, color: '#30B32D' }, { start: 40, end: 80, color: '#FFDD00' },\n { start: 80, end: 120, color: '#F03E3E' }],\n pointers: [{\n value: 65, radius: '60%', color: '#757575', pointerWidth: 8,\n cap: { radius: 7, color: '#757575' }, needleTail: { length: '18%', color: '#757575' }\n }]\n }]\n });\n circularGauge.appendTo('#gauge');\n return div;\n}\n// tslint:disable-next-line:max-func-body-length\n\n var htmlcontent = '<div id=\"gauge\" style=\"height:100%; width:100%; overflow:hidden;\"> </div>';\n var shape = { type: 'HTML', content: htmlcontent };\n var node1 = {\n id: 'node', offsetX: 450, offsetY: 200, width: 300, height: 300, shape: shape\n };\n //initialize the diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '640px', nodes: [node1], snapSettings: { constraints: 0 },\n created: function() { diagram.fitToPage(); }\n });\n diagram.appendTo('#diagram');\n getHtmlContent();\n\n"}

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Просмотреть файл

@ -1 +1 @@
{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/diagram/local-data/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"http://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"http://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}}\"><div class=\"control-section\">\n <div class=\"content-wrapper\" style=\"width: 100%\">\n <div id=\"diagram\"></div>\n </div>\n</div>\n\n</div></body></html>","index.js":"{{ripple}}/**\n * Local Data Binding sample\n */\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree);\n\n //Initializes diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: 490,\n //Configures data source\n dataSourceSettings: {\n id: 'Name', parentId: 'Category', dataManager: new ej.data.DataManager(window.species),\n //binds the external data with node\n doBinding: function (nodeModel, data, diagram) {\n nodeModel.annotations = [{\n content: data.Name, style: { color: 'black' }\n }];\n nodeModel.style = { fill: '#ffeec7', strokeColor: '#f5d897', strokeWidth: 1 };\n }\n },\n //Configrues HierarchicalTree layout\n layout: {\n type: 'HierarchicalTree', horizontalSpacing: 15, verticalSpacing: 50,\n margin: { top: 10, left: 10, right: 10, bottom: 0 },\n },\n //Sets the default values of nodes\n getNodeDefaults: function (obj) {\n obj.shape = { type: 'Basic', shape: 'Rectangle' };\n obj.style = { strokeWidth: 1 };\n obj.width = 95;\n obj.height = 30;\n },\n //Sets the default values of connectors.\n getConnectorDefaults: function (connector) {\n connector.type = 'Orthogonal';\n connector.style.strokeColor = '#4d4d4d';\n connector.targetDecorator.shape = 'None';\n },\n //Disables all interactions except zoom/pan\n tool: ej.diagrams.DiagramTools.ZoomPan,\n snapSettings: { constraints: 0 }\n });\n diagram.appendTo('#diagram');\n\n"} {"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/diagram/local-data/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <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}}\"><div class=\"control-section\">\n <div class=\"content-wrapper\" style=\"width: 100%\">\n <div id=\"diagram\"></div>\n </div>\n</div>\n\n</div></body></html>","index.js":"{{ripple}}/**\n * Local Data Binding sample\n */\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree);\n\n //Initializes diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: 490,\n //Configures data source\n dataSourceSettings: {\n id: 'Name', parentId: 'Category', dataManager: new ej.data.DataManager(window.species),\n //binds the external data with node\n doBinding: function (nodeModel, data, diagram) {\n nodeModel.annotations = [{\n content: data.Name, style: { color: 'black' }\n }];\n nodeModel.style = { fill: '#ffeec7', strokeColor: '#f5d897', strokeWidth: 1 };\n }\n },\n //Configrues HierarchicalTree layout\n layout: {\n type: 'HierarchicalTree', horizontalSpacing: 15, verticalSpacing: 50,\n margin: { top: 10, left: 10, right: 10, bottom: 0 },\n },\n //Sets the default values of nodes\n getNodeDefaults: function (obj) {\n obj.shape = { type: 'Basic', shape: 'Rectangle' };\n obj.style = { strokeWidth: 1 };\n obj.width = 95;\n obj.height = 30;\n },\n //Sets the default values of connectors.\n getConnectorDefaults: function (connector) {\n connector.type = 'Orthogonal';\n connector.style.strokeColor = '#4d4d4d';\n connector.targetDecorator.shape = 'None';\n },\n //Disables all interactions except zoom/pan\n tool: ej.diagrams.DiagramTools.ZoomPan,\n snapSettings: { constraints: 0 }\n });\n diagram.appendTo('#diagram');\n\n"}

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Просмотреть файл

@ -1 +1 @@
{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/diagram/overview/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"http://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"http://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}}\"><div class=\"col-lg-12 control-section\">\n <div class=\"content-wrapper\">\n <div id=\"diagram\"></div>\n </div>\n</div>\n<div class=\"col-lg-4\" style=\" width:50%; padding:0px;right:30px;bottom:20px;border: #eeeeee;border-style: solid;box-shadow: 0px 2px 2px rgba(0,0,0,0.3); background:#f7f7f7;position:absolute\">\n <div id=\"overview\" style=\"top:30px\"></div>\n</div>\n\n\n<style>\n</style></div></body></html>","index.js":"{{ripple}}\n/**\n * OverView\n */\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree);\n\n//Funtion to add the Template of the Node.\nfunction setNodeTemplate(obj, diagram) {\n var content = new ej.diagrams.StackPanel();\n content.id = obj.id + '_outerstack';\n content.orientation = 'Horizontal';\n content.style.strokeColor = 'gray';\n content.padding = { left: 5, right: 10, top: 5, bottom: 5 };\n\n var image = new ej.diagrams.ImageElement();\n image.width = 50;\n image.height = 50;\n image.style.strokeColor = 'none';\n image.source = obj.data.ImageUrl;\n image.id = obj.id + '_pic';\n\n var innerStack = new ej.diagrams.StackPanel();\n innerStack.style.strokeColor = 'none';\n innerStack.margin = { left: 5, right: 0, top: 0, bottom: 0 };\n innerStack.id = obj.id + '_innerstack';\n\n var text = new ej.diagrams.TextElement();\n text.content = obj.data.Name;\n text.style.color = 'black';\n text.style.bold = true;\n text.style.strokeColor = 'none';\n text.horizontalAlignment = 'Left';\n text.style.fill = 'none';\n text.id = obj.id + '_text1';\n\n var desigText = new ej.diagrams.TextElement();\n desigText.margin = { left: 0, right: 0, top: 5, bottom: 0 };\n desigText.content = obj.data.Designation;\n desigText.style.color = 'black';\n desigText.style.strokeColor = 'none';\n desigText.style.fontSize = 12;\n desigText.style.fill = 'none';\n desigText.horizontalAlignment = 'Left';\n desigText.style.textWrapping = 'Wrap';\n desigText.id = obj.id + '_desig';\n innerStack.children = [text, desigText];\n content.children = [image, innerStack];\n return content;\n}\n\n var overview;\n //Initializtion of the diagram.\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '590px', scrollSettings: { scrollLimit: 'Infinity' },\n //Sets the constraints of the SnapSettings\n snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n //Configrues organizational chart layout\n layout: {\n type: 'OrganizationalChart', margin: { top: 20 },\n getLayoutInfo: function (node, tree) {\n if (!tree.hasSubTree) {\n tree.orientation = 'Vertical';\n tree.type = 'Right';\n }\n }\n },\n //Sets the parent and child relationship of DataSource.\n dataSourceSettings: {\n id: 'Id', parentId: 'ReportingPerson', dataManager: new ej.data.DataManager(window.overviewData)\n },\n //Sets the default values of Nodes.\n getNodeDefaults: function (obj, diagram) {\n obj.height = 50;\n obj.style = { fill: 'transparent', strokeWidth: 2 };\n return obj;\n },\n //Sets the default values of connectors.\n getConnectorDefaults: function (connector, diagram) {\n connector.targetDecorator.shape = 'None';\n connector.type = 'Orthogonal';\n connector.style.strokeColor = 'gray';\n return connector;\n },\n //customization of the node.\n setNodeTemplate: function (obj, diagram) {\n return setNodeTemplate(obj, diagram);\n }\n });\n diagram.appendTo('#diagram');\n //Initializtion of the Overview.\n\n overview = new ej.diagrams.Overview({\n width: '100%', height: '150px', sourceID: 'diagram'\n });\n overview.appendTo('#overview');\n\n"} {"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/diagram/overview/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <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}}\"><div class=\"col-lg-12 control-section\">\n <div class=\"content-wrapper\">\n <div id=\"diagram\"></div>\n </div>\n</div>\n<div class=\"col-lg-4\" style=\" width:50%; padding:0px;right:30px;bottom:20px;border: #eeeeee;border-style: solid;box-shadow: 0px 2px 2px rgba(0,0,0,0.3); background:#f7f7f7;position:absolute\">\n <div id=\"overview\" style=\"top:30px\"></div>\n</div>\n\n\n<style>\n</style></div></body></html>","index.js":"{{ripple}}\n/**\n * OverView\n */\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree);\n\n//Funtion to add the Template of the Node.\nfunction setNodeTemplate(obj, diagram) {\n var content = new ej.diagrams.StackPanel();\n content.id = obj.id + '_outerstack';\n content.orientation = 'Horizontal';\n content.style.strokeColor = 'gray';\n content.padding = { left: 5, right: 10, top: 5, bottom: 5 };\n\n var image = new ej.diagrams.ImageElement();\n image.width = 50;\n image.height = 50;\n image.style.strokeColor = 'none';\n image.source = obj.data.ImageUrl;\n image.id = obj.id + '_pic';\n\n var innerStack = new ej.diagrams.StackPanel();\n innerStack.style.strokeColor = 'none';\n innerStack.margin = { left: 5, right: 0, top: 0, bottom: 0 };\n innerStack.id = obj.id + '_innerstack';\n\n var text = new ej.diagrams.TextElement();\n text.content = obj.data.Name;\n text.style.color = 'black';\n text.style.bold = true;\n text.style.strokeColor = 'none';\n text.horizontalAlignment = 'Left';\n text.style.fill = 'none';\n text.id = obj.id + '_text1';\n\n var desigText = new ej.diagrams.TextElement();\n desigText.margin = { left: 0, right: 0, top: 5, bottom: 0 };\n desigText.content = obj.data.Designation;\n desigText.style.color = 'black';\n desigText.style.strokeColor = 'none';\n desigText.style.fontSize = 12;\n desigText.style.fill = 'none';\n desigText.horizontalAlignment = 'Left';\n desigText.style.textWrapping = 'Wrap';\n desigText.id = obj.id + '_desig';\n innerStack.children = [text, desigText];\n content.children = [image, innerStack];\n return content;\n}\n\n var overview;\n //Initializtion of the diagram.\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '590px', scrollSettings: { scrollLimit: 'Infinity' },\n //Sets the constraints of the SnapSettings\n snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n //Configrues organizational chart layout\n layout: {\n type: 'OrganizationalChart', margin: { top: 20 },\n getLayoutInfo: function (node, tree) {\n if (!tree.hasSubTree) {\n tree.orientation = 'Vertical';\n tree.type = 'Right';\n }\n }\n },\n //Sets the parent and child relationship of DataSource.\n dataSourceSettings: {\n id: 'Id', parentId: 'ReportingPerson', dataManager: new ej.data.DataManager(window.overviewData)\n },\n //Sets the default values of Nodes.\n getNodeDefaults: function (obj, diagram) {\n obj.height = 50;\n obj.style = { fill: 'transparent', strokeWidth: 2 };\n return obj;\n },\n //Sets the default values of connectors.\n getConnectorDefaults: function (connector, diagram) {\n connector.targetDecorator.shape = 'None';\n connector.type = 'Orthogonal';\n connector.style.strokeColor = 'gray';\n return connector;\n },\n //customization of the node.\n setNodeTemplate: function (obj, diagram) {\n return setNodeTemplate(obj, diagram);\n }\n });\n diagram.appendTo('#diagram');\n //Initializtion of the Overview.\n\n overview = new ej.diagrams.Overview({\n width: '100%', height: '150px', sourceID: 'diagram'\n });\n overview.appendTo('#overview');\n\n"}

Просмотреть файл

@ -1 +1 @@
{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/diagram/pert-chart/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"http://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"http://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}}\"><div class=\"control-section\">\n <div style=\"width:100%\">\n <div id=\"diagram\"></div>\n </div>\n</div>\n\n\n<style>\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for PERT Chart\n */\n\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree, ej.diagrams.ComplexHierarchicalTree);\n\n //customization of the node template.\n function getNodeTemplate(node) {\n var table = new ej.diagrams.StackPanel();\n table.style.fill = '#0069d9';\n table.id = ej.diagrams.randomId();\n table.orientation = 'Vertical';\n var nameKey = 'id';\n var stack = new ej.diagrams.StackPanel();\n stack.children = [];\n stack.id = ej.diagrams.randomId();\n stack.height = 25;\n stack.orientation = 'Horizontal';\n stack.style.fill = 'white';\n stack.horizontalAlignment = 'Stretch';\n addRows(stack, node);\n table.children = [(getTextElement(node.data[nameKey], 'Stretch', 170, 'Stretch')), stack];\n table.children[0].style.color = 'white';\n table.children[0].style.fontSize = 14;\n return table;\n }\n\n function getTextElement(text, alignment, width, valignment) {\n var textElement = new ej.diagrams.TextElement();\n textElement.content = text;\n textElement.id = ej.diagrams.randomId();\n textElement.width = width;\n textElement.height = 25;\n textElement.horizontalAlignment = alignment;\n textElement.verticalAlignment = valignment;\n textElement.style.strokeWidth = 1;\n textElement.style.strokeColor = '#b5b5b5';\n textElement.style.fill = 'transparent';\n textElement.style.color = '#3c3c3c';\n textElement.relativeMode = 'Object';\n return textElement;\n }\n\n function addRows(column, node) {\n column.children.push(getTextElement(node.data.startDate, 'Left', 70));\n column.children.push(getTextElement(node.data.duration, 'Center', 30));\n column.children.push(getTextElement(node.data.endDate, 'Right', 70));\n }\n\n //Initializes diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '499px', snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n dataSourceSettings: {\n id: 'id', parentId: 'Category',\n dataManager: new ej.data.DataManager(window.pertChartData),\n doBinding: function (nodeModel, data, diagram) {\n nodeModel.shape = { type: 'Text' };\n }\n }, layout: {\n type: 'ComplexHierarchicalTree', orientation: 'LeftToRight', verticalSpacing: 100, horizontalSpacing: 70\n },\n getConnectorDefaults: function (connector, diagram) {\n connector.type = 'Straight';\n connector.style.strokeColor = '#979797';\n connector.targetDecorator.width = 10;\n connector.targetDecorator.height = 10;\n connector.targetDecorator.style = { fill: '#979797', strokeColor: '#979797' };\n return connector;\n },\n //used to customize template of the node.\n setNodeTemplate: function (node) { return getNodeTemplate(node); },\n tool: ej.diagrams.DiagramTools.ZoomPan\n });\n diagram.appendTo('#diagram');\n diagram.fitToPage();\n\n"} {"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/diagram/pert-chart/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <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}}\"><div class=\"control-section\">\n <div style=\"width:100%\">\n <div id=\"diagram\"></div>\n </div>\n</div>\n\n\n<style>\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for PERT Chart\n */\n\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree, ej.diagrams.ComplexHierarchicalTree);\n\n //customization of the node template.\n function getNodeTemplate(node) {\n var table = new ej.diagrams.StackPanel();\n table.style.fill = '#0069d9';\n table.id = ej.diagrams.randomId();\n table.orientation = 'Vertical';\n var nameKey = 'id';\n var stack = new ej.diagrams.StackPanel();\n stack.children = [];\n stack.id = ej.diagrams.randomId();\n stack.height = 25;\n stack.orientation = 'Horizontal';\n stack.style.fill = 'white';\n stack.horizontalAlignment = 'Stretch';\n addRows(stack, node);\n table.children = [(getTextElement(node.data[nameKey], 'Stretch', 170, 'Stretch')), stack];\n table.children[0].style.color = 'white';\n table.children[0].style.fontSize = 14;\n return table;\n }\n\n function getTextElement(text, alignment, width, valignment) {\n var textElement = new ej.diagrams.TextElement();\n textElement.content = text;\n textElement.id = ej.diagrams.randomId();\n textElement.width = width;\n textElement.height = 25;\n textElement.horizontalAlignment = alignment;\n textElement.verticalAlignment = valignment;\n textElement.style.strokeWidth = 1;\n textElement.style.strokeColor = '#b5b5b5';\n textElement.style.fill = 'transparent';\n textElement.style.color = '#3c3c3c';\n textElement.relativeMode = 'Object';\n return textElement;\n }\n\n function addRows(column, node) {\n column.children.push(getTextElement(node.data.startDate, 'Left', 70));\n column.children.push(getTextElement(node.data.duration, 'Center', 30));\n column.children.push(getTextElement(node.data.endDate, 'Right', 70));\n }\n\n //Initializes diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '499px', snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n dataSourceSettings: {\n id: 'id', parentId: 'Category',\n dataManager: new ej.data.DataManager(window.pertChartData),\n doBinding: function (nodeModel, data, diagram) {\n nodeModel.shape = { type: 'Text' };\n }\n }, layout: {\n type: 'ComplexHierarchicalTree', orientation: 'LeftToRight', verticalSpacing: 100, horizontalSpacing: 70\n },\n getConnectorDefaults: function (connector, diagram) {\n connector.type = 'Straight';\n connector.style.strokeColor = '#979797';\n connector.targetDecorator.width = 10;\n connector.targetDecorator.height = 10;\n connector.targetDecorator.style = { fill: '#979797', strokeColor: '#979797' };\n return connector;\n },\n //used to customize template of the node.\n setNodeTemplate: function (node) { return getNodeTemplate(node); },\n tool: ej.diagrams.DiagramTools.ZoomPan\n });\n diagram.appendTo('#diagram');\n diagram.fitToPage();\n\n"}

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Просмотреть файл

@ -1 +1 @@
{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/diagram/remote-data/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"http://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"http://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}}\"><div class=\"control-section\">\n <div id=\"diagram\" class=\"diagramclass\">\n </div>\n</div>\n\n\n</div></body></html>","index.js":"{{ripple}}/**\n * Remote Data binding sample\n */\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree);\n\n //Initializes diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: 490,\n //Configrues hierarchical tree layout\n layout: {\n type: 'HierarchicalTree', margin: { left: 0, right: 0, top: 100, bottom: 0 },\n verticalSpacing: 40,\n getLayoutInfo: function (node, options) {\n if (options.level === 3) {\n node.style.fill = '#3c418d';\n }\n if (options.level === 2) {\n node.style.fill = '#108d8d';\n options.type = 'Center';\n options.orientation = 'Horizontal';\n }\n if (options.level === 1) {\n node.style.fill = '#822b86';\n }\n }\n },\n //Sets the default values of nodes\n getNodeDefaults: function (obj) {\n obj.width = 80;\n obj.height = 40;\n obj.shape = { type: 'Basic', shape: 'Rectangle' };\n obj.style = { fill: '#048785', strokeColor: 'Transparent' };\n return obj;\n },\n //Sets the default values of connector\n getConnectorDefaults: function (connector) {\n connector.type = 'Orthogonal';\n connector.style.strokeColor = '#048785';\n connector.targetDecorator.shape = 'None';\n return connector;\n },\n //Configures data source\n dataSourceSettings: {\n id: 'EmployeeID', parentId: 'ReportsTo',\n dataManager: new ej.data.DataManager(\n { url: 'https://mvc.syncfusion.com/Services/Northwnd.svc/', crossDomain: true },\n new ej.data.Query().from('Employees').select('EmployeeID,ReportsTo,FirstName').take(9)\n ),\n //binds the external data with node\n doBinding: function (nodeModel, data, diagram) {\n nodeModel.annotations = [{\n content: data.FirstName,\n style: { color: 'white' }\n }];\n }\n },\n //Disables all interactions except zoom/pan\n tool: ej.diagrams.DiagramTools.ZoomPan,\n snapSettings: { constraints: 0 }\n });\n diagram.appendTo('#diagram');\n"} {"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/diagram/remote-data/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <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}}\"><div class=\"control-section\">\n <div id=\"diagram\" class=\"diagramclass\">\n </div>\n</div>\n\n\n</div></body></html>","index.js":"{{ripple}}/**\n * Remote Data binding sample\n */\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree);\n\n //Initializes diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: 490,\n //Configrues hierarchical tree layout\n layout: {\n type: 'HierarchicalTree', margin: { left: 0, right: 0, top: 100, bottom: 0 },\n verticalSpacing: 40,\n getLayoutInfo: function (node, options) {\n if (options.level === 3) {\n node.style.fill = '#3c418d';\n }\n if (options.level === 2) {\n node.style.fill = '#108d8d';\n options.type = 'Center';\n options.orientation = 'Horizontal';\n }\n if (options.level === 1) {\n node.style.fill = '#822b86';\n }\n }\n },\n //Sets the default values of nodes\n getNodeDefaults: function (obj) {\n obj.width = 80;\n obj.height = 40;\n obj.shape = { type: 'Basic', shape: 'Rectangle' };\n obj.style = { fill: '#048785', strokeColor: 'Transparent' };\n return obj;\n },\n //Sets the default values of connector\n getConnectorDefaults: function (connector) {\n connector.type = 'Orthogonal';\n connector.style.strokeColor = '#048785';\n connector.targetDecorator.shape = 'None';\n return connector;\n },\n //Configures data source\n dataSourceSettings: {\n id: 'EmployeeID', parentId: 'ReportsTo',\n dataManager: new ej.data.DataManager(\n { url: 'https://mvc.syncfusion.com/Services/Northwnd.svc/', crossDomain: true },\n new ej.data.Query().from('Employees').select('EmployeeID,ReportsTo,FirstName').take(9)\n ),\n //binds the external data with node\n doBinding: function (nodeModel, data, diagram) {\n nodeModel.annotations = [{\n content: data.FirstName,\n style: { color: 'white' }\n }];\n }\n },\n //Disables all interactions except zoom/pan\n tool: ej.diagrams.DiagramTools.ZoomPan,\n snapSettings: { constraints: 0 }\n });\n diagram.appendTo('#diagram');\n"}

Просмотреть файл

@ -1 +1 @@
{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/diagram/right-to-left-tree/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"http://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"http://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}}\"><div class=\"control-section\">\n <div style=\"width:100%\">\n <div id=\"diagram\"></div>\n </div>\n</div>\n\n</div></body></html>","index.js":"{{ripple}}/**\n * Sample for RTL tree\n */\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree);\n //Create and add ports for Node.\n function getPorts(root) {\n var ports = [\n {\n id: 'port1', shape: 'Circle', offset: { x: 0, y: 0.5 }, horizontalAlignment: 'Left',\n verticalAlignment: 'Bottom', margin: { right: -2, bottom: -5.5 }\n },\n {\n id: 'port2', shape: 'Circle', offset: { x: 1, y: 0.99 }, horizontalAlignment: 'Right',\n verticalAlignment: 'Bottom', margin: { right: -2, bottom: -5.5 }\n }\n ];\n if (!root) {\n ports[0].offset.y = 1;\n }\n else {\n ports[0].verticalAlignment = 'Center';\n ports[0].horizontalAlignment = 'Center';\n }\n return ports;\n}\n\n //Initializes diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '600px', snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n //Configure the data source\n dataSourceSettings: {\n id: 'Name', parentId: 'Category',\n dataManager: new ej.data.DataManager(window.artificialIntelligence),\n doBinding: function (nodeModel, data, diagram) {\n var nameKey = 'Name';\n nodeModel.annotations = [{ content: data[nameKey] }];\n }\n },\n //Configures the layout\n layout: {\n type: 'HierarchicalTree', orientation: 'RightToLeft',\n verticalAlignment: 'Center', horizontalAlignment: 'Center', verticalSpacing: 100,\n horizontalSpacing: -10\n },\n //Enables zoom pan tool \n tool: ej.diagrams.DiagramTools.ZoomPan,\n //Sets the default values of a Node\n getNodeDefaults: function (obj, diagram) {\n obj.width = 120;\n obj.style = { fill: '#034d6d', strokeWidth: 1 };\n var key = 'branch';\n //set the shape of the Node.\n if (obj.data[key] === 'root') {\n obj.shape = { type: 'Basic', shape: 'Ellipse' };\n obj.height = 120;\n }\n else {\n obj.shape = {\n type: 'Native',\n content: '<svg width=\"120\" height=\"61\"><g><line x1=\"0\" x2=\"120\" y1=\"60\" y2=\"60\" stroke-width=\"1\" stroke= \"black\"></line>' +\n '<rect x=\"0\" y=\"0\" width=\"120\" height=\"60\" fill=\"transparent\" stroke=\"none\"></rect></g></svg>'\n };\n obj.style.strokeWidth = 0;\n obj.height = 60;\n }\n //Set ports and annotations\n obj.ports = getPorts(obj.data[key] === 'root');\n var annotation = obj.annotations[0];\n if (obj.data[key] !== 'root') {\n annotation.offset = { y: 1 };\n annotation.verticalAlignment = 'Bottom';\n annotation.margin = { bottom: 10 };\n }\n else {\n annotation.style = { color: 'white' };\n }\n return obj;\n },\n //Sets the default values of a Connector\n getConnectorDefaults: function (connector, diagram) {\n connector.type = 'Bezier';\n connector.sourcePortID = 'port1';\n connector.targetPortID = 'port2';\n connector.targetDecorator = { shape: 'None' };\n return connector;\n },\n });\n diagram.appendTo('#diagram');\n \n"} {"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/diagram/right-to-left-tree/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <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}}\"><div class=\"control-section\">\n <div style=\"width:100%\">\n <div id=\"diagram\"></div>\n </div>\n</div>\n\n</div></body></html>","index.js":"{{ripple}}/**\n * Sample for RTL tree\n */\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree);\n //Create and add ports for Node.\n function getPorts(root) {\n var ports = [\n {\n id: 'port1', shape: 'Circle', offset: { x: 0, y: 0.5 }, horizontalAlignment: 'Left',\n verticalAlignment: 'Bottom', margin: { right: -2, bottom: -5.5 }\n },\n {\n id: 'port2', shape: 'Circle', offset: { x: 1, y: 0.99 }, horizontalAlignment: 'Right',\n verticalAlignment: 'Bottom', margin: { right: -2, bottom: -5.5 }\n }\n ];\n if (!root) {\n ports[0].offset.y = 1;\n }\n else {\n ports[0].verticalAlignment = 'Center';\n ports[0].horizontalAlignment = 'Center';\n }\n return ports;\n}\n\n //Initializes diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '600px', snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n //Configure the data source\n dataSourceSettings: {\n id: 'Name', parentId: 'Category',\n dataManager: new ej.data.DataManager(window.artificialIntelligence),\n doBinding: function (nodeModel, data, diagram) {\n var nameKey = 'Name';\n nodeModel.annotations = [{ content: data[nameKey] }];\n }\n },\n //Configures the layout\n layout: {\n type: 'HierarchicalTree', orientation: 'RightToLeft',\n verticalAlignment: 'Center', horizontalAlignment: 'Center', verticalSpacing: 100,\n horizontalSpacing: -10\n },\n //Enables zoom pan tool \n tool: ej.diagrams.DiagramTools.ZoomPan,\n //Sets the default values of a Node\n getNodeDefaults: function (obj, diagram) {\n obj.width = 120;\n obj.style = { fill: '#034d6d', strokeWidth: 1 };\n var key = 'branch';\n //set the shape of the Node.\n if (obj.data[key] === 'root') {\n obj.shape = { type: 'Basic', shape: 'Ellipse' };\n obj.height = 120;\n }\n else {\n obj.shape = {\n type: 'Native',\n content: '<svg width=\"120\" height=\"61\"><g><line x1=\"0\" x2=\"120\" y1=\"60\" y2=\"60\" stroke-width=\"1\" stroke= \"black\"></line>' +\n '<rect x=\"0\" y=\"0\" width=\"120\" height=\"60\" fill=\"transparent\" stroke=\"none\"></rect></g></svg>'\n };\n obj.style.strokeWidth = 0;\n obj.height = 60;\n }\n //Set ports and annotations\n obj.ports = getPorts(obj.data[key] === 'root');\n var annotation = obj.annotations[0];\n if (obj.data[key] !== 'root') {\n annotation.offset = { y: 1 };\n annotation.verticalAlignment = 'Bottom';\n annotation.margin = { bottom: 10 };\n }\n else {\n annotation.style = { color: 'white' };\n }\n return obj;\n },\n //Sets the default values of a Connector\n getConnectorDefaults: function (connector, diagram) {\n connector.type = 'Bezier';\n connector.sourcePortID = 'port1';\n connector.targetPortID = 'port2';\n connector.targetDecorator = { shape: 'None' };\n return connector;\n },\n });\n diagram.appendTo('#diagram');\n \n"}

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Просмотреть файл

@ -32,7 +32,7 @@ function createNode(Id, offsetX, offsetY, className) {
node.offsetY = offsetY; node.offsetY = offsetY;
node.shape = { node.shape = {
type: "UmlClassifier", type: "UmlClassifier",
class: { classShape: {
name: className name: className
}, },
classifier: "Class" classifier: "Class"
@ -52,7 +52,7 @@ this.default = function() {
id: "Patient", id: "Patient",
shape: { shape: {
type: "UmlClassifier", type: "UmlClassifier",
class: { classShape: {
name: "Patient", name: "Patient",
attributes: [ attributes: [
createProperty("accepted", "Date"), createProperty("accepted", "Date"),
@ -71,7 +71,7 @@ this.default = function() {
id: "Doctor", id: "Doctor",
shape: { shape: {
type: "UmlClassifier", type: "UmlClassifier",
class: { classShape: {
name: "Doctor", name: "Doctor",
attributes: [ attributes: [
createProperty("specialist", "String[*]"), createProperty("specialist", "String[*]"),
@ -87,7 +87,7 @@ this.default = function() {
id: "Person", id: "Person",
shape: { shape: {
type: "UmlClassifier", type: "UmlClassifier",
class: { classShape: {
name: "Person", name: "Person",
attributes: [ attributes: [
createProperty("name", "Name"), createProperty("name", "Name"),
@ -104,7 +104,7 @@ this.default = function() {
id: "Hospital", id: "Hospital",
shape: { shape: {
type: "UmlClassifier", type: "UmlClassifier",
class: { classShape: {
name: "Hospital", name: "Hospital",
attributes: [ attributes: [
createProperty("name", "Name"), createProperty("name", "Name"),
@ -122,7 +122,7 @@ this.default = function() {
id: "Department", id: "Department",
shape: { shape: {
type: "UmlClassifier", type: "UmlClassifier",
class: { classShape: {
name: "Department", name: "Department",
methods: [createMethods("getStaffCount", "Int")] methods: [createMethods("getStaffCount", "Int")]
}, },
@ -135,7 +135,7 @@ this.default = function() {
id: "Staff", id: "Staff",
shape: { shape: {
type: "UmlClassifier", type: "UmlClassifier",
class: { classShape: {
name: "Staff", name: "Staff",
attributes: [ attributes: [
createProperty("joined", "Date"), createProperty("joined", "Date"),

Просмотреть файл

@ -1 +1 @@
{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/diagram/venn-diagram/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"http://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"http://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}}\"><div class=\"control-section\">\n <div class=\"content-wrapper\" style=\"width: 100%\">\n <div id=\"diagram\"></div>\n </div>\n</div>\n\n\n</div></body></html>","index.js":"{{ripple}}/**\n * Venn Diagram\n */\nej.diagrams.Diagram.Inject();\nvar diagram;\n\n //Initialize shape\n var shape = { type: 'Basic', shape: 'Ellipse' };\n //Initialize Diagram Nodes\n var nodes = [\n {\n id: 'datascience', offsetX: 450, offsetY: 232, width: 400, height: 400, annotations: [{\n content: 'Data Science',\n offset: { x: 0.5, y: 0.10 }\n }], shape: shape, style: { fill: '#f2f2f2', strokeColor: '#acacac', strokeWidth: 1 }\n },\n {\n id: 'trignometry', offsetX: 515, offsetY: 205, width: 200, height: 200, shape: shape, annotations: [{\n content: 'Trignometry',\n offset: { x: 0.5, y: 0.4 }, horizontalAlignment: 'Left'\n }, { content: 'Thesis', offset: { x: 0.45, y: 0.8 } }],\n style: { fill: '#feb42f', opacity: 0.2, strokeColor: '#feb42f' }\n },\n {\n id: 'expertise', offsetX: 445, offsetY: 290, width: 200, height: 200, shape: shape,\n annotations: [{ content: 'Expertise', offset: { x: 0.5, y: 0.7 }, verticalAlignment: 'Top' }],\n style: { fill: '#6acbd4', opacity: 0.2, strokeColor: '#6acbd4' }\n },\n {\n id: 'programming', offsetX: 388, offsetY: 205, width: 200, height: 200, annotations: [{\n content: 'Programming ',\n offset: { x: 0.5, y: 0.4 }, horizontalAlignment: 'Right'\n }, {\n content: 'Assembly', offset: { x: 0.7, y: 0.35 },\n horizontalAlignment: 'Left'\n }, { content: 'Horizon', offset: { x: 0.7, y: 0.6 }, horizontalAlignment: 'Left' },\n { content: 'Middleware', offset: { x: 0.5, y: 0.8 } }], shape: shape,\n style: { fill: '#ed1d79', opacity: 0.2, strokeColor: '#ed1d79' }\n },\n ];\n //Initializes diagram control\n diagram = new ej.diagrams.Diagram({\n width: '100%', height: 580, nodes: nodes,\n snapSettings: { constraints: ej.diagrams.SnapConstraints.None }, tool: ej.diagrams.DiagramTools.ZoomPan\n });\n diagram.appendTo('#diagram');\n diagram.fitToPage();\n"} {"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/diagram/venn-diagram/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <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}}\"><div class=\"control-section\">\n <div class=\"content-wrapper\" style=\"width: 100%\">\n <div id=\"diagram\"></div>\n </div>\n</div>\n\n\n</div></body></html>","index.js":"{{ripple}}/**\n * Venn Diagram\n */\nej.diagrams.Diagram.Inject();\nvar diagram;\n\n //Initialize shape\n var shape = { type: 'Basic', shape: 'Ellipse' };\n //Initialize Diagram Nodes\n var nodes = [\n {\n id: 'datascience', offsetX: 450, offsetY: 232, width: 400, height: 400, annotations: [{\n content: 'Data Science',\n offset: { x: 0.5, y: 0.10 }\n }], shape: shape, style: { fill: '#f2f2f2', strokeColor: '#acacac', strokeWidth: 1 }\n },\n {\n id: 'trignometry', offsetX: 515, offsetY: 205, width: 200, height: 200, shape: shape, annotations: [{\n content: 'Trignometry',\n offset: { x: 0.5, y: 0.4 }, horizontalAlignment: 'Left'\n }, { content: 'Thesis', offset: { x: 0.45, y: 0.8 } }],\n style: { fill: '#feb42f', opacity: 0.2, strokeColor: '#feb42f' }\n },\n {\n id: 'expertise', offsetX: 445, offsetY: 290, width: 200, height: 200, shape: shape,\n annotations: [{ content: 'Expertise', offset: { x: 0.5, y: 0.7 }, verticalAlignment: 'Top' }],\n style: { fill: '#6acbd4', opacity: 0.2, strokeColor: '#6acbd4' }\n },\n {\n id: 'programming', offsetX: 388, offsetY: 205, width: 200, height: 200, annotations: [{\n content: 'Programming ',\n offset: { x: 0.5, y: 0.4 }, horizontalAlignment: 'Right'\n }, {\n content: 'Assembly', offset: { x: 0.7, y: 0.35 },\n horizontalAlignment: 'Left'\n }, { content: 'Horizon', offset: { x: 0.7, y: 0.6 }, horizontalAlignment: 'Left' },\n { content: 'Middleware', offset: { x: 0.5, y: 0.8 } }], shape: shape,\n style: { fill: '#ed1d79', opacity: 0.2, strokeColor: '#ed1d79' }\n },\n ];\n //Initializes diagram control\n diagram = new ej.diagrams.Diagram({\n width: '100%', height: 580, nodes: nodes,\n snapSettings: { constraints: ej.diagrams.SnapConstraints.None }, tool: ej.diagrams.DiagramTools.ZoomPan\n });\n diagram.appendTo('#diagram');\n diagram.fitToPage();\n"}

Просмотреть файл

@ -1 +1 @@
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <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}}\"><div class=\"col-lg-8 control-section\">\n <div class=\"control_wrapper\">\n <!-- Initialize FileManager -->\n <div id=\"filemanager\"></div>\n </div>\n</div>\n<div class=\"col-lg-4 property-section\">\n <div id=\"property\" title=\"Properties\">\n <table id=\"property\" title=\"Properties\">\n <tbody>\n <tr>\n <td style=\"width: 50%\">\n <div>Toolbar</div>\n </td>\n <td style=\"width: 50%;padding-right: 10px;text-align: center;\">\n <div>\n <input id=\"toolbar\" type=\"checkbox\">\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n</div>\n<style>\n .control_wrapper {\n margin: auto;\n border: 1px solid #dddddd;\n border-radius: 3px;\n }\n\n .property-panel-table div {\n padding-left: 0;\n padding-top: 0;\n }\n\n #property tr {\n height: 50px;\n }\n\n #navPane,\n #tool {\n padding-top: 5px;\n }\n\n #navPane_toggle,\n #tool_toggle {\n width: 100px;\n }\n</style>\n\n\n</div></body></html>","index.js":"{{ripple}}// Sample for basic filemanager.\n\n var hostUrl = 'https://ng2jq.syncfusion.com/ej2services/';\n var fileObject = new ej.filemanager.FileManager({\n ajaxSettings: {\n url: hostUrl + 'api/FileManager/FileOperations',\n getImageUrl: hostUrl + 'api/FileManager/GetImage',\n uploadUrl: hostUrl + 'api/FileManager/Upload',\n downloadUrl: hostUrl + 'api/FileManager/Download'\n },\n toolbarSettings: { visible: true },\n navigationPaneSettings: { visible: false },\n view: 'LargeIcons'\n });\n fileObject.appendTo('#filemanager');\n\n checkBoxObj = new ej.buttons.CheckBox({ checked: true, change: onToolbarChange });\n checkBoxObj.appendTo('#toolbar');\n\n function onToolbarChange(args) {\n fileObject.toolbarSettings.visible = args.checked;\n }\n\n"} {"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <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}}\"><div class=\"col-lg-8 control-section\">\n <div class=\"control_wrapper\">\n <!-- Initialize FileManager -->\n <div id=\"filemanager\"></div>\n </div>\n</div>\n<div class=\"col-lg-4 property-section\">\n <div id=\"property\" title=\"Properties\">\n <table id=\"property\" title=\"Properties\">\n <tbody>\n <tr>\n <td style=\"width: 50%\">\n <div>Toolbar</div>\n </td>\n <td style=\"width: 50%;padding-right: 10px;text-align: center;\">\n <div>\n <input id=\"toolbar\" type=\"checkbox\">\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n</div>\n<style>\n .control_wrapper {\n margin: auto;\n border: 1px solid #dddddd;\n border-radius: 3px;\n }\n\n .property-panel-table div {\n padding-left: 0;\n padding-top: 0;\n }\n\n #property tr {\n height: 50px;\n }\n\n #navPane,\n #tool {\n padding-top: 5px;\n }\n\n #navPane_toggle,\n #tool_toggle {\n width: 100px;\n }\n</style>\n\n\n</div></body></html>","index.js":"{{ripple}}// Sample for basic filemanager.\n\n var hostUrl = 'https://ng2jq.syncfusion.com/ej2services/';\n var fileObject = new ej.filemanager.FileManager({\n ajaxSettings: {\n url: hostUrl + 'api/FileManager/FileOperations',\n getImageUrl: hostUrl + 'api/FileManager/GetImage',\n uploadUrl: hostUrl + 'api/FileManager/Upload',\n downloadUrl: hostUrl + 'api/FileManager/Download'\n },\n toolbarSettings: { visible: true },\n navigationPaneSettings: { visible: false },\n view: 'LargeIcons'\n });\n fileObject.appendTo('#filemanager');\n\n checkBoxObj = new ej.buttons.CheckBox({ checked: true, change: onToolbarChange });\n checkBoxObj.appendTo('#toolbar');\n\n function onToolbarChange(args) {\n fileObject.toolbarSettings.visible = args.checked;\n }\n"}

Просмотреть файл

@ -54,6 +54,9 @@
</div> </div>
<div id="description"> <div id="description">
The File Manager component is used to explore a file system through a web application, similar to the windows <p>The File Manager component is used to explore a file system through a web application, similar to the windows
explorer for windows. It supports the basic file operations such as create, rename, delete. explorer for windows. It supports the basic file operations such as create, rename, delete.</p>
<p><b>Note: </b>File Managers upload functionality is restricted in the online demo. If you need to test upload functionality, please install
<a target="_blank" href="https://www.syncfusion.com/downloads">Syncfusion Essential Studio </a>on your machine and run the demo.</p>
</div> </div>

Просмотреть файл

@ -20,5 +20,4 @@ this.default = function () {
function onToolbarChange(args) { function onToolbarChange(args) {
fileObject.toolbarSettings.visible = args.checked; fileObject.toolbarSettings.visible = args.checked;
} }
}; };

Просмотреть файл

@ -91,6 +91,9 @@
</div> </div>
<div id="description"> <div id="description">
The File Manager component is used to explore a file system through a web application, similar to the windows <p>The File Manager component is used to explore a file system through a web application, similar to the windows
explorer for windows. It supports all the basic file operations such as create, rename, delete and so on. explorer for windows. It supports all the basic file operations such as create, rename, delete and so on.</p>
<p><b>Note: </b>File Managers upload functionality is restricted in the online demo. If you need to test upload functionality, please install
<a target="_blank" href="https://www.syncfusion.com/downloads">Syncfusion Essential Studio </a>on your machine and run the demo.</p>
</div> </div>

Просмотреть файл

@ -18,4 +18,7 @@
<div id="description"> <div id="description">
<p>The File Manager component is used to explore a file system through a web application, similar to the windows explorer for windows. It supports all the basic file operations such as create, rename, delete, cut, copy, paste, upload, download and so on.</p> <p>The File Manager component is used to explore a file system through a web application, similar to the windows explorer for windows. It supports all the basic file operations such as create, rename, delete, cut, copy, paste, upload, download and so on.</p>
<p><b>Note: </b>File Managers upload functionality is restricted in the online demo. If you need to test upload functionality, please install
<a target="_blank" href="https://www.syncfusion.com/downloads">Syncfusion Essential Studio </a>on your machine and run the demo.</p>
</div> </div>

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Просмотреть файл

@ -0,0 +1,140 @@
<div class="control-section">
<div class="col-lg-8 control-section">
<div class="menu-control">
<div id='layoutcontainer' class="deviceLayout">
<div class="speaker">
<div class="camera"></div>
</div>
<div class="layout">
<div id="container">
<ul id="menu"></ul>
</div>
</div>
<div class="outerButton"> </div>
</div>
</div>
</div>
<div class="col-lg-4 menu-section property-section">
<table id="property" title="Properties" style="width: 100%">
<tbody>
<tr>
<td style="width: 50%;padding-top:10px">
<div>View Mode</div>
</td>
<td style="width: 50%;padding-top:10px">
<div style="max-width: 200px">
<select id="ddlViewMode">
<option value="mobile">Mobile</option>
<option value="tablet">Tablet</option>
<option value="desktop">Desktop</option>
</select>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="action-description">
<p>This sample demonstrates the hamburger mode in the <code>menu</code> component.</p>
</div>
<div id="description">
<p>Enabling the <code>hamburgerMode</code> property makes the <code>menu</code> component in adaptive view. By default, its shows header with
hamburger icon in <code>Horizontal</code> orientation.
</p>
<p>The menu shows on clicking hamburger icon. You can use the <code>open</code> and <code>close</code> methods to show / hide the menu programmatically.</p>
<p>
More information about Menu can be found in this
<a target="_blank" href="https://ej2.syncfusion.com/javascript/documentation/menu/es5-getting-started">
documentation</a> section.
</p>
</div>
<style>
/**
* ej2 Menu styles customization
*/
.deviceLayout #menu {
-ms-overflow-style: none;
scrollbar-width: none;
height: 363px;
}
.deviceLayout #menu::-webkit-scrollbar {
width: 0;
}
</style>
<!-- custom code start -->
<style>
/**
* ej2 Menu styles
*/
.menu-control {
text-align: center;
}
#layoutcontainer:not(.deviceLayout) {
margin-top: 45px;
}
.deviceLayout {
line-height: initial;
border: 1px solid black;
width: 285px;
height: 505px;
margin: auto;
margin-bottom: 15px;
border-radius: 28px;
position: relative;
background-image: linear-gradient(to top, #ffffff, #f5f5f5);
}
.deviceLayout.tabletview {
width: 767px;
}
.deviceLayout .speaker {
border: 1px solid black;
border-radius: 5px;
width: 20%;
height: 5px;
margin: 15px auto 0px auto;
position: relative;
}
.deviceLayout .outerButton {
width: 30px;
height: 30px;
border: 1px solid black;
border-radius: 50%;
position: absolute;
bottom: calc(0% + 10px);
left: calc(50% - 15px);
}
.deviceLayout .camera {
position: absolute;
left: calc(-15% - 10px);
top: -100%;
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid black;
}
.deviceLayout .layout {
border: 1px solid black;
margin: 20px 13px 0px 13px;
}
.layout #container {
height: 405px;
background-color: white;
overflow: hidden;
}
#header {
width: 100%;
background-color: #7b8cfb;
}
</style>
<!-- custom code end -->

152
src/menu/hamburger-mode.js Normal file
Просмотреть файл

@ -0,0 +1,152 @@
/**
* Hamburger Menu sample.
*/
this.default = function() {
// Menu items definition
var menuItems = [
{
"text": "Accessories",
"items": [
{
"text": "Mobile",
"id": "mobile",
"items": [
{
"text": "Headphones"
},
{
"text": "Batteries"
},
{
"text": "Memory Cards"
}
]
},
{
"text": "Laptops"
},
{
"text": "Desktop PC",
"items": [
{
"text": "Pendrives"
},
{
"text": "External Hard Disks"
}
]
},
{
"text": "Camera",
"items": [
{
"text": "Lens"
},
{
"text": "Tripods"
}
]
}
]
},
{
"text": "Fashion",
"items": [
{
"text": "Men"
},
{
"text": "Women"
}
]
},
{
"text": "Home & Living",
"items": [
{
"text": "Furniture"
},
{
"text": "Decor"
},
{
"text": "Smart Home Automation"
},
{
"text": "Dining & Serving"
}
]
},
{
"text": "Entertainment",
"items": [
{
"text": "Televisions"
},
{
"text": "Home Theatres"
},
{
"text": "Gaming Laptops"
}
]
},
{
"text": "Contact Us"
},
{
"text": "Help"
}
];
//Menu initialization
var menuObj = new ej.navigations.Menu(
{
// custom code start
created: function() {
if (ej.base.Browser.isDevice) {
ej.base.select('.property-section').remove();
ej.base.select('#layoutcontainer').removeAttribute('class');
ej.base.select('#layoutcontainer').removeAttribute('id');
ej.base.select('#menu').style.height = '363px';
}
},
// custom code end
items: menuItems,
//Enable the hamburger mode.
hamburgerMode: true,
//Enable the item show on click.
showItemOnClick: true,
// Increased duration for smooth animation.
animationSettings: { duration: 800 }
},
'#menu');
//DropDownList initialization
new ej.dropdowns.DropDownList(
{
value: 'mobile',
popupHeight: '200px',
change: function (args) {
var container = document.querySelector('#layoutcontainer');
switch (args.value) {
case 'mobile':
case 'tablet':
menuObj.close();
container.classList.add('deviceLayout');
container.classList[args.value === 'mobile' ? 'remove' : 'add']('tabletview');
menuObj.element.parentElement.classList[args.value === 'mobile' ? 'remove' : 'add']('e-menu-icon-right');
menuObj.hamburgerMode = true;
menuObj.showItemOnClick = true;
break;
case 'desktop':
container.classList.remove('deviceLayout', 'tabletview');
menuObj.hamburgerMode = false;
menuObj.showItemOnClick = false;
break;
}
}
},
'#ddlViewMode');
};

Просмотреть файл

@ -3,6 +3,7 @@
"directory": "menu", "directory": "menu",
"category": "Navigation", "category": "Navigation",
"ftName": "menu-bar", "ftName": "menu-bar",
"type":"update",
"samples": [ "samples": [
{ {
"url": "default", "url": "default",
@ -32,6 +33,14 @@
"api":{ "Menu": ["items", "fields", "template"], "FieldSettings": ["text", "children"] }, "api":{ "Menu": ["items", "fields", "template"], "FieldSettings": ["text", "children"] },
"description": "This example demonstrates how to customize Syncfusion Javascript ES5 Menu popup items by using templates." "description": "This example demonstrates how to customize Syncfusion Javascript ES5 Menu popup items by using templates."
}, },
{
"url": "hamburger-mode",
"name": "Hamburger Mode",
"category": "Menu Bar",
"type":"new",
"api":{ "Menu": ["hamburgerMode", "title"] },
"description": "This example demonstrates the hamburger mode of the Syncfusion Javascript ES5 Menu that enables the adaptive view."
},
{ {
"url": "api", "url": "api",
"name": "API", "name": "API",
@ -42,7 +51,7 @@
{ {
"url": "toolbar-integration", "url": "toolbar-integration",
"name": "Toolbar Integration", "name": "Toolbar Integration",
"category": "Menu Bar", "category": "Use Case",
"api":{ "Menu": ["items"] }, "api":{ "Menu": ["items"] },
"description": "This example demonstrates the real use case of the Syncfusion Javascript ES5 Menu in web application. It is integrated with toolbar component." "description": "This example demonstrates the real use case of the Syncfusion Javascript ES5 Menu in web application. It is integrated with toolbar component."
} }

Просмотреть файл

@ -42,6 +42,7 @@ this.default = function () {
magnificationToolbar.appendTo('#magnificationToolbar'); magnificationToolbar.appendTo('#magnificationToolbar');
viewer = new ej.pdfviewer.PdfViewer({ viewer = new ej.pdfviewer.PdfViewer({
enableToolbar: false, enableToolbar: false,
enableNavigationToolbar: false,
enableThumbnail: false, enableThumbnail: false,
documentPath: 'Hive_Succinctly.pdf', documentPath: 'Hive_Succinctly.pdf',
serviceUrl: 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer' serviceUrl: 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer'

Просмотреть файл

@ -40,6 +40,10 @@
stop-color: #a16ee5; stop-color: #a16ee5;
} }
#bootstrap4-gradient-chart stop {
stop-color: #a16ee5;
}
#highcontrast-gradient-chart stop { #highcontrast-gradient-chart stop {
stop-color: #79ECE4; stop-color: #79ECE4;
} }
@ -66,6 +70,10 @@
<stop offset="0"></stop> <stop offset="0"></stop>
<stop offset="1"></stop> <stop offset="1"></stop>
</linearGradient> </linearGradient>
<linearGradient id="bootstrap4-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="highcontrast-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1"> <linearGradient id="highcontrast-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop> <stop offset="0"></stop>
<stop offset="1"></stop> <stop offset="1"></stop>

Просмотреть файл

@ -40,6 +40,10 @@
stop-color: #a16ee5; stop-color: #a16ee5;
} }
#bootstrap4-gradient-chart stop {
stop-color: #a16ee5;
}
#highcontrast-gradient-chart stop { #highcontrast-gradient-chart stop {
stop-color: #79ECE4; stop-color: #79ECE4;
} }
@ -66,6 +70,10 @@
<stop offset="0"></stop> <stop offset="0"></stop>
<stop offset="1"></stop> <stop offset="1"></stop>
</linearGradient> </linearGradient>
<linearGradient id="bootstrap4-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="highcontrast-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1"> <linearGradient id="highcontrast-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop> <stop offset="0"></stop>
<stop offset="1"></stop> <stop offset="1"></stop>

Просмотреть файл

@ -34,6 +34,10 @@
stop-color: #a16ee5; stop-color: #a16ee5;
} }
#bootstrap4-gradient-chart stop {
stop-color: #a16ee5;
}
#highcontrast-gradient-chart stop { #highcontrast-gradient-chart stop {
stop-color: #79ECE4; stop-color: #79ECE4;
} }
@ -60,6 +64,10 @@
<stop offset="0"></stop> <stop offset="0"></stop>
<stop offset="1"></stop> <stop offset="1"></stop>
</linearGradient> </linearGradient>
<linearGradient id="bootstrap4-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="highcontrast-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1"> <linearGradient id="highcontrast-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop> <stop offset="0"></stop>
<stop offset="1"></stop> <stop offset="1"></stop>

Просмотреть файл

@ -33,6 +33,10 @@
#bootstrap-gradient-chart stop { #bootstrap-gradient-chart stop {
stop-color: #a16ee5; stop-color: #a16ee5;
} }
#bootstrap4-gradient-chart stop {
stop-color: #a16ee5;
}
#highcontrast-gradient-chart stop { #highcontrast-gradient-chart stop {
stop-color: #79ECE4; stop-color: #79ECE4;
@ -60,6 +64,10 @@
<stop offset="0"></stop> <stop offset="0"></stop>
<stop offset="1"></stop> <stop offset="1"></stop>
</linearGradient> </linearGradient>
<linearGradient id="bootstrap4-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="highcontrast-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1"> <linearGradient id="highcontrast-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop> <stop offset="0"></stop>
<stop offset="1"></stop> <stop offset="1"></stop>

Просмотреть файл

@ -32,6 +32,10 @@
stop-color: #a16ee5; stop-color: #a16ee5;
} }
#bootstrap4-gradient-chart stop {
stop-color: #a16ee5;
}
#highcontrast-gradient-chart stop { #highcontrast-gradient-chart stop {
stop-color: #79ECE4; stop-color: #79ECE4;
} }
@ -59,6 +63,10 @@
<stop offset="0"></stop> <stop offset="0"></stop>
<stop offset="1"></stop> <stop offset="1"></stop>
</linearGradient> </linearGradient>
<linearGradient id="bootstrap4-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop>
<stop offset="1"></stop>
</linearGradient>
<linearGradient id="highcontrast-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1"> <linearGradient id="highcontrast-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0"></stop> <stop offset="0"></stop>
<stop offset="1"></stop> <stop offset="1"></stop>

Просмотреть файл

@ -3772,7 +3772,7 @@ window.readonlyEventsData = [
Subject: 'Quality Analysis', Subject: 'Quality Analysis',
StartTime: new Date(currentTime + msPerHour * 1), StartTime: new Date(currentTime + msPerHour * 1),
EndTime: new Date(currentTime + msPerHour * 3), EndTime: new Date(currentTime + msPerHour * 3),
IsReadonly: true IsReadonly: false
}, { }, {
Id: 6, Id: 6,
Subject: 'Customer meeting – John Mackenzie', Subject: 'Customer meeting – John Mackenzie',

Просмотреть файл

@ -1 +1 @@
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/schedule/local-data/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <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}}\"><div class=\"control-section\">\n <div class=\"content-wrapper\">\n <div id=\"Schedule\">\n </div>\n </div>\n</div>\n\n</div></body></html>","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.zooEventsData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 1, 15),\n eventSettings: { dataSource: data },\n eventRendered: function (args) {\n window.applyCategoryColor(args, scheduleObj.currentView);\n }\n });\n scheduleObj.appendTo('#Schedule');\n"} {"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/schedule/local-data/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <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}}\"><div class=\"control-section\">\n <div class=\"content-wrapper\">\n <div id=\"Schedule\">\n </div>\n </div>\n</div>\n\n</div></body></html>","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.zooEventsData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n selectedDate: new Date(2018, 1, 15),\n eventSettings: { dataSource: data },\n eventRendered: function (args) {\n var categoryColor = args.data.CategoryColor;\n if (!args.element || !categoryColor) {\n return;\n }\n if (scheduleObj.currentView === 'Agenda') {\n (args.element.firstChild).style.borderLeftColor = categoryColor;\n } else {\n args.element.style.backgroundColor = categoryColor;\n }\n }\n });\n scheduleObj.appendTo('#Schedule');\n"}

Просмотреть файл

@ -15,4 +15,5 @@
<code>dataSource</code> property available within the <code>dataSource</code> property available within the
<code>eventSettings</code> needs to be assigned with the valid local JSON data. <code>eventSettings</code> needs to be assigned with the valid local JSON data.
</p> </p>
<p>The <code>eventRendered</code> event is used to customize the events. In this sample, background color of the event is changed based on the custom field 'CategoryColor'</p>
</div> </div>

Просмотреть файл

@ -6,7 +6,15 @@ this.default = function () {
selectedDate: new Date(2018, 1, 15), selectedDate: new Date(2018, 1, 15),
eventSettings: { dataSource: data }, eventSettings: { dataSource: data },
eventRendered: function (args) { eventRendered: function (args) {
window.applyCategoryColor(args, scheduleObj.currentView); var categoryColor = args.data.CategoryColor;
if (!args.element || !categoryColor) {
return;
}
if (scheduleObj.currentView === 'Agenda') {
(args.element.firstChild).style.borderLeftColor = categoryColor;
} else {
args.element.style.backgroundColor = categoryColor;
}
} }
}); });
scheduleObj.appendTo('#Schedule'); scheduleObj.appendTo('#Schedule');

Просмотреть файл

@ -1 +1 @@
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/schedule/read-only-events/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <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}}\"><div class=\"control-section\">\n <div class=\"content-wrapper\">\n <div id=\"Schedule\">\n </div>\n </div>\n</div>\n\n</div></body></html>","index.js":"{{ripple}} \n var data = new ej.base.extend([], window.readonlyEventsData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n eventSettings: { dataSource: data },\n views: ['Day', 'Week', 'WorkWeek', 'Month']\n });\n scheduleObj.appendTo('#Schedule');\n"} {"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/schedule/read-only-events/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <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}}\"><div class=\"control-section\">\n <div class=\"content-wrapper\">\n <div id=\"Schedule\">\n </div>\n </div>\n</div>\n\n</div></body></html>","index.js":"{{ripple}}\n var data = new ej.base.extend([], window.readonlyEventsData, null, true);\n var scheduleObj = new ej.schedule.Schedule({\n width: '100%',\n height: '650px',\n eventSettings: { dataSource: data },\n views: ['Day', 'Week', 'WorkWeek', 'Month'],\n popupOpen: onPopupOpen,\n dragStop: onDragStop,\n resizeStop: onResizeStop,\n actionBegin: onActionBegin\n });\n scheduleObj.appendTo('#Schedule');\n\n function onDragStop(args) {\n args.cancel = onEventCheck(args);\n }\n\n function onResizeStop(args) {\n args.cancel = onEventCheck(args);\n }\n\n function onActionBegin(args) {\n if ((args.requestType === 'eventCreate') || args.requestType === 'eventChange') {\n args.cancel = onEventCheck(args);\n }\n }\n\n function onPopupOpen(args) {\n if ((!args.target.classList.contains('e-appointment') && (args.type === 'QuickInfo')) || (args.type === 'Editor')) {\n args.cancel = onEventCheck(args);\n }\n }\n\n function onEventCheck(args) {\n var eventObj = args.data instanceof Array ? args.data[0] : args.data;\n return (eventObj.StartTime < new Date());\n }\n"}

Просмотреть файл

@ -1,10 +1,39 @@
this.default = function () { this.default = function () {
var data = new ej.base.extend([], window.readonlyEventsData, null, true); var data = new ej.base.extend([], window.readonlyEventsData, null, true);
var scheduleObj = new ej.schedule.Schedule({ var scheduleObj = new ej.schedule.Schedule({
width: '100%', width: '100%',
height: '650px', height: '650px',
eventSettings: { dataSource: data }, eventSettings: { dataSource: data },
views: ['Day', 'Week', 'WorkWeek', 'Month'] views: ['Day', 'Week', 'WorkWeek', 'Month'],
popupOpen: onPopupOpen,
dragStop: onDragStop,
resizeStop: onResizeStop,
actionBegin: onActionBegin
}); });
scheduleObj.appendTo('#Schedule'); scheduleObj.appendTo('#Schedule');
function onDragStop(args) {
args.cancel = onEventCheck(args);
}
function onResizeStop(args) {
args.cancel = onEventCheck(args);
}
function onActionBegin(args) {
if ((args.requestType === 'eventCreate') || args.requestType === 'eventChange') {
args.cancel = onEventCheck(args);
}
}
function onPopupOpen(args) {
if ((!args.target.classList.contains('e-appointment') && (args.type === 'QuickInfo')) || (args.type === 'Editor')) {
args.cancel = onEventCheck(args);
}
}
function onEventCheck(args) {
var eventObj = args.data instanceof Array ? args.data[0] : args.data;
return (eventObj.StartTime < new Date());
}
}; };

Просмотреть файл

@ -23,7 +23,7 @@
"url": "local-data", "url": "local-data",
"name": "Local Data", "name": "Local Data",
"category": "Data Binding", "category": "Data Binding",
"description": "This example for Essential JS2 Scheduler control shows the way of binding an array of JavaScript objects (local JSON datasource).", "description": "This example for Essential JS2 Scheduler control shows the way of binding an array of JavaScript objects (local JSON datasource) in Javascript platform.",
"api": { "api": {
"Schedule": [ "Schedule": [
"eventSettings", "eventSettings",
@ -35,7 +35,7 @@
"url": "remote-data", "url": "remote-data",
"name": "Remote Data", "name": "Remote Data",
"category": "Data Binding", "category": "Data Binding",
"description": "This example for Essential JS2 Scheduler control shows the way of binding remote services by using the DataManager.", "description": "This example for Essential JS2 Scheduler control shows the way of binding remote services by using the DataManager in Javascript platform.",
"api": { "api": {
"Schedule": [ "Schedule": [
"eventSettings", "eventSettings",
@ -697,7 +697,7 @@
"name": "Keyboard Interaction", "name": "Keyboard Interaction",
"category": "Miscellaneous", "category": "Miscellaneous",
"hideOnDevice": true, "hideOnDevice": true,
"description": "This example for Essential JS2 Scheduler control showcases the keyboard shortcuts available on scheduler.", "description": "This example for Essential JS2 Scheduler control showcases the keyboard shortcuts available on scheduler in Javascript platform.",
"api": { "api": {
"Schedule": [ "Schedule": [
"width", "width",
@ -712,7 +712,7 @@
"url": "events", "url": "events",
"name": "Events", "name": "Events",
"category": "Miscellaneous", "category": "Miscellaneous",
"description": "This example for Essential JS2 Scheduler control shows the client-side events that triggers on respective scheduler actions.", "description": "This example for Essential JS2 Scheduler control shows the client-side events that triggers on respective scheduler actions in Javascript platform.",
"api": { "api": {
"Schedule": [ "Schedule": [
"width", "width",

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Просмотреть файл

@ -12,7 +12,8 @@ this.default = function () {
}; };
// open new tab // open new tab
document.getElementById('newTab').setAttribute('href', location.href.split('#')[0] + 'sidebar/api/index.html'); var URL = location.href.replace(location.search,'');
document.getElementById('newTab').setAttribute('href', URL.split('#')[0] + 'sidebar/api/index.html');
// Toggle button for closeOnDocumentClick property // Toggle button for closeOnDocumentClick property
var positionButton = new ej.buttons.Button({ cssClass: 'e-info', isToggle: true }); var positionButton = new ej.buttons.Button({ cssClass: 'e-info', isToggle: true });

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Просмотреть файл

@ -4,7 +4,8 @@ this.default = function () {
defaultSidebar.appendTo('#default-sidebar'); defaultSidebar.appendTo('#default-sidebar');
//open new tab //open new tab
document.getElementById('newTab').setAttribute('href', location.href.split('#')[0] + 'sidebar/default/index.html'); var URL = location.href.replace(location.search,'');
document.getElementById('newTab').setAttribute('href', URL.split('#')[0] + 'sidebar/default/index.html');
//initialize the radio button //initialize the radio button
var leftbutton = new ej.buttons.RadioButton({ label: 'Left', name: 'state', checked: true, change: positionChange }); var leftbutton = new ej.buttons.RadioButton({ label: 'Left', name: 'state', checked: true, change: positionChange });

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Просмотреть файл

@ -14,7 +14,8 @@ this.default = function () {
rightbutton.appendTo('#right'); rightbutton.appendTo('#right');
//open new tab //open new tab
document.getElementById('newTab').setAttribute('href', location.href.split('#')[0] + 'sidebar/docking-sidebar/index.html'); var URL = location.href.replace(location.search,'');
document.getElementById('newTab').setAttribute('href', URL.split('#')[0] + 'sidebar/docking-sidebar/index.html');
function positionChange(args) { function positionChange(args) {
//radio button change event handler //radio button change event handler

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Просмотреть файл

@ -62,6 +62,27 @@
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="line"></div>
<h2 class="sidebar-heading"> Lorem Ipsum Dolor</h2>
<p class="paragraph-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="line"></div>
<h2 class="sidebar-heading"> Lorem Ipsum Dolor</h2>
<p class="paragraph-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="line"></div>
<h2 class="sidebar-heading"> Lorem Ipsum Dolor</h2>
<p class="paragraph-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div> </div>
</div> </div>
<!-- end of main-content --> <!-- end of main-content -->

Просмотреть файл

@ -14,7 +14,8 @@ this.default = function () {
sidebarMenu.toggle(); sidebarMenu.toggle();
}); });
// open new tab // open new tab
document.getElementById('newTab').setAttribute('href', location.href.split('#')[0] + 'sidebar/responsive-panel/index.html'); var URL = location.href.replace(location.search,'');
document.getElementById('newTab').setAttribute('href', URL.split('#')[0] + 'sidebar/responsive-panel/index.html');
var data = [ var data = [
{ {
nodeId: '01', nodeText: 'Installation', iconCss: 'icon-microchip icon', nodeId: '01', nodeText: 'Installation', iconCss: 'icon-microchip icon',

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Просмотреть файл

@ -22,7 +22,8 @@ this.default = function () {
listviewInstance.appendTo('#menulist'); listviewInstance.appendTo('#menulist');
// open new tab // open new tab
document.getElementById('newTab').setAttribute('href', location.href.split('#')[0] + 'sidebar/sidebar-list/index.html'); var URL = location.href.replace(location.search,'');
document.getElementById('newTab').setAttribute('href', URL.split('#')[0] + 'sidebar/sidebar-list/index.html');
// Expand the Sidebar // Expand the Sidebar
document.getElementById('hamburger').addEventListener('click', function () { document.getElementById('hamburger').addEventListener('click', function () {

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Просмотреть файл

@ -244,6 +244,13 @@
.sb-content-tab .center { .sb-content-tab .center {
display: block; display: block;
} }
@media(max-width: 500px) {
#header .right-header.list.support,
#header .right-header.list.tour {
display: none;
}
}
/* custom code end */ /* custom code end */
#sidebar-menu { #sidebar-menu {
margin-left: -1px; margin-left: -1px;

Просмотреть файл

@ -15,7 +15,8 @@ this.default = function () {
sidebarMenu.toggle(); sidebarMenu.toggle();
}); });
// open new tab // open new tab
document.getElementById('newTab').setAttribute('href', location.href.split('#')[0] + 'sidebar/sidebar-menu/index.html'); var URL = location.href.replace(location.search,'');
document.getElementById('newTab').setAttribute('href', URL.split('#')[0] + 'sidebar/sidebar-menu/index.html');
var mainMenuItems = [ var mainMenuItems = [
{ {
text: 'Overview', text: 'Overview',

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Просмотреть файл

@ -13,6 +13,7 @@ this.default = function () {
visible: true, visible: true,
trackLineSettings: { trackLineSettings: {
visible: true, visible: true,
color: '#fc5070',
width: 2 width: 2
} }
}, },

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Просмотреть файл

@ -3,7 +3,6 @@
"directory": "sparkline", "directory": "sparkline",
"category": "Data Visualization", "category": "Data Visualization",
"ftName": "sparkline", "ftName": "sparkline",
"type": "update",
"dataSourcePath":"src/sparkline/data-source.js", "dataSourcePath":"src/sparkline/data-source.js",
"samples": [ "samples": [
{ {
@ -39,7 +38,6 @@
"name": "Customization", "name": "Customization",
"description": "This demo for Essential JS2 Sparkline control depicts the properties required to customize the sparkline.", "description": "This demo for Essential JS2 Sparkline control depicts the properties required to customize the sparkline.",
"category": "Sparkline Charts", "category": "Sparkline Charts",
"type": "update",
"api": {} "api": {}
}, },
{ {

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Просмотреть файл

@ -1 +1 @@
{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/sparkline/spark-grid/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"http://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"http://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}}\"><div class=\"control-section\">\n <div id=\"sparkline\" class=\"row\">\n <div class=\"cols-sample-area\">\n <script type=\"text/x-template\" id=\"columnTemplate1\">\n <div id=\"spkline${EmployeeID}\" />\n </script>\n <script type=\"text/x-template\" id=\"columnTemplate2\">\n <div id=\"spkarea${EmployeeID}\" />\n </script>\n <script type=\"text/x-template\" id=\"columnTemplate3\">\n <div id=\"spkwl${EmployeeID}\" />\n </script>\n <div id=\"Grid\"></div>\n </div>\n </div>\n</div>\n\n\n\n\n\n","index.js":"{{ripple}}window.render = function (args) {\n for (var i = 0; i < 51; i++) {\n var line = new ej.charts.Sparkline({\n height: '50px',\n width: '150px'\n });\n line.appendTo('#spkline' + i);\n var column = new ej.charts.Sparkline({\n height: '50px',\n width: '150px',\n type: 'Column',\n });\n column.appendTo('#spkarea' + i);\n var winloss_1 = new ej.charts.Sparkline({\n height: '50px',\n width: '150px',\n type: 'WinLoss',\n });\n winloss_1.appendTo('#spkwl' + i);\n }\n};\nwindow.winloss = function () {\n var windata = [];\n var r;\n for (var i = 1; i <= 12; i++) {\n r = Math.random();\n if (r <= 0.2) {\n windata.push(-Math.random() * 10);\n }\n else {\n windata.push(Math.random() * 10);\n }\n }\n return windata;\n};\n\nwindow.getSparkData = function (type, count) {\n if (type === 'line') {\n return window.lineData[count];\n }\n else {\n return window.columnData[count];\n }\n};\n\n var grid = new ej.grids.Grid({\n dataSource: new ej.data.DataManager(window.orderdata).executeLocal(new ej.data.Query().take(20)),\n allowSelection: false,\n enableColumnVirtualization: false,\n enableHover: true,\n height: 400,\n columns: [\n { field: 'EmployeeID', headerText: 'ID', textAlign: 'Right', width: 40 },\n { field: 'CustomerID', headerText: 'Name', width: 60 },\n { field: 'OrderDate', headerText: 'Order Date', width: 65, format: 'yMd', textAlign: 'Right' },\n { field: 'ShipCountry', headerText: 'Ship Country', width: 70 },\n { headerText: 'Tax per annum', template: '#columnTemplate1', textAlign: 'Center', width: 100 },\n { headerText: 'One Day Index', template: '#columnTemplate2', textAlign: 'Center', width: 100 },\n { headerText: 'Year GR', template: '#columnTemplate3', textAlign: 'Center', width: 100 }\n ],\n });\n grid.appendTo('#Grid');\n\n setTimeout(function () {\n for (var i = 1; i < 21; i++) {\n var line = new ej.charts.Sparkline({\n height: '50px',\n width: '150px',\n lineWidth: 2,\n valueType: 'Numeric',\n fill: '#3C78EF',\n dataSource: getSparkData('line', i)\n });\n line.appendTo('#spkline' + i);\n var column = new ej.charts.Sparkline({\n height: '50px',\n width: '150px',\n type: 'Column',\n valueType: 'Numeric',\n fill: '#3C78EF',\n negativePointColor: '#f7a816',\n dataSource: getSparkData('column', i)\n });\n column.appendTo('#spkarea' + i);\n var winloss_1 = new ej.charts.Sparkline({\n height: '50px',\n width: '150px',\n type: 'WinLoss',\n valueType: 'Numeric',\n fill: '#3C78EF',\n tiePointColor: 'darkgray',\n negativePointColor: '#f7a816',\n dataSource: getSparkData('column', i)\n });\n winloss_1.appendTo('#spkwl' + i);\n }\n }, 500);\n"} {"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/sparkline/spark-grid/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <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}}\"><div class=\"control-section\">\n <div id=\"sparkline\" class=\"row\">\n <div class=\"cols-sample-area\">\n <script type=\"text/x-template\" id=\"columnTemplate1\">\n <div id=\"spkline${EmployeeID}\" />\n </script>\n <script type=\"text/x-template\" id=\"columnTemplate2\">\n <div id=\"spkarea${EmployeeID}\" />\n </script>\n <script type=\"text/x-template\" id=\"columnTemplate3\">\n <div id=\"spkwl${EmployeeID}\" />\n </script>\n <div id=\"Grid\"></div>\n </div>\n </div>\n</div>\n\n\n\n\n\n","index.js":"{{ripple}}window.render = function (args) {\n for (var i = 0; i < 51; i++) {\n var line = new ej.charts.Sparkline({\n height: '50px',\n width: '150px'\n });\n line.appendTo('#spkline' + i);\n var column = new ej.charts.Sparkline({\n height: '50px',\n width: '150px',\n type: 'Column',\n });\n column.appendTo('#spkarea' + i);\n var winloss_1 = new ej.charts.Sparkline({\n height: '50px',\n width: '150px',\n type: 'WinLoss',\n });\n winloss_1.appendTo('#spkwl' + i);\n }\n};\nwindow.winloss = function () {\n var windata = [];\n var r;\n for (var i = 1; i <= 12; i++) {\n r = Math.random();\n if (r <= 0.2) {\n windata.push(-Math.random() * 10);\n }\n else {\n windata.push(Math.random() * 10);\n }\n }\n return windata;\n};\n\nwindow.getSparkData = function (type, count) {\n if (type === 'line') {\n return window.lineData[count];\n }\n else {\n return window.columnData[count];\n }\n};\n\n var grid = new ej.grids.Grid({\n dataSource: new ej.data.DataManager(window.orderdata).executeLocal(new ej.data.Query().take(20)),\n allowSelection: false,\n enableColumnVirtualization: false,\n enableHover: true,\n height: 400,\n columns: [\n { field: 'EmployeeID', headerText: 'ID', textAlign: 'Right', width: 40 },\n { field: 'CustomerID', headerText: 'Name', width: 60 },\n { field: 'OrderDate', headerText: 'Order Date', width: 65, format: 'yMd', textAlign: 'Right' },\n { field: 'ShipCountry', headerText: 'Ship Country', width: 70 },\n { headerText: 'Tax per annum', template: '#columnTemplate1', textAlign: 'Center', width: 100 },\n { headerText: 'One Day Index', template: '#columnTemplate2', textAlign: 'Center', width: 100 },\n { headerText: 'Year GR', template: '#columnTemplate3', textAlign: 'Center', width: 100 }\n ],\n });\n grid.appendTo('#Grid');\n\n setTimeout(function () {\n for (var i = 1; i < 21; i++) {\n var line = new ej.charts.Sparkline({\n height: '50px',\n width: '150px',\n lineWidth: 2,\n valueType: 'Numeric',\n fill: '#3C78EF',\n dataSource: getSparkData('line', i)\n });\n line.appendTo('#spkline' + i);\n var column = new ej.charts.Sparkline({\n height: '50px',\n width: '150px',\n type: 'Column',\n valueType: 'Numeric',\n fill: '#3C78EF',\n negativePointColor: '#f7a816',\n dataSource: getSparkData('column', i)\n });\n column.appendTo('#spkarea' + i);\n var winloss_1 = new ej.charts.Sparkline({\n height: '50px',\n width: '150px',\n type: 'WinLoss',\n valueType: 'Numeric',\n fill: '#3C78EF',\n tiePointColor: 'darkgray',\n negativePointColor: '#f7a816',\n dataSource: getSparkData('column', i)\n });\n winloss_1.appendTo('#spkwl' + i);\n }\n }, 500);\n"}

Просмотреть файл

@ -34,7 +34,7 @@
{ {
"url": "multi-pane", "url": "multi-pane",
"name": "Candlestick and volume", "name": "Candlestick and volume",
"description":"This demo for Essential JS2 Stock Chart control shows the default rendering of Stock with candle series.", "description":"This demo for Essential JS2 Stock Chart control shows the default rendering of Stock with candlestick and volume.",
"category": "Stock Chart", "category": "Stock Chart",
"api": { "api": {
"RangeNavigator": [ "RangeNavigator": [
@ -151,7 +151,7 @@
{ {
"url": "disabled-navigator", "url": "disabled-navigator",
"name": "Hide Range Selector", "name": "Hide Range Selector",
"description":"This demo for Essential JS2 Stock Chart control shows the default rendering of Stock with period customization.", "description":"This demo for Essential JS2 Stock Chart control shows the default rendering of Stock with hide range selector.",
"category": "Stock Chart", "category": "Stock Chart",
"api": { "api": {
"RangeNavigator": [ "RangeNavigator": [
@ -164,7 +164,7 @@
{ {
"url": "disabled-period", "url": "disabled-period",
"name": "Hide Period Selector", "name": "Hide Period Selector",
"description":"This demo for Essential JS2 Stock Chart control shows the default rendering of Stock with period customization.", "description":"This demo for Essential JS2 Stock Chart control shows the default rendering of Stock with hide period selector.",
"category": "Stock Chart", "category": "Stock Chart",
"api": { "api": {
"RangeNavigator": [ "RangeNavigator": [

Двоичные данные
src/tree-grid/images/AndrewFuller.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 4.6 KiB

Двоичные данные
src/tree-grid/images/AnneDodsworth.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 6.0 KiB

Двоичные данные
src/tree-grid/images/DavidWilliam.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 5.1 KiB

Двоичные данные
src/tree-grid/images/JanetLeverling.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 5.8 KiB

Двоичные данные
src/tree-grid/images/LauraCallahan.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 4.9 KiB

Двоичные данные
src/tree-grid/images/MargaretPeacock.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 5.1 KiB

Двоичные данные
src/tree-grid/images/MichaelSuyama.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 4.9 KiB

Двоичные данные
src/tree-grid/images/NancyDavolio.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 6.0 KiB

Двоичные данные
src/tree-grid/images/RobertKing.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 4.8 KiB

Двоичные данные
src/tree-grid/images/RomeyWilson.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 4.9 KiB

Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше