Merge pull request #452 from Syncfusion-Content/hotfix/hotfix-v24.1.41

DOCINFRA-2341_merged_using_automation

Author: SyncfusionBuild

js/Chart/Getting-Started.md

@@ -76,7 +76,7 @@ Initialize the chart by using the ejChart method. The chart is rendered to the s
 
 Now, the Chart is rendered with some auto-generated random values and with default Column chart type.
 
-![JavaScript Chart getting started](Getting-Started_images/Getting-Started_img1.png)
+![JavaScript Chart getting started.](Getting-Started_images/javascript-chart-getting-started.png)
 
 
 ## Populate chart with data
@@ -143,7 +143,7 @@ Now, map the month and sales values in the data source to the line series by set
 
 {% endhighlight %}
 
-![JavaScript Chart Populate chart with data](Getting-Started_images/Getting-Started_img2.png)
+![JavaScript Chart Populate chart with data.](Getting-Started_images/javascript-chart-data.png)
 
 
 Since the data is related to sales, format the vertical axis labels by adding ‘$’ as a prefix and ‘K’ as a suffix to each label. This can be achieved by setting the "${value}K" to the [`labelFormat`](../api/ejchart#members:primaryxaxis-labelformat) option of the axis. Here, {value} acts as a placeholder for each axis label, "$" and "K" are the actual prefix and suffix added to each axis label. 
@@ -165,7 +165,7 @@ The following code example illustrates this,
 
 {% endhighlight %}
 
-![JavaScript Chart axis](Getting-Started_images/Getting-Started_img3.png)
+![JavaScript Chart axis.](Getting-Started_images/javascript-chart-axis.png)
 
 
 Refer to the [`Axis`](axis) section to know more about axis types, adding multiple axes and other customization options.
@@ -197,7 +197,7 @@ The following code example illustrates this,
 
 {% endhighlight %}
 
-![JavaScript Chart Add Data Labels](Getting-Started_images/Getting-Started_img4.png)
+![JavaScript Chart Add Data Labels.](Getting-Started_images/javascript-chart-data-labels.png)
 
 
 There are situations where the default label content is not sufficient to the user. In this case, you can use the [`template`](../api/ejchart#members:series-marker-datalabel-template) option to format the label content with some additional information.
@@ -241,7 +241,7 @@ The following code example shows how to set the id of the above template to [`te
 
 {% endhighlight %}
 
-![JavaScript Chart data marker](Getting-Started_images/Getting-Started_img5.png)
+![JavaScript Chart data marker.](Getting-Started_images/javascript-chart-data-marker.png)
 
 
 Refer to the [`Data Markers`](Data-Markers.html) section to know more about the options available to customize it.
@@ -272,7 +272,7 @@ You can enable or disable the legend by using the [`visible`](../api/ejchart#mem
 
 {% endhighlight %}
 
-![JavaScript Chart Enable Legend](Getting-Started_images/Getting-Started_img6.png)
+![JavaScript Chart Enable Legend.](Getting-Started_images/javascript-chart-legend.png)
 
 
 Refer to the [`Legend`](Legend.html) section to know more about how to position legend and customize its appearance.
@@ -300,7 +300,7 @@ The following code example illustrates this,
 
 {% endhighlight %}
 
-![JavaScript Chart Enable Tooltip](Getting-Started_images/Getting-Started_img7.png)
+![JavaScript Chart Enable Tooltip.](Getting-Started_images/javascript-chart-tooltip.png)
 
 
 Refer to the [`Tooltip`](user-interactions.html) section to know more about formatting tooltip contents and customizing its appearance.
@@ -324,7 +324,7 @@ You need to add a title to the chart to provide quick information to the user ab
 
 {% endhighlight %}
 
-![JavaScript Chart Add Chart Title](Getting-Started_images/Getting-Started_img8.png)
+![JavaScript Chart Add Chart Title.](Getting-Started_images/javascript-chart-title.png)
 
 
 Refer to the [`Chart Title`](chart-title.html) section to know more about aligning title, customizing its appearance and adding subtitle to the chart.

js/Chart/Getting-Started_images/Getting-Started_img3.png renamed to js/Chart/Getting-Started_images/javascript-chart-axis.png

@@ -1,20 +1,20 @@
 ---
 layout: post
-title: Getting-Started
-description: getting started
+title: Getting Started with JavaScript Color Picker | Syncfusion
+description: Learn here all about getting started with Syncfusion Essential Studio JavaScript Color Picker control, its elements, and more details.
 platform: js
 control: ColorPicker
 documentation: ug
 api: /api/js/ejcolorpicker
 ---
 
-# Getting Started
+# Getting Started with JavaScript Color Picker
 
 This section explains briefly about how to create a **ColorPicker** in your application with **JavaScript**. The **Essential JavaScript ColorPicker** control provides you support for selecting the colors in different sources such as palettes, picker or custom palettes. You can also render the color value from control in three formats such as RGB, HSV and HEXCODE. 
 
 In this example, you can learn how to customize **ColorPicker** control in a category Application. 
 
-![](/js/ColorPicker/Getting-Started_images/Getting-Started_img1.png) 
+![Getting Started with JavaScript Color Picker.](/js/ColorPicker/Getting-Started_images/javascript-color-picker-getting-started.png) 
 
 In the following sections you can learn, How to:
 
@@ -79,7 +79,7 @@ Initialize **ColorPicker** element in **<script>** tag.
 
 Run the above code to render the following output.
 
-![](/js/ColorPicker/Getting-Started_images/Getting-Started_img2.png) 
+![JavaScript Color Picker output.](/js/ColorPicker/Getting-Started_images/javascript-color-picker-output.png) 
 
 ## Initialize the other widgets
 
@@ -245,7 +245,7 @@ Add the following style section to align form fields.
 
 Run the above code to render the following output.
 
-![](/js/ColorPicker/Getting-Started_images/Getting-Started_img3.png) 
+![JavaScript Color Picker output render.](/js/ColorPicker/Getting-Started_images/javascript-color-picker-output-render.png) 
 
 ## Add value with Selected Color 
 
@@ -278,5 +278,5 @@ Initialize the click event for the button element in **<script>** tag.
 
 The following screenshot illustrates the resultant output after you click **Add** button.
 
-![](/js/ColorPicker/Getting-Started_images/Getting-Started_img4.png) 
+![Javascript Color Picker resultant output.](/js/ColorPicker/Getting-Started_images/javascript-color-picker-resultant-output.png) 
 

js/Chart/Getting-Started_images/Getting-Started_img4.png renamed to js/Chart/Getting-Started_images/javascript-chart-data-labels.png

@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Getting started with JavaScript DatePicker Control | Syncfusion
+title: Getting Started with JavaScript DatePicker Control | Syncfusion
 description: Learn here about getting started with Syncfusion JavaScript DatePicker control, its elements, and more.
 platform: js
 control: DatePicker
@@ -15,7 +15,7 @@ To get start with [DatePicker](https://www.syncfusion.com/javascript-ui-controls
 
 CSS file
 
-* [ej.web.all.min.css](http://cdn.syncfusion.com/{{ site.releaseversion }}/js/web/flat-azure/ej.web.all.min.css) – includes all widgets styles (To know more about theme refer [Theming in Essential JavaScript Component](https://help.syncfusion.com/js/theming-in-essential-javascript-components#))
+* [ej.web.all.min.css](http://cdn.syncfusion.com/{{ site.releaseversion }}/js/web/flat-azure/ej.web.all.min.css) – includes all widgets styles (To know more about theme refer [Theming in Essential JavaScript Component](https://help.syncfusion.com/js/theming-in-essential-javascript-components))
 
 External script files
 
@@ -50,7 +50,7 @@ You can make use of ‘ej.web.all.min.js’ file which encapsulates all ‘ej’
 
 * [ej.web.all.min.js](http://cdn.syncfusion.com/{{ site.releaseversion }}/js/web/ej.web.all.min.js) – includes all web widgets.
 
-N>  In production, we highly recommend you to use our [custom script generator](https://help.syncfusion.com/js/custom-script-generator#) to create custom script file with required controls and its dependencies only. Also to reduce the file size further please use [GZip compression](https://web.dev/optimizing-content-efficiency-optimize-encoding-and-transfer/?hl=en#text-compression-with-gzip) in your server. 
+N>  In production, we highly recommend you to use our [custom script generator](https://help.syncfusion.com/js/custom-script-generator) to create custom script file with required controls and its dependencies only. Also to reduce the file size further please use [GZip compression](https://web.dev/optimizing-content-efficiency-optimize-encoding-and-transfer/?hl=en#text-compression-with-gzip) in your server. 
 
 A simple HTML file with required CSS and script reference added to create DatePicker
 

js/Chart/Getting-Started_images/Getting-Started_img5.png renamed to js/Chart/Getting-Started_images/javascript-chart-data-marker.png

@@ -1,14 +1,14 @@
 ---
 layout: post
-title: Getting-Started
-description: getting started
+title: Getting Started with JavaScript DateTime Picker Control | Syncfusion
+description: Learn here about getting started with Syncfusion Essential JavaScript DateTime Picker control, its elements, and more details.
 platform: js
 control: DateTimePicker
 documentation: ug
 api: /api/js/ejdatetimepicker
 ---
 
-# Getting Started
+# Getting Started with JavaScript DateTime Picker
 
 This section explains briefly about how to create a **DateTimePicker** in your application with **JavaScript**.
 
@@ -18,7 +18,7 @@ The following screenshot illustrates the functionality of a **DateTimePicker** w
 
 
 
-![](/js/DateTimePicker/Getting-Started_images/Getting-Started_img1.png)
+![JavaScript DateTime Picker getting started.](/js/DateTimePicker/Getting-Started_images/javascript-datetime-picker-functionality.png)
 
 ## Create DateTimePicker 
 
@@ -107,7 +107,7 @@ Initialize **DateTimePicker** in the script.
 
 The following screenshot displays a **DateTimePicker** control.
 
-![](/js/DateTimePicker/Getting-Started_images/Getting-Started_img.png)
+![JavaScript DateTime Picker screenshot display.](/js/DateTimePicker/Getting-Started_images/javascript-datetime-picker-screenshot.png)
 
 
 ## Get / Set value
@@ -159,7 +159,7 @@ You can assign values after initialization in DateTimePicker (‘it helps to get
 
 The following screenshot displays a **DateTimePicker** control with datetime value.
 
-![](/js/DateTimePicker/Getting-Started_images/Getting-Started_img2.png)
+![Javascript DateTime Picker datetime value.](/js/DateTimePicker/Getting-Started_images/javascript-datetime-picker-value.png)
 
 
 ## Set the Min and Max Date with Time Interval
@@ -183,5 +183,5 @@ In a real-time appointment scenario, the appointment is open only for a limited
 
 The following screenshot shows the output for the above code example.
 
-![](/js/DateTimePicker/Getting-Started_images/Getting-Started_img3.png)
+![Javascript DateTime Picker output screenshot.](/js/DateTimePicker/Getting-Started_images/javascript-datetime-picker-output-screenshot.png)
 

js/Chart/Getting-Started_images/Getting-Started_img2.png renamed to js/Chart/Getting-Started_images/javascript-chart-data.png

@@ -1,19 +1,19 @@
 ---
 layout: post
-title: Getting-Started
-description: getting started 
+title: Getting Started with JavaScript Menu Control | Syncfusion
+description: Learn here all about getting started with Syncfusion Essential JavaScript Menu component, it's elements and more details.
 platform: js
 control: Menu
 documentation: ug
 api: /api/js/ejmenu
 ---
 
-# Getting Started 
+# Getting Started with JavaScript Menu Control
 
 This section explains briefly about how to create a **Menu** control in your application with **JavaScript**. The **Essential JavaScript** **Menu** supports displaying a **Menu** of list-out items. This **Menu** is based on ul-li hierarchy, where the sub-list items are rendered as the sub-menu items. The **Menu** control can also be rendered with local and remote data source.  From the following guidelines, you can learn how to customize the **Menu** control for a website. In this case, **Syncfusion's** website **Menu** is discussed. The following screenshot displays the appearance of **Menu**.
 
 
-![](/js/Menu/Getting-Started_images/Getting-Started_img1.png) 
+![Getting Started with JavaScript Menu.](/js/Menu/Getting-Started_images/javascript-menu-getting-started.png) 
 
 ## Create a Menu
 
@@ -76,7 +76,7 @@ Initialize the **Menu** control in <script> tag.
 
 Output of the above steps.
 
-![](/js/Menu/Getting-Started_images/Getting-Started_img2.png) 
+![JavaScript Menu output steps.](/js/Menu/Getting-Started_images/javascript-menu-output-steps.png) 
 
 ## Configure parent Menu items
 
@@ -105,7 +105,7 @@ Every **Menu** has a list of **Menu** items with list of sub level **Menu** item
 
 The following screenshot displays output.
 
-![](/js/Menu/Getting-Started_images/Getting-Started_img3.png) 
+![JavaScript Menu display output.](/js/Menu/Getting-Started_images/javascript-menu-display-output.png) 
 
 ## Initialize sub-level Menu items
 
@@ -155,7 +155,7 @@ Execute the above code example to render the following output.
 
 
 
-![](/js/Menu/Getting-Started_images/Getting-Started_img4.png) 
+![JavaScript Menu output render.](/js/Menu/Getting-Started_images/javascript-menu-output-render.png) 
 
 ## Define multiple level Menu items
 
@@ -209,7 +209,7 @@ The following screenshot is the output.
 
 
 
-![](/js/Menu/Getting-Started_images/Getting-Started_img5.png) 
+![JavaScript Menu output screenshot.](/js/Menu/Getting-Started_images/javascript-menu-output-screenshot.png) 
 
 By following the above mentioned steps, you can render the **Menu** control with multiple level sub items through online data source. You can simply customize the **Menu** widget in an efficient manner.
 

js/Chart/Getting-Started_images/Getting-Started_img1.png renamed to js/Chart/Getting-Started_images/javascript-chart-getting-started.png

@@ -1,5 +1,5 @@
 ---
-title: Getting started with JavaScript Schedule Control | Syncfusion
+title: Getting Started with JavaScript Schedule Control | Syncfusion
 description: Learn here about getting started with Syncfusion Essential JavaScript Schedule Control, its elements, and more.
 platform: js
 control: schedule
@@ -193,6 +193,6 @@ $(function() { // Document is ready
 
 {% endhighlight %}
 
-![JavaScript Schedule Mapper Fields](Getting-Started_images/Getting-Started_img1.png)
+![JavaScript Schedule Mapper Fields.](Getting-Started_images/javascript-scheduler-mapper-field.png)
 
 

js/Chart/Getting-Started_images/Getting-Started_img6.png renamed to js/Chart/Getting-Started_images/javascript-chart-legend.png

@@ -859,7 +859,7 @@ Execute the above code to render the following output.
 
 ![Theme support in JavaScript Split Button](/js/SplitButton/Easy-customization_images/Easy-customization_img5.png) 
 
-# Enable/Disable SplitButton
+## Enable/Disable SplitButton
 
 **SplitButton** provides you an option to enable /disable the ToggleButton. You can disable the ToggleButton by setting the “**enabled**” property value as **false**.
 

js/Chart/Getting-Started_images/Getting-Started_img8.png renamed to js/Chart/Getting-Started_images/javascript-chart-title.png

@@ -14,7 +14,7 @@ This section explains briefly about how to create a **TimePicker** in your appli
 
 The following screenshot illustrates the functionality of a **TimePicker** with a time range of morning to evening. You can select a time to book a table, from a period of 9.00 AM to 6.00 PM for the current day. This avoids selecting a time prior to the morning.
 
-![JavaScript TimePicker Getting Started](Getting-Started_images/Getting-Started_img1.png) 
+![JavaScript TimePicker getting started.](Getting-Started_images/javascript-timepicker-getting-started.png) 
 
 ## Create a TimePicker 
 
@@ -136,7 +136,7 @@ Add the following styles to show **Time Picker** control.
 
 The following screenshot displays a **TimePicker** control.
 
-![JavaScript TimePicker Create a TimePicker](Getting-Started_images/Getting-Started_img2.png) 
+![JavaScript TimePicker Create a TimePicker.](Getting-Started_images/javascript-timepicker-create.png) 
 
 ## Set the Min and Max Values
 
@@ -169,7 +169,7 @@ In a real-time hotel table booking scenario, the booking is open only for a limi
 
 The above code example displays the following output.
 
-![JavaScript TimePicker Set the Min and Max Values](Getting-Started_images/Getting-Started_img3.png) 
+![JavaScript TimePicker Set the Min and Max Values.](Getting-Started_images/javascript-timepicker-min-max.png) 
 
 ## Set Time Interval
 
@@ -206,7 +206,7 @@ Execute the above code to achieve the desired result. You can select the date an
 
 
 
-![JavaScript TimePicker Set Time Interval](Getting-Started_images/Getting-Started_img4.png) 
+![JavaScript TimePicker Set Time Interval.](Getting-Started_images/javascript-timepicker-interval.png) 
 
 ## Display the Acknowledgment Message
 
@@ -248,7 +248,7 @@ The following code example shows how to display the **acknowledgment message**.
 
 The following screenshot displays the **acknowledgment message**.
 
-![JavaScript TimePicker Display the Acknowledgment Message](Getting-Started_images/Getting-Started_img5.png) 
+![JavaScript TimePicker Display the Acknowledgment Message.](Getting-Started_images/javascript-timepicker-message.png) 
 
 ## Create Two TimePickers
 
@@ -356,7 +356,7 @@ Initialize **Two TimePickers** using the following code example.
 
 Execute the above code to achieve the desired result. By selecting the **Start Time** in the first **TimePicker**, you can select the End Time within the given range. This restricts you from selecting false time. This scenario is illustrated in the following screenshot.
 
-![JavaScript TimePicker Create Two TimePickers](Getting-Started_images/Getting-Started_img6.png) 
+![JavaScript TimePicker Create Two TimePickers.](Getting-Started_images/javascript-timepicker-create-two.png)