multiple expand mode.
- More information about Accordion can be found in this documentation section.
diff --git a/src/accordion/fetch.html b/src/accordion/fetch.html index b5ab17cf..44bb561a 100644 --- a/src/accordion/fetch.html +++ b/src/accordion/fetch.html @@ -90,7 +90,7 @@- More information about Accordion can be found in this + More information about Accordion can be found in this documentation section.
- More information about Accordion can be found in this + More information about Accordion can be found in this documentation section.
- This sample shows an arc gauge with a real-time scenario of a customer satisfaction score ranging from 0 to 10. -
-- In this example, you can see how to render an arc gauge showing customer satisfaction score. You can use axes, ranges, - annotations, - legend and tooltip - oriented properties to customize the appearance of the arc gauge, in order to achieve the desired outcome. -
-- More information on the arc gauge can be found in this - documentation - section. -
-+ This sample shows an arc gauge with a real-time scenario of a customer satisfaction score ranging from 0 to 10. +
++ In this example, you can see how to render an arc gauge showing customer satisfaction score. You can use axes, ranges, + annotations, + legend and tooltip + oriented properties to customize the appearance of the arc gauge, in order to achieve the desired outcome. +
++ More information on the arc gauge can be found in this + documentation + section. +
+- This sample shows the arc gauge's default rendering. It also shows the most popular social media platforms and - the percentage of female users. -
-- In this example, you can see how to render a default arc gauge. The arc gauge helps in the visualization of - numerical values of scales in a semi-circular manner. You can use axes, ranges and annotations oriented - properties to customize the default appearance of the arc gauge. -
-- More information on the arc gauge can be found in this documentation section. -
-- This sample shows an arc gauge with a key performance indicator (KPI), which is a measurable value that shows - how an organization meets key business objectives. -
-- In this example, you can see how to render an arc gauge showing key performance indicator (KPI). You can use axes, ranges, - pointers - and annotations oriented - properties to customize the appearance of the arc gauge, in order to achieve the desired outcome. -
-- More information on the arc gauge can be found in this - documentation - section. -
-|
-
-
- |
-
-
-
- |
-
-
-
- |
-
|
-
-
- |
-
-
-
- |
-
-
-
- |
-
- This sample includes a wide range of arc gauges with varying appearances based on the built-in features and - customization options. -
-- In this example, you can see how to render an arc gauge in various styles. You can use axes, ranges, pointers and annotations oriented - properties to customize the appearance of the arc gauge, in order to achieve the desired outcome. -
-- More information on the arc gauge can be found in this - documentation - section. -
-|
+
+
+ |
+
+
+
+ |
+
+
+
+ |
+
|
+
+
+ |
+
+
+
+ |
+
+
+
+ |
+
+ This sample includes a wide range of arc gauges with varying appearances based on the built-in features and + customization options. +
++ In this example, you can see how to render an arc gauge in various styles. You can use axes, ranges, pointers and annotations oriented + properties to customize the appearance of the arc gauge, in order to achieve the desired outcome. +
++ More information on the arc gauge can be found in this + documentation + section. +
+This example showcases the disabled items of AutoComplete. When you type on the AutoComplete the popup will open, and you will notice that the disabled items are greyed out and cannot be selected.
+The AutoComplete provides options for individual items to be in either an enabled or disabled state for specific scenarios.
+ Once an item is disabled, it cannot be selected as a value for the component. To configure the disabled item columns, use the fields.disabled property.
|
-
+ |
diff --git a/src/breadcrumb/overflow-modes.html b/src/breadcrumb/overflow-modes.html
index 460a2a7e..2bf2575d 100644
--- a/src/breadcrumb/overflow-modes.html
+++ b/src/breadcrumb/overflow-modes.html
@@ -38,7 +38,7 @@ |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
+ Show legend
+ |
+
+
+
+
+ |
+
|
+ Show range when the legend item is toggled
+ |
+
+
+
+
+ |
+
|
+ Position
+ |
+
+
+
+
+ |
+
|
+ Alignment
+ |
+
+
+
+
+ |
+
|
+ Shape
+ |
+
+
+
+
+ |
+
|
- Show legend
- |
-
-
-
-
- |
-
|
- Show range when the legend item is toggled
- |
-
-
-
-
- |
-
|
- Position
- |
-
-
-
-
- |
-
|
- Alignment
- |
-
-
-
-
- |
-
|
- Shape
- |
-
-
-
-
- |
-
- This sample directs the visualization of moving wind types based on their speed via the legend of the circular - gauge component. The visibility, shape, alignment, and position of the legend can all be customized. -
-- The legend provides useful information for interpreting what the circular gauge's axis range displays, - and it can be represented in a variety of colors, shapes, and other identifiers depending on the data. - To do so, use the legendSettings - and its properties. -
-- More information on the legend can be found in this documentation - section. -
-+ This sample directs the visualization of moving wind types based on their speed via the legend of the circular + gauge component. The visibility, shape, alignment, and position of the legend can all be customized. +
++ The legend provides useful information for interpreting what the circular gauge's axis range displays, + and it can be represented in a variety of colors, shapes, and other identifiers depending on the data. + To do so, use the legendSettings + and its properties. +
++ More information on the legend can be found in this documentation + section. +
+|
- Axis
- |
-
-
-
-
- |
- |
|
- Direction
- |
-
-
-
-
- |
- |
|
- Start Angle
- |
-
-
-
-
- |
-
-
- 220
-
- |
-
|
- End Angle
- |
-
-
-
-
- |
-
-
- 140
-
- |
-
|
+ Axis
+ |
+
+
+
+
+ |
+ |
|
+ Direction
+ |
+
+
+
+
+ |
+ |
|
+ Start Angle
+ |
+
+
+
+
+ |
+
+
+ 220
+
+ |
+
|
+ End Angle
+ |
+
+
+
+
+ |
+
+
+ 140
+
+ |
+
- This sample illustrates the multiple axes in the circular gauge as well as the options for changing the - direction, start, and end angle of an axis. -
-- In this example, you can see how to render and configure multiple axes in the circular gauge. To render multiple - axes in the circular gauge, use the axes collection, and each axis can be customized with pointers and ticks. -
-- More information on the multiple axes can be found in this documentation - section. -
-+ This sample illustrates the multiple axes in the circular gauge as well as the options for changing the + direction, start, and end angle of an axis. +
++ In this example, you can see how to render and configure multiple axes in the circular gauge. To render multiple + axes in the circular gauge, use the axes collection, and each axis can be customized with pointers and ticks. +
++ More information on the multiple axes can be found in this documentation + section. +
+- This sample shows temperature variations in a circular gauge using multiple ranges. In addition, the needle - pointer and annotation help in displaying the temperature that has been measured. -
-- In this example, you can see how to render and configure multiple ranges in the circular gauge. The ranges - collection - can be used to define multiple ranges, each of which points to a different start and end value. -
-- More information on the ranges can be found in this documentation - section. -
-+ This sample shows temperature variations in a circular gauge using multiple ranges. In addition, the needle + pointer and annotation help in displaying the temperature that has been measured. +
++ In this example, you can see how to render and configure multiple ranges in the circular gauge. The ranges + collection + can be used to define multiple ranges, each of which points to a different start and end value. +
++ More information on the ranges can be found in this documentation + section. +
+|
+ Pointer Value
+ |
+
+
+
+
+ |
+ + 70 + | +
|
+ Allow Pointer Drag
+ |
+
+
+
+
+ |
+ |
|
+ Allow Ranges Drag
+ |
+
+
+
+
+ |
+
|
- Pointer Value
- |
-
-
-
-
- |
- - 70 - | -
|
- Allow Pointer Drag
- |
-
-
-
-
- |
- |
|
- Allow Ranges Drag
- |
-
-
-
-
- |
-
- This sample illustrates dragging a pointer and a range in a circular gauge. End-user can drag the pointer and - the range by enabling the pointer drag and range drag options. -
-- In this example, you can see how to move the pointer and range in the circular gauge via drag action. The enablePointerDrag - property can be used to enable or disable the pointer drag functionality. Similarly, the enableRangeDrag - property can be used to enable or disable the range drag functionality. -
-- More information on the pointer drag can be found in this documentation - section. Likewise, the range drag information can be found in this documentation - section. -
-+ This sample illustrates dragging a pointer and a range in a circular gauge. End-user can drag the pointer and + the range by enabling the pointer drag and range drag options. +
++ In this example, you can see how to move the pointer and range in the circular gauge via drag action. The enablePointerDrag + property can be used to enable or disable the pointer drag functionality. Similarly, the enableRangeDrag + property can be used to enable or disable the range drag functionality. +
++ More information on the pointer drag can be found in this documentation + section. Likewise, the range drag information can be found in this documentation + section. +
+- This sample demonstrates the various pointer types available in the circular gauge. -
-- In this example, you can see how to customize the pointer for an axis in the circular gauge. The circular gauge - supports a variety of pointers, including marker, needle, and range bar. Additionally, the pointer can be - customized, and multiple pointers can also be enabled. -
-- More information on the pointers can be found in this documentation - section. -
-+ This sample demonstrates the various pointer types available in the circular gauge. +
++ In this example, you can see how to customize the pointer for an axis in the circular gauge. The circular gauge + supports a variety of pointers, including marker, needle, and range bar. Additionally, the pointer can be + customized, and multiple pointers can also be enabled. +
++ More information on the pointers can be found in this documentation + section. +
+|
- Export Type
- |
-
-
-
-
-
- |
-
|
- File Name
- |
-
-
-
-
- |
-
|
-
-
-
- |
-
-
-
-
- |
-
- This sample demonstrates the print and export functionalities of the circular gauge. -
-- In this example, you can see how to print and export the rendered circular gauge. You can add print - functionality by using the print method when - allowPrint is set as true. Also, you can add export functionality by using the export - method when - allowImageExport and allowPdfExport - are set as true. The circular gauge can be exported to JPEG, PNG, SVG, and PDF formats. -
-- More information about print and export can be found in this documentation - section. -
-|
+ Export Type
+ |
+
+
+
+
+
+ |
+
|
+ File Name
+ |
+
+
+
+
+ |
+
|
+
+
+
+ |
+
+
+
+
+ |
+
+ This sample demonstrates the print and export functionalities of the circular gauge. +
++ In this example, you can see how to print and export the rendered circular gauge. You can add print + functionality by using the print method when + allowPrint is set as true. Also, you can add export functionality by using the export + method when + allowImageExport and allowPdfExport + are set as true. The circular gauge can be exported to JPEG, PNG, SVG, and PDF formats. +
++ More information about print and export can be found in this documentation + section. +
+- This sample demonstrates how to create a range slider component by utilizing the functions available in the circular - gauge. -
-- In this example, you can see how to render and configure a new range slider in the circular gauge. It is - possible to achieve this by combining ranges and a marker pointer. The marker pointer has been made interactive, - so the value changes as you drag it. -
-- More information on the circular gauge can be found in this documentation - section. -
-+ This sample demonstrates how to create a range slider component by utilizing the functions available in the circular + gauge. +
++ In this example, you can see how to render and configure a new range slider in the circular gauge. It is + possible to achieve this by combining ranges and a marker pointer. The marker pointer has been made interactive, + so the value changes as you drag it. +
++ More information on the circular gauge can be found in this documentation + section. +
+- This sample shows the basic rendering of the circular gauge, which includes an axis and a range. Here, the - appropriate range color is applied to its respective axis labels, minor ticks, and major ticks. -
-- In this example, you can see how to render and configure the range and axis in the circular gauge with the - same - color. To accomplish this, set the useRangeColor - property in labelStyle, majorTicks and minorTicks to - true. -
-+ This sample shows the basic rendering of the circular gauge, which includes an axis and a range. Here, the + appropriate range color is applied to its respective axis labels, minor ticks, and major ticks. +
++ In this example, you can see how to render and configure the range and axis in the circular gauge with the + same + color. To accomplish this, set the useRangeColor + property in labelStyle, majorTicks and minorTicks to + true. +
+|
+ Select Range
+ |
+
+
+
+
+ |
+ |
|
+ Range Start
+ |
+
+
+
+
+ |
+ + 0 + | +
|
+ Range End
+ |
+
+
+
+
+ |
+ + 40 + | +
|
+ Start Width
+ |
+
+
+
+
+ |
+ + 10 + | +
|
+ End Width
+ |
+
+
+
+
+ |
+ + 10 + | +
|
+ Corner Radius
+ |
+
+
+
+
+ |
+ + 0 + | +
|
- Select Range
- |
-
-
-
-
- |
- |
|
- Range Start
- |
-
-
-
-
- |
- - 0 - | -
|
- Range End
- |
-
-
-
-
- |
- - 40 - | -
|
- Start Width
- |
-
-
-
-
- |
- - 10 - | -
|
- End Width
- |
-
-
-
-
- |
- - 10 - | -
|
- Corner Radius
- |
-
-
-
-
- |
- - 0 - | -
- This sample demonstrates how to highlight a region in an axis using ranges in the circular gauge. The width, - corner radius, and start and end range of a range can all be customized. -
-- In this example, you can see how to render and configure the ranges in the circular gauge. Ranges are used to - group the axis values, and you can use start, end, - color, startWidth, - endWidth, - radius and - roundedCornerRadius - properties to customize them. In addition, an axis with multiple ranges is shown in the circular gauge - component, as well as options to customize the range properties via the property panel. -
-- More information on the ranges can be found in this documentation - section. -
-+ This sample demonstrates how to highlight a region in an axis using ranges in the circular gauge. The width, + corner radius, and start and end range of a range can all be customized. +
++ In this example, you can see how to render and configure the ranges in the circular gauge. Ranges are used to + group the axis values, and you can use start, end, + color, startWidth, + endWidth, + radius and + roundedCornerRadius + properties to customize them. In addition, an axis with multiple ranges is shown in the circular gauge + component, as well as options to customize the range properties via the property panel. +
++ More information on the ranges can be found in this documentation + section. +
+|
+ Start Angle
+ |
+
+
+
+
+ |
+ + 270° + | +
|
+ End Angle
+ |
+
+
+
+
+ |
+ + 90° + | +
|
+ Radius
+ |
+
+
+
+
+ |
+ + 100% + | +
|
+ Radius based on angle
+ |
+
+
+
+
+ |
+ |
|
+ Center X
+ |
+
+
+
+
+ |
+ + 50% + | +
|
+ Center Y
+ |
+
+
+
+
+ |
+ + 50% + | +
|
+ Hide Intersecting Labels
+ |
+
+
+
+
+ |
+
|
- Start Angle
- |
-
-
-
-
- |
- - 270° - | -
|
- End Angle
- |
-
-
-
-
- |
- - 90° - | -
|
- Radius
- |
-
-
-
-
- |
- - 100% - | -
|
- Radius based on angle
- |
-
-
-
-
- |
- |
|
- Center X
- |
-
-
-
-
- |
- - 50% - | -
|
- Center Y
- |
-
-
-
-
- |
- - 50% - | -
|
- Hide Intersecting Labels
- |
-
-
-
-
- |
-
- This sample shows how to create semi-circular or quarter-circular gauges by modifying a circular gauge with - different start and end angles. -
-- In this example, a circular gauge is rendered with different start and end angles to create semi-circular or - quarter-circular gauges. The radius, start angle, end angle, and center position of the circular gauge can all - be customized using the options in the properties panel. -
-- More information on the semi-circular or quarter-circular gauges can be found in this documentation - section. -
-+ This sample shows how to create semi-circular or quarter-circular gauges by modifying a circular gauge with + different start and end angles. +
++ In this example, a circular gauge is rendered with different start and end angles to create semi-circular or + quarter-circular gauges. The radius, start angle, end angle, and center position of the circular gauge can all + be customized using the options in the properties panel. +
++ More information on the semi-circular or quarter-circular gauges can be found in this documentation + section. +
+- This sample represents the number of hours slept by a person using a sleep tracker. The sleep tracker also - displays the start and end time of each sleep cycle. -
-- In this example, you can see how to make the circular gauge look like a sleep tracker. Additionally, the date, - start and end time, and duration of sleep are all displayed. -
-- More information on the circular gauge can be found in this documentation - section. -
-+ This sample represents the number of hours slept by a person using a sleep tracker. The sleep tracker also + displays the start and end time of each sleep cycle. +
++ In this example, you can see how to make the circular gauge look like a sleep tracker. Additionally, the date, + start and end time, and duration of sleep are all displayed. +
++ More information on the circular gauge can be found in this documentation + section. +
+4 Apr
9:00 PM
5 Apr
4:43 AM
|
- Combine Ranges
- |
-
-
-
-
- |
-
|
- Gap Between Ranges
- |
-
-
-
-
- |
-
|
+ Combine Ranges
+ |
+
+
+
+
+ |
+
|
+ Gap Between Ranges
+ |
+
+
+
+
+ |
+
- This sample depicts the appearance of a speedometer rendered using the circular gauge. The pointer value is - dynamically updated with random values in this case. -
-- In this example, you can see how to make a circular gauge look like a speedometer. Using the options in the - properties panel, a gap can be added between ranges or ranges can be combined to form a single range. -
-- More information on the circular gauge can be found in this documentation - section. -
-+ This sample depicts the appearance of a speedometer rendered using the circular gauge. The pointer value is + dynamically updated with random values in this case. +
++ In this example, you can see how to make a circular gauge look like a speedometer. Using the options in the + properties panel, a gap can be added between ranges or ranges can be combined to form a single range. +
++ More information on the circular gauge can be found in this documentation + section. +
+- This sample visualizes the performance outcome of a work using the text pointer in the circular gauge. -
-- In this example, you can see how to use a text to customize the pointer in the circular gauge. The text can be - added to the circular gauge's pointer primarily through the use of the type, markerShape - and text - properties in the pointers. -
-- More information on the pointers can be found in this documentation - section. -
-+ This sample visualizes the performance outcome of a work using the text pointer in the circular gauge. +
++ In this example, you can see how to use a text to customize the pointer in the circular gauge. The text can be + added to the circular gauge's pointer primarily through the use of the type, markerShape + and text + properties in the pointers. +
++ More information on the pointers can be found in this documentation + section. +
+|
+ Ticks
+ |
+
+
+
+
+ |
+ |
|
+ Tick Position
+ |
+
+
+
+
+ |
+ |
|
+ Label Position
+ |
+
+
+
+
+ |
+ |
|
+ Tick Offset
+ |
+
+
+
+
+ |
+ + 0 + | +
|
+ Tick Height
+ |
+
+
+
+
+ |
+ + 10 + | +
|
+ Label Offset
+ |
+
+
+
+
+ |
+ + 0 + | +
|
+ Show Last Label
+ |
+
+
+
+
+ |
+
|
- Ticks
- |
-
-
-
-
- |
- |
|
- Tick Position
- |
-
-
-
-
- |
- |
|
- Label Position
- |
-
-
-
-
- |
- |
|
- Tick Offset
- |
-
-
-
-
- |
- - 0 - | -
|
- Tick Height
- |
-
-
-
-
- |
- - 10 - | -
|
- Label Offset
- |
-
-
-
-
- |
- - 0 - | -
|
- Show Last Label
- |
-
-
-
-
- |
-
- This sample demonstrates how to customize the ticks and labels on an axis. The position, offset, and height of - the ticks and labels can be changed. -
-- In this example, you can see how to render and configure the ticks and labels of an axis in the circular gauge. - Labels are units that are used to display the values on the axis. Labels can be customized using labelStyle. Ticks - are used to represent values on the axis. Ticks can be customized using majorTicks and minorTicks. -
-- More information on the ticks and labels can be found in this documentation - section. -
-+ This sample demonstrates how to customize the ticks and labels on an axis. The position, offset, and height of + the ticks and labels can be changed. +
++ In this example, you can see how to render and configure the ticks and labels of an axis in the circular gauge. + Labels are units that are used to display the values on the axis. Labels can be customized using labelStyle. Ticks + are used to represent values on the axis. Ticks can be customized using majorTicks and minorTicks. +
++ More information on the ticks and labels can be found in this documentation + section. +
+- This sample helps in visualizing the tooltip of the pointer and the range in a circular gauge. -
-- In this example, you can see how to display the tooltip for the pointer and the range in a circular gauge. The - tooltip settings is - used to enable and customize the tooltip. To see the tooltip in action, hover your mouse over the pointer or the - range, or tap them on touch-enabled devices. -
-- More information on the tooltip can be found in this documentation - section. -
-+ This sample helps in visualizing the tooltip of the pointer and the range in a circular gauge. +
++ In this example, you can see how to display the tooltip for the pointer and the range in a circular gauge. The + tooltip settings is + used to enable and customize the tooltip. To see the tooltip in action, hover your mouse over the pointer or the + range, or tap them on touch-enabled devices. +
++ More information on the tooltip can be found in this documentation + section. +
+This example showcases the disabled items of ComboBox. When you type on the ComboBox the popup will open, and you will notice that the disabled items are greyed out and cannot be selected.
+The ComboBox provides options for individual items to be in either an enabled or disabled state for specific scenarios. Once an item is disabled, it cannot be selected as a value for the component. To configure the disabled item columns, use the fields.disabled property.
This example illustrates how to efficiently export a document to various formats using the DocumentEditor. You can seamlessly convert your content into formats such as PDF, RTF, HTML, ODT, Plain Text, Word Template, and Markdown.
+This example illustrates how to efficiently export a document to various formats using the DocumentEditor. You can seamlessly convert your content into formats such as PDF, RTF, HTML, ODT, WordML, Plain Text, Word Template, and Markdown.
Document Editor provides exporting of the document as follows
@@ -21,6 +21,7 @@More information about the document editor features can be found in this documentation section. @@ -30,9 +31,6 @@ .ej2-new { height: 590px; } - .e-spinner-pane .e-de-spin-overlay { - background-color: rgba(var(--color-sf-scrim), 0.5); - } #documenteditor_titlebar { border-bottom: 1px solid #2B3481; height: 36px; @@ -98,4 +96,4 @@ function onbeforeunload() { return 'Want to save your changes?'; }; - + \ No newline at end of file diff --git a/src/document-editor/advanced-exporting.ts b/src/document-editor/advanced-exporting.ts index b6c41d24..d1fc84fc 100644 --- a/src/document-editor/advanced-exporting.ts +++ b/src/document-editor/advanced-exporting.ts @@ -3,7 +3,7 @@ import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor import { TitleBar } from './title-bar'; import { DropDownButton, DropDownButtonModel } from '@syncfusion/ej2/splitbuttons'; import { ListView, SelectEventArgs as ListSelectEventArgs } from '@syncfusion/ej2-lists'; -import { createSpinner, showSpinner, hideSpinner, DialogUtility } from '@syncfusion/ej2-popups'; +import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups'; import * as data from './data-default.json'; /** @@ -134,8 +134,7 @@ function created() { } function formatSave(type: string) { createSpinner({ - target: document.getElementById('container'), - cssClass: 'e-de-spin-overlay' + target: document.getElementById('container') }); showSpinner(document.getElementById('container')); let format: string = type; @@ -151,17 +150,7 @@ function formatSave(type: string) { Filename: container.documentEditor.documentName, Format: '.' + format }; - http.onloadend = function() { - hideSpinner(document.getElementById('container')); - } - http.onerror = function() { - DialogUtility.alert({ - title: "Information", - content: "Error in establishing connection with web server.", - okButton: { text: "OK" }, - closeOnEscape: true, - }); - } + // Set up event listener for the response http.onload = function () { if (http.status === 200) { diff --git a/src/document-editor/bindUI-to-document.html b/src/document-editor/bindUI-to-document.html new file mode 100644 index 00000000..e7bbc301 --- /dev/null +++ b/src/document-editor/bindUI-to-document.html @@ -0,0 +1,159 @@ +
This example showcases how to retrieve content control data from a document and subsequently import data into it.
+Content controls are individual controls that users can add and customize for use in templates, forms, and documents.
+More information about the document editor content control can be found in this + documentation section. +
+This example demonstrates bullets and numbering support in document editor. Both single list and multi-level lists are supported.
+This example demonstrates bullets and numbering support in document editor. Both single list and multi-level lists are + supported.
In this example, you can use, add, or modify the list formatting in document editor.
diff --git a/src/document-editor/comments.html b/src/document-editor/comments.html index 0bfde3e0..7a6cc597 100644 --- a/src/document-editor/comments.html +++ b/src/document-editor/comments.html @@ -11,7 +11,6 @@More information about the document editor features can be found in this documentation section. diff --git a/src/document-editor/data-bindui-to-document.json b/src/document-editor/data-bindui-to-document.json new file mode 100644 index 00000000..bfd7194a --- /dev/null +++ b/src/document-editor/data-bindui-to-document.json @@ -0,0 +1 @@ +{"sfdt":"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"} diff --git a/src/document-editor/right-to-left.ts b/src/document-editor/right-to-left.ts index d1e8066f..0b11b843 100644 --- a/src/document-editor/right-to-left.ts +++ b/src/document-editor/right-to-left.ts @@ -215,9 +215,9 @@ L10n.load({ 'Page Setup': 'اعداد الصفحة', 'Page Breaks': 'فواصل الصفحة', 'Section Breaks': 'فواصل القسم', - 'Column':'عمود', - 'Next Page':'الصفحة التالية', - 'Continuous' : 'الصفحة التالية', + 'Column': 'عمود', + 'Next Page': 'الصفحة التالية', + 'Continuous': 'الصفحة التالية', 'No bookmarks found': 'لم يتم العثور علي إشارات مرجعيه', 'Format': 'تنسيق', 'Create New Style': 'إنشاء نمط جديد', diff --git a/src/document-editor/sample.json b/src/document-editor/sample.json index 93a32ce3..8e9bbdc4 100644 --- a/src/document-editor/sample.json +++ b/src/document-editor/sample.json @@ -9,7 +9,6 @@ { "url": "default", "name": "Default Functionalities", - "type": "update", "category": "Document Editor", "description": "The Document Editor component in JavaScript platform is used to create, edit, view, and print Word documents in web applications.", "api": { @@ -122,6 +121,23 @@ ] } }, + { + "url": "bindUI-to-document", + "name": "Bind UI To Document", + "type": "new", + "category": "Document Editor", + "description": "The Document Editor component in JavaScript platform is used to create, edit, view, and print Word documents in web applications.", + "api": { + "DocumentEditor": [ + "exportContentControlData", + "importContentControlData", + "resetContentControlData" + ], + "Editor": [ + "insertContentControl" + ] + } + }, { "url": "document-list", "name": "Document List", @@ -277,7 +293,6 @@ "url": "comments", "name": "Comments", "category": "Review", - "type": "update", "description": "The Document Editor component supports add and edit comments in a Word document for comment discussion.", "api": { "Editor": [ @@ -376,7 +391,6 @@ "url": "colorpicker-customization", "name": "Color Picker Customization", "category": "Customization", - "type":"new", "description": "The Document Editor component supports to to customize color picker in appearance.", "api": { "DocumentEditorSettings": [ @@ -415,7 +429,6 @@ { "url": "advanced-exporting", "name": "Advanced Exporting", - "type":"new", "category": "Exporting", "description": "The Document Editor component in JavaScript is used to view and print Word documents in web applications by injecting only the modules that are necessary.", "api": { @@ -688,7 +701,6 @@ { "url": "heading-navigation", "name": "Heading Navigation", - "type": "new", "category": "View", "description": "The Document Editor component supports navigating documents by heading allows users to move around the document very quickly.", "api": { diff --git a/src/drop-down-list/data-binding.html b/src/drop-down-list/data-binding.html index 2588fa9b..2592ae51 100644 --- a/src/drop-down-list/data-binding.html +++ b/src/drop-down-list/data-binding.html @@ -1,13 +1,13 @@
This example showcases the disabled items of DropDownList. When you click on the DropDownList the popup will open, and you will notice that the disabled items are greyed out and cannot be selected.
+The DropDownList provides options for individual items to be in either an enabled or disabled state for specific scenarios. Once an item is disabled, it cannot be selected as a value for the component. To configure the disabled item columns, use the fields.disabled property.
Hierarchical Data
List Data
In this demo, a folder upload enabled by setting directoryUpload as true. It allows to select or drop a folder to upload all its contents including hierarchy folders and files.
The folder (directory) upload is supported for the following file system providers, +
The folder (directory) upload is supported for the following file system providers,
+The File Manager component is used to explore a file system through a web application, similar to the windows explorer for windows. It supports the basic file operations such as create, rename, delete.
diff --git a/src/file-manager/directory-upload.ts b/src/file-manager/directory-upload.ts index 9413b146..0a12ca38 100644 --- a/src/file-manager/directory-upload.ts +++ b/src/file-manager/directory-upload.ts @@ -17,6 +17,10 @@ FileManager.Inject(Toolbar, NavigationPane, DetailsView, ContextMenu); uploadUrl: hostUrl + 'api/FileManager/Upload', downloadUrl: hostUrl + 'api/FileManager/Download' }, + contextMenuSettings: { + file: [ "Cut", "Copy", "|", "Delete", "Download", "Rename", "|", "Details"], + visible: true + }, toolbarItems: [{ name: 'NewFolder' }, { template: buttonTemplate, name: 'Upload' }, { name: 'SortBy' }, diff --git a/src/file-manager/drag-drop.ts b/src/file-manager/drag-drop.ts index 176116c3..148449bf 100644 --- a/src/file-manager/drag-drop.ts +++ b/src/file-manager/drag-drop.ts @@ -19,8 +19,9 @@ FileManager.Inject(Toolbar, NavigationPane, DetailsView, ContextMenu); }, toolbarSettings: { items: ['NewFolder', 'SortBy', 'Cut', 'Copy', 'Paste', 'Delete', 'Refresh', 'Download', 'Rename', 'Selection', 'View', 'Details'] }, contextMenuSettings: { - layout: ["SortBy", "View", "Refresh", "|", "Paste", "|", "NewFolder", "|", "Details", "|", "SelectAll"], - visible: true + file: [ "Cut", "Copy", "|", "Delete", "Download", "Rename", "|", "Details"], + layout: ["SortBy", "View", "Refresh", "|", "Paste", "|", "NewFolder", "|", "Details", "|", "SelectAll"], + visible: true }, allowDragAndDrop: true }); diff --git a/src/file-manager/firebase.ts b/src/file-manager/firebase.ts index 8de77efa..773e483b 100644 --- a/src/file-manager/firebase.ts +++ b/src/file-manager/firebase.ts @@ -18,9 +18,10 @@ FileManager.Inject(Toolbar, NavigationPane, DetailsView, ContextMenu); }, toolbarSettings: { items: ['NewFolder', 'SortBy', 'Cut', 'Copy', 'Paste', 'Delete', 'Refresh', 'Download', 'Rename', 'Selection', 'View', 'Details'] }, contextMenuSettings: { - layout: ["SortBy", "View", "Refresh", "|", "Paste", "|", "NewFolder", "|", "Details", "|", "SelectAll"], - visible: true - } + file: [ "Cut", "Copy", "|", "Delete", "Download", "Rename", "|", "Details"], + layout: ["SortBy", "View", "Refresh", "|", "Paste", "|", "NewFolder", "|", "Details", "|", "SelectAll"], + visible: true + } }); fileObject.appendTo('#filemanager'); }; \ No newline at end of file diff --git a/src/file-manager/flat-data.html b/src/file-manager/flat-data.html new file mode 100644 index 00000000..a3f0c8d2 --- /dev/null +++ b/src/file-manager/flat-data.html @@ -0,0 +1,16 @@ +This sample demonstrates the flat data rendering of the File Manager component. The File Manager uses a flat data object as an array of JSON objects for rendering, eliminating the need to define ajaxSettings url.
+The File Manager component is used to manage the files and folders in a file system . It supports all the basic file operations such as create, rename, delete, cut, copy, paste, upload, download, and more.
+ +To load a folder data as an array of JSON objects, use the File Manager component fileSystemData property.
To use PDF export feature, inject the PdfExport module using the
Gantt.Inject(PdfExport) method.
', region: 'Series', x: '50%', y: '50%'
+ '
hierarchyMode property. The
below are the type of filter mode available in Gantt chart.
+ Parent - This is the default filter hierarchy mode in Gantt chart. The filtered records are displayed with its parent records, if the filtered records not have any parent record then the filtered record alone will be displayed.Child - The filtered records are displayed with its child record, if the filtered records do not have any child record then only the filtered records are displayed.Both - The filtered records are displayed with its both parent and child record. If the filtered records do not have any parent and child record then only the filtered records are displayed.None - Only the filtered records are displayed.Injecting Module:
diff --git a/src/gantt/grid-lines.ts b/src/gantt/grid-lines.ts index bbd913c9..0fcebcbb 100644 --- a/src/gantt/grid-lines.ts +++ b/src/gantt/grid-lines.ts @@ -42,8 +42,8 @@ Gantt.Inject(DayMarkers, Selection ); splitterSettings: { columnIndex: 2 }, - projectStartDate: new Date('03/24/2019'), - projectEndDate: new Date('07/06/2019') + projectStartDate: new Date('03/24/2024'), + projectEndDate: new Date('07/06/2024') }); gantt.appendTo('#GridLines'); diff --git a/src/gantt/header-template.html b/src/gantt/header-template.html index 65a9e195..24b471b1 100644 --- a/src/gantt/header-template.html +++ b/src/gantt/header-template.html @@ -1,56 +1,57 @@
This sample explains the way of rendering timeline template by mapping template elements to the + timelineTemplate property.
+ ++ In this demo, the + timelineTemplate property enables the customization of timeline cells with any HTML content, allowing for enhanced visual appeal and personalized functionality. +
The template contains these context properties to design the timeline cells.
+date: Defines the date of timeline date.value: Defines the date value to display in the timeline.tier: Defines the tier of timeline.| + |
Unit width
|
diff --git a/src/gantt/timeline.ts b/src/gantt/timeline.ts
index 54aa10fb..1eca7071 100644
--- a/src/gantt/timeline.ts
+++ b/src/gantt/timeline.ts
@@ -60,8 +60,8 @@ Gantt.Inject(Selection, Sort, DayMarkers);
},
height: '503px',
highlightWeekends: true,
- projectStartDate: new Date('02/03/2019'),
- projectEndDate: new Date('03/23/2019'),
+ projectStartDate: new Date('02/03/2024'),
+ projectEndDate: new Date('03/23/2024'),
timelineSettings: {
topTier: {
format: 'MMM dd, yyyy',
diff --git a/src/gantt/timezone.ts b/src/gantt/timezone.ts
index a1c4cf27..32b29008 100644
--- a/src/gantt/timezone.ts
+++ b/src/gantt/timezone.ts
@@ -10,17 +10,17 @@ Gantt.Inject(Selection);
let gantt: Gantt = new Gantt(
{
dataSource: [
- { taskID: 1, taskName: 'Project Schedule', startDate: new Date('02/04/2019 08:00'), endDate: new Date('03/10/2019')},
- { taskID: 2, taskName: 'Planning', startDate: new Date('02/04/2019 08:00'), endDate: new Date('02/10/2019'), parentID: 1},
- { taskID: 3, taskName: 'Plan timeline', startDate: new Date('02/04/2019 08:00'), endDate: new Date('02/10/2019'), duration: 6, progress: '60', parentID: 2 },
- { taskID: 4, taskName: 'Plan budget', startDate: new Date('02/04/2019 08:00'), endDate: new Date('02/10/2019'), duration: 6, progress: '90', parentID: 2 },
- { taskID: 5, taskName: 'Allocate resources', startDate: new Date('02/04/2019 08:00'), endDate: new Date('02/10/2019'), duration: 6, progress: '75', parentID: 2 },
- { taskID: 6, taskName: 'Planning complete', startDate: new Date('02/06/2019 08:00'), endDate: new Date('02/10/2019'), duration: 0, predecessor: '3FS,4FS,5FS', parentID: 2 },
- { taskID: 7, taskName: 'Design', startDate: new Date('02/13/2019 08:00'), endDate: new Date('02/17/2019 08:00'), parentID: 1, },
- { taskID: 8, taskName: 'Software Specification', startDate: new Date('02/13/2019 08:00'), endDate: new Date('02/15/2019'), duration: 3, progress: '60', predecessor: '6FS', parentID: 7, },
- { taskID: 9, taskName: 'Develop prototype', startDate: new Date('02/13/2019 08:00'), endDate: new Date('02/15/2019'), duration: 3, progress: '100', predecessor: '6FS', parentID: 7, },
- { taskID: 10, taskName: 'Get approval from customer', startDate: new Date('02/16/2019 08:00'), endDate: new Date('02/17/2019 08:00'), duration: 2, progress: '100', predecessor: '9FS', parentID: 7 },
- { taskID: 11, taskName: 'Design complete', startDate: new Date('02/17/2019 08:00'), endDate: new Date('02/17/2019 08:00'), duration: 0, predecessor: '10FS', parentID: 7 }
+ { taskID: 1, taskName: 'Project Schedule', startDate: new Date('02/04/2024 08:00'), endDate: new Date('03/10/2024')},
+ { taskID: 2, taskName: 'Planning', startDate: new Date('02/04/2024 08:00'), endDate: new Date('02/10/2024'), parentID: 1},
+ { taskID: 3, taskName: 'Plan timeline', startDate: new Date('02/04/2024 08:00'), endDate: new Date('02/10/2024'), duration: 6, progress: '60', parentID: 2 },
+ { taskID: 4, taskName: 'Plan budget', startDate: new Date('02/04/2024 08:00'), endDate: new Date('02/10/2024'), duration: 6, progress: '90', parentID: 2 },
+ { taskID: 5, taskName: 'Allocate resources', startDate: new Date('02/04/2024 08:00'), endDate: new Date('02/10/2024'), duration: 6, progress: '75', parentID: 2 },
+ { taskID: 6, taskName: 'Planning complete', startDate: new Date('02/06/2024 08:00'), endDate: new Date('02/10/2024'), duration: 0, predecessor: '3FS,4FS,5FS', parentID: 2 },
+ { taskID: 7, taskName: 'Design', startDate: new Date('02/13/2024 08:00'), endDate: new Date('02/17/2024 08:00'), parentID: 1, },
+ { taskID: 8, taskName: 'Software Specification', startDate: new Date('02/13/2024 08:00'), endDate: new Date('02/15/2024'), duration: 3, progress: '60', predecessor: '6FS', parentID: 7, },
+ { taskID: 9, taskName: 'Develop prototype', startDate: new Date('02/13/2024 08:00'), endDate: new Date('02/15/2024'), duration: 3, progress: '100', predecessor: '6FS', parentID: 7, },
+ { taskID: 10, taskName: 'Get approval from customer', startDate: new Date('02/16/2024 08:00'), endDate: new Date('02/17/2024 08:00'), duration: 2, progress: '100', predecessor: '9FS', parentID: 7 },
+ { taskID: 11, taskName: 'Design complete', startDate: new Date('02/17/2024 08:00'), endDate: new Date('02/17/2024 08:00'), duration: 0, predecessor: '10FS', parentID: 7 }
],
taskFields: {
id: 'taskID',
diff --git a/src/gantt/toolbar-template.html b/src/gantt/toolbar-template.html
index ff9507c1..c4059a57 100644
--- a/src/gantt/toolbar-template.html
+++ b/src/gantt/toolbar-template.html
@@ -48,7 +48,8 @@
}
.bootstrap5 #ToolbarTemplate .e-quickfilter::before,
.bootstrap5-dark #ToolbarTemplate .e-quickfilter::before,
- .fluent #ToolbarTemplate .e-quickfilter::before, .fluent-dark #ToolbarTemplate .e-quickfilter::before,
+ .fluent #ToolbarTemplate .e-quickfilter::before,.fluent2 #ToolbarTemplate .e-quickfilter::before,
+ .fluent2-highcontrast #ToolbarTemplate .e-quickfilter::before,.fluent2-dark #ToolbarTemplate .e-quickfilter::before, .fluent-dark #ToolbarTemplate .e-quickfilter::before,
.tailwind #ToolbarTemplate .e-quickfilter::before, .tailwind-dark #ToolbarTemplate .e-quickfilter::before {
content: '\e7f7';
font-family: 'e-icons';
diff --git a/src/gantt/toolbar-template.ts b/src/gantt/toolbar-template.ts
index e8a57c4d..24b79ef0 100644
--- a/src/gantt/toolbar-template.ts
+++ b/src/gantt/toolbar-template.ts
@@ -55,8 +55,8 @@ Gantt.Inject(Filter, Toolbar, DayMarkers, Selection);
gantt.clearFiltering();
}
},
- projectStartDate: new Date('03/24/2019'),
- projectEndDate: new Date('07/06/2019')
+ projectStartDate: new Date('03/24/2024'),
+ projectEndDate: new Date('07/06/2024')
});
gantt.appendTo('#ToolbarTemplate');
};
diff --git a/src/gantt/tooltip-template.ts b/src/gantt/tooltip-template.ts
index c686c3fc..f8a45ce0 100644
--- a/src/gantt/tooltip-template.ts
+++ b/src/gantt/tooltip-template.ts
@@ -59,8 +59,8 @@ Gantt.Inject(Selection, DayMarkers );
splitterSettings: {
columnIndex: 2
},
- projectStartDate: new Date('03/24/2019'),
- projectEndDate: new Date('05/04/2019')
+ projectStartDate: new Date('03/24/2024'),
+ projectEndDate: new Date('05/04/2024')
});
gantt.appendTo('#TooltipTemplate');
};
diff --git a/src/gantt/undo-redo.ts b/src/gantt/undo-redo.ts
index 996e9aad..44406c6b 100644
--- a/src/gantt/undo-redo.ts
+++ b/src/gantt/undo-redo.ts
@@ -55,8 +55,8 @@ Gantt.Inject(Selection, Filter, Sort, ColumnMenu, Resize,Edit,Reorder,UndoRedo,C
splitterSettings: {
columnIndex: 2
},
- projectStartDate: new Date('03/24/2019'),
- projectEndDate: new Date('07/06/2019')
+ projectStartDate: new Date('03/24/2024'),
+ projectEndDate: new Date('07/06/2024')
});
gantt.appendTo('#UndoRedo');
};
diff --git a/src/gantt/unscheduled-tasks.html b/src/gantt/unscheduled-tasks.html
index 2456cd1a..ac9e4e2a 100644
--- a/src/gantt/unscheduled-tasks.html
+++ b/src/gantt/unscheduled-tasks.html
@@ -16,7 +16,9 @@
}
.bootstrap5 #Unscheduled .e-add-icon:before,.bootstrap5-dark #Unscheduled .e-add-icon:before,
.tailwind #Unscheduled .e-add-icon:before,.tailwind-dark #Unscheduled .e-add-icon:before,
- .fluent #Unscheduled .e-add-icon:before, .fluent-dark #Unscheduled .e-add-icon:before, .material3-dark #Unscheduled .e-add-icon:before ,.material3 #Unscheduled .e-add-icon:before {
+ .fluent #Unscheduled .e-add-icon:before, .fluent-dark #Unscheduled .e-add-icon:before, .material3-dark #Unscheduled .e-add-icon:before ,.material3 #Unscheduled .e-add-icon:before,
+ .fluent2 #Unscheduled .e-add-icon:before,.fluent2-highcontrast #Unscheduled .e-add-icon:before,
+ .fluent2-dark #Unscheduled .e-add-icon:before{
content: "\e836"
}
diff --git a/src/gantt/unscheduled-tasks.ts b/src/gantt/unscheduled-tasks.ts
index a0f9a9cf..df24e5c7 100644
--- a/src/gantt/unscheduled-tasks.ts
+++ b/src/gantt/unscheduled-tasks.ts
@@ -41,8 +41,8 @@ Gantt.Inject(Edit, Toolbar, Selection);
},
allowUnscheduledTasks: true,
allowSelection: true,
- projectStartDate: new Date('01/01/2019'),
- projectEndDate: new Date('01/20/2019'),
+ projectStartDate: new Date('01/01/2024'),
+ projectEndDate: new Date('01/20/2024'),
toolbarClick: (args: ClickEventArgs) => {
let data: object = {
Duration: null,
diff --git a/src/gantt/virtual-scroll.ts b/src/gantt/virtual-scroll.ts
index 26bae772..ae1f8b71 100644
--- a/src/gantt/virtual-scroll.ts
+++ b/src/gantt/virtual-scroll.ts
@@ -38,8 +38,8 @@ Gantt.Inject(Selection, VirtualScroll);
labelSettings: {
taskLabel: 'Progress'
},
- projectStartDate: new Date('04/01/2019'),
- projectEndDate: new Date('12/31/2025')
+ projectStartDate: new Date('04/01/2024'),
+ projectEndDate: new Date('12/31/2030')
});
gantt.appendTo('#VirtualScroll');
};
\ No newline at end of file
diff --git a/src/gantt/work-week.html b/src/gantt/work-week.html
index aae0cedb..6e84746d 100644
--- a/src/gantt/work-week.html
+++ b/src/gantt/work-week.html
@@ -15,7 +15,7 @@
Working Days
|
-
+ |
@@ -40,4 +40,24 @@
||||||||||||||||||||||
|
- Work Start Time
+ | + | |
|
-
-
+
+ |
+ Work Start Time
+
+ |
+
+
+
+ |
|
+ Work End Time
+ |
+
+
+
+
+ |
+ |
|
+
+
+
+ |
+ ||
| + + | +||
|
+ Working Days
+ |
+
+
+
|
|
|
- Work End Time
+ |
+ Work Start Time
+ |
+
+
+
+
|
|
-
-
+
+ |
+ Work End Time
+
+ |
+
+
+
+ |
|
+
+
|
||
- In this example, you can see how to render a Gantt chart with the provided data source and customizable working hours in a day. You can split the working hours in a day to one or more range. So, You can also provide the dayWorkingTime property value as array of object collection. Gantt chart also supports different durationUnit values as follows:
+ In this example, you can see how to render a Gantt chart with the provided data source and customizable working hours in a day. You can split the working hours in a day to one or more range. So, you can also provide the
+ dayWorkingTime property value as array of object collection. Gantt chart also supports different
+ durationUnit values as follows:
+
dayhourminuteYou can also set different working time range for different working days using + weekWorkingTime property. The + weekWorkingTime property enables you to specify different working hours for each day of the week in your Gantt chart. + By configuring this property, you can ensure that tasks are only scheduled during defined working periods, avoiding non-working hours.
Given duration in dataSource will be considered with this unit. In this demo, the hour unit is used to render taskbars in day hour timeline mode. Gantt chart supports only 24hours format as of now. The working hours will differ between organizations. This feature will be helpful to keep track of each task and resource task status based on the working time of company.
Selection module using the Gantt.Inject(Selection) method. To use markers, inject the
DayMarkers module using the Gantt.Inject(DayMarkers) method.
-In this demo,
- by enabling the enableHover property, you can move the mouse over Grid rows to see the hover effect.
In this demo, enabling the enableHover
+ property, you can move the mouse over Grid rows to see the hover effect.
This sample demonstrates the Grid component with the infinite scrolling feature. Click the button at the top of the Grid + to load data source and scroll the Grid content vertically and horizontally to load rows and columns respectively. +
+
The Grid Infinite scrolling feature enables the loading of data using the lazy loading concept, where buffer data is loaded only when the scrollbar reaches the end of the scroller.
To enable Infinite scrolling, set the Alt+W- Move the focus to the grid content element
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This sample illustrates the number of commercial air craft accidents and the fatalities across the world between 2012 and 2017. Each data point interprets the accident count and the fatality associated with the accident, the size of the bubble depicts the accident count and the shade of the bubble depicts the fatality count. +
+
+ In this example, you can see how to map more than one data for each data point or cell of the bubble heatmap. The size and shade parameters of the bubble is used to depict the data source values. The legend will be displayed only for the shade parameter of the bubble. For JSON data, you can specify which data source value should be mapped to either size or shade of the bubble parameters using the bubbleDataMapping property. The data source field should be mapped to the size and color properties of the bubbleDataMapping property.
+
The tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item on touch-enabled devices.
+Injecting Module
+
+ Heatmap component features are separated into discrete feature-based modules. To use a tooltip, inject the Tooltip module using the Heatmap.Inject(Tooltip) method, and to use a legend, inject the Legend module using the Heatmap.Inject(Legend) method.
+
|
- Palette Type:
- |
-
-
-
-
-
-
-
+
+
|
+
- This sample visualizes the energy consumption in trillion British thermal units (btu) by the various public sectors in US government over the years. The data label is disabled in this sample, the tooltip displays the data point values. In property panel, the options are available to change palette type in Heatmap by means of radio button. -
-- This example explains how to provide a specific color for specific range in heatmap. The startValue and endValue properties are used to define the range start and end values. The minColor and maxColor properties represent the colors of given range. -
-The tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item on touch-enabled devices.
-Injecting Module
-- Heatmap component features are separated into discrete feature-based modules. To use a tooltip, inject the Tooltip module using the Heatmap.Inject(Tooltip) method, and to use a legend, inject the Legend module using the Heatmap.Inject(Legend) method. -
-+ This sample visualizes the energy consumption in trillion British thermal units (btu) by the various public sectors in US government over the years. The data label is disabled in this sample, the tooltip displays the data point values. In property panel, the options are available to change palette type in Heatmap by means of radio button. +
++ This example explains how to provide a specific color for specific range in heatmap. The startValue and endValue properties are used to define the range start and end values. The minColor and maxColor properties represent the colors of given range. +
+The tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item on touch-enabled devices.
+Injecting Module
++ Heatmap component features are separated into discrete feature-based modules. To use a tooltip, inject the Tooltip module using the Heatmap.Inject(Tooltip) method, and to use a legend, inject the Legend module using the Heatmap.Inject(Legend) method. +
+- This sample visualizes the sales revenue of items sold by the employees in a week, where the revenue for the day is displayed in 1000 USD as cell data. -
-- In this example, you can see how to render a heat map with the provided data source. The palette color is applied to the items in heat map. The default legend is enabled in this example to represent the items. -
-The tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item on touch-enabled devices.
-+ This sample visualizes the sales revenue of items sold by the employees in a week, where the revenue for the day is displayed in 1000 USD as cell data. +
++ In this example, you can see how to render a heat map with the provided data source. The palette color is applied to the items in heat map. The default legend is enabled in this example to represent the items. +
+The tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item on touch-enabled devices.
+- This sample visualizes the number of defective product count per 1000 units coming out from a manufacturing unit - Data points are enhanced with labels and tooltip. Some data points were not marked with any values which indicates there are no defective products and these data points are termed as empty points. -
-
- In this example, you can see how to render empty points in the Heatmap. The empty points or the points with no data
- can be marked using null in the data source. You can also customize the background color of the
- empty points by using the emptyPointColor property in paletteSettings
-
The tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item on touch-enabled devices.
-
- Heatmap component features are separated into discrete feature-based modules. To use a tooltip, inject the Tooltip module using the Heatmap.Inject(Tooltip) method, and to use a legend, inject the Legend module using the Heatmap.Inject(Legend) method.
-
+ This sample visualizes the number of defective product count per 1000 units coming out from a manufacturing unit + Data points are enhanced with labels and tooltip. Some data points were not marked with any values which indicates there are no defective products and these data points are termed as empty points. +
+
+ In this example, you can see how to render empty points in the Heatmap. The empty points or the points with no data
+ can be marked using null in the data source. You can also customize the background color of the
+ empty points by using the emptyPointColor property in paletteSettings
+
The tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item on touch-enabled devices.
+
+ Heatmap component features are separated into discrete feature-based modules. To use a tooltip, inject the Tooltip module using the Heatmap.Inject(Tooltip) method, and to use a legend, inject the Legend module using the Heatmap.Inject(Legend) method.
+
|
+
+
+
+ |
+
|
+
+
+
+ |
+
|
-
-
-
- |
-
|
-
-
-
- |
-
- This sample illustrates the population growth rate of the most populous countries over the years. The data label is disabled in this sample, the tooltip displays the data point values. In property panel, the options are available to reverse the origin of the axes by means of checkbox for each axis. -
-- In this example, you can see how to reverse the axis origin for both axes, once the axis origin has been reversed the axis data will be displayed inverted. You can reverse the axis origin by enabling the isInversed property for each axis. -
-The tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item on touch-enabled devices.
-Injecting Module
-
- Heatmap component features are separated into discrete feature-based modules. To use a tooltip, inject the Tooltip module using the Heatmap.Inject(Tooltip) method.
-
+ This sample illustrates the population growth rate of the most populous countries over the years. The data label is disabled in this sample, the tooltip displays the data point values. In property panel, the options are available to reverse the origin of the axes by means of checkbox for each axis. +
++ In this example, you can see how to reverse the axis origin for both axes, once the axis origin has been reversed the axis data will be displayed inverted. You can reverse the axis origin by enabling the isInversed property for each axis. +
+The tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item on touch-enabled devices.
+Injecting Module
+
+ Heatmap component features are separated into discrete feature-based modules. To use a tooltip, inject the Tooltip module using the Heatmap.Inject(Tooltip) method.
+
- This sample visualizes the number of international tourist arrivals in millions of the most visited destinations in the world.
-- In this example, you can see how to bind JSON data and configure the Heatmap using the data adaptor support. You can bind - the JSON data with information for each cell to the Heatmap using - isJsonData and by defining the - adaptorType properties. In cell JSON data, the value for each cell is mapped using the - xDataMapping , - yDataMapping and - valueMapping properties.
-The tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item on touch-enabled devices.
-Injecting Module
-
- Heatmap component features are separated into discrete feature-based modules. To use data adaptor support, inject the Adaptor module using Heatmap.Inject(Adaptor) method, to use a tooltip, inject the Tooltip module using the Heatmap.Inject(Tooltip) method, and to use a legend, inject the Legend module using the Heatmap.Inject(Legend) method.
-
+ This sample visualizes the number of international tourist arrivals in millions of the most visited destinations in the world.
++ In this example, you can see how to bind JSON data and configure the Heatmap using the data adaptor support. You can bind + the JSON data with information for each cell to the Heatmap using + isJsonData and by defining the + adaptorType properties. In cell JSON data, the value for each cell is mapped using the + xDataMapping , + yDataMapping and + valueMapping properties.
+The tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item on touch-enabled devices.
+Injecting Module
+
+ Heatmap component features are separated into discrete feature-based modules. To use data adaptor support, inject the Adaptor module using Heatmap.Inject(Adaptor) method, to use a tooltip, inject the Tooltip module using the Heatmap.Inject(Tooltip) method, and to use a legend, inject the Legend module using the Heatmap.Inject(Legend) method.
+
- This sample visualizes the overall Olympic medals won by the countries in all the summer Olympic events from the year 2000 to 2016. -
-- In this example, you can see how to bind JSON data and configure the Heatmap using the data adaptor support. You can bind - the JSON data with information for each row to the Heatmap using - isJsonData and by defining the - adaptorType properties. In row JSON data, the row header is mapped using the - xDataMapping. -
-The tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item on touch-enabled devices.
-Injecting Module
-
- Heatmap component features are separated into discrete feature-based modules. To use data adaptor support, inject the Adaptor module using Heatmap.Inject(Adaptor) method, to use a tooltip, inject the Tooltip module using the Heatmap.Inject(Tooltip) method, and to use a legend, inject the Legend module using the Heatmap.Inject(Legend) method.
-
+ This sample visualizes the overall Olympic medals won by the countries in all the summer Olympic events from the year 2000 to 2016. +
++ In this example, you can see how to bind JSON data and configure the Heatmap using the data adaptor support. You can bind + the JSON data with information for each row to the Heatmap using + isJsonData and by defining the + adaptorType properties. In row JSON data, the row header is mapped using the + xDataMapping. +
+The tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item on touch-enabled devices.
+Injecting Module
+
+ Heatmap component features are separated into discrete feature-based modules. To use data adaptor support, inject the Adaptor module using Heatmap.Inject(Adaptor) method, to use a tooltip, inject the Tooltip module using the Heatmap.Inject(Tooltip) method, and to use a legend, inject the Legend module using the Heatmap.Inject(Legend) method.
+
- This sample illustrates a comprehensive view of the likelihood and impact of an organization’s risks. Risks that fall into the HeatMap's green zones require no action. Action is required in the yellow areas. Risks that fall into the red zone require immediate action. -
-In this example, you can see how to use the labelTemplate to display images in the HeatMap cells. The labelTemplate can be used to add any HTML elements into the HeatMap cells, such as images, text, and so on.
The tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item on touch-enabled devices.
-Injecting Module
-
- Heatmap component features are separated into discrete feature-based modules. To use data adaptor support, inject the Adaptor module using Heatmap.Inject(Adaptor) method and to use a tooltip, inject the Tooltip module using the Heatmap.Inject(Tooltip) method.
-
More information about label template can be found in this documentation section.
-+ This sample illustrates a comprehensive view of the likelihood and impact of an organization’s risks. Risks that fall into the HeatMap's green zones require no action. Action is required in the yellow areas. Risks that fall into the red zone require immediate action. +
+In this example, you can see how to use the labelTemplate to display images in the HeatMap cells. The labelTemplate can be used to add any HTML elements into the HeatMap cells, such as images, text, and so on.
The tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item on touch-enabled devices.
+Injecting Module
+
+ Heatmap component features are separated into discrete feature-based modules. To use data adaptor support, inject the Adaptor module using Heatmap.Inject(Adaptor) method and to use a tooltip, inject the Tooltip module using the Heatmap.Inject(Tooltip) method.
+
More information about label template can be found in this documentation section.
+- This sample visualizes the annual traffic report of an airport with the number of flight arrivals in a year.The data label is disabled in this sample, the tooltip displays the data point values. -
-
- In this example, you can see how to switch the Heatmap to canvas rendering mode.The rendering performance will be better in Canvas rendering mode, while loading large datasets. You can switch the rendering mode for Heatmap between SVG and Canvas using the renderingMode property. When the renderingMode property is set to Auto, the rendering mode will be switched automatically based of the size of data source to improve the rendering performance.
-
The tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item on touch-enabled devices.
-Injecting Module
-
- Heatmap component features are separated into discrete feature-based modules. To use a tooltip, inject the Tooltip module using the Heatmap.Inject(Tooltip) method and to use a legend, inject the Legend module using the Heatmap.Inject(Legend) method.
-
+ This sample visualizes the annual traffic report of an airport with the number of flight arrivals in a year.The data label is disabled in this sample, the tooltip displays the data point values. +
+
+ In this example, you can see how to switch the Heatmap to canvas rendering mode.The rendering performance will be better in Canvas rendering mode, while loading large datasets. You can switch the rendering mode for Heatmap between SVG and Canvas using the renderingMode property. When the renderingMode property is set to Auto, the rendering mode will be switched automatically based of the size of data source to improve the rendering performance.
+
The tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item on touch-enabled devices.
+Injecting Module
+
+ Heatmap component features are separated into discrete feature-based modules. To use a tooltip, inject the Tooltip module using the Heatmap.Inject(Tooltip) method and to use a legend, inject the Legend module using the Heatmap.Inject(Legend) method.
+
|
+ Legend Position:
+ |
+
+
+
+
+ |
+
|
- Legend Position:
- |
-
-
-
-
- |
-
- This sample visualizes the hourly weather forecast for some major European cities. The data label is disabled in this sample, the tooltip displays the data point values. In property panel, the options are available to change the display position of the Heatmap legend axes by means of dropdown. -
-- In this example, you can see how to change the display position of the Heatmap legend. You can change the display position - of legend to left, right, bottom and top by using the - position property in - legendSettings. -
-The tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item on touch-enabled devices.
-Injecting Module
-
- Heatmap component features are separated into discrete feature-based modules. To use a tooltip, inject the Tooltip module using the Heatmap.Inject(Tooltip) method and to use a legend, inject the Legend module using the Heatmap.Inject(Legend) method.
-
+ This sample visualizes the hourly weather forecast for some major European cities. The data label is disabled in this sample, the tooltip displays the data point values. In property panel, the options are available to change the display position of the Heatmap legend axes by means of dropdown. +
++ In this example, you can see how to change the display position of the Heatmap legend. You can change the display position + of legend to left, right, bottom and top by using the + position property in + legendSettings. +
+The tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item on touch-enabled devices.
+Injecting Module
+
+ Heatmap component features are separated into discrete feature-based modules. To use a tooltip, inject the Tooltip module using the Heatmap.Inject(Tooltip) method and to use a legend, inject the Legend module using the Heatmap.Inject(Legend) method.
+
- This sample visualizes the product wise monthly sales revenue of the items sold by an online retailer in a year. The products are grouped based on the purchase domains and revenue is displayed as cell data. -
-- In this example, you can see how to group axis labels. - You can customize text in each level by using alignment,textSytle and border properties. -
-Border of the axis labels can be customized by using type property. -
-RectangleBraceWithoutTopBorderWithoutBottomBorderWithoutTopandBottomBorderWithoutBorder.Injecting Module
-
- Heatmap component features are separated into discrete feature-based modules. To use a tooltip, inject the Tooltip module using the Heatmap.Inject(Tooltip) method.
-
+ This sample visualizes the product wise monthly sales revenue of the items sold by an online retailer in a year. The products are grouped based on the purchase domains and revenue is displayed as cell data. +
++ In this example, you can see how to group axis labels. + You can customize text in each level by using alignment,textSytle and border properties. +
+Border of the axis labels can be customized by using type property. +
+RectangleBraceWithoutTopBorderWithoutBottomBorderWithoutTopandBottomBorderWithoutBorder.Injecting Module
+
+ Heatmap component features are separated into discrete feature-based modules. To use a tooltip, inject the Tooltip module using the Heatmap.Inject(Tooltip) method.
+
|
+
+
+
+ |
+
|
+
+
+
+ |
+
|
-
-
-
- |
-
|
-
-
-
- |
-
- This sample illustrates the monthly flight arrivals at JFK international airport, New York. The data label is disabled in this sample, the tooltip displays the data point values. In property panel, the options are available to change the position of the axes by means of checkbox for each axis. -
-- In this example, you can see how to change the display position of the axis. You can change the display position of axes - by enabling the - opposedPosition property for each axis. -
-The tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item on touch-enabled devices.
-Injecting Module
-
- Heatmap component features are separated into discrete feature-based modules. To use a tooltip, inject the Tooltip module using the Heatmap.Inject(Tooltip) method.
-
+ This sample illustrates the monthly flight arrivals at JFK international airport, New York. The data label is disabled in this sample, the tooltip displays the data point values. In property panel, the options are available to change the position of the axes by means of checkbox for each axis. +
++ In this example, you can see how to change the display position of the axis. You can change the display position of axes + by enabling the + opposedPosition property for each axis. +
+The tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item on touch-enabled devices.
+Injecting Module
+
+ Heatmap component features are separated into discrete feature-based modules. To use a tooltip, inject the Tooltip module using the Heatmap.Inject(Tooltip) method.
+
|
- Palette Type:
- |
-
-
-
-
-
-
-
+
+
|
+
- This sample visualizes the energy consumption in trillion British thermal units (btu) by the various public sectors in US government over the years. The data label is disabled in this sample, the tooltip displays the data point values. In property panel, the options are available to change palette type in Heatmap by means of radio button. -
-- In this example, you can see how to change the palette type between - Fixed and - Gradient types in Heatmap. The palette type can be defined using the - type property in - paletteSettings. Legend is enabled in this example, changing the palette mode the legend type will be automatically switched between - gradient legend and list type legend. -
-The tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item on touch-enabled devices.
-Injecting Module
-
- Heatmap component features are separated into discrete feature-based modules. To use the tooltip, inject the Tooltip module using the Heatmap.Inject(Tooltip) method and to use a legend, inject the Legend module using the Heatmap.Inject(Legend) method.
-
+ This sample visualizes the energy consumption in trillion British thermal units (btu) by the various public sectors in US government over the years. The data label is disabled in this sample, the tooltip displays the data point values. In property panel, the options are available to change palette type in Heatmap by means of radio button. +
++ In this example, you can see how to change the palette type between + Fixed and + Gradient types in Heatmap. The palette type can be defined using the + type property in + paletteSettings. Legend is enabled in this example, changing the palette mode the legend type will be automatically switched between + gradient legend and list type legend. +
+The tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item on touch-enabled devices.
+Injecting Module
+
+ Heatmap component features are separated into discrete feature-based modules. To use the tooltip, inject the Tooltip module using the Heatmap.Inject(Tooltip) method and to use a legend, inject the Legend module using the Heatmap.Inject(Legend) method.
+
|
+ Rendering Mode:
+ |
+
+
+
+
+
+
+
+ |
+
|
- Rendering Mode:
- |
-
-
-
-
-
-
-
- |
-
- This sample visualizes the net migration rate for the northern European countries over the years. The data label is disabled in this sample, the tooltip displays the data point values. In property panel, the options are available to change the rendering mode between Canvas and SVG means of radio button. -
-
- In this example, you can see how to change the rendering mode between Canvas and SVG types in Heatmap. You can change the rendering mode using the renderingMode property.
-
The tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item on touch-enabled devices.
-Injecting Module
-
- Heatmap component features are separated into discrete feature-based modules. To use the tooltip, inject the Tooltip module using the Heatmap.Inject(Tooltip) method and to use a legend, inject the Legend module using the Heatmap.Inject(Legend) method.
-
+ This sample visualizes the net migration rate for the northern European countries over the years. The data label is disabled in this sample, the tooltip displays the data point values. In property panel, the options are available to change the rendering mode between Canvas and SVG means of radio button. +
+
+ In this example, you can see how to change the rendering mode between Canvas and SVG types in Heatmap. You can change the rendering mode using the renderingMode property.
+
The tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item on touch-enabled devices.
+Injecting Module
+
+ Heatmap component features are separated into discrete feature-based modules. To use the tooltip, inject the Tooltip module using the Heatmap.Inject(Tooltip) method and to use a legend, inject the Legend module using the Heatmap.Inject(Legend) method.
+
- This sample visualizes the GDP growth rate for the countries which are the world's major economies over the years. -
-- In this example, you can see how to bind array object as data source for Heatmap and configure the Heatmap using the data adaptor support. You can directly bind the array object to the Heatmap data source with default property settings.
-The tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item on touch-enabled devices.
-Injecting Module
-
- Heatmap component features are separated into discrete feature-based modules. To use data adaptor support, we need to inject Adaptor module using Heatmap.Inject(Adaptor) method, to use a tooltip, inject theTooltip module using the Heatmap.Inject(Tooltip) method, and to use a legend, inject the Legend module using the Heatmap.Inject(Legend) method.
-
+ This sample visualizes the GDP growth rate for the countries which are the world's major economies over the years. +
++ In this example, you can see how to bind array object as data source for Heatmap and configure the Heatmap using the data adaptor support. You can directly bind the array object to the Heatmap data source with default property settings.
+The tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item on touch-enabled devices.
+Injecting Module
+
+ Heatmap component features are separated into discrete feature-based modules. To use data adaptor support, we need to inject Adaptor module using Heatmap.Inject(Adaptor) method, to use a tooltip, inject theTooltip module using the Heatmap.Inject(Tooltip) method, and to use a legend, inject the Legend module using the Heatmap.Inject(Legend) method.
+
- This sample visualizes the crude oil production of the non-OPEC countries over the years. The data point values displayed are in million barrels per day units. -
-- In this example, you can see how to customize the tooltip content in the HeatMap. You can customize the tooltip content by using the template property. -
-The tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item on touch-enabled devices.
-Injecting Module
-
- Heatmap component features are separated into discrete feature-based modules. To use a tooltip, inject the Tooltip module using the Heatmap.Inject(Tooltip) method, and to use a legend, inject the Legend module using the Heatmap.Inject(Legend) method.
-
+ This sample visualizes the crude oil production of the non-OPEC countries over the years. The data point values displayed are in million barrels per day units. +
++ In this example, you can see how to customize the tooltip content in the HeatMap. You can customize the tooltip content by using the template property. +
+The tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item on touch-enabled devices.
+Injecting Module
+
+ Heatmap component features are separated into discrete feature-based modules. To use a tooltip, inject the Tooltip module using the Heatmap.Inject(Tooltip) method, and to use a legend, inject the Legend module using the Heatmap.Inject(Legend) method.
+
More information about Image Editor can be found in this diff --git a/src/image-editor/profile-picture.ts b/src/image-editor/profile-picture.ts index 330c9be7..6fadbaed 100644 --- a/src/image-editor/profile-picture.ts +++ b/src/image-editor/profile-picture.ts @@ -62,6 +62,7 @@ import { loadCultureFiles } from '../common/culture-loader'; click: () => { const imageEditor: ImageEditor = getComponent(document.getElementById('image-editor'), 'image-editor') as ImageEditor; imageEditor.reset(); + imageEditor.select('circle'); }, buttonModel: { content: 'Reset', isPrimary: false, cssClass: 'e-custom-img-btn e-img-custom-reset' } }, diff --git a/src/image-editor/sample.json b/src/image-editor/sample.json index fd4f7acb..3f3e4f05 100644 --- a/src/image-editor/sample.json +++ b/src/image-editor/sample.json @@ -10,6 +10,7 @@ "name": "Default Functionalities", "category": "Image Editor", "ftName": "image-editor", + "type": "update", "api": { "ImageEditor": [ @@ -34,7 +35,6 @@ "name": "Custom Toolbar", "category": "Image Editor", "ftName": "image-editor", - "type": "new", "api": { "ImageEditor": [ diff --git a/src/linear-gauge/bar-pointer.html b/src/linear-gauge/bar-pointer.html index b8f42735..9ec9bb2d 100644 --- a/src/linear-gauge/bar-pointer.html +++ b/src/linear-gauge/bar-pointer.html @@ -1,80 +1,82 @@ -
|
+
+ Horizontal
+ |
+
+
+ Vertical
+ |
+
|
-
- Horizontal
- |
-
-
- Vertical
- |
-
- This sample shows the various bar pointer shapes available in the linear gauge. Additionally, multiple bar - pointer - and animation support are enabled. -
-- In this example, you can see how to render and configure bar pointer in the linear gauge. The pointers - collection is useful for displaying multiple pointers. The properties available in pointers help - in the customization of the bar pointer in the linear gauge. -
-- More information on the bar pointer can be found in this documentation - section. -
-+ This sample shows the various bar pointer shapes available in the linear gauge. Additionally, multiple bar + pointer + and animation support are enabled. +
++ In this example, you can see how to render and configure bar pointer in the linear gauge. The pointers + collection is useful for displaying multiple pointers. The properties available in pointers help + in the customization of the bar pointer in the linear gauge. +
++ More information on the bar pointer can be found in this documentation + section. +
+- This sample shows the battery indicator charged up to 75% by utilizing the linear gauge's functionalities. -
-- In this example, you can see how to render and configure a linear gauge to look like a battery indicator. This - can be accomplished by combining axis, pointer, multiple ranges, and multiple annotation. -
-- More information on the linear gauge can be found in this documentation - section. -
-|
+ Orientation
+ |
+
+
+
+
+ |
+
|
+ Container Type
+ |
+
+
+
+
+ |
+
|
- Orientation
- |
-
-
-
-
- |
-
|
- Container Type
- |
-
-
-
-
- |
-
- This sample shows the different types of containers, such as normal, thermometer, and rounded rectangle. The - linear - gauge's orientation can also be changed from vertical to horizontal. -
-- The linear gauge can be rendered vertically or horizontally depending on the option selected in the - Orientation drop-down list. You can also select the container type from the Container Type - drop-down list. -
-- More information on the containers can be found in this documentation - section. Likewise, information about orientation can be found in this documentation - section. -
-+ This sample shows the different types of containers, such as normal, thermometer, and rounded rectangle. The + linear + gauge's orientation can also be changed from vertical to horizontal. +
++ The linear gauge can be rendered vertically or horizontally depending on the option selected in the + Orientation drop-down list. You can also select the container type from the Container Type + drop-down list. +
++ More information on the containers can be found in this documentation + section. Likewise, information about orientation can be found in this documentation + section. +
+|
@@ -41,13 +42,13 @@
-
+
-This sample demonstrates the inclusion of text and image pointers in the linear gauge. Additionally, multiple pointer support is enabled. -
+
+
+
-
\ No newline at end of file
+
+
\ No newline at end of file
diff --git a/src/linear-gauge/default-functionalities.html b/src/linear-gauge/default-functionalities.html
index a59b80fb..704c6a4d 100644
--- a/src/linear-gauge/default-functionalities.html
+++ b/src/linear-gauge/default-functionalities.html
@@ -1,29 +1,31 @@
-In this example, you can see how to render and configure text and image pointers in the linear gauge. The properties available in documentation section. -
-
+
-
+
-
+
-
-- This sample shows the linear gauge's basic rendering, which includes an axis, a pointer, major ticks, minor - ticks - and annotation. - -
-
-
-
-
\ No newline at end of file
+ - The linear gauge control shows scale values in either horizontal or vertical orientation. Axis, range, ticks, - pointer, and container properties can be used to customize the basic appearance of the linear gauge. - -- More information on the linear gauge can be found in this - documentation - section. - -+ This sample shows the linear gauge's basic rendering, which includes an axis, a pointer, major ticks, minor + ticks + and annotation. + ++ The linear gauge control shows scale values in either horizontal or vertical orientation. Axis, range, ticks, + pointer, and container properties can be used to customize the basic appearance of the linear gauge. + ++ More information on the linear gauge can be found in this + documentation + section. + +
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
+
+
-
-
+
+
+
+
+
-
-
-
-
-
-
-
-
-- This sample demonstrates the various options for customizing the axis labels, such as styling, formatting, - replacing - text, and setting offset in the linear gauge. - -
-
-
-
-
\ No newline at end of file
+
+
+
\ No newline at end of file
diff --git a/src/linear-gauge/labels.ts b/src/linear-gauge/labels.ts
index 322a7412..05ccaad6 100644
--- a/src/linear-gauge/labels.ts
+++ b/src/linear-gauge/labels.ts
@@ -163,6 +163,9 @@ loadCultureFiles();
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.gauge.theme = - In this example, you can see how to render and configure axis labels in the linear gauge. The properties in the - labelStyle - can be - used to style, format, and offset the label, while the label's text can be changed - dynamically via the - axisLabelRender event. - -- More information on the axis labels can be found in this - documentation - section. - -
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
+
+
-
-
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-- This sample shows the various marker pointer shapes available in the linear gauge. Additionally, multiple marker - pointer, animation and drag support are enabled. - -
-
-
-
-
\ No newline at end of file
+ - In this example, you can see how to render and configure marker pointer in the linear gauge. The - pointers collection is useful for displaying multiple pointers. The properties available in - pointers help in the customization of the marker pointer in the linear gauge. Drag pointers are - assisted by the dragStart and dragEnd - events. - -- More information on the marker pointer can be found in this - documentation - section. - -+ This sample shows the various marker pointer shapes available in the linear gauge. Additionally, multiple marker + pointer, animation and drag support are enabled. + ++ In this example, you can see how to render and configure marker pointer in the linear gauge. The + pointers collection is useful for displaying multiple pointers. The properties available in + pointers help in the customization of the marker pointer in the linear gauge. Drag pointers are + assisted by the dragStart and dragEnd + events. + ++ More information on the marker pointer can be found in this + documentation + section. + +
-
-
-
+
-
+
-
-
+
+
+
+
+
+
+
-
-
-
-- This sample demonstrates the print and export functionalities of the linear gauge. - -
-
-
-
\ No newline at end of file
+ - In this example, you can see how to print and export the rendered linear gauge. You can add print functionality - by using the print method when allowPrint - is set as true. Also, you can add export functionality by using the export method when allowImageExport and - allowPdfExport are set - as true. The linear gauge can be exported to JPEG, PNG, SVG, and PDF formats. - -- More information about print and export can be found in this - documentation - section. - -+ This sample demonstrates the print and export functionalities of the linear gauge. + ++ In this example, you can see how to print and export the rendered linear gauge. You can add print functionality + by using the print method when allowPrint + is set as true. Also, you can add export functionality by using the export method when allowImageExport and + allowPdfExport are set + as true. The linear gauge can be exported to JPEG, PNG, SVG, and PDF formats. + ++ More information about print and export can be found in this + documentation + section. + +
-
+
-
-
-
-
+
-
+
-
-- This sample shows a linear gauge that resembles a progress bar and indicates a task completion rate of 41%. - -
-
\ No newline at end of file
+
+
+
+ - In this example, you can see how to render and configure a new progress bar using the linear gauge. This can be - accomplished by combining axis, pointer, and annotation. - -- More information on the linear gauge can be found in this - documentation - section. - -+ This sample shows a linear gauge that resembles a progress bar and indicates a task completion rate of 41%. + ++ In this example, you can see how to render and configure a new progress bar using the linear gauge. This can be + accomplished by combining axis, pointer, and annotation. + ++ More information on the linear gauge can be found in this + documentation + section. + +
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
+
+
-
-
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-- This sample demonstrates the various customization options for the linear gauge's range. For example, an - exponential appearance, a gradient color, and a multiple range. - -
-
-
-
-
\ No newline at end of file
+ - In this example, you can see how to render and configure ranges in the linear gauge. The ranges and - linearGradient are used to display multiple ranges, perform range customization, and apply gradient - colors, respectively. - -- More information on the ranges can be found in this - documentation - section. - -+ This sample demonstrates the various customization options for the linear gauge's range. For example, an + exponential appearance, a gradient color, and a multiple range. + ++ In this example, you can see how to render and configure ranges in the linear gauge. The ranges and + linearGradient are used to display multiple ranges, perform range customization, and apply gradient + colors, respectively. + ++ More information on the ranges can be found in this + documentation + section. + +
-
-
+
+
-
+
-
+
-
-
+
-
+
+
-
-- This sample demonstrates how to create a slider by utilizing the functionalities available in the - linear gauge. - -
-
-
-
-
\ No newline at end of file
+ - In this example, you can see how to render and configure a new slider in the linear gauge. This can be - accomplished by combining axis, range, and pointer. The pointer has been made interactive, so the value changes - as you drag it. - -- More information on the linear gauge can be found in this - documentation - section. - -+ This sample demonstrates how to create a slider by utilizing the functionalities available in the + linear gauge. + ++ In this example, you can see how to render and configure a new slider in the linear gauge. This can be + accomplished by combining axis, range, and pointer. The pointer has been made interactive, so the value changes + as you drag it. + ++ More information on the linear gauge can be found in this + documentation + section. + +
-
+
-
-
+
-
+
-
-- This sample shows a linear gauge that resembles a step progress bar and indicates shipment status. - -
-
\ No newline at end of file
+
+ - In this example, you can see how to render and configure a new step progress bar using the linear gauge. This - can be - accomplished by combining axis, multiple pointers, and multiple ranges. - -- More information on the linear gauge can be found in this - documentation - section. - -+ This sample shows a linear gauge that resembles a step progress bar and indicates shipment status. + ++ In this example, you can see how to render and configure a new step progress bar using the linear gauge. This + can be + accomplished by combining axis, multiple pointers, and multiple ranges. + ++ More information on the linear gauge can be found in this + documentation + section. + +
+
-This sample shows a linear gauge displaying the number of steps taken by a person in a day. -
+
+
+
-
\ No newline at end of file
+
+In this example, you can see how to render and configure a linear gauge to look like a steps counter. This can be @@ -19,11 +20,12 @@ href="https://ej2.syncfusion.com/documentation/linear-gauge/getting-started/">documentation section. -
+
-This sample shows a thermometer that displays temperature in both degrees and fahrenheit. -
+
+
\ No newline at end of file
+
+In this example, you can see how to render and configure a linear gauge to look like a thermometer. More information about containers can be found in this documentation section. -
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
+
+
-
-
+
+
+
+
+
-
-
-
-
-
-
-
-
-- This sample shows ticks in various positions such as inside, middle, and outside. Additionally, the position of - the ticks can be customized using offset. - -
-
-
-
-
\ No newline at end of file
+ - In this example, you can see how to render and configure ticks in the linear gauge. The position - and offset - properties in majorTicks and - minorTicks are used to position the ticks as well as provide offset. - -- More information on the ticks can be found in this - documentation - section. - -+ This sample shows ticks in various positions such as inside, middle, and outside. Additionally, the position of + the ticks can be customized using offset. + ++ In this example, you can see how to render and configure ticks in the linear gauge. The position + and offset + properties in majorTicks and + minorTicks are used to position the ticks as well as provide offset. + ++ More information on the ticks can be found in this + documentation + section. + +
-
-
-
-
-- This sample depicts the linear gauge as a measuring scale and shows the tooltip in the linear gauge. - -
-
-
-
-
\ No newline at end of file
+- The tooltip is used to track the current value that is closest to the mouse position or touch contact. When - using a - touch-enabled device, the tooltip is displayed by hovering or tapping. - -- More information about tooltip can be found in this - documentation - section. - -
+
+
+ + This sample depicts the linear gauge as a measuring scale and shows the tooltip in the linear gauge. + ++ The tooltip is used to track the current value that is closest to the mouse position or touch contact. When + using a + touch-enabled device, the tooltip is displayed by hovering or tapping. + ++ More information about tooltip can be found in this + documentation + section. + +
-
|