v19.1.54 is released
This commit is contained in:
pipeline
Родитель
7e94ce8506
Коммит
c54aa8a29f
493
ReadMe.md
493
ReadMe.md
|
|
@ -1,414 +1,149 @@
|
|||
# Syncfusion JavaScript UI Controls samples
|
||||
# TypeScript Sample Browser
|
||||
|
||||
This repository contains the demos of [Syncfusion JavaScript UI Controls](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github&utm_campaign=ej2-samples). This is the best place to check our controls to get more insight about the usage of APIs.
|
||||
Repository for typescript sample browser.
|
||||
|
||||
This section guides you to use the Syncfusion JavaScript UI Controls samples in your applications.
|
||||
## Adding New Sample
|
||||
|
||||
* [Requirements to run the demo](#requirements-to-run-the-demo)
|
||||
* [Documentation](#documentation)
|
||||
* [License](#license)
|
||||
* [Using the samples](#using-the-samples)
|
||||
* [Controls Catalog](#controls-catalog)
|
||||
* [Support and Feedback](#support-and-feedback)
|
||||
Create your new folder in 'src' location and name the folder as control name for example “button” it is control name.
|
||||
|
||||
## Requirements to run the demo
|
||||
Add your sample order in the `src/common/sampleOrder.json` with corresponding category.
|
||||
|
||||
The samples requires the below requirements to run.
|
||||
Note: Do not use whitespace at any cause in folder’s name. Use “-” instead of space.
|
||||
|
||||
* [Node.js](https://nodejs.org/en/)
|
||||
[Refer here](https://bitbucket.org/syncfusion/ej2-sample-browser/src/7740ab838973c7ebb3e970acb5246ff4c89ccd67/src/?at=master)
|
||||
|
||||
## Documentation
|
||||
### Configure the folder and sample
|
||||
|
||||
All controls documentation for the Syncfusion JavaScript UI controls can be found on [Syncfusion Help](https://ej2.syncfusion.com/documentation/?utm_source=github&utm_medium=listing&utm_campaign=ej2-samples). All API documentation can be found at the [API Reference](https://ej2.syncfusion.com/documentation/api?utm_source=github&utm_medium=listing&utm_campaign=ej2-samples).
|
||||
Create the “sample.json” file inside of your control folder. Create your sample html and ts file in same folder also name the html and ts files with same name.
|
||||
|
||||
## License
|
||||
Note: Do not use whitespace at any cause in file’s name. Use “-” instead of space.
|
||||
|
||||
Syncfusion JavaScript UI (Essential JS 2) controls library is available under the Syncfusion Essential Studio program, and can be licensed either under the Syncfusion Community License Program or the Syncfusion commercial license.
|
||||
[Refer here](https://bitbucket.org/syncfusion/ej2-sample-browser/src/7740ab838973c7ebb3e970acb5246ff4c89ccd67/src/button/?at=master)
|
||||
|
||||
To be qualified for the Syncfusion Community License Program you must have a gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusion’s terms and conditions.
|
||||
### Configure Sample JSON
|
||||
|
||||
Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options.
|
||||
Configure your sample json file as like below code snippet.
|
||||
|
||||
Under no circumstances can you use this product without (1) either a Community License or a commercial license and (2) without agreeing and abiding by Syncfusion’s license containing all terms and conditions.
|
||||
```
|
||||
{
|
||||
"name": "Button",
|
||||
"directory": "button",
|
||||
"category":"Editors",
|
||||
"samples" : [
|
||||
{"url":"default", "name": "Default Functionalities", "category":"Button"},
|
||||
{"url":"api", "name": "API", "category":"Button"},
|
||||
{"url":"repeatbutton", "name": "Repeat Button", "category":"Button", hideOnDevice:true },
|
||||
{"url":"events", "name": "Events", "category":"Button"},
|
||||
{"url":"rtl", "name": "RTL", "category":"Button"}
|
||||
]
|
||||
}
|
||||
|
||||
The Syncfusion license that contains the terms and conditions can be found at
|
||||
[https://www.syncfusion.com/content/downloads/syncfusion_license.pdf](https://www.syncfusion.com/content/downloads/syncfusion_license.pdf)
|
||||
```
|
||||
*Note: To exculde a sample in the device you need to set **hideOnDevice** as true for the sample json file.*
|
||||
|
||||
## Using the samples
|
||||
**Fields Description:**
|
||||
|
||||
### Installing
|
||||
_name :_ Its can be any string that you want show as a control name.
|
||||
|
||||
To install all dependent packages, use the below command
|
||||
_directory :_ Specifies that your sample directory name.
|
||||
|
||||
```bash
|
||||
npm install
|
||||
_category :_ Specify that your sample comes under which category.
|
||||
|
||||
_samples :_ Specify array of samples are in your control.
|
||||
|
||||
_samples.url :_ specifies the file name without extension.
|
||||
|
||||
_samples.name :_ Its can be any string that you want show as a sample name.
|
||||
|
||||
_samples.category :_ Specify that your sample comes under which category.
|
||||
|
||||
## Configure your dependency
|
||||
|
||||
Add your dependency in “package.json” file inside the dependencies.
|
||||
|
||||
Note: Here, `'*'` Specifies that install the latest published package form the online. `'*'` is recommended for Syncfusion packages.
|
||||
|
||||
```
|
||||
"dependencies": {
|
||||
"@syncfusion/ej2-base": "*",
|
||||
"@syncfusion/ej2-buttons": "*",
|
||||
"@syncfusion/ej2-lists": "*",
|
||||
"@syncfusion/ej2-grids": "*",
|
||||
"bootstrap": "^3.3.6",
|
||||
"crossroads": "^0.12.2",
|
||||
"hasher": "^1.2.0"
|
||||
},
|
||||
|
||||
```
|
||||
|
||||
### Building
|
||||
## Run the sample browser
|
||||
|
||||
To compile the source files, use the below command
|
||||
We can run the sample browser with two commands
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
1. **gulp _serve_** – run the sample browser alone.
|
||||
2. **gulp _watch_** – run the sample browser and monitor typescript as well. This will help at development time. If any changes detect means it will automatically compile and browser will reloaded.
|
||||
|
||||
```
|
||||
D:\dev\typescript\source\ej2-sample-browser>gulp serve
|
||||
```
|
||||
|
||||
### Testing
|
||||
|
||||
To test the source files, use the below command
|
||||
**Access URLs:**
|
||||
|
||||
```bash
|
||||
npm run test
|
||||
Local URL is works only in your machine.
|
||||
|
||||
```
|
||||
http://localhost:3000
|
||||
```
|
||||
|
||||
### Running
|
||||
External URL is works in all locally connected LAN. (You can use to see sample browser in mobile).
|
||||
|
||||
To run the samples, use the below command
|
||||
|
||||
```bash
|
||||
npm run serve
|
||||
```
|
||||
http://your-ip-address:3000
|
||||
```
|
||||
|
||||
## Controls Catalog
|
||||
Note: Here, The mentioned IP is your local machine IP Address.
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td colspan="3" rowspan="1">
|
||||
<b>GRIDS<b>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="src/grid">DataGrid</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/pivot-view">Pivot Table</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/tree-grid">Tree Grid</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="src/spreadsheet">Spredsheet</a>
|
||||
</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" rowspan="1">
|
||||
<b>DATA VISUALIZATION<b>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="src/chart">Charts</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/stock-chart">Stock Chart</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/circular-gauge">Circular Gauge</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="src/diagram">Diagram</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/heatmap-chart">HeatMap Chart</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/linear-gauge">Linear Gauge</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="src/maps">Maps</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/range-navigator">Range Selector</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/smith-chart">Smith Chart</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="src/barcode">Barcode Generator</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/sparkline">Sparkline Charts</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/treemap">TreeMap</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="src/bullet-chart">Bullet Chart</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/kanban">Kanban (preview)</a>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" rowspan="1">
|
||||
<b>EDITORS<b>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="src/rte">Rich Text Editor</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/document-editor">Word Processor</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/inplace-editor">In-place Editor</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" rowspan="1">
|
||||
<b>CALENDARS<b>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="src/schedule">Scheduler</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/calendar">Calendar</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/datepicker">DatePicker</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="src/daterangepicker">Date Range Picker</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/datetimepicker">DateTime Picker</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/timepicker">Time Picker</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="src/gantt">Gantt Chart</a>
|
||||
</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" rowspan="1">
|
||||
<b>BUTTONS<b>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="src/button">Button</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/button/button-group.ts">Button Group</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/button/dropdown-button.ts">Dropdown Menu</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="src/button/progress-button.ts">Progress Button</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/button/split-button.ts">Split Button</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/button/chips">Chips</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" rowspan="1">
|
||||
<b>DROPDOWNS<b>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="src/auto-complete">AutoComplete</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/combo-box">ComboBox</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/drop-down-list">Dropdown List</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="src/drop-down-tree">Dropdown Tree</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/multi-select">MultiSelect Dropdown</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/list-box">List Box</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" rowspan="1">
|
||||
<b>NAVIGATION<b>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="src/accordion">Accordion</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/context-menu">Context Menu</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/menu">Menu Bar</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="src/sidebar">Sidebar</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/tab">Tabs</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/toolbar">Toolbar</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="src/treeview">TreeView</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/file-manager">File Manager</a>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" rowspan="1">
|
||||
<b>INPUTS<b>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="src/textboxes">TextBox</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/maskedtextbox">Input Mask</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/numerictextbox">Numeric Textbox</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="src/button/radio-button.ts">Radio Button</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/button/check-box.ts">Checkbox</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/color-picker">Color Picker</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="src/uploader">File Upload</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/slider">Range Slider</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/button/switch.ts">Toggle Switch Button</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" rowspan="1">
|
||||
<b>LAYOUT<b>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="src/avatar">Avatar</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/card">Card</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/dialog">Dialog</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="src/listview">ListView</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/tooltip">Tooltip</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/splitter">Splitter</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="src/dashboard-layout">Dashboard Layout</a>
|
||||
</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" rowspan="1">
|
||||
<b>NOTIFICATIONS<b>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="src/badge">Badge</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/toast">Toast</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/progress-bar">Progress Bar</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" rowspan="1">
|
||||
<b>VIEWER<b>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="src/pdfviewer">PDF Viewer</a>
|
||||
</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" rowspan="1">
|
||||
<b>FORMS<b>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="src/form-validator">Form Validation</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="src/query-builder">Query Builder</a>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
# Plunker Guidelines
|
||||
|
||||
1. In import statements in html file for a sample the package subdirectory shouldn’t be mentioned. Please refer the link given below.
|
||||
|
||||
## Support and Feedback
|
||||
https://gitlab.syncfusion.com/essential-studio/ej2-samples/blob/development/src/grid/events.ts#L3
|
||||
|
||||
* For any other queries, reach our [Syncfusion support team](https://www.syncfusion.com/support/directtrac/incidents/newincident?utm_source=github&utm_medium=listing&utm_campaign=ej2-samples) or post the queries through the [community forums](https://www.syncfusion.com/forums?utm_source=github&utm_medium=listing&utm_campaign=ej2-samples).
|
||||
2. In Base component dom and util are not available in the customer end. So, please don’t use the same. Please refer the link below.
|
||||
|
||||
https://gitlab.syncfusion.com/essential-studio/ej2-samples/blob/development/src/grid/events.ts#L3
|
||||
|
||||
3. To add any icon in the samples use base64 font and don’t use any font files like ttf, woff, or svg externally. Please refer the link given below.
|
||||
|
||||
https://gitlab.syncfusion.com/essential-studio/ej2-samples/blob/development/src/toolbar/default.html#L5
|
||||
|
||||
For example:
|
||||
```
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'temp1';
|
||||
src:url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0gSIMAAAEoAAAAVmNtYXDnEOdVAAABiAAAADZnbHlmazsA9wAAAcgAAAAcaGVhZA3qwqgAAADQAAAANmhoZWEHmQNrAAAArAAAACRobXR4B+gAAAAAAYAAAAAIbG9jYQAOAAAAAAHAAAAABm1heHABDQAPAAABCAAAACBuYW1lv7gVOQAAAeQAAAINcG9zdD4ZCQ8AAAP0AAAANgABAAADUv9qAFoEAAAA//4D6gABAAAAAAAAAAAAAAAAAAAAAgABAAAAAQAAThBvMl8PPPUACwPoAAAAANVxP0wAAAAA1XE/TAAAAAAD6gMrAAAACAACAAAAAAAAAAEAAAACAAMAAQAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQP0AZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAANS/2oAWgNSAJYAAAABAAAAAAAABAAAAAPoAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACIAAAAEAAQAAQAA5wD//wAA5wD//wAAAAEABAAAAAEAAAAAAAAADgAAAAEAAAAAA+oDKwACAAA3IQECA+j+DMICaQAAAAAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAAUAAQABAAAAAAACAAcABgABAAAAAAADAAUADQABAAAAAAAEAAUAEgABAAAAAAAFAAsAFwABAAAAAAAGAAUAIgABAAAAAAAKACwAJwABAAAAAAALABIAUwADAAEECQAAAAIAZQADAAEECQABAAoAZwADAAEECQACAA4AcQADAAEECQADAAoAfwADAAEECQAEAAoAiQADAAEECQAFABYAkwADAAEECQAGAAoAqQADAAEECQAKAFgAswADAAEECQALACQBCyB0ZW1wMVJlZ3VsYXJ0ZW1wMXRlbXAxVmVyc2lvbiAxLjB0ZW1wMUZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAdABlAG0AcAAxAFIAZQBnAHUAbABhAHIAdABlAG0AcAAxAHQAZQBtAHAAMQBWAGUAcgBzAGkAbwBuACAAMQAuADAAdABlAG0AcAAxAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIBAgEDAAxhcnJvd2hlYWQtMDEAAAAA) format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
#font::after {
|
||||
content: "\e700";
|
||||
font-size: large
|
||||
}
|
||||
.icon {
|
||||
font-family: temp1;
|
||||
}
|
||||
</style>
|
||||
<div id="font" class="icon"></div>
|
||||
```
|
||||
|
||||
4. For loading json files in the sample use import statements instead of require. Please refer the link given below.
|
||||
|
||||
https://gitlab.syncfusion.com/essential-studio/ej2-samples/blob/development/src/calendar/internationalization.ts#L9
|
||||
|
||||
( For example: import * as testJson from '../common/cldr-data/supplemental/numberingSystems.json'; )
|
||||
|
||||
5. If a New Component is added to TypeScript Sample Browser it’s package dependency should be added to the config in src/sys.js file.
|
||||
|
||||
( For example: https://gitlab.syncfusion.com/essential-studio/ej2-samples/blob/development/src/sys.js#L19 )
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
{
|
||||
"tslint": [
|
||||
"./src/**/*.ts",
|
||||
"!./src/**/*.d.ts",
|
||||
"!./src/common/sampleList.ts",
|
||||
"!./spec/samplebrowser.spec.ts",
|
||||
"!./src/maps/MapData/*.ts",
|
||||
"!./src/common/sampleList.ts",
|
||||
"!./src/common/locale-string.ts",
|
||||
"./spec/**/*.ts"
|
||||
],
|
||||
"htmllint": [
|
||||
"./src/**/*.html"
|
||||
],
|
||||
"json": [
|
||||
"./**/*.json"
|
||||
],
|
||||
"styles": [
|
||||
"./styles/**/*.scss"
|
||||
],
|
||||
"sasslint": [
|
||||
"./styles/**/*.scss"
|
||||
],
|
||||
"samplejson": [
|
||||
"./src/**/*sample.json"
|
||||
],
|
||||
"watchTs": [
|
||||
"./src/**/*.ts",
|
||||
"./spec/**/*.ts"
|
||||
],
|
||||
"ts": [
|
||||
"./src/**/*.ts",
|
||||
"./spec/**/*.ts"
|
||||
],
|
||||
"dedupe": [
|
||||
"./src/**/*.ts"
|
||||
],
|
||||
"styleDependency": [
|
||||
"ej2"
|
||||
],
|
||||
"github": [
|
||||
"./src/**/*.{html,ts,json}",
|
||||
"./styles{,/**}",
|
||||
"./src/**/images{,/**}",
|
||||
"./src/common/lib{,/**}",
|
||||
"./src/common/cldr-data{,/**}",
|
||||
"./src/showcase{,/**}",
|
||||
"!./src/showcase/**/!(webpack.config)*.{js,json}",
|
||||
"!./styles/**/!(index)*.css",
|
||||
"./spec/**/*.ts",
|
||||
"./*.html",
|
||||
"./favicon.ico",
|
||||
"karma.conf.js",
|
||||
"package.json",
|
||||
"test-main.js",
|
||||
"tsconfig.json",
|
||||
"webpack.config.js",
|
||||
"!./googlec03dd4bc003151bc.html",
|
||||
"license"
|
||||
],
|
||||
"cssComponent": [
|
||||
"card",
|
||||
"avatar",
|
||||
"badge"
|
||||
],
|
||||
"platform": "typescript",
|
||||
"customNames": [
|
||||
"textbox",
|
||||
"uploader",
|
||||
"preload",
|
||||
"toolbar",
|
||||
"ajax",
|
||||
"popup",
|
||||
"treeview",
|
||||
null,
|
||||
"api",
|
||||
"maskedtextbox",
|
||||
"numerictextbox",
|
||||
"dialog",
|
||||
"blog",
|
||||
"draggable",
|
||||
"swipeable",
|
||||
"heatmap",
|
||||
"json",
|
||||
"tooltip",
|
||||
"datasource",
|
||||
"timeline",
|
||||
"inline",
|
||||
"drilldown",
|
||||
"sparkline",
|
||||
"treemap",
|
||||
"gauge",
|
||||
"bpmn",
|
||||
"fishbone",
|
||||
"venn",
|
||||
"custom",
|
||||
"code",
|
||||
"embedly",
|
||||
"image",
|
||||
"checkbox",
|
||||
"virtualization",
|
||||
"newsData",
|
||||
"tooltip-customization",
|
||||
"html-template",
|
||||
"listview",
|
||||
"customization",
|
||||
"html",
|
||||
"datepicker",
|
||||
"daterangepicker",
|
||||
"datetimepicker",
|
||||
"timepicker",
|
||||
"pareto",
|
||||
"bollinger",
|
||||
"doughnut",
|
||||
"hilo-open-close",
|
||||
"hilo",
|
||||
"stacked",
|
||||
"100",
|
||||
"iframe",
|
||||
"html5",
|
||||
"form",
|
||||
"validator",
|
||||
"lineapeninsular",
|
||||
"econmics",
|
||||
"Inplace Editor",
|
||||
"inplace-editor",
|
||||
"dropdowns",
|
||||
"skipChunk",
|
||||
"toast_sound",
|
||||
"pdf",
|
||||
"aspnet",
|
||||
"aspnetmvc",
|
||||
"javascript",
|
||||
"rtl",
|
||||
"rtl-data",
|
||||
"resizable",
|
||||
"fileexplorer",
|
||||
"filemanager",
|
||||
"kanban",
|
||||
"olap",
|
||||
"swimlane",
|
||||
"template",
|
||||
"wip",
|
||||
"validation",
|
||||
"editing",
|
||||
"progressbar"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[0317/111950:ERROR:tcp_listen_socket.cc(76)] Could not bind socket to 127.0.0.1:6004
|
||||
[0317/111950:ERROR:node_debugger.cc(86)] Cannot start debugger server
|
||||
|
|
@ -1 +0,0 @@
|
|||
<h1> 404 - Not Found </h1>
|
||||
|
|
@ -0,0 +1 @@
|
|||
google-site-verification: googlec03dd4bc003151bc.html
|
||||
181
gulpfile.js
181
gulpfile.js
|
|
@ -5,6 +5,9 @@ var path = require('path');
|
|||
var shelljs = global.shelljs || require('shelljs');
|
||||
var webpackGulp = require('webpack-stream');
|
||||
var webpack = require('webpack');
|
||||
var platform = 'typescript';
|
||||
var sampleList;
|
||||
var commonConfig = require('./config.json');
|
||||
|
||||
gulp.task('scripts', function (done) {
|
||||
var ts = require('gulp-typescript');
|
||||
|
|
@ -55,8 +58,182 @@ gulp.task('whole-bundle', function (done) {
|
|||
|
||||
gulp.task('build', function(done){
|
||||
var runSequence = require('run-sequence');
|
||||
runSequence('scripts', 'whole-bundle', done);
|
||||
runSequence('create-locale', 'scripts', 'whole-bundle', done);
|
||||
})
|
||||
var jsoncombine = require('gulp-jsoncombine');
|
||||
var elasticlunr = require('elasticlunr');
|
||||
var sampleOrder = '';
|
||||
var sampleList;
|
||||
|
||||
gulp.task('combine-samplelists', function (done) {
|
||||
combineSampleList(platform, false, done);
|
||||
});
|
||||
|
||||
function combineSampleList(platform, done) {
|
||||
var filename = platform === 'javascript' ? 'samplelist.js' : 'sampleList.ts';
|
||||
sampleOrder = JSON.parse(fs.readFileSync(`./src/common/sampleOrder.json`));
|
||||
var sampleListPath = `./src/common/`;
|
||||
if (sampleList && sampleList.length) {
|
||||
var controls = getControls();
|
||||
sampleOrder = getSampleOrder(controls);
|
||||
}
|
||||
return gulp.src(commonConfig.samplejson)
|
||||
.pipe(jsoncombine(`${filename}`, function (data) {
|
||||
var result = [];
|
||||
var subCategory = [];
|
||||
var intId = 0;
|
||||
var curDirectory = '';
|
||||
var addUID = function (pid, dt) {
|
||||
for (var i = 0; i < dt.length; i++) {
|
||||
dt[i].uid = pid + i;
|
||||
if (dt[i].hasOwnProperty('samples')) {
|
||||
curDirectory = dt[i].directory;
|
||||
subCategory = [];
|
||||
addUID('00' + intId + i, dt[i].samples);
|
||||
intId++;
|
||||
} else {
|
||||
var index = subCategory.indexOf(dt[i].category);
|
||||
if (index !== -1) {
|
||||
dt[i].order = index;
|
||||
} else {
|
||||
subCategory.push(dt[i].category);
|
||||
dt[i].order = subCategory.length - 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
var orderKeys = Object.keys(sampleOrder);
|
||||
for (var i = 0; i < orderKeys.length; i++) {
|
||||
console.log('Category : ' + orderKeys[i]);
|
||||
var components = sampleOrder[orderKeys[i]];
|
||||
for (var j = 0; j < components.length; j++) {
|
||||
console.log('Component : ' + components[j]);
|
||||
var currentData = getSamples(data, components[j]);
|
||||
currentData.order = i;
|
||||
result.push(currentData);
|
||||
}
|
||||
}
|
||||
addUID('0', result);
|
||||
generateSearchIndex(result, sampleListPath, platform);
|
||||
var configProps = JSON.parse(fs.readFileSync('./config.json', 'utf8'));
|
||||
var commonChunkSkip = configProps.cssComponent || [];
|
||||
var sList = `${platform === 'javascript' ?
|
||||
'window.samplesList =' : 'export let samplesList : any ='}` + JSON.stringify(result) + ';\n\n' +
|
||||
`${platform === 'typescript' ? `\n\n export let skipCommonChunk: string[] = ${JSON.stringify(commonChunkSkip)};` : ''}`;
|
||||
return new Buffer(sList);
|
||||
|
||||
}))
|
||||
.pipe(gulp.dest(sampleListPath))
|
||||
.on('error', function (e) {
|
||||
done(e);
|
||||
process.exit(1);
|
||||
});
|
||||
}
|
||||
|
||||
function getSamples(data, component) {
|
||||
var dataList = Object.keys(data);
|
||||
for (var i = 0; i < dataList.length; i++) {
|
||||
var currentData = data[dataList[i]];
|
||||
if (component === currentData.name) {
|
||||
return currentData;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function generateSearchIndex(sampleArray, samplelistpath, platform) {
|
||||
var searchindexpath = platform === 'javascript' ? `${samplelistpath}search-index.js` :
|
||||
`${samplelistpath}search-index.json`;
|
||||
elasticlunr.clearStopWords();
|
||||
var instance = elasticlunr(function () {
|
||||
this.addField('component');
|
||||
this.addField('name');
|
||||
this.setRef('uid');
|
||||
});
|
||||
for (let sampleCollection of sampleArray) {
|
||||
var component = sampleCollection.name;
|
||||
var directory = sampleCollection.directory;
|
||||
var puid = sampleCollection.uid;
|
||||
var hideOnDevice = sampleCollection.hideOnDevice;
|
||||
for (let sample of sampleCollection.samples) {
|
||||
sample.component = component;
|
||||
sample.dir = directory;
|
||||
sample.parentId = puid;
|
||||
sample.hideOnDevice = hideOnDevice;
|
||||
instance.addDoc(sample);
|
||||
}
|
||||
}
|
||||
fs.writeFileSync(searchindexpath, `${platform === 'javascript' ? 'window.searchIndex =' : ''}` + JSON.stringify(instance.toJSON()));
|
||||
}
|
||||
|
||||
gulp.task('create-locale', function (done) {
|
||||
createLocale(platform, done);
|
||||
});
|
||||
|
||||
function createLocale(platform, done) {
|
||||
var fileExt = platform === 'javascript' ? '.js' : '.ts';
|
||||
var localePath = `${platform === 'javascript' ? `./dist` : `./src/common`}`;
|
||||
if (!fs.existsSync(localePath)) {
|
||||
shelljs.mkdir('-p', localePath);
|
||||
}
|
||||
var localeJson = glob.sync('./src/**/locale.json', {
|
||||
silent: true
|
||||
});
|
||||
if (localeJson.length) {
|
||||
// baseUtil;
|
||||
var obj = {};
|
||||
for (var i = 0; i < localeJson.length; i++) {
|
||||
var compentLocale = JSON.parse(fs.readFileSync(localeJson[i]));
|
||||
obj = extend({}, obj, compentLocale, true);
|
||||
}
|
||||
fs.writeFileSync(`${localePath}/locale-string${fileExt}`,
|
||||
`${platform === 'javascript' ? 'window.Locale=' : 'export let Locale: Object='}` + JSON.stringify(obj) + ';');
|
||||
done();
|
||||
} else {
|
||||
fs.writeFileSync(`${localePath}/locale-string${fileExt}`,
|
||||
`${platform === 'javascript' ? 'window.Locale=' : 'export let Locale: Object={}'}`);
|
||||
done();
|
||||
}
|
||||
}
|
||||
|
||||
function extend(copied, first, second, deep) {
|
||||
var result = copied || {};
|
||||
var length = arguments.length;
|
||||
if (deep) {
|
||||
length = length - 1;
|
||||
}
|
||||
var _loop_1 = function (i) {
|
||||
if (!arguments_1[i]) {
|
||||
return 'continue';
|
||||
}
|
||||
var obj1 = arguments_1[i];
|
||||
Object.keys(obj1).forEach(function (key) {
|
||||
var src = result[key];
|
||||
var copy = obj1[key];
|
||||
var clone;
|
||||
if (deep && isObject(copy)) {
|
||||
clone = isObject(src) ? src : {};
|
||||
result[key] = extend({}, clone, copy, true);
|
||||
}
|
||||
else {
|
||||
result[key] = copy;
|
||||
}
|
||||
});
|
||||
};
|
||||
var arguments_1 = arguments;
|
||||
for (var i = 1; i < length; i++) {
|
||||
_loop_1(i);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function isObject(obj) {
|
||||
var objCon = {};
|
||||
return (!isNullOrUndefined(obj) && obj.constructor === objCon.constructor);
|
||||
}
|
||||
|
||||
function isNullOrUndefined(value) {
|
||||
return value === undefined || value === null;
|
||||
}
|
||||
|
||||
gulp.task('serve', ['build'], function (done) {
|
||||
var browserSync = require('browser-sync');
|
||||
|
|
@ -69,5 +246,3 @@ gulp.task('serve', ['build'], function (done) {
|
|||
};
|
||||
bs.init(options, done);
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -21,7 +21,8 @@
|
|||
<link href="src/common/lib/content/bootstrap.min.css" rel="stylesheet" />
|
||||
<link href="src/common/lib/highlightjs/styles/default.css" rel="stylesheet" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet"></link>
|
||||
<style rel="stylesheet" id="themelink"></style>
|
||||
<!-- Theme Reference -->
|
||||
<link id="themelink" href="styles/material.css" rel="stylesheet" />
|
||||
<link href="styles/index.css" rel="stylesheet" />
|
||||
<link href="src/common/lib/content/codemirror.css" rel="stylesheet"></link>
|
||||
<script src="src/skipChunk.js" type="text/javascript"></script>
|
||||
|
|
@ -153,7 +154,7 @@
|
|||
<span class='sb-download-text'>FREE TRIAL</span>
|
||||
</button>
|
||||
</a>
|
||||
<a href='https://www.npmjs.com/search?q=ej2-typescript' target="_blank">
|
||||
<a href='https://www.npmjs.com/search?q=ej2-typescript' target="_blank" style=" display: none; ">
|
||||
<button class='sb-npm-btn'>
|
||||
<img class="npm-svg" src="styles/images/NPM.svg" alt="npm icon"><span class="doc-npm-link">Install NPM</span>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@syncfusion/ej2-samples",
|
||||
"version": "18.4.30",
|
||||
"version": "19.1.54",
|
||||
"description": "Samples for Syncfusion Essential JS 2",
|
||||
"author": "Syncfusion Inc.",
|
||||
"license": "SEE LICENSE IN license",
|
||||
|
|
@ -51,8 +51,7 @@
|
|||
"@types/es6-promise": "0.0.28",
|
||||
"hasher": "^1.2.0",
|
||||
"moment-timezone": "0.5.13",
|
||||
"tributejs": "^3.7.3",
|
||||
"webpack-stream": "*"
|
||||
"tributejs": "^3.7.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"browser-sync": "2.11.2",
|
||||
|
|
@ -88,4 +87,4 @@
|
|||
"serve": "gulp serve",
|
||||
"test": "gulp test"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
User-agent: *
|
||||
Disallow: /ExportingServices/
|
||||
Disallow: /UG/
|
||||
Disallow: /ug/
|
||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -29,7 +29,7 @@ import * as booksData from './dataSource.json';
|
|||
let result: any = fuse.search(e.text);
|
||||
// declare object array for storing filtering results
|
||||
let data: { [key: string]: Object; }[] = [];
|
||||
// store the search result to the array
|
||||
// store the search result to the array
|
||||
for (let i: number = 0; i < result.length; i++) {
|
||||
data.push(result[i].item as any);
|
||||
}
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"col-lg-12 control-section\">\n <div class=\"sample_container\">\n <!-- Card Component -->\n <div class=\"e-card e-custom-card\">\n <div class=\"e-card-header\">\n <!-- xLarge Circle Avatar-->\n <div class=\"e-avatar e-avatar-circle e-avatar-xlarge\">\n <img src=\"//npmci.syncfusion.com/production/demos/src/avatar/images/pic02.png\" alt=\"profile_pic\">\n </div>\n  \n </div>\n <div class=\"e-card-header\">\n <div class=\"e-card-header-caption center\">\n <div class=\"e-card-header-title name\">Laura Callahan</div>\n <div class=\"e-card-sub-title\">Sales Coordinator</div>\n </div>\n </div>\n <div class=\"e-card-content\">\n <p class=\"avatar-content\"> Laura received a BA in psychology from the University of Washington. She has also completed a course\n in business French. She reads and writes French.</p>\n </div>\n </div>\n </div>\n</div>\n\n\n\n\n<style>\n .sample_container {\n max-width: 300px;\n margin: auto;\n min-height: 400px;\n }\n\n /* Card Customizations */\n\n .e-custom-card {\n position: relative;\n margin-top: 80px;\n overflow: visible;\n border-radius: 15px;\n box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);\n transition: 0.2s;\n border-width: 1px;\n padding: 1px;\n }\n\n .e-custom-card.e-card:hover {\n border-width: 1px;\n padding: 1px;\n }\n\n .e-custom-card :nth-child(2) .e-card-header-title.name {\n margin-top: 20px;\n }\n\n .sample_container p.avatar-content {\n line-height: 20px;\n font-family: inherit;\n }\n\n .e-custom-card .e-card-header {\n text-align: center;\n }\n\n .e-custom-card .e-avatar {\n font-size: 40px;\n position: absolute;\n top: calc(0% - 1.5em);\n left: calc(50% - 1.5em);\n box-shadow: 0 16px 28px -8px rgba(0, 0, 0, .36), 0 4px 15px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .2);\n }\n\n .e-card.e-custom-card :nth-child(3) {\n padding: 12px 0px 20px 0px;\n height: 130px;\n }\n\n .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title {\n font-size: 24px;\n font-weight: 500;\n line-height: normal;\n color: rgba(83, 101, 132, 0.65);\n text-shadow: 0 0 0.1px;\n }\n\n .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title {\n font-size: 12px;\n font-weight: 500;\n line-height: normal;\n color: rgba(86, 90, 97, 0.65);\n text-shadow: 0 0 0.1px;\n }\n\n .e-custom-card.e-card .e-card-content {\n overflow: visible;\n width: auto;\n margin: -5px 20px 0 20px;\n word-spacing: 1px;\n }\n\n .avatar-content {\n color: rgba(250, 200, 130, 0.6);\n margin: 0 auto;\n text-align: center;\n color: rgb(94, 94, 94);\n border: none;\n padding: 0;\n font-size: 14px;\n }\n\n .avatar-content {\n margin-bottom: 0;\n }\n\n .sample_container .name {\n margin-top: 10px;\n }\n\n .highcontrast .e-custom-card.e-card .avatar-content {\n color: rgba(255, 255, 255, 0.84);\n }\n\n .highcontrast .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title {\n color: rgba(255, 255, 255, 0.45);\n }\n\n .highcontrast .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title {\n color: rgba(255, 255, 255, 0.84);\n }\n</style>\n</div></body></html>","index.ts":"{{ripple}}\n/**\n * Sample for CSS Basic Layout Badge\n */\n\n \n//\n"}
|
||||
{"index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"col-lg-12 control-section\">\n <div class=\"sample_container\">\n <!-- Card Component -->\n <div class=\"e-card e-custom-card\">\n <div class=\"e-card-header\">\n <!-- xLarge Circle Avatar-->\n <div class=\"e-avatar e-avatar-circle e-avatar-xlarge\">\n <img src=\"//ej2.syncfusion.com/demos/src/avatar/images/pic02.png\" alt=\"profile_pic\">\n </div>\n \n </div>\n <div class=\"e-card-header\">\n <div class=\"e-card-header-caption center\">\n <div class=\"e-card-header-title name\">Laura Callahan</div>\n <div class=\"e-card-sub-title\">Sales Coordinator</div>\n </div>\n </div>\n <div class=\"e-card-content\">\n <p class=\"avatar-content\"> Laura received a BA in psychology from the University of Washington. She has also completed a course\n in business French. She reads and writes French.</p>\n </div>\n </div>\n </div>\n</div>\n\n\n\n\n<style>\n .sample_container {\n max-width: 300px;\n margin: auto;\n min-height: 400px;\n }\n\n /* Card Customizations */\n\n .e-custom-card {\n position: relative;\n margin-top: 80px;\n overflow: visible;\n border-radius: 15px;\n box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);\n transition: 0.2s;\n border-width: 1px;\n padding: 1px;\n }\n\n .e-custom-card.e-card:hover {\n border-width: 1px;\n padding: 1px;\n }\n\n .e-custom-card :nth-child(2) .e-card-header-title.name {\n margin-top: 20px;\n }\n\n .sample_container p.avatar-content {\n line-height: 20px;\n font-family: inherit;\n }\n\n .e-custom-card .e-card-header {\n text-align: center;\n }\n\n .e-custom-card .e-avatar {\n font-size: 40px;\n position: absolute;\n top: calc(0% - 1.5em);\n left: calc(50% - 1.5em);\n box-shadow: 0 16px 28px -8px rgba(0, 0, 0, .36), 0 4px 15px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .2);\n }\n\n .e-card.e-custom-card :nth-child(3) {\n padding: 12px 0px 20px 0px;\n height: 130px;\n }\n\n .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title {\n font-size: 24px;\n font-weight: 500;\n line-height: normal;\n color: rgba(83, 101, 132, 0.65);\n text-shadow: 0 0 0.1px;\n }\n\n .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title {\n font-size: 12px;\n font-weight: 500;\n line-height: normal;\n color: rgba(86, 90, 97, 0.65);\n text-shadow: 0 0 0.1px;\n }\n\n .e-custom-card.e-card .e-card-content {\n overflow: visible;\n width: auto;\n margin: -5px 20px 0 20px;\n word-spacing: 1px;\n }\n\n .avatar-content {\n color: rgba(250, 200, 130, 0.6);\n margin: 0 auto;\n text-align: center;\n color: rgb(94, 94, 94);\n border: none;\n padding: 0;\n font-size: 14px;\n }\n\n .avatar-content {\n margin-bottom: 0;\n }\n\n .sample_container .name {\n margin-top: 10px;\n }\n\n .highcontrast .e-custom-card.e-card .avatar-content {\n color: rgba(255, 255, 255, 0.84);\n }\n\n .highcontrast .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title {\n color: rgba(255, 255, 255, 0.45);\n }\n\n .highcontrast .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title {\n color: rgba(255, 255, 255, 0.84);\n }\n</style>\n</div></body></html>","index.ts":"{{ripple}}\n/**\n * Sample for CSS Basic Layout Badge\n */\n\n \n//\n"}
|
||||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"col-lg-12 control-section\">\n <div class=\"sample_container avatar-default\">\n <div class=\"avatar-block\">\n <div class=\"e-card e-avatar-showcase\">\n <div class=\"e-card-content\">\n <!-- xSmall Avatar-->\n <div class=\"e-avatar e-avatar-xsmall image\"></div>\n <!-- Small Avatar-->\n <div class=\"e-avatar e-avatar-small image\"></div>\n <!-- Avatar-->\n <div class=\"e-avatar image\"></div>\n <!-- Large Avatar-->\n <div class=\"e-avatar e-avatar-large image\"></div>\n <!-- xLarge Avatar-->\n <div class=\"e-avatar e-avatar-xlarge image\"></div>\n </div>\n <div class=\"e-card-content\">\n <div>Default</div>\n </div>\n </div>\n </div>\n <div class=\"circleAvatar avatar-block\">\n <div class=\"e-card e-avatar-showcase\">\n <div class=\"e-card-content\">\n <!-- xSmall Circle Avatar-->\n <div class=\"e-avatar e-avatar-xsmall e-avatar-circle image\"></div>\n <!-- Small Circle Avatar-->\n <div class=\"e-avatar e-avatar-small e-avatar-circle image\"></div>\n <!-- Circle Avatar-->\n <div class=\"e-avatar e-avatar-circle image\"></div>\n <!-- Large Circle Avatar-->\n <div class=\"e-avatar e-avatar-large e-avatar-circle image\"></div>\n <!-- xLarge Circle Avatar-->\n <div class=\"e-avatar e-avatar-xlarge e-avatar-circle image\"></div>\n </div>\n <div class=\"e-card-content\">\n <div>Circle</div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n\n\n<style>\n .control-section {\n overflow: auto;\n }\n\n /* Media Quries for various devices */\n\n @media only screen and (max-width: 965px) {\n .sample_container.avatar-default {\n max-width: 332px;\n margin: auto;\n margin-top: 0;\n }\n .circleAvatar {\n margin-top: 15px;\n }\n .e-avatar-showcase.e-card {\n width: 300px;\n }\n }\n\n @media only screen and (min-width: 965px) {\n .sample_container.avatar-default {\n max-width: 825px;\n margin: auto;\n margin-top: 70px;\n }\n .e-avatar-showcase.e-card {\n width: 400px;\n }\n }\n\n .sample_container.avatar-default .avatar-block {\n display: inline-block;\n vertical-align: top;\n }\n\n /* Assinging image for avatar in 'background-image' property */\n\n .e-avatar.image {\n background-image: url(//npmci.syncfusion.com/production/demos/src/avatar/images/pic01.png);\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n }\n\n /* Card Customization */\n\n .e-avatar-showcase.e-card {\n height: 140px;\n padding: 5px;\n margin: 5px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n border-radius: 8px;\n }\n\n .e-avatar-showcase.e-card .e-card-header .e-card-header-title {\n align-self: center;\n font-size: 18px;\n letter-spacing: 1px;\n text-shadow: #eaeaea 1px 1px 2px;\n }\n\n .e-avatar-showcase.e-card .e-card-header .e-card-sub-title {\n color: rgba(0, 0, 0, 0.75);\n white-space: pre-line;\n font-size: 14px;\n text-shadow: #eaeaea 1px 1px 2px;\n }\n\n .e-avatar-showcase.e-card .e-card-header .e-card-sub-title p {\n margin: 0;\n }\n\n .e-avatar-showcase.e-card .e-card-content {\n align-self: center;\n padding: 10px 0 10px 0;\n overflow: visible;\n }\n\n .bootstrap4 .e-avatar-showcase.e-card {\n box-shadow: none;\n }\n\n</style>\n</div></body></html>","index.ts":"{{ripple}}\n/**\n * Sample for CSS Basic Layout Badge\n */\n\n \n//\n"}
|
||||
{"index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"col-lg-12 control-section\">\n <div class=\"sample_container avatar-default\">\n <div class=\"avatar-block\">\n <div class=\"e-card e-avatar-showcase\">\n <div class=\"e-card-content\">\n <!-- xSmall Avatar-->\n <div class=\"e-avatar e-avatar-xsmall image\"></div>\n <!-- Small Avatar-->\n <div class=\"e-avatar e-avatar-small image\"></div>\n <!-- Avatar-->\n <div class=\"e-avatar image\"></div>\n <!-- Large Avatar-->\n <div class=\"e-avatar e-avatar-large image\"></div>\n <!-- xLarge Avatar-->\n <div class=\"e-avatar e-avatar-xlarge image\"></div>\n </div>\n <div class=\"e-card-content\">\n <div>Default</div>\n </div>\n </div>\n </div>\n <div class=\"circleAvatar avatar-block\">\n <div class=\"e-card e-avatar-showcase\">\n <div class=\"e-card-content\">\n <!-- xSmall Circle Avatar-->\n <div class=\"e-avatar e-avatar-xsmall e-avatar-circle image\"></div>\n <!-- Small Circle Avatar-->\n <div class=\"e-avatar e-avatar-small e-avatar-circle image\"></div>\n <!-- Circle Avatar-->\n <div class=\"e-avatar e-avatar-circle image\"></div>\n <!-- Large Circle Avatar-->\n <div class=\"e-avatar e-avatar-large e-avatar-circle image\"></div>\n <!-- xLarge Circle Avatar-->\n <div class=\"e-avatar e-avatar-xlarge e-avatar-circle image\"></div>\n </div>\n <div class=\"e-card-content\">\n <div>Circle</div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n\n\n<style>\n .control-section {\n overflow: auto;\n }\n\n /* Media Quries for various devices */\n\n @media only screen and (max-width: 965px) {\n .sample_container.avatar-default {\n max-width: 332px;\n margin: auto;\n margin-top: 0;\n }\n .circleAvatar {\n margin-top: 15px;\n }\n .e-avatar-showcase.e-card {\n width: 300px;\n }\n }\n\n @media only screen and (min-width: 965px) {\n .sample_container.avatar-default {\n max-width: 825px;\n margin: auto;\n margin-top: 70px;\n }\n .e-avatar-showcase.e-card {\n width: 400px;\n }\n }\n\n .sample_container.avatar-default .avatar-block {\n display: inline-block;\n vertical-align: top;\n }\n\n /* Assinging image for avatar in 'background-image' property */\n\n .e-avatar.image {\n background-image: url(//ej2.syncfusion.com/demos/src/avatar/images/pic01.png);\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n }\n\n /* Card Customization */\n\n .e-avatar-showcase.e-card {\n height: 140px;\n padding: 5px;\n margin: 5px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n border-radius: 8px;\n }\n\n .e-avatar-showcase.e-card .e-card-header .e-card-header-title {\n align-self: center;\n font-size: 18px;\n letter-spacing: 1px;\n text-shadow: #eaeaea 1px 1px 2px;\n }\n\n .e-avatar-showcase.e-card .e-card-header .e-card-sub-title {\n color: rgba(0, 0, 0, 0.75);\n white-space: pre-line;\n font-size: 14px;\n text-shadow: #eaeaea 1px 1px 2px;\n }\n\n .e-avatar-showcase.e-card .e-card-header .e-card-sub-title p {\n margin: 0;\n }\n\n .e-avatar-showcase.e-card .e-card-content {\n align-self: center;\n padding: 10px 0 10px 0;\n overflow: visible;\n }\n\n .bootstrap4 .e-avatar-showcase.e-card {\n box-shadow: none;\n }\n\n</style>\n</div></body></html>","index.ts":"{{ripple}}\n/**\n * Sample for CSS Basic Layout Badge\n */\n\n \n//\n"}
|
||||
|
|
@ -1 +1 @@
|
|||
{"datasource.ts":"/**\n * Sample for CSS Avatar listview\n */\n\n // Listview datasource with avatar and image source fields\n export let listData: { [key: string]: Object; }[] = [\n { id: 's_01', text: 'Robert', avatar: '', pic: 'pic04' },\n { id: 's_02', text: 'Nancy', avatar: 'N', pic: '' },\n { id: 's_05', text: 'John', pic: 'pic01', avatar: '' },\n { id: 's_03', text: 'Andrew', avatar: 'A', pic: '' },\n { id: 's_06', text: 'Margaret', pic: 'pic02', avatar: '' },\n { id: 's_07', text: 'Steven', pic: 'pic03', avatar: '' },\n { id: 's_08', text: 'Michael', avatar: 'M', pic: '' }\n ];","index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"col-lg-12 control-section\">\n <!-- Listview element -->\n <div id=\"letterAvatarList\"></div>\n</div>\n\n\n\n\n<style>\n .control-section {\n overflow: auto;\n }\n\n /* Listview Customization */\n\n #letterAvatarList {\n max-width: 350px;\n margin: auto;\n border: 1px solid #dddddd;\n border-radius: 3px;\n }\n\n #letterAvatarList .listWrapper {\n width: inherit;\n height: inherit;\n position: relative;\n }\n\n #letterAvatarList .e-list-header {\n height: 54px;\n }\n\n .material #letterAvatarList .e-list-header .e-text {\n line-height: 22px;\n }\n\n .fabric #letterAvatarList .e-list-header .e-text {\n line-height: 22px;\n }\n\n .bootstrap #letterAvatarList .e-list-header .e-text {\n line-height: 13px;\n }\n\n .highcontrast #letterAvatarList .e-list-header .e-text {\n line-height: 20px;\n }\n\n #letterAvatarList .e-list-item {\n cursor: pointer;\n height: 50px;\n line-height: 44px;\n border: 0;\n }\n\n /* Badge Positioning */\n\n #letterAvatarList .e-badge {\n margin-top: 12px;\n }\n\n #letterAvatarList .listWrapper .list-text {\n width: 60%;\n display: inline-block;\n vertical-align: middle;\n margin: 0 50px;\n }\n\n /* Avatar Positioning */\n\n #letterAvatarList .listWrapper .e-avatar {\n position: absolute;\n top: calc(100% - 40px);\n font-size: 10px;\n left: 5px;\n }\n\n /* Avatar Background Customization */\n\n #letterAvatarList .e-list-item:nth-child(1) .e-avatar {\n background-color: #039BE5;\n }\n\n #letterAvatarList .e-list-item:nth-child(3) .e-avatar {\n background-color: #E91E63;\n }\n\n #letterAvatarList .e-list-item:nth-child(5) .e-avatar {\n background-color: #009688;\n }\n\n /* Avatar images using 'background-image' property */\n\n .pic01 {\n background-image: url('//npmci.syncfusion.com/production/demos/src/avatar/images/pic01.png');\n }\n\n .pic02 {\n background-image: url('//npmci.syncfusion.com/production/demos/src/avatar/images/pic02.png');\n }\n\n .pic03 {\n background-image: url('//npmci.syncfusion.com/production/demos/src/avatar/images/pic03.png');\n }\n\n .pic04 {\n background-image: url('//npmci.syncfusion.com/production/demos/src/avatar/images/pic04.png');\n }\n\n .bootstrap4 #letterAvatarList .e-list-item {\n line-height: 30px;\n padding: 8px 16px 8px 16px;\n }\n\n .bootstrap4 #letterAvatarList .e-list-item .e-avatar {\n top: calc(100% - 48px);\n }\n\n</style>\n</div></body></html>","index.ts":"{{ripple}}\n/**\n * Sample for CSS Avatar listview\n */\nimport { ListView } from '@syncfusion/ej2-lists';\nimport { listData } from './datasource';\n\n \n\n let letterAvatarList: ListView = new ListView({\n // Bind listview datasource\n dataSource: listData,\n // Assign header title\n headerTitle: 'Contacts',\n // Enable header title\n showHeader: true,\n // Assign list-item template\n template: '<div class=\"listWrapper\">' +\n '${if(avatar!==\"\")}' +\n '<span class=\"e-avatar e-avatar-small e-avatar-circle\">${avatar}</span>' +\n '${else}' +\n '<span class=\"${pic} e-avatar e-avatar-small e-avatar-circle\"> </span>' +\n '${/if}' +\n '<span class=\"list-text\">' +\n '${text} </span> </div>',\n // Assign sorting order\n sortOrder: 'Ascending'\n });\n letterAvatarList.appendTo('#letterAvatarList');\n"}
|
||||
{"datasource.ts":"/**\n * Sample for CSS Avatar listview\n */\n\n // Listview datasource with avatar and image source fields\n export let listData: { [key: string]: Object; }[] = [\n { id: 's_01', text: 'Robert', avatar: '', pic: 'pic04' },\n { id: 's_02', text: 'Nancy', avatar: 'N', pic: '' },\n { id: 's_05', text: 'John', pic: 'pic01', avatar: '' },\n { id: 's_03', text: 'Andrew', avatar: 'A', pic: '' },\n { id: 's_06', text: 'Margaret', pic: 'pic02', avatar: '' },\n { id: 's_07', text: 'Steven', pic: 'pic03', avatar: '' },\n { id: 's_08', text: 'Michael', avatar: 'M', pic: '' }\n ];","index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"col-lg-12 control-section\">\n <!-- Listview element -->\n <div id=\"letterAvatarList\"></div>\n</div>\n\n\n\n\n<style>\n .control-section {\n overflow: auto;\n }\n\n /* Listview Customization */\n\n #letterAvatarList {\n max-width: 350px;\n margin: auto;\n border: 1px solid #dddddd;\n border-radius: 3px;\n }\n\n #letterAvatarList .listWrapper {\n width: inherit;\n height: inherit;\n position: relative;\n }\n\n #letterAvatarList .e-list-header {\n height: 54px;\n }\n\n .material #letterAvatarList .e-list-header .e-text {\n line-height: 22px;\n }\n\n .fabric #letterAvatarList .e-list-header .e-text {\n line-height: 22px;\n }\n\n .bootstrap #letterAvatarList .e-list-header .e-text {\n line-height: 13px;\n }\n\n .highcontrast #letterAvatarList .e-list-header .e-text {\n line-height: 20px;\n }\n\n #letterAvatarList .e-list-item {\n cursor: pointer;\n height: 50px;\n line-height: 44px;\n border: 0;\n }\n\n /* Badge Positioning */\n\n #letterAvatarList .e-badge {\n margin-top: 12px;\n }\n\n #letterAvatarList .listWrapper .list-text {\n width: 60%;\n display: inline-block;\n vertical-align: middle;\n margin: 0 50px;\n }\n\n /* Avatar Positioning */\n\n #letterAvatarList .listWrapper .e-avatar {\n position: absolute;\n top: calc(100% - 40px);\n font-size: 10px;\n left: 5px;\n }\n\n /* Avatar Background Customization */\n\n #letterAvatarList .e-list-item:nth-child(1) .e-avatar {\n background-color: #039BE5;\n }\n\n #letterAvatarList .e-list-item:nth-child(3) .e-avatar {\n background-color: #E91E63;\n }\n\n #letterAvatarList .e-list-item:nth-child(5) .e-avatar {\n background-color: #009688;\n }\n\n /* Avatar images using 'background-image' property */\n\n .pic01 {\n background-image: url('//ej2.syncfusion.com/demos/src/avatar/images/pic01.png');\n }\n\n .pic02 {\n background-image: url('//ej2.syncfusion.com/demos/src/avatar/images/pic02.png');\n }\n\n .pic03 {\n background-image: url('//ej2.syncfusion.com/demos/src/avatar/images/pic03.png');\n }\n\n .pic04 {\n background-image: url('//ej2.syncfusion.com/demos/src/avatar/images/pic04.png');\n }\n\n .bootstrap4 #letterAvatarList .e-list-item {\n line-height: 30px;\n padding: 8px 16px 8px 16px;\n }\n\n .bootstrap4 #letterAvatarList .e-list-item .e-avatar {\n top: calc(100% - 48px);\n }\n\n</style>\n</div></body></html>","index.ts":"{{ripple}}\n/**\n * Sample for CSS Avatar listview\n */\nimport { ListView } from '@syncfusion/ej2-lists';\nimport { listData } from './datasource';\n\n \n\n let letterAvatarList: ListView = new ListView({\n // Bind listview datasource\n dataSource: listData,\n // Assign header title\n headerTitle: 'Contacts',\n // Enable header title\n showHeader: true,\n // Assign list-item template\n template: '<div class=\"listWrapper\">' +\n '${if(avatar!==\"\")}' +\n '<span class=\"e-avatar e-avatar-small e-avatar-circle\">${avatar}</span>' +\n '${else}' +\n '<span class=\"${pic} e-avatar e-avatar-small e-avatar-circle\"> </span>' +\n '${/if}' +\n '<span class=\"list-text\">' +\n '${text} </span> </div>',\n // Assign sorting order\n sortOrder: 'Ascending'\n });\n letterAvatarList.appendTo('#letterAvatarList');\n"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -14,7 +14,7 @@ import { createElement } from '@syncfusion/ej2-base';
|
|||
'</span>Message Thread</li><li class="msg"><span class="e-acrdn-icons e-content-icon people"></span>Message Thread</li></div>';
|
||||
//Initialize Accordion component
|
||||
let acrdnObj: Accordion = new Accordion({
|
||||
// Assigning accordion data
|
||||
// Assigning accordion data
|
||||
items: [
|
||||
{ header: 'Robert', iconCss: 'e-people e-acrdn-icons', content: template, expanded: true },
|
||||
{ header: 'Kevin', iconCss: 'e-people e-acrdn-icons', content: template },
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"col-lg-12 control-section card-control-section basic_card_layout\">\n <div class=\"e-card-resize-container\">\n <div class=\"row\">\n <div class=\"row card-layout\">\n <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n <!-- Basic Card Layout -->\n <div tabindex=\"0\" class=\"e-card\" id=\"basic_card\">\n <div class=\"e-card-header\">\n <div class=\"e-card-header-caption\">\n <div class=\"e-card-header-title\">Debunking Five Data Science Myths</div>\n <div class=\"e-card-sub-title\">By John Doe | Jan 20, 2018 </div>\n </div>\n </div>\n <div class=\"e-card-content\">\n Tech evangelists are currently pounding their pulpits about all things AI, machine learning, analytics—anything that sounds\n like the future and probably involves lots of numbers. Many of these topics can be grouped under\n the intimidating term data science.\n </div>\n <div class=\"e-card-actions\">\n <button class=\"e-btn e-outline e-primary\">\n Read More\n </button>\n </div>\n </div>\n </div>\n <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n <!-- Weather Card Layout -->\n <div tabindex=\"0\" class=\"e-card\" id=\"weather_card\">\n <div class=\"e-card-header\">\n <div class=\"e-card-header-caption\">\n <div class=\"e-card-header-title\">Today</div>\n <div class=\"e-card-sub-title\"> New York - Scattered Showers.</div>\n </div>\n </div>\n <div class=\"e-card-header weather_report\">\n <div class=\"e-card-header-image\"></div>\n <div class=\"e-card-header-caption\">\n <div class=\"e-card-header-title\">1º / -4º</div>\n <div class=\"e-card-sub-title\">Chance for snow: 100%</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n<style>\n /* Weather Card Layout Customization */\n\n .card-control-section.basic_card_layout #weather_card.e-card {\n background-image: url('//npmci.syncfusion.com/production/demos/src/card/images/weather.png');\n }\n\n .card-control-section.basic_card_layout #weather_card.e-card .e-card-header-caption .e-card-header-title,\n .card-control-section.basic_card_layout #weather_card.e-card .e-card-header-caption .e-card-sub-title {\n color: white;\n }\n\n .highcontrast .card-control-section.basic_card_layout #weather_card.e-card .e-card-header.weather_report .e-card-header-image {\n border: none;\n }\n\n .card-control-section.basic_card_layout #weather_card.e-card .weather_report .e-card-header-caption {\n text-align: right;\n }\n\n .card-control-section.basic_card_layout #weather_card.e-card .e-card-header.weather_report .e-card-header-image {\n background-image: url('//npmci.syncfusion.com/production/demos/src/card/images/rainy.svg');\n }\n\n .card-control-section.basic_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\n width: 100%;\n padding: 10px;\n }\n\n .card-control-section.basic_card_layout .card-layout {\n margin: auto;\n max-width: 400px;\n }\n\n @media (min-width: 870px) {\n .card-control-section.basic_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\n width: 50%;\n }\n\n .card-control-section.basic_card_layout .card-layout {\n max-width: 870px;\n }\n }\n</style>\n</div></body></html>","index.ts":"{{ripple}}\n/**\n * Sample for CSS Basic Layout Cards.\n */\n\n \n //\n\n"}
|
||||
{"index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"col-lg-12 control-section card-control-section basic_card_layout\">\n <div class=\"e-card-resize-container\">\n <div class=\"row\">\n <div class=\"row card-layout\">\n <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n <!-- Basic Card Layout -->\n <div tabindex=\"0\" class=\"e-card\" id=\"basic_card\">\n <div class=\"e-card-header\">\n <div class=\"e-card-header-caption\">\n <div class=\"e-card-header-title\">Debunking Five Data Science Myths</div>\n <div class=\"e-card-sub-title\">By John Doe | Jan 20, 2018 </div>\n </div>\n </div>\n <div class=\"e-card-content\">\n Tech evangelists are currently pounding their pulpits about all things AI, machine learning, analytics—anything that sounds\n like the future and probably involves lots of numbers. Many of these topics can be grouped under\n the intimidating term data science.\n </div>\n <div class=\"e-card-actions\">\n <button class=\"e-btn e-outline e-primary\">\n Read More\n </button>\n </div>\n </div>\n </div>\n <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n <!-- Weather Card Layout -->\n <div tabindex=\"0\" class=\"e-card\" id=\"weather_card\">\n <div class=\"e-card-header\">\n <div class=\"e-card-header-caption\">\n <div class=\"e-card-header-title\">Today</div>\n <div class=\"e-card-sub-title\"> New York - Scattered Showers.</div>\n </div>\n </div>\n <div class=\"e-card-header weather_report\">\n <div class=\"e-card-header-image\"></div>\n <div class=\"e-card-header-caption\">\n <div class=\"e-card-header-title\">1º / -4º</div>\n <div class=\"e-card-sub-title\">Chance for snow: 100%</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n<style>\n /* Weather Card Layout Customization */\n\n .card-control-section.basic_card_layout #weather_card.e-card {\n background-image: url('//ej2.syncfusion.com/demos/src/card/images/weather.png');\n }\n\n .card-control-section.basic_card_layout #weather_card.e-card .e-card-header-caption .e-card-header-title,\n .card-control-section.basic_card_layout #weather_card.e-card .e-card-header-caption .e-card-sub-title {\n color: white;\n }\n\n .highcontrast .card-control-section.basic_card_layout #weather_card.e-card .e-card-header.weather_report .e-card-header-image {\n border: none;\n }\n\n .card-control-section.basic_card_layout #weather_card.e-card .weather_report .e-card-header-caption {\n text-align: right;\n }\n\n .card-control-section.basic_card_layout #weather_card.e-card .e-card-header.weather_report .e-card-header-image {\n background-image: url('//ej2.syncfusion.com/demos/src/card/images/rainy.svg');\n }\n\n .card-control-section.basic_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\n width: 100%;\n padding: 10px;\n }\n\n .card-control-section.basic_card_layout .card-layout {\n margin: auto;\n max-width: 400px;\n }\n\n @media (min-width: 870px) {\n .card-control-section.basic_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\n width: 50%;\n }\n\n .card-control-section.basic_card_layout .card-layout {\n max-width: 870px;\n }\n }\n</style>\n</div></body></html>","index.ts":"{{ripple}}\n/**\n * Sample for CSS Basic Layout Cards.\n */\n\n \n //\n\n"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,36 @@
|
|||
<div class="control-section">
|
||||
<div id="column-container" align='center'></div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample illustrates the USA climate with the month-wise data. Columns are differentiated using color codes based on
|
||||
the temperature ranges for better visualization. By toggling the legend items you can control the visibility of the
|
||||
columns within the ranges.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure the column type charts. Column type charts are used for comparing
|
||||
the frequency, count, total or average of data in different categories. Column segment color is applied based on their <code>y</code>
|
||||
value ranges by using <code>rangeColorSettings</code>.
|
||||
<p><code>rangeColorSettings</code> properties are,</p>
|
||||
<p><code>label</code> - Specify the name for the range mapping which will be displayed in the legend item.</p>
|
||||
<p><code>start</code> - Specify the start value of the color mapping range.</p>
|
||||
<p><code>end</code> - Specify the end value of the color mapping range.</p>
|
||||
<p><code>colors</code> - Specify the fill colors of point those lies on the given range, if multiple colors mentioned, then gradient will be applied.</p>
|
||||
</p>
|
||||
<p>
|
||||
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
|
||||
</p>
|
||||
<br>
|
||||
<p style="font-weight: 500">Injecting Module</p>
|
||||
<p>
|
||||
Chart component features are segregated into individual feature-wise modules. To use column series, we need to inject
|
||||
<code>ColumnSeries</code>, <code>Legend</code>, <code>Tooltip</code> and <code>Category</code>modules using <code>Chart.Inject(ColumnSeries, Category, Tooltip, Legend)</code> method.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
#control-container {
|
||||
padding: 0px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import {
|
||||
Chart, ColumnSeries, Category, Tooltip, Legend, ILoadedEventArgs, ChartTheme
|
||||
} from '@syncfusion/ej2-charts';
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
Chart.Inject(ColumnSeries, Category, Tooltip, Legend);
|
||||
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let chart: Chart = new Chart({
|
||||
primaryXAxis: { valueType: 'Category', majorGridLines: { width: 0 }, title: 'Months' },
|
||||
primaryYAxis: {
|
||||
lineStyle: { width: 0 },
|
||||
majorTickLines: { width: 0 },
|
||||
minorTickLines: { width: 0 },
|
||||
labelFormat: '{value}°C',
|
||||
title: 'Temperature'
|
||||
},
|
||||
chartArea: {
|
||||
border: {
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
dataSource: [
|
||||
{ x: "Jan", y: 6.96 },
|
||||
{ x: "Feb", y: 8.9 },
|
||||
{ x: "Mar", y: 12 },
|
||||
{ x: "Apr", y: 17.5 },
|
||||
{ x: "May", y: 22.1 },
|
||||
{ x: "June", y: 25 },
|
||||
{ x: "July", y: 29.4 },
|
||||
{ x: "Aug", y: 29.6 },
|
||||
{ x: "Sep", y: 25.8 },
|
||||
{ x: "Oct", y: 21.1 },
|
||||
{ x: "Nov", y: 15.5 },
|
||||
{ x: "Dec", y: 9.9 }
|
||||
|
||||
], xName: 'x', yName: 'y', type: 'Column',
|
||||
animation: { enable: false }, name: 'USA',
|
||||
cornerRadius: {
|
||||
topLeft: 10, topRight: 10
|
||||
},
|
||||
}
|
||||
],
|
||||
rangeColorSettings: [
|
||||
{
|
||||
label: "1°C to 10°C",
|
||||
start: 1,
|
||||
end: 10,
|
||||
colors: ["#FFFF99"]
|
||||
},
|
||||
{
|
||||
label: "11°C to 20°C",
|
||||
start: 11,
|
||||
end: 20,
|
||||
colors: ["#FFA500"]
|
||||
},
|
||||
{
|
||||
label: "21°C to 30°C",
|
||||
start: 21,
|
||||
end: 30,
|
||||
colors: ["#FF4040"]
|
||||
}
|
||||
],
|
||||
legendSettings: {
|
||||
mode: 'Range'
|
||||
},
|
||||
tooltip: {
|
||||
enable: true
|
||||
},
|
||||
title: "USA CLIMATE - WEATHER BY MONTH",
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.chart.theme = <ChartTheme>(selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
},
|
||||
width: Browser.isDevice ? '100%' : '60%',
|
||||
});
|
||||
chart.appendTo('#column-container');
|
||||
};
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
"directory": "chart",
|
||||
"category": "Data Visualization",
|
||||
"ftName": "chart",
|
||||
"type": "update",
|
||||
"samples": [
|
||||
{
|
||||
"url": "line",
|
||||
|
|
@ -1323,6 +1324,21 @@
|
|||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"url": "range-color-mapping",
|
||||
"name": "Range Color Mapping",
|
||||
"description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure range color mapping feature.",
|
||||
"category": "Chart Customization",
|
||||
"type": "new",
|
||||
"api": {
|
||||
"Chart": [
|
||||
"primaryXAxis",
|
||||
"series",
|
||||
"legendSettings",
|
||||
"rangeColorSettings"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"url": "print",
|
||||
"name": "Print",
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@ import { Browser, createElement, addClass, select } from '@syncfusion/ej2-base';
|
|||
change: change
|
||||
},
|
||||
'#scroll-palette');
|
||||
// custom code start
|
||||
// custom code start
|
||||
if (Browser.isDevice) {
|
||||
document.getElementById('colorpicker-control').classList.add('e-mobile-control');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -313,6 +313,7 @@ function renderSbPopups(): void {
|
|||
if (location.hash !== hashval) {
|
||||
sampleOverlay();
|
||||
location.hash = hashval;
|
||||
window.hashString = location.hash;
|
||||
setSelectList();
|
||||
}
|
||||
}
|
||||
|
|
@ -899,10 +900,10 @@ function loadTheme(theme: string): void {
|
|||
body.classList.add(theme);
|
||||
themeList.querySelector('.active').classList.remove('active');
|
||||
themeList.querySelector('#' + theme).classList.add('active');
|
||||
let doc: HTMLFormElement = <HTMLFormElement>document.getElementById('themelink');
|
||||
doc.setAttribute('href','./styles/' + theme + '.css');
|
||||
let ajax: Ajax = new Ajax('./styles/' + theme + '.css', 'GET', true);
|
||||
ajax.send().then((result: any) => {
|
||||
let doc: HTMLFormElement = <HTMLFormElement>document.getElementById('themelink');
|
||||
doc.innerHTML = result;
|
||||
selectedTheme = theme;
|
||||
//renderleftpane
|
||||
renderLeftPaneComponents();
|
||||
|
|
@ -930,7 +931,6 @@ function loadTheme(theme: string): void {
|
|||
hasher.initialized.add(parseHash);
|
||||
hasher.changed.add(parseHash);
|
||||
hasher.init();
|
||||
// doc.href = 'styles/' + selectedTheme + '.css';
|
||||
});
|
||||
}
|
||||
/**
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -10,7 +10,7 @@ import { select, Browser } from '@syncfusion/ej2-base';
|
|||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
|
||||
//ContextMenu items definition
|
||||
//ContextMenu items definition
|
||||
let menuItems: MenuItemModel[] = [
|
||||
{
|
||||
text: 'Cut',
|
||||
|
|
@ -46,7 +46,7 @@ import { select, Browser } from '@syncfusion/ej2-base';
|
|||
iconCss: 'e-cm-icons e-comment'
|
||||
}];
|
||||
|
||||
//ContextMenu model definition
|
||||
//ContextMenu model definition
|
||||
let menuOptions: ContextMenuModel = {
|
||||
target: '#contextmenutarget',
|
||||
items: menuItems,
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
"directory": "diagram",
|
||||
"category": "Data Visualization",
|
||||
"ftName": "diagram",
|
||||
"type": "update",
|
||||
"samples": [
|
||||
{
|
||||
"url": "default-functionalities",
|
||||
|
|
@ -50,7 +49,6 @@
|
|||
{
|
||||
"url": "custom-shapes",
|
||||
"name": "HTML Shapes",
|
||||
"type": "update",
|
||||
"description": "This sample demonstrates how to host a HTML elements inside a node. In this example, a Gauge control is hosted inside a HTML Node.",
|
||||
"category": "Getting Started"
|
||||
},
|
||||
|
|
@ -147,7 +145,6 @@
|
|||
{
|
||||
"url": "complex-hierarchical-tree",
|
||||
"name": "Complex Hierarchical Tree",
|
||||
"type": "update",
|
||||
"description": "This sample demonstrates a complex hierarchical template that is built from an external data source using complex hierarchical tree algorithm.",
|
||||
"category": "Automatic Layouts"
|
||||
},
|
||||
|
|
@ -238,7 +235,6 @@
|
|||
{
|
||||
"url": "virtualization",
|
||||
"name": "Virtualization",
|
||||
"type": "new",
|
||||
"description": "This sample demonstrates the default UI virtualization functionality. Scroll the diagram for UI virtualization.",
|
||||
"category": "Getting Started"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
"name": "Dialog",
|
||||
"directory": "dialog",
|
||||
"category":"Layout",
|
||||
"type": "update",
|
||||
"ftName": "modal-dialog",
|
||||
"samples" : [
|
||||
{"url":"default", "name": "Default Functionalities", "description":"The example demonstrates the default rendering of the JavaScript dialog, which supports modal and non-modal (modeless), built-in buttons, and more.", "category":"Dialog","api":{"Dialog":["header","content","showCloseIcon","buttons","closeOnEscape","target","width","animationSettings","open","close","visible","show","hide"] } },
|
||||
|
|
@ -11,7 +10,7 @@
|
|||
{"url":"template", "name": "Template", "description":"This example demonstrates how to customize user interface elements like the header, footer, and content of the JavaScript dialog control using a template.", "category":"Dialog","api":{"Dialog":["width","header","content","target","isModal","animationSettings","buttons","open","close","show","hide"] } },
|
||||
{"url":"dialog-contents-via-ajax", "description":"The example demonstrates how to load the content of the JavaScript dialog control from external sources such as a file or website using Ajax library.", "name": "Ajax Content", "category":"Dialog","api":{"Dialog":["header","showCloseIcon","width","target","animationSettings","open","close","content","show"] } },
|
||||
{"url":"draggable", "name": "Draggable", "description":"This example shows how to enable drag-and-drop actions in the JavaScript dialog control to help reposition the dialog efficiently.", "category":"Dialog","api":{"Dialog":["width","header","content","target","allowDragging","animationSettings","open","close","closeOnEscape"] }},
|
||||
{"url":"resizable", "type": "update", "description":"This example shows how to create resizable modal in the JavaScript dialog to change the size of a dialog efficiently and view its content more comfortably.", "name": "Resizable", "category":"Dialog","api":{"Dialog":["header","showCloseIcon","width","target","animationSettings","open","close","content","show","enableResize"] } },
|
||||
{"url":"resizable", "description":"This example shows how to create resizable modal in the JavaScript dialog to change the size of a dialog efficiently and view its content more comfortably.", "name": "Resizable", "category":"Dialog","api":{"Dialog":["header","showCloseIcon","width","target","animationSettings","open","close","content","show","enableResize"] } },
|
||||
{"url":"position", "name": "Positioning", "description":"This example demonstrates how to display the JavaScript dialog control at various built-in and custom positions.", "category":"Dialog","api":{"Dialog":["width","header","target","footerTemplate","open","close","closeOnEscape","position","showCloseIcon"] }},
|
||||
{"url":"animation", "name": "Animation", "description":"This example demonstrates how to open or close the JavaScript dialog with various animation effects, and how to customize the animation duration and delay.", "category":"Dialog","api":{"Dialog":["header","showCloseIcon","width","target","animationSettings","open","content","buttons"] } },
|
||||
{"url":"multiple-dialogs", "name": "Multiple Dialogs", "description":"This example shows how to display multiple dialogs sequentially and open multiple dialogs simultaneously for both modal and modeless JavaScript dialogs.", "category":"Dialog","api":{"Dialog":["width","header","target","animationSettings","open","close","closeOnEscape","buttons"] } },
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -17,19 +17,6 @@ import { Dialog, DialogUtility } from '@syncfusion/ej2-popups';
|
|||
'New', 'Open', 'Separator', 'Undo',
|
||||
'Redo',
|
||||
'Separator',
|
||||
{
|
||||
prefixIcon: 'sf-icon-InsertMergeField',
|
||||
tooltipText: 'Insert Field',
|
||||
text: onWrapText('Insert Field'),
|
||||
id: 'InsertField'
|
||||
},
|
||||
{
|
||||
prefixIcon: 'sf-icon-FinishMerge',
|
||||
tooltipText: 'Merge Document',
|
||||
text: onWrapText('Merge Document'),
|
||||
id: 'MergeDocument'
|
||||
},
|
||||
'Separator',
|
||||
'Image',
|
||||
'Table',
|
||||
'Hyperlink',
|
||||
|
|
@ -51,7 +38,20 @@ import { Dialog, DialogUtility } from '@syncfusion/ej2-popups';
|
|||
'RestrictEditing',
|
||||
'Separator',
|
||||
'FormFields',
|
||||
'UpdateFields'
|
||||
'UpdateFields',
|
||||
'Separator',
|
||||
{
|
||||
prefixIcon: 'sf-icon-InsertMergeField',
|
||||
tooltipText: 'Insert Field',
|
||||
text: onWrapText('Insert Field'),
|
||||
id: 'InsertField'
|
||||
},
|
||||
{
|
||||
prefixIcon: 'sf-icon-FinishMerge',
|
||||
tooltipText: 'Merge Document',
|
||||
text: onWrapText('Merge Document'),
|
||||
id: 'MergeDocument'
|
||||
},
|
||||
]
|
||||
});
|
||||
DocumentEditorContainer.Inject(Toolbar);
|
||||
|
|
|
|||
|
|
@ -496,7 +496,10 @@ L10n.load({
|
|||
'Insert Footnote': 'أدخل حاشية سفلية',
|
||||
'Insert Endnote': 'أدخل تعليق ختامي',
|
||||
'Footnote Tooltip': 'أدخل حاشية سفلية (Alt + Ctrl + F).',
|
||||
'Endnote Tooltip': 'أدخل تعليقًا ختاميًا (Alt + Ctrl + F).'
|
||||
'Endnote Tooltip': 'أدخل تعليقًا ختاميًا (Alt + Ctrl + F).',
|
||||
'AllCaps':'كل قبعات',
|
||||
'Change case Tooltip':'تغيير الحالة'
|
||||
|
||||
|
||||
},
|
||||
'colorpicker': {
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
"url": "default",
|
||||
"name": "Default Functionalities",
|
||||
"category": "DocumentEditor",
|
||||
"type": "update",
|
||||
"description": "The Document Editor component in JavaScript platform is used to create, edit, view, and print Word documents in web applications.",
|
||||
"api": {
|
||||
"DocumentEditor": [
|
||||
|
|
@ -125,6 +126,7 @@
|
|||
"url": "character-formatting",
|
||||
"name": "Character Formatting",
|
||||
"category": "Editing Features",
|
||||
"type": "update",
|
||||
"description": "The Document Editor supports character formatting such as bold, italic, underline, subscript, superscript, font color, and more in JavaScript platform.",
|
||||
"api": {
|
||||
"DocumentEditor": [
|
||||
|
|
@ -1225,6 +1227,7 @@
|
|||
{
|
||||
"url": "document-protection",
|
||||
"name": "Document Protection",
|
||||
"type": "update",
|
||||
"category": "Security",
|
||||
"description": "The Document Editor provides document protection supports to restrict the types of changes can be made to the document by a user/user group.",
|
||||
"api": {
|
||||
|
|
@ -1379,7 +1382,6 @@
|
|||
"url": "notes",
|
||||
"name": "Footnotes and Endnotes",
|
||||
"category": "References",
|
||||
"type":"new",
|
||||
"description": "The DocumentEditor provides support to insert footnotes and endnotes to provide more information about something in the document.",
|
||||
"api": {
|
||||
"DocumentEditor": [
|
||||
|
|
|
|||
|
|
@ -77,6 +77,8 @@
|
|||
"File-Upload": "Drag files here to upload",
|
||||
"Search-Empty": "No results found",
|
||||
"Search-Key": "Try with different keywords",
|
||||
"Filter-Empty": "No results found",
|
||||
"Filter-Key": "Try with different filter",
|
||||
"Sub-Folder-Error": "The destination folder is the subfolder of the source folder.",
|
||||
"Access-Denied": "Access Denied",
|
||||
"Access-Details": "You don't have permission to access this folder.",
|
||||
|
|
@ -85,7 +87,11 @@
|
|||
"Button-Keep-Both": "Keep both",
|
||||
"Button-Replace": "Replace",
|
||||
"Button-Skip": "Skip",
|
||||
"ApplyAll-Label": "Do this for all current items"
|
||||
"ApplyAll-Label": "Do this for all current items",
|
||||
"KB": "KB",
|
||||
"Access-Message": "{0} is not accessible. You need permission to perform the {1} action.",
|
||||
"Network-Error": "NetworkError: Failed to send on XMLHTTPRequest: Failed to load",
|
||||
"Server-Error": "ServerError: Invalid response from"
|
||||
}
|
||||
},
|
||||
"de": {
|
||||
|
|
@ -166,6 +172,8 @@
|
|||
"File-Upload": "Dateien zum Hochladen hierher ziehen",
|
||||
"Search-Empty": "Keine Ergebnisse gefunden",
|
||||
"Search-Key": "Versuchen Sie es mit anderen Stichwörtern",
|
||||
"Filter-Empty": "keine Ergebnisse gefunden",
|
||||
"Filter-Key": "Versuchen Sie es mit einem anderen Filter",
|
||||
"Sub-Folder-Error": "Der Zielordner ist der Unterordner des Quellordners.",
|
||||
"Access-Denied": "Zugriff verweigert",
|
||||
"Access-Details": "Sie haben keine Berechtigung, auf diesen Ordner zuzugreifen.",
|
||||
|
|
@ -174,7 +182,11 @@
|
|||
"Button-Keep-Both": "Behalte beides",
|
||||
"Button-Replace": "Ersetzen",
|
||||
"Button-Skip": "Überspringen",
|
||||
"ApplyAll-Label": "Mache das für alle aktuellen Artikel"
|
||||
"ApplyAll-Label": "Mache das für alle aktuellen Artikel",
|
||||
"KB": "KB",
|
||||
"Access-Message": "{0} ist nicht zugänglich. Sie benötigen die Berechtigung, um die Aktion {1} auszuführen.",
|
||||
"Network-Error": "NetworkError: Fehler beim Senden auf XMLHTTPRequest: Fehler beim Laden",
|
||||
"Server-Error": "ServerError: Ungültige Antwort von"
|
||||
}
|
||||
},
|
||||
"fr-CH": {
|
||||
|
|
@ -255,6 +267,8 @@
|
|||
"File-Upload": "Faites glisser les fichiers ici pour les télécharger",
|
||||
"Search-Empty": "Aucun résultat trouvé",
|
||||
"Search-Key": "Essayez avec des mots clés différents",
|
||||
"Filter-Empty": "Aucun résultat trouvé",
|
||||
"Filter-Key": "Essayez avec un filtre différent",
|
||||
"Sub-Folder-Error": "Le dossier de destination est le sous-dossier du dossier source.",
|
||||
"Access-Denied": "Accès refusé",
|
||||
"Access-Details": "Vous n'avez pas la permission d'accéder à ce dossier.",
|
||||
|
|
@ -263,7 +277,11 @@
|
|||
"Button-Keep-Both": "Garde les deux",
|
||||
"Button-Replace": "Remplacer",
|
||||
"Button-Skip": "Sauter",
|
||||
"ApplyAll-Label": "Faites ceci pour tous les articles en cours"
|
||||
"ApplyAll-Label": "Faites ceci pour tous les articles en cours",
|
||||
"KB": "Ko",
|
||||
"Access-Message": "{0} n'est pas accessible. Vous devez être autorisé à effectuer l'action {1}.",
|
||||
"Network-Error": "NetworkError: échec d'envoi sur XMLHTTPRequest: échec de chargement",
|
||||
"Server-Error": "ServerError: réponse non valide de"
|
||||
}
|
||||
},
|
||||
"ar": {
|
||||
|
|
@ -344,6 +362,8 @@
|
|||
"File-Upload": "اسحب الملفات هنا للتحميل",
|
||||
"Search-Empty": "لا توجد نتائج",
|
||||
"Search-Key": "جرب بكلمات رئيسية مختلفة",
|
||||
"Filter-Empty": "لم يتم العثور على نتائج",
|
||||
"Filter-Key": "حاول مع مرشح مختلف",
|
||||
"Sub-Folder-Error": "المجلد الوجهة هو المجلد الفرعي للمجلد المصدر.",
|
||||
"Access-Denied": "تم الرفض",
|
||||
"Access-Details": "ليس لديك إذن للوصول إلى هذا المجلد.",
|
||||
|
|
@ -352,7 +372,11 @@
|
|||
"Button-Keep-Both": "احتفظ بكليهما",
|
||||
"Button-Replace": "يحل محل",
|
||||
"Button-Skip": "تخطى",
|
||||
"ApplyAll-Label": "القيام بذلك لجميع العناصر الحالية"
|
||||
"ApplyAll-Label": "القيام بذلك لجميع العناصر الحالية",
|
||||
"KB": "كيلوبايت",
|
||||
"Access-Message": "{0} لا يمكن الوصول إليه. تحتاج إلى إذن لتنفيذ الإجراء {1}.",
|
||||
"Network-Error": "NetworkError: فشل الإرسال على XMLHTTPRequest: فشل التحميل",
|
||||
"Server-Error": "ServerError: استجابة غير صالحة من"
|
||||
}
|
||||
},
|
||||
"zh": {
|
||||
|
|
@ -433,6 +457,8 @@
|
|||
"File-Upload": "将文件拖到此处上传",
|
||||
"Search-Empty": "未找到结果",
|
||||
"Search-Key": "尝试使用不同的关键字",
|
||||
"Filter-Empty": "未找到結果",
|
||||
"Filter-Key": "嘗試使用其他過濾器",
|
||||
"Sub-Folder-Error": "目标文件夹是源文件夹的子文件夹。",
|
||||
"Access-Denied": "拒绝访问",
|
||||
"Access-Details": "您无权访问此文件夹。",
|
||||
|
|
@ -441,7 +467,11 @@
|
|||
"Button-Keep-Both": "保留两个",
|
||||
"Button-Replace": "更换",
|
||||
"Button-Skip": "跳跃",
|
||||
"ApplyAll-Label": "为所有当前项目执行此操作"
|
||||
"ApplyAll-Label": "为所有当前项目执行此操作",
|
||||
"KB": "KB",
|
||||
"Access-Message": "{0}無法訪問。您需要權限才能執行{1}操作。",
|
||||
"Network-Error": "NetworkError：无法在XMLHTTP上发送请求：无法加载",
|
||||
"Server-Error": "ServerError：来自的无效响应"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -14,7 +14,7 @@ import { Button } from '@syncfusion/ej2-buttons';
|
|||
// Initialize Reset button
|
||||
let buttonReset: Button = new Button({});
|
||||
buttonReset.appendTo('#resetbtn');
|
||||
// Initialize Custom placement
|
||||
// Initialize Custom placement
|
||||
let option: FormValidatorModel = {
|
||||
rules: {
|
||||
// Initialize the CustomPlacement.
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ import { Button } from '@syncfusion/ej2-buttons';
|
|||
let buttonReset: Button = new Button();
|
||||
buttonReset.appendTo('#resetbtn');
|
||||
|
||||
// Initialize Custom placement
|
||||
// Initialize Custom placement
|
||||
let options: FormValidatorModel = {
|
||||
customPlacement: (inputElement: HTMLElement, errorElement: HTMLElement) => {
|
||||
inputElement.parentElement.appendChild(errorElement);
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ let contextMenuOpen: EmitType<ContextMenuOpenEventArgs> = (args?: ContextMenuOpe
|
|||
resourceInfo: 'resources'
|
||||
},
|
||||
columns: [
|
||||
{ field: 'TaskID', width: 50 },
|
||||
{ field: 'TaskID', width: 60 },
|
||||
{ field: 'TaskName', headerText: 'Job Name', width: '250', clipMode: 'EllipsisWithTooltip' },
|
||||
{ field: 'StartDate' },
|
||||
{ field: 'EndDate' },
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
"directory": "gantt",
|
||||
"category": "Calendars",
|
||||
"ftName": "gantt",
|
||||
"type": "update",
|
||||
"samples": [
|
||||
{
|
||||
"url": "default",
|
||||
|
|
@ -144,7 +143,6 @@
|
|||
},
|
||||
"description": "This sample explains the Resource break down view in the Gantt chart that is how to visualize the list of tasks assigned to each resource in hierarchy manner."
|
||||
},
|
||||
|
||||
{
|
||||
"url": "resource-multi-taskbar",
|
||||
"name": "Resource Multi Taskbar",
|
||||
|
|
@ -186,11 +184,11 @@
|
|||
"height",
|
||||
"highlightWeekends",
|
||||
"workWeek",
|
||||
"labelSettings"
|
||||
"labelSettings"
|
||||
]
|
||||
},
|
||||
"description": "This sample demonstrates the way to bind the customizable array of working days in a week for project."
|
||||
},
|
||||
},
|
||||
{
|
||||
"url": "working-time-range",
|
||||
"name": "Working Time Range",
|
||||
|
|
@ -211,7 +209,6 @@
|
|||
},
|
||||
"description": "This example demonstrates how to customize the working time of a day for the whole project. We can define working time in different intervals."
|
||||
},
|
||||
|
||||
{
|
||||
"url": "holidays",
|
||||
"name": "Holidays",
|
||||
|
|
@ -271,7 +268,7 @@
|
|||
]
|
||||
},
|
||||
"description": "This example demonstrates how to highlight the different stages in the project development cycle just like bookmark."
|
||||
},
|
||||
},
|
||||
{
|
||||
"url": "indicators",
|
||||
"name": "Indicators",
|
||||
|
|
@ -568,33 +565,6 @@
|
|||
},
|
||||
"description": "This demo demonstrates the key combinations used to perform corresponding Gantt actions in Syncfusion Essential JS2 Gantt."
|
||||
},
|
||||
{
|
||||
"url": "split-tasks",
|
||||
"name": "Split Tasks",
|
||||
"category": "Gantt",
|
||||
"type": "new",
|
||||
"api": {
|
||||
"Gantt": [
|
||||
"dataSource",
|
||||
"taskFields",
|
||||
"treeColumnIndex",
|
||||
"height",
|
||||
"projectStartDate",
|
||||
"projectEndDate",
|
||||
"resourceFields",
|
||||
"resources",
|
||||
"resourceInfo",
|
||||
"editSettings",
|
||||
"toolbar",
|
||||
"splitterSettings",
|
||||
"allowSelection",
|
||||
"highlightWeekends",
|
||||
"workUnit",
|
||||
"enableContextMenu"
|
||||
]
|
||||
},
|
||||
"description": "This demo explains how to interrupt the already scheduled tasks using the Syncfusion TypeScript Gantt control."
|
||||
},
|
||||
{
|
||||
"url": "column-menu",
|
||||
"name": "Column Menu",
|
||||
|
|
@ -657,7 +627,7 @@
|
|||
"projectEndDate"
|
||||
]
|
||||
},
|
||||
"description": "This demo explains how to reorder the columns of Gantt by simple drag and drop of columns using Syncfusion Essential JS2 Gantt."
|
||||
"description": "This demo explains how to reorder the columns of Gantt by simple drag and drop of columns using Syncfusion Essential JS2 Gantt."
|
||||
},
|
||||
{
|
||||
"url": "resizing",
|
||||
|
|
@ -890,7 +860,7 @@
|
|||
},
|
||||
"description": "This demo demonstrates how to sort columns and clear sorted columns dynamically using the sortColumn and clearSorting method of Syncfusion Essential JS2 Gantt."
|
||||
},
|
||||
{
|
||||
{
|
||||
"url": "drag-and-drop",
|
||||
"name": "Row Drag And Drop",
|
||||
"category": "Gantt",
|
||||
|
|
@ -903,7 +873,7 @@
|
|||
"height",
|
||||
"highlightWeekends",
|
||||
"allowRowDragAndDrop",
|
||||
"splitterSettings",
|
||||
"splitterSettings",
|
||||
"labelSettings",
|
||||
"projectStartDate",
|
||||
"projectEndDate",
|
||||
|
|
@ -913,36 +883,61 @@
|
|||
"description": "This demo for Essential JS 2 Gantt control how the rows can be dragged within the gantt using the row drag-and-drop feature."
|
||||
},
|
||||
{
|
||||
"url": "virtual-scroll",
|
||||
"name": "Virtual Scrolling",
|
||||
"category": "Gantt",
|
||||
"type": "new",
|
||||
"api": {
|
||||
"Gantt": [
|
||||
"dataSource",
|
||||
"taskFields",
|
||||
"columns",
|
||||
"treeColumnIndex",
|
||||
"height",
|
||||
"highlightWeekends",
|
||||
"allowRowDragAndDrop",
|
||||
"splitterSettings",
|
||||
"labelSettings",
|
||||
"projectStartDate",
|
||||
"projectEndDate",
|
||||
"selectionSettings",
|
||||
"allowSorting",
|
||||
"allowFiltering",
|
||||
"allowRowDragAndDrop",
|
||||
"enableContextMenu",
|
||||
"enableVirtualization",
|
||||
"editSettings",
|
||||
"toolbar",
|
||||
"allowSelection",
|
||||
"timelineSettings"
|
||||
]
|
||||
},
|
||||
"description": "This demo for Essential JS 2 Gantt control how the rows can be dragged within the gantt using the row drag-and-drop feature."
|
||||
}
|
||||
"url": "split-tasks",
|
||||
"name": "Split Tasks",
|
||||
"category": "Gantt",
|
||||
"api": {
|
||||
"Gantt": [
|
||||
"dataSource",
|
||||
"taskFields",
|
||||
"treeColumnIndex",
|
||||
"height",
|
||||
"projectStartDate",
|
||||
"projectEndDate",
|
||||
"resourceFields",
|
||||
"resources",
|
||||
"resourceInfo",
|
||||
"editSettings",
|
||||
"toolbar",
|
||||
"splitterSettings",
|
||||
"allowSelection",
|
||||
"highlightWeekends",
|
||||
"workUnit",
|
||||
"enableContextMenu"
|
||||
]
|
||||
},
|
||||
"description": "This demo explains how to interrupt the already scheduled tasks using the Syncfusion TypeScript Gantt control."
|
||||
},
|
||||
{
|
||||
"url": "virtual-scroll",
|
||||
"name": "Virtual Scrolling",
|
||||
"category": "Gantt",
|
||||
"api": {
|
||||
"Gantt": [
|
||||
"dataSource",
|
||||
"taskFields",
|
||||
"columns",
|
||||
"treeColumnIndex",
|
||||
"height",
|
||||
"highlightWeekends",
|
||||
"allowRowDragAndDrop",
|
||||
"splitterSettings",
|
||||
"labelSettings",
|
||||
"projectStartDate",
|
||||
"projectEndDate",
|
||||
"selectionSettings",
|
||||
"allowSorting",
|
||||
"allowFiltering",
|
||||
"allowRowDragAndDrop",
|
||||
"enableContextMenu",
|
||||
"enableVirtualization",
|
||||
"editSettings",
|
||||
"toolbar",
|
||||
"allowSelection",
|
||||
"timelineSettings"
|
||||
]
|
||||
},
|
||||
"description": "This example illustrates binding large data and smooth scrolling with large data using the Virtual Scroll feature in the Syncfusion Gantt chart."
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,190 @@
|
|||
<div class="col-lg-9 control-section">
|
||||
<div class="content-wrapper e-bigger e-adaptive-demo">
|
||||
<div class="e-mobile-layout">
|
||||
<div class="e-mobile-content">
|
||||
<div id="adaptivebrowser"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="adaptivedevice"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 property-section">
|
||||
<table id="property" title="Properties" style="width: 100%">
|
||||
<tr>
|
||||
<td style="width: 70%">
|
||||
<div>Enable horizontal row mode</div>
|
||||
</td>
|
||||
<td style="width: 30%;padding:0px 10px 10px 0px">
|
||||
<div style="padding-top: 0px;">
|
||||
<input type="checkbox" id='fullscreen' />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* The device with borders */
|
||||
.e-mobile-layout {
|
||||
position: relative;
|
||||
width: 360px;
|
||||
height: 640px;
|
||||
margin: auto;
|
||||
border: 16px #f4f4f4 solid;
|
||||
border-top-width: 60px;
|
||||
border-bottom-width: 60px;
|
||||
border-radius: 36px;
|
||||
box-shadow: 0 0px 2px rgb(144 144 144), 0 0px 10px rgb(0 0 0 / 16%);
|
||||
}
|
||||
|
||||
/* The horizontal line on the top of the device */
|
||||
.e-mobile-layout:before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 60px;
|
||||
height: 5px;
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: #ebebeb;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* The circle on the bottom of the device */
|
||||
.e-mobile-layout:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: -65px;
|
||||
transform: translate(-50%, -50%);
|
||||
background: #e8e8e8;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* The screen (or content) of the device */
|
||||
.e-mobile-layout .e-mobile-content {
|
||||
overflow-x: hidden;
|
||||
width: 328px;
|
||||
height: 521px;
|
||||
background: white;
|
||||
border: 0px solid #dddddd;
|
||||
}
|
||||
|
||||
.highcontrast .e-mobile-layout {
|
||||
border: 16px #000000 solid;
|
||||
border-top-width: 60px;
|
||||
border-bottom-width: 60px;
|
||||
box-shadow: -1px 2px white, -2px -2px white, 2px -2px white, 2px 1px white;
|
||||
}
|
||||
|
||||
.e-responsive-dialog {
|
||||
box-shadow: none;
|
||||
border: 1px solid #dddddd;
|
||||
}
|
||||
|
||||
#adaptivebrowser:not(.e-grid.e-row-responsive) > .e-gridcontent {
|
||||
height: calc(100% - 224px) !important;
|
||||
}
|
||||
|
||||
/* Render the mobile pager by default */
|
||||
@media (max-width: 3840px) {
|
||||
.e-adaptive-demo .e-pager {
|
||||
padding: 13px 0;
|
||||
}
|
||||
.e-adaptive-demo .e-pager div.e-parentmsgbar {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
float: initial;
|
||||
padding-bottom: 0;
|
||||
padding-right: 0;
|
||||
padding-top: 0;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
width: calc(60% - 48px);
|
||||
}
|
||||
.e-adaptive-demo .e-pager .e-pagesizes {
|
||||
display: none;
|
||||
}
|
||||
.e-adaptive-demo .e-pager .e-pagecountmsg {
|
||||
display: none;
|
||||
}
|
||||
.e-adaptive-demo .e-pager .e-pagercontainer {
|
||||
display: none;
|
||||
}
|
||||
.e-adaptive-demo .e-pager .e-icons {
|
||||
font-size: 11px;
|
||||
}
|
||||
.e-adaptive-demo .e-pager .e-mfirst,
|
||||
.e-adaptive-demo .e-pager .e-mprev,
|
||||
.e-adaptive-demo .e-pager .e-mnext,
|
||||
.e-adaptive-demo .e-pager .e-mlast {
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
padding: 1% 5%;
|
||||
}
|
||||
.e-adaptive-demo .e-pager .e-mfirst {
|
||||
margin-right: 4px;
|
||||
text-align: right;
|
||||
width: calc(10% + 11px);
|
||||
}
|
||||
.e-adaptive-demo .e-pager .e-mprev {
|
||||
margin: 0 4px;
|
||||
text-align: right;
|
||||
width: 10%;
|
||||
}
|
||||
.e-adaptive-demo .e-pager .e-mnext {
|
||||
margin: 0 4px;
|
||||
text-align: left;
|
||||
width: 10%;
|
||||
}
|
||||
.e-adaptive-demo .e-pager .e-mlast {
|
||||
margin-left: 4px;
|
||||
text-align: left;
|
||||
width: calc(10% + 11px);
|
||||
}
|
||||
.e-adaptive-demo .e-bigger .e-pager,
|
||||
.e-adaptive-demo .e-pager.e-bigger {
|
||||
padding: 19px 0;
|
||||
}
|
||||
.e-adaptive-demo .e-bigger .e-pager.e-rtl div.e-parentmsgbar,
|
||||
.e-adaptive-demo .e-pager.e-bigger.e-rtl div.e-parentmsgbar {
|
||||
margin-right: 0;
|
||||
}
|
||||
.e-adaptive-demo .e-bigger .e-pager div.e-parentmsgbar,
|
||||
.e-adaptive-demo .e-pager.e-bigger div.e-parentmsgbar {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- custom code end -->
|
||||
<div id="action-description">
|
||||
<p>This sample demonstrates the rendering order of the grid row elements and adaptive dialogs.</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
The <code><a target="_blank" class="code"
|
||||
href="http://ej2.syncfusion.com/documentation/grid/api-grid.html#enableadaptiveui">
|
||||
enableAdaptiveUI</a></code> property is used to render the grid filter, sort and edit dialogs adaptively
|
||||
and
|
||||
<code><a target="_blank" class="code"
|
||||
href="http://ej2.syncfusion.com/documentation/grid/api-grid.html#rowrenderingmode"> rowRenderingMode</a></code>
|
||||
property is used to render the grid row elements in the following directions,
|
||||
</p>
|
||||
<ul>
|
||||
<li><code>Horizontal</code> - Renders the grid row elements in the horizontal direction.</li>
|
||||
<li><code>Vertical</code> - Renders the grid row elements in the vertical direction.</li>
|
||||
</ul>
|
||||
<p> In this sample, you can change the row elements rendering direction by using the properties panel checkbox
|
||||
</p>
|
||||
<p>
|
||||
More information on the rowRenderingMode configuration can be found in this
|
||||
<a target="_blank" href="http://ej2.syncfusion.com/documentation/grid/api-grid.html#rowrenderingmode">
|
||||
documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { Grid, Page, Filter, Sort, Edit, Toolbar, Aggregate } from '@syncfusion/ej2-grids';
|
||||
import { CheckBox } from '@syncfusion/ej2-buttons';
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
import { orderData } from './data-source';
|
||||
|
||||
Grid.Inject(Page, Filter, Sort, Edit, Toolbar, Aggregate);
|
||||
|
||||
/**
|
||||
* Adaptive Grid sample
|
||||
*/
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let grid: Grid = new Grid(
|
||||
{
|
||||
dataSource: orderData,
|
||||
rowRenderingMode: 'Vertical',
|
||||
enableAdaptiveUI: true,
|
||||
allowPaging: true,
|
||||
allowSorting: true,
|
||||
allowFiltering: true,
|
||||
filterSettings: { type: 'Excel' },
|
||||
pageSettings: { pageCount: 3 },
|
||||
height: '100%',
|
||||
load: () => {
|
||||
if (!Browser.isDevice) {
|
||||
grid.adaptiveDlgTarget = document.getElementsByClassName('e-mobile-content')[0] as HTMLElement;
|
||||
}
|
||||
},
|
||||
editSettings: { allowAdding: true, allowEditing: true, allowDeleting: true, mode: 'Dialog' },
|
||||
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'Search'],
|
||||
columns: [
|
||||
{
|
||||
field: 'OrderID', headerText: 'Order ID', width: 180, isPrimaryKey: true,
|
||||
validationRules: { required: true, number: true }
|
||||
},
|
||||
{ field: 'Freight', width: 180, format: 'C2', editType: 'numericedit', validationRules: { required: true, number: true } },
|
||||
{ field: 'CustomerName', headerText: 'Name', width: 180, validationRules: { required: true } },
|
||||
{ field: 'ShipCity', headerText: 'Ship City', width: 180, validationRules: { required: true } }
|
||||
],
|
||||
aggregates: [{
|
||||
columns: [{
|
||||
type: 'Sum',
|
||||
field: 'Freight',
|
||||
format: 'C2',
|
||||
footerTemplate: 'Sum: ${Sum}'
|
||||
}]
|
||||
}]
|
||||
});
|
||||
if (Browser.isDevice) {
|
||||
grid.appendTo('#adaptivedevice');
|
||||
(document.getElementsByClassName('e-mobile-layout')[0] as HTMLElement).style.display = 'none';
|
||||
} else {
|
||||
grid.appendTo('#adaptivebrowser');
|
||||
}
|
||||
|
||||
// enable/disable vertical row direction
|
||||
let directionChange: CheckBox = new CheckBox({
|
||||
change: (e: any) => {
|
||||
if (e.checked) {
|
||||
grid.rowRenderingMode = 'Horizontal';
|
||||
} else {
|
||||
grid.rowRenderingMode = 'Vertical';
|
||||
}
|
||||
}
|
||||
});
|
||||
directionChange.appendTo('#fullscreen');
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1,9 +1,41 @@
|
|||
<div class="control-section">
|
||||
<div class="col-lg-9 control-section">
|
||||
<div class="content-wrapper">
|
||||
<div id="Grid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 property-section">
|
||||
<table id="property" title="Properties" style="width: 100%">
|
||||
<tr>
|
||||
<td style="width: 100%">
|
||||
<div style="padding-top: 7px">Export template column</div>
|
||||
</td>
|
||||
<td style="width: 50%;padding-right: 10px">
|
||||
<input type="checkbox" tabindex="0" id='templateExport' checked="checked" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<style>
|
||||
.image img {
|
||||
height: 55px;
|
||||
width: 55px;
|
||||
border-radius: 50px;
|
||||
box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0,0,0,0.2);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script id="template1" type="text/x-template">
|
||||
<div class="image">
|
||||
<img src="src/grid/images/${EmployeeID}.png" alt="${EmployeeID}" />
|
||||
</div>
|
||||
</script>
|
||||
<script id="template2" type="text/x-template">
|
||||
<div class="link">
|
||||
<a href="mailto:${EmailID}">${EmailID}</a></div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<div id="action-description">
|
||||
<p>This sample demonstrates the client-side exporting of the Grid, which allows you to export its data to the Excel, Pdf and CSV formats.
|
||||
Use the toolbar buttons to export Grid data to desired format.
|
||||
|
|
@ -11,10 +43,13 @@
|
|||
</div>
|
||||
<div id="description">
|
||||
<p>Grid supports client-side exporting which allows you to export its data to the Excel, Pdf and CSV formats.</p>
|
||||
<p>In this demo, Grouping is applied for <strong><i>ShipCountry</i></strong> with <code><a target="_blank" class="code"
|
||||
href="http://ej2.syncfusion.com/documentation/grid/api-aggregateColumn.html#groupcaptiontemplate">
|
||||
groupCaptionTemplate</a></code> property is used to display the group caption aggregation for the <strong><i>Freight</i></strong> column and excelexport, pdfexport and csvexport items are defined in the toolbar. For these toolbar items, we have defined
|
||||
actions in toolbarClick event to export the Grid data using the
|
||||
<p>In this demo, while exporting, we have included images and hyperlinks from the template columns i.e
|
||||
<strong><i>Image</i></strong> and <strong><i>URL</i></strong> using <code><a target="_blank" class="code"
|
||||
href="https://ej2.syncfusion.com/documentation/api/grid/#excelquerycellinfo">
|
||||
excelQueryCellInfo</a></code> and <code><a target="_blank" class="code"
|
||||
href="https://ej2.syncfusion.com/documentation/api/grid/#pdfquerycellinfo">
|
||||
pdfQueryCellInfo</a></code> events.
|
||||
The ExcelExport, PdfExport, and CsvExport items are defined in the toolbar, for which we have defined actions in toolbarClick event to export the Grid data using the
|
||||
<code><a target="_blank" class="code"
|
||||
|
||||
href="http://ej2.syncfusion.com/documentation/grid/api-grid.html#excelexport">excelExport</a></code>,
|
||||
|
|
@ -22,7 +57,18 @@
|
|||
href="http://ej2.syncfusion.com/documentation/grid/api-grid.html#pdfexport">pdfExport</a></code>
|
||||
and <code><a target="_blank" class="code"
|
||||
href="http://ej2.syncfusion.com/documentation/grid/api-grid.html#csvexport">csvExport</a></code> methods.</p>
|
||||
|
||||
<p>
|
||||
Note: Since CSV format is supported only plain text, images and hyperlinks will not be exported on this.</p>
|
||||
|
||||
<br/><p style="font-weight: 500">Injecting Module:</p>
|
||||
<p>Grid features are segregated into individual feature-wise modules. To use exporting feature, we need to inject ExcelExport
|
||||
and PdfExport module using the <code>Grid.Inject(ExcelExport, PdfExport)</code> method.</p>
|
||||
|
||||
<p>
|
||||
More information on the exporting can be found in these
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/grid/excel-exporting/">Excel Export</a> &
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/grid/pdf-export/">PDF Export</a>
|
||||
documentation section.
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,48 +1,39 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { Grid, Page, Toolbar, ExcelExport, PdfExport, Group, Aggregate } from '@syncfusion/ej2-grids';
|
||||
import {
|
||||
Grid, Toolbar, ExcelExport, PdfExport, Group,
|
||||
PdfQueryCellInfoEventArgs, ExcelQueryCellInfoEventArgs
|
||||
} from '@syncfusion/ej2-grids';
|
||||
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
|
||||
import { orderDetails } from './data-source';
|
||||
import { employeeDetails } from './data-source';
|
||||
import { CheckBox } from '@syncfusion/ej2-buttons';
|
||||
|
||||
Grid.Inject(Page, Toolbar, ExcelExport, PdfExport, Group, Aggregate);
|
||||
Grid.Inject(Toolbar, ExcelExport, PdfExport, Group);
|
||||
/**
|
||||
* Excel,PDF, CSV export sample
|
||||
*/
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let refresh: Boolean;
|
||||
let isInitial: Boolean = true;
|
||||
let grid: Grid = new Grid(
|
||||
{
|
||||
dataSource: orderDetails,
|
||||
dataSource: employeeDetails,
|
||||
allowExcelExport: true,
|
||||
allowPdfExport: true,
|
||||
allowPaging: true,
|
||||
allowGrouping: true,
|
||||
toolbar: ['ExcelExport', 'PdfExport', 'CsvExport'],
|
||||
groupSettings: { showDropArea: false, columns: ['ShipCountry'] },
|
||||
pageSettings: { pageCount: 5 },
|
||||
height: 350,
|
||||
columns: [
|
||||
{ field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },
|
||||
{ field: 'CustomerID', headerText: 'Customer ID', width: 150 },
|
||||
{ field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' },
|
||||
{ field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' },
|
||||
{ field: 'ShipCountry', visible: false, headerText: 'Ship Country', width: 150 },
|
||||
{ field: 'ShipCity', visible: false, headerText: 'Ship City', width: 150 }
|
||||
{ headerText: 'Employee Image', template: '#template1', textAlign: 'Center', width: 150 },
|
||||
{ field: 'FirstName', headerText: 'Name', width: 130 },
|
||||
{ field: 'Title', headerText: 'Designation', width: 180 },
|
||||
{ headerText: 'Email ID', template: '#template2', width: 180 },
|
||||
{ field: 'HireDate', headerText: 'Hire Date', textAlign: 'Right', width: 135, format: 'yMd' },
|
||||
{ field: 'Address', width: 180, allowGrouping: false }
|
||||
],
|
||||
aggregates: [{
|
||||
columns: [{
|
||||
type: 'Sum',
|
||||
field: 'Freight',
|
||||
format: 'C2',
|
||||
groupFooterTemplate: 'Total freight: ${Sum}'
|
||||
}]
|
||||
}],
|
||||
load: () => {
|
||||
refresh = (<any>grid).refreshing;
|
||||
},
|
||||
dataBound: () => {
|
||||
if (refresh) {
|
||||
grid.groupColumn('ShipCountry');
|
||||
refresh = false;
|
||||
if (isInitial) {
|
||||
grid.toolbarModule.toolbar.hideItem(2, true);
|
||||
isInitial = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -58,4 +49,36 @@ Grid.Inject(Page, Toolbar, ExcelExport, PdfExport, Group, Aggregate);
|
|||
grid.csvExport();
|
||||
}
|
||||
};
|
||||
|
||||
function exportQueryCellInfo(args: ExcelQueryCellInfoEventArgs | PdfQueryCellInfoEventArgs): any {
|
||||
if (args.column.headerText === 'Employee Image') {
|
||||
if ((args as any).name === 'excelQueryCellInfo') {
|
||||
args.image = { height: 75, base64: (args as any).data.EmployeeImage, width: 75 };
|
||||
} else {
|
||||
args.image = { base64: (args as any).data.EmployeeImage };
|
||||
}
|
||||
}
|
||||
if (args.column.headerText === 'Email ID') {
|
||||
args.hyperLink = {
|
||||
target: 'mailto:' + (args as any).data.EmailID,
|
||||
displayText: (args as any).data.EmailID
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
grid.excelQueryCellInfo = grid.pdfQueryCellInfo = exportQueryCellInfo;
|
||||
|
||||
let templateExport: CheckBox = new CheckBox({ checked: true });
|
||||
templateExport.appendTo('#templateExport');
|
||||
|
||||
let fields: string[] = ['Employee Image', 'Email ID'];
|
||||
document.getElementById('templateExport').onclick = () => {
|
||||
if (templateExport.checked) {
|
||||
grid.showColumns(fields, 'headerText');
|
||||
grid.toolbarModule.toolbar.hideItem(2, true);
|
||||
} else {
|
||||
grid.hideColumns(fields, 'headerText');
|
||||
grid.toolbarModule.toolbar.hideItem(2, false);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
<div class="control-section">
|
||||
<div class="content-wrapper">
|
||||
<div id="Grid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates the right-to-Left(RTL) alignment in grid component.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="description">
|
||||
<p>
|
||||
Right-to-left(RTL) is used to render the component from right to left direction and it can be
|
||||
enabled by setting <code><a target="_blank" class="code"
|
||||
href="https://ej2.syncfusion.com/documentation/api/grid/#enablertl">enableRtl
|
||||
</a></code> property as true.
|
||||
In this demo, you can able to see Group drop area, header, content, pager, filter dialog, etc ... are aligned right to left direction.
|
||||
</p>
|
||||
<p>
|
||||
More information on the RTL can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/api/grid/#enablertl">documentation section</a>.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { Grid, Group, Page, Selection, Sort } from '@syncfusion/ej2-grids';
|
||||
import { orderData } from './data-source';
|
||||
import { Reorder } from '@syncfusion/ej2-grids';
|
||||
import { Filter } from '@syncfusion/ej2-grids';
|
||||
import { Edit } from '@syncfusion/ej2-grids';
|
||||
|
||||
Grid.Inject(Page, Selection, Sort, Group, Filter, Reorder, Edit);
|
||||
|
||||
/**
|
||||
* Default Page sample
|
||||
*/
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let grid: Grid = new Grid(
|
||||
{
|
||||
dataSource: orderData,
|
||||
allowPaging: true,
|
||||
allowGrouping: true,
|
||||
allowSorting: true,
|
||||
enableRtl: true,
|
||||
allowReordering: true,
|
||||
editSettings: { allowEditing: true, allowAdding: false, allowDeleting: false, mode: 'Normal' },
|
||||
allowFiltering: true,
|
||||
filterSettings: { type: 'Menu' },
|
||||
columns: [
|
||||
{
|
||||
field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Left',
|
||||
editType: 'numericedit', isPrimaryKey: true, validationRules: { required: true }
|
||||
},
|
||||
{ field: 'CustomerID', headerText: 'Customer Name', width: 150 },
|
||||
{
|
||||
field: 'OrderDate', headerText: 'Order Date', width: 130, type: 'date', format: 'yMd', editType: 'datepickeredit'
|
||||
},
|
||||
{ field: 'Freight', width: 120, format: 'C2', editType: 'numericedit' },
|
||||
{ field: 'ShipCountry', headerText: 'Ship Country', textAlign: 'Left', width: 150, editType: 'dropdownedit' }
|
||||
],
|
||||
pageSettings: { pageSize: 10, pageCount: 2 },
|
||||
});
|
||||
grid.appendTo('#Grid');
|
||||
};
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { Button } from '@syncfusion/ej2-buttons';
|
||||
import { Grid, Page, Selection, Reorder, Group, Sort } from '@syncfusion/ej2-grids';
|
||||
import { categoryData } from './data-source';
|
||||
|
|
@ -9,7 +8,6 @@ Grid.Inject(Page, Selection, Reorder, Group, Sort);
|
|||
* Events sample
|
||||
*/
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let grid: Grid = new Grid(
|
||||
{
|
||||
dataSource: categoryData,
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ Grid.Inject(Selection, Freeze, Sort, Resize);
|
|||
rows.max = 5;
|
||||
}
|
||||
|
||||
//After clicking 'Set' button, the `frozenRows` and `frozenColumns` values will be updated in Grid.
|
||||
//After clicking 'Set' button, the `frozenRows` and `frozenColumns` values will be updated in Grid.
|
||||
document.getElementById('buttonSet').onclick = (): void => {
|
||||
grid.frozenColumns = columns.value;
|
||||
grid.frozenRows = rows.value;
|
||||
|
|
|
|||
|
До Ширина: | Высота: | Размер: 789 B После Ширина: | Высота: | Размер: 789 B |
|
|
@ -9,9 +9,10 @@ Grid.Inject(InfiniteScroll);
|
|||
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles(); let genarateData: Button = new Button({}, '#genarate');
|
||||
let data: Object[] = [];
|
||||
genarateData.element.onclick = () => {
|
||||
if (!virtualData.length) {
|
||||
dataSource(); grid.dataSource = virtualData;
|
||||
if (!data.length) {
|
||||
dataSource(); grid.dataSource = data = virtualData;
|
||||
}
|
||||
};
|
||||
let grid: Grid = new Grid(
|
||||
|
|
|
|||
|
|
@ -30,15 +30,15 @@
|
|||
{"url":"drag-and-drop", "name": "Row Drag And Drop", "description":"This demo for Essential JS 2 grid control demonstrates how the rows can be dragged between grids using the row drag-and-drop feature.", "category":"Rows", "hideOnDevice":true,"api":{"Grid":["dataSource","allowPaging","pageSettings","columns","allowRowDragAndDrop","selectionSettings","rowDropSettings","width"] }},
|
||||
{"url":"drag-drop-within-grid", "name": "Row Drag And Drop Within Grid", "category":"Rows", "description":"This demo for Essential JS 2 grid control demonstrates how the rows can be dragged within the grids using the row drag-and-drop feature.", "hideOnDevice":true,"api":{"Grid":["dataSource","allowPaging","pageSettings","columns","allowRowDragAndDrop","selectionSettings","rowDropSettings","width","persistSelection"] }},
|
||||
{"url":"frozen-rows-columns", "name": "Default Frozen", "description":"This demo for Essential JS 2 grid control shows frozen rows/columns feature of grid. Scroll the movable content to view the frozen rows/columns.", "category":"Frozen", "api":{"Grid":["dataSource","allowSelection","columns","frozenColumns","frozenRows","height"] }},
|
||||
{"url":"frozen-api", "name": "Frozen API", "type":"new", "description":"This demo for Essential JS 2 grid control shows frozen rows/columns feature of grid. Scroll the movable content to view the frozen rows/columns with the content.", "category":"Frozen", "api":{"Grid":["dataSource","columns","frozenRows","height", "enableHover"] }},
|
||||
{"url":"frozen-api", "name": "Frozen API", "description":"This demo for Essential JS 2 grid control shows frozen rows/columns feature of grid. Scroll the movable content to view the frozen rows/columns with the content.", "category":"Frozen", "api":{"Grid":["dataSource","columns","frozenRows","height", "enableHover"] }},
|
||||
{"url":"sorting", "name": "Multi Sorting", "description":"This demo for Essential JS 2 grid control shows the grid multisorting feature. Using this feature, grid rows can be sorted by two or more columns.", "category":"Sorting","api":{"Grid":["dataSource","allowSelection","selectionSettings","columns","enableHover"] }},
|
||||
{"url":"sorting-api", "name": "Sorting API", "description":"This demo for Essential JS 2 grid control shows the usage of the sorting API in grid. Use the properties panel to sort/unsort columns using API.", "category":"Sorting","api":{"Grid":["dataSource","allowPaging","allowSelection","selectionSettings","enableHover","columns","pageSettings"] }},
|
||||
{"url":"filter", "name": "Default Filtering", "description":"This demo for Essential JS 2 grid control shows how to place a filter bar row in the header to filter grid rows.", "category":"Filtering","api":{"Grid":["allowFiltering","dataSource","allowPaging","pageSettings","columns"] }},
|
||||
{"url":"filter-menu", "name": "Filter Menu", "type": "update", "description":"This demo for Essential JS 2 grid control demonstrates a way of filtering rows using a menu, check box, and Excel filter UI.", "category":"Filtering", "api":{"Grid":["allowFiltering","allowSorting","filterSettings","dataSource","allowPaging","pageSettings","columns"] }},
|
||||
{"url":"filter-menu", "name": "Filter Menu", "description":"This demo for Essential JS 2 grid control demonstrates a way of filtering rows using a menu, check box, and Excel filter UI.", "category":"Filtering", "api":{"Grid":["allowFiltering","allowSorting","filterSettings","dataSource","allowPaging","pageSettings","columns"] }},
|
||||
{"url":"search", "name": "Search", "description":"This demo for Essential JS 2 grid control shows the content searching feature. Use the search box from toolbar to search for records in grid.", "category":"Filtering","api":{"Grid":["dataSource","allowPaging","pageSettings","columns","toolbar"] }},
|
||||
{"url":"default-paging", "name": "Default Paging", "description":"This demo for Essential JS 2 grid control shows how you can display the contents of the grid in page segments using the paging feature.", "category": "Paging","api":{"Grid":["dataSource","allowPaging","pageSettings","columns"] }},
|
||||
{"url":"paging-api", "name": "Paging API", "description":"This demo for Essential JS 2 grid control shows the usage of the paging API, use the properties panel to change the pageSize, pageCount and current page.", "type": "update", "category": "Paging","api":{"Grid":["dataSource","allowPaging","pageSettings","columns","actionComplete","goToPage"] }},
|
||||
{"url":"selection", "name": "Default Selection", "type": "update", "description":"This demo for Essential JS 2 grid control shows how to select rows or cells through simple mouse down or keyboard interaction using the selection feature.", "category":"Selection","api":{"Grid":["dataSource","allowSelection","selectionSettings","enableHover","columns"] }},
|
||||
{"url":"paging-api", "name": "Paging API", "description":"This demo for Essential JS 2 grid control shows the usage of the paging API, use the properties panel to change the pageSize, pageCount and current page.", "category": "Paging","api":{"Grid":["dataSource","allowPaging","pageSettings","columns","actionComplete","goToPage"] }},
|
||||
{"url":"selection", "name": "Default Selection", "description":"This demo for Essential JS 2 grid control shows how to select rows or cells through simple mouse down or keyboard interaction using the selection feature.", "category":"Selection","api":{"Grid":["dataSource","allowSelection","selectionSettings","enableHover","columns"] }},
|
||||
{"url":"selection-api", "name": "Selection API", "description":"This demo for Essential JS 2 grid control shows the content searching feature. Use the search box from toolbar to search for records in grid.", "category": "Selection","api":{"Grid":["dataSource","allowPaging","pageSettings","columns","allowSelection","selectionSettings","enableHover"] }},
|
||||
{"url":"checkbox-selection", "name": "Checkbox Selection", "description":"This demo for Essential JS 2 grid control shows how the check box selection feature can be used to select grid rows.", "category":"Selection","api":{"Grid":["dataSource","allowPaging","pageSettings","columns","allowSelection","selectionSettings","enableHover"] }},
|
||||
{"url":"aggregate-default", "name": "Default Aggregate", "description":"This demo for Essential JS 2 grid control shows how the row values can be aggregated and shown in a column footer.", "category": "Aggregates","api":{"Grid":["dataSource","allowPaging","pageSettings","columns","aggregates"] } },
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
{"url":"command-column", "name": "Command Column", "description":"This demo for Essential JS 2 grid control shows how to edit and delete records using a command column.", "category":"Editing", "api":{"Grid":["dataSource","allowPaging","pageSettings","columns","editSettings"] }},
|
||||
{"url":"column-resize", "name": "Column Resizing", "description":"This demo for Essential JS 2 grid control shows how the column resizing feature can be used to change width dynamically.", "category":"Columns","api":{"Grid":["dataSource","allowResizing","height","columns"] }},
|
||||
{"url":"header-template", "name": "Header Template", "description":"This demo for Essential JS 2 grid control shows the Grid header template feature, we have shown custom icons in the column headers.", "category":"Columns","api":{"Grid":["dataSource","columns"] }},
|
||||
{"url":"default-exporting", "name": "Default Exporting", "description":"This demo for Essential JS 2 grid control shows the client-side exporting of grid content to Excel, PDF, and CSV formats.", "category":"Exporting","api":{"Grid":["dataSource","allowExcelExport","allowPdfExport","allowPaging","toolbar","pageSettings","columns","groupSettings","allowGrouping"] }},
|
||||
{"url":"default-exporting", "name": "Default Exporting", "type": "update", "description":"This demo for Essential JS 2 grid control shows the client-side exporting of grid content to Excel, PDF, and CSV formats.", "category":"Exporting","api":{"Grid":["dataSource","allowExcelExport","allowPdfExport","allowPaging","toolbar","pageSettings","columns","groupSettings","allowGrouping"] }},
|
||||
{"url":"advanced-exporting", "name": "Advanced Exporting", "description":"This demo for Essential JS 2 grid control demonstrates how exporting can be customized to add headers and footers in exported documents.", "category":"Exporting","api":{"Grid":["dataSource","allowExcelExport","allowPdfExport","toolbar","allowPaging","pageSettings","columns"] }},
|
||||
{"url":"master-details-export", "name": "Hierarchy Exporting", "description":"This demo for Essential JS 2 grid control demonstrates how to export hierarchy grid in exported documents.", "category":"Exporting","api":{"Grid":["dataSource","allowExcelExport","allowPdfExport","toolbar","allowPaging","pageSettings","columns", "childGrid"] }},
|
||||
{"url":"print", "name": "Print", "description":"This demo for Essential JS 2 grid control shows how to print the grid content. Click the print button from the toolbar item to print Grid.", "category":"Exporting", "hideOnDevice":true,"api":{"Grid":["dataSource","allowPaging","toolbar","pageSettings","columns"] }},
|
||||
|
|
@ -61,6 +61,8 @@
|
|||
{"url":"foreign-key", "name": "Foreign Key Column", "description":"This demo for Essential JS 2 grid control shows the usage of a foreign key column and perform actions like filtering, sorting and editing.", "category":"Columns", "api":{"Grid":["dataSource","allowSorting", "columns", "allowFiltering", "filterSettings", "editSettings"]}},
|
||||
{"url":"row-spanning", "name": "Row Spanning", "description":"This demo for Essential JS 2 grid control demonstrates the row spanning feature. In this sample, we have spanned row cells together.", "category":"Rows", "api":{"Grid":["dataSource","allowTextWrap","columns","queryCellInfo","gridLines","width","height"] }},
|
||||
{"url":"infinite-scrolling", "name": "Infinite Scrolling", "description":"This sample demonstrates the Grid component with the infinite scrolling feature.", "category":"Scrolling","api":{"Grid":["dataSource","enableInfiniteScrolling","dataBound","height","width","columns"] }},
|
||||
{ "url": "master-detail","name": "Master/Detail","category": "Data Grid","description":"This demo for Essential JS 2 grid component shows usage of the master/detail in which the details of a Master grid record, is viewed in a separate grid(Detail grid) by clicking the particular row.","api": { "Grid": ["columns", "dataSource","allowSelection","selectedRowIndex","rowSelected"]}}
|
||||
{ "url": "master-detail","name": "Master/Detail","category": "Data Grid","description":"This demo for Essential JS 2 grid component shows usage of the master/detail in which the details of a Master grid record, is viewed in a separate grid(Detail grid) by clicking the particular row.","api": { "Grid": ["columns", "dataSource","allowSelection","selectedRowIndex","rowSelected"]}},
|
||||
{ "url": "adaptive", "name": "Adaptive", "type":"new","category": "Data Grid","description":"This demo for Essential JS 2 grid component shows the Grid row in vertical direction","api": { "Grid": ["columns", "dataSource","allowSorting","allowFiltering","editSettings","toolbar","allowPaging","rowRenderingMode","enableAdaptiveUI"]}},
|
||||
{ "url": "enable-rtl", "name": "RTL", "type":"new","category": "Data Grid","description":"This demo for Essential JS 2 grid component shows the Right to left(RTl) alignment","api": { "Grid": ["columns", "dataSource","allowReordering","allowSorting","allowGrouping","allowPaging", "allowFiltering"]}}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,9 +10,10 @@ Grid.Inject(VirtualScroll);
|
|||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let date1: number; let date2: number; let flag: boolean = true; let genarateData: Button = new Button({}, '#genarate');
|
||||
let data: Object[] = [];
|
||||
genarateData.element.onclick = () => {
|
||||
if (!virtualData.length) {
|
||||
show(); dataSource(); date1 = new Date().getTime(); grid.dataSource = virtualData;
|
||||
if (!data.length) {
|
||||
show(); dataSource(); date1 = new Date().getTime(); grid.dataSource = data = virtualData;
|
||||
}
|
||||
};
|
||||
let grid: Grid = new Grid(
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
"directory": "kanban",
|
||||
"category": "Data Visualization",
|
||||
"ftName": "kanban",
|
||||
"type": "update",
|
||||
"samples": [
|
||||
{
|
||||
"url": "overview",
|
||||
|
|
@ -30,7 +29,6 @@
|
|||
"url": "workflow",
|
||||
"name": "Workflow",
|
||||
"category": "Kanban",
|
||||
"type": "new",
|
||||
"description": "The example demonstrates a workflow feature that controls the flow of cards while drag-and-drop the cards between the columns.",
|
||||
"api": { "Kanban": ["dataSource", "keyField", "columns", "cardSettings"] }
|
||||
},
|
||||
|
|
|
|||
|
До Ширина: | Высота: | Размер: 808 B После Ширина: | Высота: | Размер: 808 B |
|
До Ширина: | Высота: | Размер: 1.4 KiB После Ширина: | Высота: | Размер: 1.4 KiB |
|
До Ширина: | Высота: | Размер: 1.4 KiB После Ширина: | Высота: | Размер: 1.4 KiB |
|
|
@ -6,7 +6,7 @@ import { Menu, MenuItemModel } from '@syncfusion/ej2-navigations';
|
|||
*/
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
// Menu items definition
|
||||
// Menu items definition
|
||||
let menuItems: MenuItemModel[] = [
|
||||
{
|
||||
text: 'File',
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import { Browser, select } from '@syncfusion/ej2-base';
|
|||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
|
||||
// Menu model definition
|
||||
// Menu model definition
|
||||
let menuOptions: MenuModel = {
|
||||
// custom code start
|
||||
created: () => {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import * as dataSource from './menu-data.json';
|
|||
* Scrollable Menu sample
|
||||
*/
|
||||
(window as any).default = () => {
|
||||
// Menu model definition
|
||||
// Menu model definition
|
||||
let menuOptions: MenuModel = {
|
||||
items: (dataSource as any).scrollableData,
|
||||
cssClass: 'e-custom-scroll',
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import * as dataSource from './template-data.json';
|
|||
*/
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
// Menu model definition
|
||||
// Menu model definition
|
||||
let menuOptions: MenuModel = {
|
||||
// Menu data source
|
||||
items: (dataSource as any).templateData,
|
||||
|
|
|
|||
|
|
@ -150,7 +150,25 @@ L10n.load({
|
|||
'Free Text': 'نص حر',
|
||||
'Import Failed': 'نوع ملف سلمان أو اسم الملف غير صالح ؛ يرجى تحديد ملف سلمانصالح',
|
||||
'File not found': 'لم يتم العثور على ملف سلمان المستورد في الموقع المطلوب',
|
||||
'Export Failed': 'شل إجراء تصدير التعليقات التوضيحية ؛ يرجى التأكد من إضافة التعليقات التوضيحية بشكل صحيح'
|
||||
'Export Failed': 'شل إجراء تصدير التعليقات التوضيحية ؛ يرجى التأكد من إضافة التعليقات التوضيحية بشكل صحيح',
|
||||
'Draw Ink': 'ارسم الحبر',
|
||||
'Export XFDF': 'تصدير التعليق التوضيحي إلى ملف XFDF',
|
||||
'Import XFDF': 'استيراد التعليقات التوضيحية من ملف XFDF',
|
||||
'Highlight context': 'تسليط الضوء',
|
||||
'Underline context': 'تسطير',
|
||||
'Strikethrough context': 'إضرب من خلال',
|
||||
'of': 'من ',
|
||||
'Dynamic': 'متحرك',
|
||||
'Standard Business': 'الأعمال القياسية',
|
||||
'Sign Here': 'وقع هنا',
|
||||
'Custom Stamp': 'ختم مخصص',
|
||||
'Enter Signature as Name': 'أدخل أسمك',
|
||||
'Draw-hand Signature': 'رسم',
|
||||
'Type Signature': 'اكتب',
|
||||
'Upload Signature': 'تحميل',
|
||||
'Browse Signature Image': 'تصفح',
|
||||
'Save Signature': 'احفظ التوقيع'
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,9 +3,8 @@
|
|||
"directory": "pdfviewer",
|
||||
"category": "Viewer",
|
||||
"ftName": "pdfviewer",
|
||||
"type": "new",
|
||||
"samples": [
|
||||
{
|
||||
{
|
||||
"url":"default", "name": "Default Functionalities", "description": "This demo for Essential JS 2 PdfViewer shows the default rendering of the PdfViewer with minimum configuration.", "category": "PDF Viewer"
|
||||
},
|
||||
{
|
||||
|
|
@ -18,7 +17,7 @@
|
|||
"url":"form-filling", "name": "Form Filling", "description":"This demo for Essential JS 2 PdfViewer shows the default rendering of the PdfViewer with Form Filling Configuration ", "category": "PDF Viewer"
|
||||
},
|
||||
{
|
||||
"url":"hand-written", "name": "Handwritten Signature", "description": "The sample demonstrates the Handwritten Signature support of PDF Viewer. The Handwritten signature reduces the paperwork of reviewing the contents and it's verified it's digitally", "category": "PDF Viewer", "type": "new"
|
||||
"url":"hand-written", "name": "Handwritten Signature", "description": "The sample demonstrates the Handwritten Signature support of PDF Viewer. The Handwritten signature reduces the paperwork of reviewing the contents and it's verified it's digitally", "category": "PDF Viewer"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { PivotView, IDataSet, IDataOptions } from '@syncfusion/ej2-pivotview';
|
||||
import { PivotView, IDataSet, IDataOptions, LoadEventArgs } from '@syncfusion/ej2-pivotview';
|
||||
import { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
|
||||
import { enableRipple, isNullOrUndefined } from '@syncfusion/ej2-base';
|
||||
import { csvdata } from './pivot-data/csvData';
|
||||
|
|
@ -61,7 +61,12 @@ let data: IDataSet[] = (localData as any).data;
|
|||
dataSourceSettings: jsonReport,
|
||||
height: 290,
|
||||
width: '100%',
|
||||
gridSettings: { columnWidth: 120 }
|
||||
gridSettings: { columnWidth: 120 },
|
||||
load: (args: LoadEventArgs) => {
|
||||
if (args.dataSourceSettings.type === 'CSV') {
|
||||
args.dataSourceSettings.dataSource = getCSVData();
|
||||
}
|
||||
}
|
||||
});
|
||||
pivotObj.appendTo('#PivotView1');
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,17 @@
|
|||
{
|
||||
"de": {
|
||||
"pivotview": {
|
||||
"png":"PNG",
|
||||
"jpeg": "JPEG",
|
||||
"svg": "SVG",
|
||||
"pie": "Kuchen",
|
||||
"funnel": "Trichter",
|
||||
"doughnut": "Krapfen",
|
||||
"pyramid": "Pyramide",
|
||||
"showLegend": "Legende anzeigen",
|
||||
"exit": "Ausgang",
|
||||
"invalidJSON": "Ungültige JSON-Daten",
|
||||
"invalidCSV": "Ungültige CSV-Daten",
|
||||
"all": "alles",
|
||||
"multipleItems": "mehrere Artikel",
|
||||
"Sum": "Summe",
|
||||
|
|
@ -220,7 +231,7 @@
|
|||
"pareto": "Pareto",
|
||||
"radar": "Radar",
|
||||
"chartTypeSettings": "Diagramm type instellungen",
|
||||
"multipleAxes": "Mehrere Achsen",
|
||||
"multipleAxes": "Mehrfachachse",
|
||||
"sortAscending": "Aufsteigende Reihenfolge sortieren",
|
||||
"sortDescending": "Absteigende Reihenfolge sortieren",
|
||||
"sortNone": "Datenreihenfolge sortieren",
|
||||
|
|
@ -257,7 +268,11 @@
|
|||
"conditionalFormatingMenu": "Bedingte Formatierung...",
|
||||
"removeCalculatedField":"Möchten Sie dieses berechnete Feld wirklich löschen?",
|
||||
"replaceConfirmBefore": "Ein Bericht mit dem Namen ",
|
||||
"replaceConfirmAfter": " ist bereits vorhanden. Möchten Sie es ersetzen?"
|
||||
"replaceConfirmAfter": " ist bereits vorhanden. Möchten Sie es ersetzen?",
|
||||
"Median": "Median",
|
||||
"stacked": "Gestapelt",
|
||||
"single": "Single",
|
||||
"multipleAxisMode": "Mehrachsenmodus"
|
||||
},
|
||||
"pivotfieldlist": {
|
||||
"all": "alles",
|
||||
|
|
@ -402,7 +417,7 @@
|
|||
"deferLayoutUpdate": "Verschieben Sie das Layout-Update",
|
||||
"caption": "Feldbeschriftung",
|
||||
"copy": "Kopieren",
|
||||
"multipleAxes": "Mehrere Achsen",
|
||||
"multipleAxes": "Mehrfachachse",
|
||||
"sortAscending": "Aufsteigende Reihenfolge sortieren",
|
||||
"sortDescending": "Absteigende Reihenfolge sortieren",
|
||||
"sortNone": "Datenreihenfolge sortieren",
|
||||
|
|
@ -421,11 +436,25 @@
|
|||
"unGroup": "Gruppierung aufheben",
|
||||
"group": "Gruppe",
|
||||
"of": "von",
|
||||
"numberFormatString": "Beispiel: C, P, 0000 %, ###0.##0#, etc."
|
||||
"numberFormatString": "Beispiel: C, P, 0000 %, ###0.##0#, etc.",
|
||||
"removeCalculatedField": "Möchten Sie dieses berechnete Feld wirklich löschen?",
|
||||
"yes": "Ja",
|
||||
"no": "Nein"
|
||||
}
|
||||
},
|
||||
"ar": {
|
||||
"pivotview": {
|
||||
"png":"بي إن جي",
|
||||
"jpeg": "JPEG",
|
||||
"svg": "SVG",
|
||||
"pie": "فطيرة",
|
||||
"funnel": "قمع",
|
||||
"doughnut": "الدونات",
|
||||
"pyramid": "هرم",
|
||||
"showLegend": "إظهار الأسطورة",
|
||||
"exit": "خروج",
|
||||
"invalidJSON": "بيانات JSON غير صالحة",
|
||||
"invalidCSV": "بيانات CSV غير صالحة",
|
||||
"all": "الكل",
|
||||
"multipleItems": "عناصر متعددة",
|
||||
"Sum": "مجموع",
|
||||
|
|
@ -682,7 +711,11 @@
|
|||
"conditionalFormatingMenu": "تنسيق مشروط...",
|
||||
"removeCalculatedField":"هل أنت متأكد أنك تريد حذف هذا الحقل المحسوب؟",
|
||||
"replaceConfirmBefore": "تقرير مسمى ",
|
||||
"replaceConfirmAfter": "موجود مسبقا. هل تريد استبدالها؟ "
|
||||
"replaceConfirmAfter": "موجود مسبقا. هل تريد استبدالها؟ ",
|
||||
"Median": "الوسيط",
|
||||
"stacked": "مرصوصة",
|
||||
"single": "أعزب",
|
||||
"multipleAxisMode": "وضع المحاور المتعددة"
|
||||
},
|
||||
"pivotfieldlist": {
|
||||
"all": "الكل",
|
||||
|
|
@ -845,11 +878,25 @@
|
|||
"unGroup": "فك تجميع",
|
||||
"group": "مجموعة",
|
||||
"of": "من",
|
||||
"numberFormatString": "مثال: C, P, 0000 %, ###0.##0#, إلخ"
|
||||
"numberFormatString": "مثال: C, P, 0000 %, ###0.##0#, إلخ",
|
||||
"removeCalculatedField": "هل أنت متأكد أنك تريد حذف هذا الحقل المحسوب؟",
|
||||
"yes": "نعم",
|
||||
"no": "لا"
|
||||
}
|
||||
},
|
||||
"en": {
|
||||
"pivotview": {
|
||||
"png":"PNG",
|
||||
"jpeg": "JPEG",
|
||||
"svg": "SVG",
|
||||
"pie": "Pie",
|
||||
"funnel": "Funnel",
|
||||
"doughnut": "Doughnut",
|
||||
"pyramid": "Pyramid",
|
||||
"showLegend": "Show Legend",
|
||||
"exit": "Exit",
|
||||
"invalidJSON": "Invalid JSON data",
|
||||
"invalidCSV": "Invalid CSV data",
|
||||
"all": "All",
|
||||
"multipleItems": "Multiple items",
|
||||
"Sum": "Sum",
|
||||
|
|
@ -1069,7 +1116,7 @@
|
|||
"pareto": "Pareto",
|
||||
"radar": "Radar",
|
||||
"chartTypeSettings": "Chart type settings",
|
||||
"multipleAxes": "Multiple axes",
|
||||
"multipleAxes": "Multiple Axis",
|
||||
"sortAscending": "Sort ascending order",
|
||||
"sortDescending": "Sort descending order",
|
||||
"sortNone": "Sort data order",
|
||||
|
|
@ -1106,7 +1153,11 @@
|
|||
"conditionalFormatingMenu": "Conditional Formatting...",
|
||||
"removeCalculatedField":"Are you sure you want to delete this calculated field?",
|
||||
"replaceConfirmBefore": "A report named ",
|
||||
"replaceConfirmAfter": " already exists. Do you want to replace it?"
|
||||
"replaceConfirmAfter": " already exists. Do you want to replace it?",
|
||||
"Median": "Median",
|
||||
"stacked": "Stacked",
|
||||
"single": "Single",
|
||||
"multipleAxisMode": "Multiple Axis Mode"
|
||||
},
|
||||
"pivotfieldlist": {
|
||||
"all": "All",
|
||||
|
|
@ -1269,11 +1320,25 @@
|
|||
"unGroup": "Ungroup",
|
||||
"group": "Group",
|
||||
"of": "of",
|
||||
"numberFormatString": "Example: C, P, 0000 %, ###0.##0#, etc."
|
||||
"numberFormatString": "Example: C, P, 0000 %, ###0.##0#, etc.",
|
||||
"removeCalculatedField": "Are you sure you want to delete this calculated field?",
|
||||
"yes": "Yes",
|
||||
"no": "No"
|
||||
}
|
||||
},
|
||||
"zh": {
|
||||
"pivotview": {
|
||||
"png":"PNG",
|
||||
"jpeg": "JPEG格式",
|
||||
"svg": "SVG",
|
||||
"pie": "馅饼",
|
||||
"funnel": "漏斗",
|
||||
"doughnut": "甜甜圈",
|
||||
"pyramid": "金字塔",
|
||||
"showLegend": "显示图例",
|
||||
"exit": "出口",
|
||||
"invalidJSON": "无效的CSV数据",
|
||||
"invalidCSV": "无效的CSV数据",
|
||||
"all": "所有",
|
||||
"multipleItems": "多个项目",
|
||||
"Sum": "和",
|
||||
|
|
@ -1493,7 +1558,7 @@
|
|||
"pareto": "帕累托",
|
||||
"radar": "雷達",
|
||||
"chartTypeSettings": "圖表類型設置",
|
||||
"multipleAxes": "多軸",
|
||||
"multipleAxes": "多轴",
|
||||
"sortAscending": "升序排序",
|
||||
"sortDescending": "降序排列",
|
||||
"sortNone": "排序數據順序",
|
||||
|
|
@ -1530,7 +1595,11 @@
|
|||
"conditionalFormatingMenu": "條件格式...",
|
||||
"removeCalculatedField":"您确定要删除此计算字段吗？",
|
||||
"replaceConfirmBefore": "一份名为 ",
|
||||
"replaceConfirmAfter": " 已经存在。您要更换吗？"
|
||||
"replaceConfirmAfter": " 已经存在。您要更换吗？",
|
||||
"Median": "中位数",
|
||||
"stacked": "堆叠式",
|
||||
"single": "单身的",
|
||||
"multipleAxisMode": "多轴模式"
|
||||
},
|
||||
"pivotfieldlist": {
|
||||
"all": "所有",
|
||||
|
|
@ -1693,11 +1762,25 @@
|
|||
"unGroup": "取消分組",
|
||||
"group": "組",
|
||||
"of": "的",
|
||||
"numberFormatString": "例: C, P, 0000 %, ###0.##0#, 等等"
|
||||
"numberFormatString": "例: C, P, 0000 %, ###0.##0#, 等等",
|
||||
"removeCalculatedField": "您确定要删除此计算字段吗？",
|
||||
"yes": "是的",
|
||||
"no": "不"
|
||||
}
|
||||
},
|
||||
"fr-CH": {
|
||||
"pivotview": {
|
||||
"png":"PNG",
|
||||
"jpeg": "JPEG",
|
||||
"svg": "SVG",
|
||||
"pie": "Tarte",
|
||||
"funnel": "Entonnoir",
|
||||
"doughnut": "Donut",
|
||||
"pyramid": "Pyramide",
|
||||
"showLegend": "Afficher la légende",
|
||||
"exit": "Sortie",
|
||||
"invalidJSON": "Données JSON non valides",
|
||||
"invalidCSV": "Données CSV non valides",
|
||||
"all": "tout",
|
||||
"multipleItems": "plusieurs articles",
|
||||
"Sum": "Somme",
|
||||
|
|
@ -1917,7 +2000,7 @@
|
|||
"pareto": "Pareto",
|
||||
"radar": "Radar",
|
||||
"chartTypeSettings": "Paramètres de type de graphique",
|
||||
"multipleAxes": "Plusieurs axes",
|
||||
"multipleAxes": "Axes multiples",
|
||||
"sortAscending": "Trier l'ordre croissant",
|
||||
"sortDescending": "Trier l'ordre décroissant",
|
||||
"sortNone": "Trier l'ordre des données",
|
||||
|
|
@ -1954,7 +2037,11 @@
|
|||
"conditionalFormatingMenu": "Mise en forme conditionnelle...",
|
||||
"removeCalculatedField":"Voulez-vous vraiment supprimer ce champ calculé?",
|
||||
"replaceConfirmBefore": "Un rapport nommé ",
|
||||
"replaceConfirmAfter": " existe déjà. Voulez-vous le remplacer?"
|
||||
"replaceConfirmAfter": " existe déjà. Voulez-vous le remplacer?",
|
||||
"Median": "Médian",
|
||||
"stacked": "Empilé",
|
||||
"single": "Seul",
|
||||
"multipleAxisMode": "Mode à axes multiples"
|
||||
},
|
||||
"pivotfieldlist": {
|
||||
"all": "tout",
|
||||
|
|
@ -2117,7 +2204,10 @@
|
|||
"unGroup": "Dissocier",
|
||||
"group": "Groupe",
|
||||
"of": "de",
|
||||
"numberFormatString": "Exemple: C, P, 0000 %, ###0.##0#, etc."
|
||||
"numberFormatString": "Exemple: C, P, 0000 %, ###0.##0#, etc.",
|
||||
"removeCalculatedField": "Voulez-vous vraiment supprimer ce champ calculé?",
|
||||
"yes": "Oui",
|
||||
"no": "Non"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
"name": "Pivot Table",
|
||||
"directory": "pivot-table",
|
||||
"category": "Grids",
|
||||
"type": "update",
|
||||
"type": "update",
|
||||
"samples": [
|
||||
{
|
||||
"url": "default",
|
||||
|
|
@ -86,6 +86,7 @@
|
|||
"url": "toolbar",
|
||||
"name": "Toolbar",
|
||||
"category": "User Interaction",
|
||||
"type": "update",
|
||||
"description": "This demo for Essential JS2 Pivot Table control demonstrate the toolbar feature with pivot table and pivot chart"
|
||||
},
|
||||
{
|
||||
|
|
@ -98,7 +99,7 @@
|
|||
"url": "aggregation",
|
||||
"name": "Aggregation",
|
||||
"category": "Formula",
|
||||
"type": "update",
|
||||
"type": "update",
|
||||
"description": "This demo for Essential JS2 Pivot Table control shows different types of aggregation for value fields"
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<p>Rich Text Editor ability to load component content using Ajax post. The Ajax request performed on demand and content will update on success callback method.</p>
|
||||
<p>Rich Text Editor ability to load component content using Ajax post. The Ajax request performed on-demand and content will update on the success callback method.</p>
|
||||
|
|
@ -3,11 +3,11 @@
|
|||
<div class="sample-container">
|
||||
<div class="default-section">
|
||||
<div id="defaultRTE">
|
||||
<p>Rich Text Editor is a WYSIWYG editing control which will reduce the effort for users while trying to express their formatting word content as HTML or Markdown format.</p>
|
||||
<p>Rich Text Editor is a WYSIWYG editing control that will reduce the effort for users while trying to express their formatting word content as HTML or Markdown format.</p>
|
||||
<p><b>API’s:</b></p>
|
||||
<ul>
|
||||
<li><p>maxLength - allows to restrict the maximum length to be entered.</p></li>
|
||||
<li><p>readOnly - allows to change it as non-editable state.</p></li>
|
||||
<li><p>maxLength - allows restricting the maximum length to be entered.</p></li>
|
||||
<li><p>readOnly - allows to change it as a non-editable state.</p></li>
|
||||
<li><p>enabled - enable or disable the RTE component.</p></li>
|
||||
<li><p>enableHtmlEncode - Get the encoded string value through value property and source code panel</p></li>
|
||||
<li><p>getValue - get the value of RTE.</p></li>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="col-lg-8 control-section">
|
||||
<div class="content-wrapper">
|
||||
<div id="defaultRTE">
|
||||
<p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
|
||||
<p>The Rich Text Editor component is a WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
|
||||
Users can format their content using standard toolbar commands.</p>
|
||||
|
||||
<p><b>Key features:</b></p>
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
<p>Supports third-party library integration.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Allows preview of modified content before saving it.</p>
|
||||
<p>Allows a preview of modified content before saving it.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p>
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
<div class="sample-container">
|
||||
<div class="default-section">
|
||||
<div id="defaultRTE">
|
||||
<p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p>
|
||||
<p>Rich Text Editor allows inserting images from online sources as well as the local computers where you want to insert the image in your content.</p>
|
||||
<p><b>Get started Quick Toolbar to click on the image</b></p>
|
||||
<p>It is possible to add custom style on the selected image inside the RichTextEditor through quick toolbar.</p>
|
||||
<p>It is possible to add custom style on the selected image inside the RichTextEditor through the quick toolbar.</p>
|
||||
<img id='rteImageID' style="width:300px; height:300px;transform: rotate(0deg);" alt="Logo" src="./src/rich-text-editor/images/RTEImage-Feather.png" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="sample-container">
|
||||
<div class="default-section">
|
||||
<div id="iframeRTE">
|
||||
<p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
|
||||
<p>The Rich Text Editor component is a WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
|
||||
Users can format their content using standard toolbar commands.</p>
|
||||
|
||||
<p><b>Key features:</b></p>
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
<p>Supports third-party library integration.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Allows preview of modified content before saving it.</p>
|
||||
<p>Allows a preview of modified content before saving it.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p>
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
<div class="sample-container">
|
||||
<div class="default-section">
|
||||
<div id="defaultRTE">
|
||||
<p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p>
|
||||
<p>Rich Text Editor allows inserting images from online sources as well as the local computers where you want to insert the image in your content.</p>
|
||||
<p><b>Get started Quick Toolbar to click on the image</b></p>
|
||||
<p>It is possible to add custom style on the selected image inside the Rich Text Editor through quick toolbar.</p>
|
||||
<p>It is possible to add custom style on the selected image inside the Rich Text Editor through the quick toolbar.</p>
|
||||
<img id='rteImageID' style="width:300px; height:300px;transform: rotate(0deg);" alt="Logo" src="./src/rich-text-editor/images/RTEImage-Feather.png" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="sample-container">
|
||||
<div class="default-section">
|
||||
<div id="defaultRTE">
|
||||
<p>The sample is configured with inline mode of editor. Initially, the editor is rendered without a <a href="https://ej2.syncfusion.com/home/" target='_blank'>toolbar</a>. The toolbar becomes visible only when the content is selected.</p>
|
||||
<p>The sample is configured with the inline mode of the editor. Initially, the editor is rendered without a <a href="https://ej2.syncfusion.com/home/" target='_blank'>toolbar</a>. The toolbar becomes visible only when the content is selected.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="sample-container">
|
||||
<div class="default-section">
|
||||
<div id="defaultRTE">
|
||||
The sample is configured with customized markdown syntax using the __formatter__ property. Type the content and click the toolbar item to view customized markdown syntax. For unordered list, you need to add a plus sign before the word (e.g., + list1). Or To make a phrase bold, you need to add two underscores before and after the phrase (e.g., __this text is bold__).
|
||||
The sample is configured with customized markdown syntax using the __formatter__ property. Type the content and click the toolbar item to view customized markdown syntax. For an unordered list, you need to add a plus sign before the word (e.g., + list1). Or To make a phrase bold, you need to add two underscores before and after the phrase (e.g., __this text is bold__).
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="sample-container">
|
||||
<div class="default-section">
|
||||
<div id="defaultRTE">
|
||||
In Rich Text Editor , you click the toolbar buttons to format the words and the changes are visible immediately.
|
||||
In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately.
|
||||
Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words
|
||||
and phrases should look different from each other
|
||||
|
||||
|
|
|
|||
|
|
@ -29,18 +29,18 @@
|
|||
<div id="defaultRTE">
|
||||
<p>The Rich Text Editor is a WYSIWYG (what you see is what you get) editor used to create and edit
|
||||
the content and return the valid HTML markup or markdown of the content.
|
||||
This provides lot of commands to edit and format the content. </p>
|
||||
This provides a lot of commands to edit and format the content. </p>
|
||||
<p><b>Toolbar</b></p>
|
||||
<p>The editor’s toolbar provides various commands to align the text, format, insert link, image,
|
||||
<p>The editor’s toolbar provides various commands to align the text, format, insert a link, image,
|
||||
list, undo/redo operations, HTML view, and more. The toolbar comes with different modes such as
|
||||
floating, multi-row, and expanded. </p>
|
||||
<p><b>Links</b></p>
|
||||
<p>Create a hyperlink using 'insert link' dialog and you can edit the hyperlink text, display text,
|
||||
and tooltip using 'edit link' dialog and quick toolbar. If the text has valid hyperlink text,
|
||||
<p>Create a hyperlink using the 'insert link' dialog and you can edit the hyperlink text, display text,
|
||||
and tooltip using the 'edit link' dialog and quick toolbar. If the text has valid hyperlink text,
|
||||
the editor converts it to hyperlink automatically. For example, link to Rich Text Editor.</p>
|
||||
<p><b>Table</b></p>
|
||||
<p>This editor allows you to insert a table with options to add, edit, and remove and perform other
|
||||
table related actions. </p>
|
||||
table-related actions. </p>
|
||||
<p>For example</p>
|
||||
<table>
|
||||
<tr>
|
||||
|
|
@ -70,14 +70,14 @@
|
|||
</table>
|
||||
<p><b>Image</b></p>
|
||||
<p>Allows you to insert images with caption, alt text, link, resize, and drag-and-drop from an
|
||||
online source and local computer. You can upload an image to server and insert into the editor.
|
||||
It provides an option to customize quick toolbar for an image.</p>
|
||||
online source and local computer. You can upload an image to the server and insert it into the editor.
|
||||
It provides an option to customize a quick toolbar for an image.</p>
|
||||
<p>For example</p>
|
||||
<img id='rteImageID' style="height:300px;transform: rotate(0deg);" alt="Logo"
|
||||
src="./src/rich-text-editor/images/RTEImage-Feather.png" />
|
||||
<p><b>Lists</b></p>
|
||||
<p>You can include content with ordered and unordered lists.</p>
|
||||
<p>Examples for ordered list:</p>
|
||||
<p>Examples for an ordered list:</p>
|
||||
<ul>
|
||||
<li>TypeScript</li>
|
||||
<li>Javascript</li>
|
||||
|
|
@ -85,7 +85,7 @@
|
|||
<li>React</li>
|
||||
<li>Vue</li>
|
||||
</ul>
|
||||
<p>Examples for unordered list:</p>
|
||||
<p>Examples for an unordered list:</p>
|
||||
<ol>
|
||||
<li>Rich Text Editor</li>
|
||||
<li>Toolbar</li>
|
||||
|
|
@ -93,7 +93,7 @@
|
|||
<li>Dialog</li>
|
||||
<li>Data Grid</li>
|
||||
</ol>
|
||||
<p>The editor has lot of features to edit HTML content and Markdown content in web applications.</p>
|
||||
<p>The editor has a lot of features to edit HTML content and Markdown content in web applications.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="sample-container">
|
||||
<div class="default-section">
|
||||
<div id="defaultRTE">
|
||||
<p>Rich Text Editor is a WYSIWYG editing control which will reduce the effort for users while trying to express their formatting word content as HTML or Markdown format.</p>
|
||||
<p>Rich Text Editor is a WYSIWYG editing control that will reduce the effort for users while trying to express their formatting word content as HTML or Markdown format.</p>
|
||||
<p><b>Paste Cleanup properties:</b></p>
|
||||
<ul>
|
||||
<li>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="sample-container">
|
||||
<div class="default-section">
|
||||
<div id="defaultRTE">
|
||||
<p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
|
||||
<p>The Rich Text Editor component is a WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
|
||||
Users can format their content using standard toolbar commands.</p>
|
||||
|
||||
<p><b>Key features:</b></p>
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
<p>Supports third-party library integration.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Allows preview of modified content before saving it.</p>
|
||||
<p>Allows a preview of modified content before saving it.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="sample-container">
|
||||
<div class="default-section">
|
||||
<div id="defaultRTE">
|
||||
<p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
|
||||
<p>The Rich Text Editor component is a WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
|
||||
Users can format their content using standard toolbar commands.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
/**
|
||||
* Rich Text Editor Resizable sample
|
||||
* Rich Text Editor Resizable sample
|
||||
*/
|
||||
import { RichTextEditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar, Resize } from '@syncfusion/ej2-richtexteditor';
|
||||
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar, Resize);
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="sample-container">
|
||||
<div class="default-section">
|
||||
<div id="defaultRTE">
|
||||
<p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
|
||||
<p>The Rich Text Editor component is a WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
|
||||
Users can format their content using standard toolbar commands.</p>
|
||||
|
||||
<p><b>Key features:</b></p>
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
<p>Supports third-party library integration.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Allows preview of modified content before saving it.</p>
|
||||
<p>Allows a preview of modified content before saving it.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
/**
|
||||
* Rich Text Editor default sample
|
||||
* Rich Text Editor default sample
|
||||
*/
|
||||
import { RichTextEditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-richtexteditor';
|
||||
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar);
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
"samples": [{
|
||||
"url": "tools",
|
||||
"name": "Overview",
|
||||
"type": "update",
|
||||
"description": "This demo describes basic and advanced features of the JavaScript Rich Text Editor control (WYSIWYG HTML Editor) with all its tools and functionalities.",
|
||||
"category": "Rich Text Editor",
|
||||
"api": { "RichTextEditor": ["Inject", "toolbarSettings", "showCharCount", "actionBegin", "actionComplete", "maxLength", "appendTo"], "ToolbarSettings": ["items"] }
|
||||
|
|
@ -105,7 +106,6 @@
|
|||
{
|
||||
"url": "file-browser",
|
||||
"name": "File Browser",
|
||||
"type": "new",
|
||||
"description": "This demo shows how to insert the image into the Rich Text Editor content using FileManager.",
|
||||
"category": "Rich Text Editor",
|
||||
"api": { "RichTextEditor": ["Inject", "fileManagerSettings", "toolbarSettings", "appendTo"], "ToolbarSettings": ["items"], "fileManagerSettings": ["enable", "path", "ajaxSettings"] }
|
||||
|
|
|
|||
|
|
@ -2,15 +2,15 @@
|
|||
<div class="sample-container">
|
||||
<div class="default-section">
|
||||
<div id="defaultRTE">
|
||||
<p>The Rich Text Editor is WYSIWYG ("what you see is what you get") editor useful to create and edit content, and return the valid <a href='https://ej2.syncfusion.com/home/' target='_blank'>HTML markup</a> or <a href='https://ej2.syncfusion.com/home/' target='_blank'>markdown</a> of the content</p>
|
||||
<p>The Rich Text Editor is a WYSIWYG ("what you see is what you get") editor useful to create and edit content and return the valid <a href='https://ej2.syncfusion.com/home/' target='_blank'>HTML markup</a> or <a href='https://ej2.syncfusion.com/home/' target='_blank'>markdown</a> of the content</p>
|
||||
|
||||
<p><b>Toolbar</b></p>
|
||||
<ol>
|
||||
<li>
|
||||
<p>Toolbar contains commands to align the text, insert link, insert image, insert list, undo/redo operations, HTML view, etc </p>
|
||||
<p>The Toolbar contains commands to align the text, insert a link, insert an image, insert list, undo/redo operations, HTML view, etc </p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Toolbar is fully customizable </p>
|
||||
<p>The Toolbar is fully customizable </p>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
<p>You can upload an image </p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Provides an option to customize quick toolbar for an image </p>
|
||||
<p>Provides an option to customize the quick toolbar for an image </p>
|
||||
</li>
|
||||
</ol>
|
||||
<img alt="Logo" src="./src/rich-text-editor/images/RTEImage-Feather.png" style="width: 300px;"/>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@ import 'codemirror/mode/htmlmixed/htmlmixed.js';
|
|||
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
|
||||
let hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
|
||||
let defaultRTE: RichTextEditor = new RichTextEditor({
|
||||
toolbarSettings: {
|
||||
|
|
@ -22,8 +21,7 @@ import 'codemirror/mode/htmlmixed/htmlmixed.js';
|
|||
'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
|
||||
'LowerCase', 'UpperCase', 'SuperScript', 'SubScript', '|',
|
||||
'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
|
||||
'Outdent', 'Indent', '|',
|
||||
'CreateTable', 'CreateLink', 'Image', 'FileManager', '|', 'ClearFormat', 'Print',
|
||||
'Outdent', 'Indent', '|', 'CreateTable', 'CreateLink', 'Image', 'FileManager', '|', 'ClearFormat', 'Print',
|
||||
'SourceCode', 'FullScreen', '|', 'Undo', 'Redo'
|
||||
]
|
||||
},
|
||||
|
|
@ -36,9 +34,12 @@ import 'codemirror/mode/htmlmixed/htmlmixed.js';
|
|||
downloadUrl: hostUrl + 'api/FileManager/Download'
|
||||
}
|
||||
},
|
||||
quickToolbarSettings: {
|
||||
table: ['TableHeader', 'TableRows', 'TableColumns', 'TableCell', '-',
|
||||
'BackgroundColor', 'TableRemove', 'TableCellVerticalAlign', 'Styles']
|
||||
},
|
||||
showCharCount: true, maxLength: 2000,
|
||||
actionBegin: handleFullScreen,
|
||||
actionComplete: actionCompleteHandler
|
||||
actionBegin: handleFullScreen, actionComplete: actionCompleteHandler
|
||||
});
|
||||
defaultRTE.appendTo('#defaultRTE');
|
||||
|
||||
|
|
@ -85,8 +86,7 @@ import 'codemirror/mode/htmlmixed/htmlmixed.js';
|
|||
transformElement = document.querySelector('.sample-browser.e-view.e-content-animation');
|
||||
} else {
|
||||
leftBar = document.querySelector('#left-sidebar');
|
||||
transformElement = document.querySelector('#right-pane');
|
||||
}
|
||||
transformElement = document.querySelector('#right-pane'); }
|
||||
if (e.targetItem === 'Maximize') {
|
||||
if (Browser.isDevice && Browser.isIos) { addClass([sbCntEle, sbHdrEle], ['hide-header']); }
|
||||
addClass([leftBar], ['e-close']);
|
||||
|
|
@ -108,7 +108,6 @@ import 'codemirror/mode/htmlmixed/htmlmixed.js';
|
|||
this.sourceCodeModule.getPanel().style.display = 'none';
|
||||
mirrorConversion(e);
|
||||
} else {
|
||||
setTimeout(() => { defaultRTE.toolbarModule.refreshToolbarOverflow(); }, 400);
|
||||
}
|
||||
setTimeout(() => { defaultRTE.toolbarModule.refreshToolbarOverflow(); }, 400); }
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,16 +2,16 @@
|
|||
<div class="sample-container">
|
||||
<div class="default-section">
|
||||
<div id="defaultRTE">
|
||||
<p>The Rich Text Editor is WYSIWYG ("what you see is what you get") editor useful to create and edit content, and return the valid HTML markup or markdown of the content</p>
|
||||
<p>The Rich Text Editor is a WYSIWYG ("what you see is what you get") editor useful to create and edit content and return the valid HTML markup or markdown of the content</p>
|
||||
|
||||
<p><b>Toolbar</b></p>
|
||||
|
||||
<ol>
|
||||
<li>
|
||||
<p>Toolbar contains commands to align the text, insert link, insert image, insert list, undo/redo operations, HTML view, etc </p>
|
||||
<p>The Toolbar contains commands to align the text, insert a link, insert an image, insert list, undo/redo operations, HTML view, etc </p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Toolbar is fully customizable </p>
|
||||
<p>The Toolbar is fully customizable </p>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
<p>You can upload an image </p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Provides an option to customize quick toolbar for an image </p>
|
||||
<p>Provides an option to customize the quick toolbar for an image </p>
|
||||
</li>
|
||||
</ol>
|
||||
<img alt="Logo" src="./src/rich-text-editor/images/RTEImage-Feather.png" />
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ Schedule.Inject(Day, TimelineViews, TimelineMonth, Resize, DragAndDrop);
|
|||
(window as TemplateFunction).getEmployeeDesignation = (value: ResourceDetails) => {
|
||||
return (value as ResourceDetails).resourceData.Designation;
|
||||
};
|
||||
// custom code end
|
||||
// custom code end
|
||||
let scheduleObj: Schedule = new Schedule({
|
||||
width: '100%',
|
||||
height: '650px',
|
||||
|
|
|
|||
|
|
@ -109,7 +109,8 @@ Schedule.Inject(TimelineViews, TimelineMonth, Resize, DragAndDrop);
|
|||
nodeDragStop: onTreeDragStop,
|
||||
nodeDragging: onItemDrag,
|
||||
nodeTemplate: '#treeTemplate',
|
||||
cssClass: 'treeview-external-drag'
|
||||
cssClass: 'treeview-external-drag',
|
||||
dragArea: '.content-wrapper'
|
||||
});
|
||||
treeObj.appendTo('#Tree');
|
||||
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче