syncfusion-content · NatAsha163 · Aug 12, 2025 · Aug 13, 2025 · Aug 13, 2025 · Aug 26, 2025
diff --git a/angular/Chart/Getting-started.md b/angular/Chart/Getting-started.md
@@ -214,7 +214,7 @@ npm start
 
 * Browse to [http://localhost:3000](http://localhost:3000) to see the application. And navigate to chart tab. The component is rendered as like the below screenshot. You can make changes in the code found under src folder and the browser should auto-refresh itself while you save files. 
 
-![](Getting-started-images/Getting-Started_img1.png)
+![running the application in Angular Chart.](Getting-started-images/Getting-Started_img1.png)
 
 ## Data Binding
 
@@ -278,7 +278,7 @@ export class DataService{
 }
 {% endhighlight %}
 
-![](Getting-started-images/Getting-Started_img2.png)
+![data binding in Angular Chart.](Getting-started-images/Getting-Started_img2.png)
 
 
 ## Add Data Labels
@@ -300,7 +300,7 @@ The following code example illustrates this,
 
 {% endhighlight %}
 
-![](Getting-started-images/Getting-Started_img3.png)
+![add data labels in Angular Chart.](Getting-started-images/Getting-Started_img3.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.
@@ -323,7 +323,7 @@ The above HTML template is used as a template for each data label. Here, "point.
 
 The following code example shows how to set the id of the above template to [`template`](../api/ejchart#members:series-marker-datalabel-template) option,
 
-![](Getting-started-images/Getting-Started_img4.png)
+![how to set the id of the above template to template option.](Getting-started-images/Getting-Started_img4.png)
 
 ## Enable Tooltip
 
@@ -345,7 +345,7 @@ The following code example illustrates this,
 
 {% endhighlight %}
 
-![](Getting-started-images/Getting-Started_img5.png)
+![enable tooltip in Angular Chart.](Getting-started-images/Getting-Started_img5.png)
 
 ## Add Chart Title
 
@@ -358,4 +358,4 @@ You need to add a title to the chart to provide quick information to the user ab
 
 {% endhighlight %}
 
-![](Getting-started-images/Getting-Started_img6.png)
+![add chart title in Angular Chart.](Getting-started-images/Getting-Started_img6.png)
diff --git a/angular/Diagram/Interaction.md b/angular/Diagram/Interaction.md
@@ -17,7 +17,7 @@ Selector provides a visual representation of selected elements. It behaves like
 
 An element can be selected by clicking that element. During single click, all previously selected items are cleared. The following image shows how the selected elements are visually represented.
 
-![](/angular/Diagram/Interaction_images/Interaction_img1.png)
+![single selection in Diagram Interaction.](/angular/Diagram/Interaction_images/Interaction_img1.png)
 
 ### Selecting a group
 
@@ -37,7 +37,7 @@ Multiple elements can be selected with the following ways.
 
 Multiple selected elements are visually represented as shown.
 
-![](/angular/Diagram/Interaction_images/Interaction_img2.png)
+![multiple selected elements are visually represented as shown.](/angular/Diagram/Interaction_images/Interaction_img2.png)
 
 ### Select/Unselect elements programmatically
 
@@ -90,7 +90,7 @@ N> SelectedItems’s children is a read-only property. You cannot change the chi
 * An object can be dragged by clicking and dragging it. When multiple elements are selected, dragging any one of the selected elements move every selected element.
 * While dragging, the objects are snapped towards the nearest objects to make better alignments. For better alignments, refer to [Snapping](/angular/Diagram/Gridlines#snapping "Snapping").
 
-![](/angular/Diagram/Interaction_images/Interaction_img3.png)
+![an object can be dragged by clicking and dragging it.](/angular/Diagram/Interaction_images/Interaction_img3.png)
 
 ## Working with multiple diagrams
 
@@ -144,9 +144,9 @@ The following code illustrates how to drag nodes over multiple diagrams.
 
 The following screen short illustrates how the nodes are dragged from one diagram to another.
 
-![](/angular/Diagram/Interaction_images/Interaction_img12.png)
+![illustrates how the nodes are dragged from one diagram to another.](/angular/Diagram/Interaction_images/Interaction_img12.png)
 
-![](/angular/Diagram/Interaction_images/Interaction_img13.png)
+![illustrates how the nodes are dragged from one diagram to another in Diagram Interaction.](/angular/Diagram/Interaction_images/Interaction_img13.png)
 
 
 

diff --git a/angular/Diagram/Scroll-Settings.md b/angular/Diagram/Scroll-Settings.md
@@ -56,7 +56,7 @@ export class scrollSettingsComponent {
 
 In the example given below, the vertical scroll bar is scrolled down by 50px and horizontal scroll bar is scrolled to right by 100px. 
 
-![](/angular/Diagram/Scroll-Settings_images/Scroll-Settings_img1.png)
+![define scroll status in Diagram.](/angular/Diagram/Scroll-Settings_images/Scroll-Settings_img1.png)
 
 ## AutoScroll 
 

diff --git a/angular/Grid/Data-Binding.md b/angular/Grid/Data-Binding.md
@@ -59,7 +59,7 @@ The following code example describes the above behavior.
 
 The following output is displayed as a result of the above code example.
 
-![](dataBinding_images/dataBinding_img1.png)
+![to bind local data to the Grid.](dataBinding_images/dataBinding_img1.png)
 
 
 N> 1. There is no in-built support to bind the XML data to the grid. But you can achieve this requirement with the help of [`custom adaptor`]concept. 
@@ -116,7 +116,7 @@ The following code example describes the above behavior.
 
 The following output is displayed as a result of the above code example.
 
-![](dataBinding_images/dataBinding_img2.png)
+![OData is a standardized protocol for creating and consuming data.](dataBinding_images/dataBinding_img2.png)
 
 N> By default, if no adaptor is specified for ej.DataManager and only the url link is mentioned it will consider as ODataService. 
 
@@ -242,7 +242,7 @@ namespace EJGrid.Controllers
 
 The following output is displayed as a result of the above code example.
 
-![](dataBinding_images/dataBinding_img3.png)
+![webapi service data to Grid.](dataBinding_images/dataBinding_img3.png)
 
 
 ### Load At Once
@@ -294,7 +294,7 @@ Please refer to this for further reference on `offline` property
 
 The following output is displayed as a result of the above code example.
 
-![](dataBinding_images/dataBinding_img5.png)
+![load at once in Grid](dataBinding_images/dataBinding_img5.png)
 
 
 ### Data Caching
@@ -347,7 +347,7 @@ The following code example describes the above behavior.
 
 The following output is displayed as a result of the above code example.
 
-![](dataBinding_images/dataBinding_img6.png)
+![date caching in Grid Data Binding.](dataBinding_images/dataBinding_img6.png)
 
 
 ### Custom request parameters and HTTP Header
@@ -403,7 +403,7 @@ The following code example describes the above behavior.
 
 The custom parameter will be passed along with the data request of the grid as follows.
 
-![](dataBinding_images/dataBinding_img7.png)
+![adding request parameters in Grid.](dataBinding_images/dataBinding_img7.png)
 
 
 #### Handling HTTP Errors
@@ -486,7 +486,7 @@ The following code example describes the above behavior.
 
 The following output is displayed as a result of the above code example.
 
-![](dataBinding_images/dataBinding_img8.png)
+![handling http errors in Grid.](dataBinding_images/dataBinding_img8.png)
 
 
 ## HTML Table 
@@ -590,7 +590,7 @@ The following code example describes the above behavior.
 
 The following output is displayed as a result of the above code example.
 
-![](dataBinding_images/dataBinding_img9.png)
+![html table in Grid.](dataBinding_images/dataBinding_img9.png)
 
 
 I> The HTML Table element is the only valid element when using HTML Table binding. Using other elements will throws an exception.

diff --git a/angular/Grid/How-to.md b/angular/Grid/How-to.md
@@ -191,7 +191,7 @@ import {Component, ViewEncapsulation, ViewChild } from '@angular/core';
 
 
 The following output is displayed as a result of the above code example.
-![](externalsearch_images/externalsearch_img1.png)
+![external search in Grid.](externalsearch_images/externalsearch_img1.png)
 
 ## Hierarchy Grid with different foreignKeyField in parent and child table
 
@@ -252,7 +252,7 @@ export class GridComponent {
 {% endhighlight %}
 
 The following output is displayed as a result of the above code example.
-![](Hierarchy-Grid_images/Hierarchy-Grid_images2.png)
+![Hierarchy Grid with different foreignKeyField in parent and child table in Grid.](Hierarchy-Grid_images/Hierarchy-Grid_images2.png)
 
 ## Perform Grid Actions on External button click
 
@@ -409,7 +409,7 @@ import {Component, ViewEncapsulation, ViewChild } from '@angular/core';
 
 {% endtabs %}
 The following output is displayed as a result of the above code example.
-![](externalsearch_images/Actionswithexternalbutton_img1.png)
+![sorting in Grid.](externalsearch_images/Actionswithexternalbutton_img1.png)
 
 
 ## Display other Syncfusion controls in Grid columns
@@ -454,7 +454,7 @@ import {Component, ViewEncapsulation, ViewChild } from '@angular/core';
 {% endhighlight %}
 
 The following output is displayed as a result of the above code example.
-![](Display-Other-controls/Display_Other_controls_img1.png)
+![display other Syncfusion controls in Grid columns.](Display-Other-controls/Display_Other_controls_img1.png)
 
 
 ## Getting Datasource of Grid in Sorted Order

diff --git a/angular/Grid/Paging.md b/angular/Grid/Paging.md
@@ -43,7 +43,7 @@ export class AppComponent {
 
 The following output is displayed as a result of the above code example.
 
-![](paging_images/paging_img1.png)
+![paging in Grid](paging_images/paging_img1.png)
 
 
 ## Pager with query string
@@ -84,7 +84,7 @@ export class AppComponent {
 
 The following output is displayed as a result of the above code example.
 
-![](paging_images/paging_img2.png)
+![pager with query string in Grid](paging_images/paging_img2.png)
 
 
 ## Pager template
@@ -155,7 +155,7 @@ Place the template inside index.html file
 
 The following output is displayed as a result of the above code example.
 
-![](paging_images/paging_img3.png)
+![pager template in Angular Grid.](paging_images/paging_img3.png)
 
 
 ## Pager with pageSize drop down
@@ -196,4 +196,4 @@ export class AppComponent {
 
 The following output is displayed as a result of the above code example.
 
-![](paging_images/paging_img4.png)
+![pager with pagesize drop down in Angular Grid.](paging_images/paging_img4.png)
diff --git a/angular/Grid/Row.md b/angular/Grid/Row.md
@@ -51,7 +51,7 @@ The following code example describes the above behavior.
 
 The following output is displayed as a result of the above code example.
 
-![](Row_images/Row_img1.png)
+![row in Angular Grid.](Row_images/Row_img1.png)
 
 
 ## Details Template
@@ -156,7 +156,7 @@ import {Component, ViewEncapsulation} from '@angular/core';
 
 The following output is displayed as a result of the above code example.
 
-![](Row_images/Row_img12.PNG)
+![details template in Angular Grid.](Row_images/Row_img12.PNG)
 
 
 ## Row Template
@@ -249,7 +249,7 @@ The following code example describes the above behavior.
 
 The following output is displayed as a result of the above code example.
 
-![](Row_images/Row_img11.png)
+![row template in Angular Grid.](Row_images/Row_img11.png)
 
 ## Alternate row styling
 
@@ -292,7 +292,7 @@ By default its value is `true`, so the following code example describes the how
 
 The following output is displayed as a result of the above code example.
 
-![](Row_images/Row_img4.png)
+![alternate row styling in Angular Grid.](Row_images/Row_img4.png)
 
 
 ## Drag-and-Drop
@@ -341,12 +341,12 @@ The following code example describes the above behavior.
 
 The following output is displayed before reordering rows. 
 
-![](Row_images/Row_img5.png)
+![displayed before reordering rows in Angular Grid.](Row_images/Row_img5.png)
 {:Before Drop}
 
 The following output is displayed after reordering rows.
 
-![](Row_images/Row_img6.png)
+![displayed after reordering rows in  Angular Grid.](Row_images/Row_img6.png)
 {:After Drop}
 
 
@@ -402,12 +402,12 @@ The following code example describes the above behavior.
 
 The following output is displayed before dropping Grid rows.
 
-![](Row_images/Row_img7.png)
+![displayed before dropping Grid rows in Angular Grid.](Row_images/Row_img7.png)
 {:Before Drop}
 
 The following output is displayed after dropping Grid rows.
 
-![](Row_images/Row_img8.png)
+![displayed after dropping Grid rows in Angular Grid.](Row_images/Row_img8.png)
 {:After Drop}
 
 
@@ -489,12 +489,12 @@ The following code example describes the above behavior.
 
 The following output is displayed before dropping the rows on Form.
 
-![](Row_images/Row_img9.png)
+![displayed before dropping the rows on Form in Angular Grid.](Row_images/Row_img9.png)
 {:Before Drop}
 
 The following output is displayed after dropping the rows on Form.
 
-![](Row_images/Row_img10.png)
+![displayed after dropping the rows on Form in Angular Grid.](Row_images/Row_img10.png)
 {:After Drop}
 
 N>   The default behavior of drag and drop between Grid or any other controls is as cut and paste. For copy and paste behavior specify the drag behavior in [`dragBehavior`](https://help.syncfusion.com/api/angular/ejgrid#members:rowdropsettings-dragbehavior "dragBehavior") property of [`rowDropSettings`](https://help.syncfusion.com/api/angular/ejgrid#members:rowdropsettings "rowDropSettings")  as ej.Grid.DragBehavior.Copy.

diff --git a/angular/Grid/Selection.md b/angular/Grid/Selection.md
@@ -69,7 +69,7 @@ The following code example describes the above behavior.
 
 The following output is displayed as a result of the above code example
 
-![](selection_images/selection_img1.png)
+![row selection in Angular Grid.](selection_images/selection_img1.png)
 
 
 ## Multiple Row Selection using Checkbox Column
@@ -116,7 +116,7 @@ The following code example describes the above behavior.
 
 The following output is displayed as a result of the above code example
 
-![](selection_images/selection_img6.png)
+![multiple row selection using checkbox column in Angular Grid.](selection_images/selection_img6.png)
 
 
 ## Cell Selection
@@ -161,7 +161,7 @@ Cell selection is enabled by setting [`selectionMode`](https://help.syncfusion.c
 
 The following output is displayed as a result of the above code example
 
-![](selection_images/selection_img2.png)
+![cell selection in Angular Grid.](selection_images/selection_img2.png)
 
 
 ### Cell Selection Mode
@@ -213,7 +213,7 @@ The following code example describes the above behavior.
 
 The following output is displayed as a result of the above code example
 
-![](selection_images/selection_img3.png)
+![cell selection mode in Angular Grid.](selection_images/selection_img3.png)
 
 
 N> Continuous selection is the default cell selection mode in grid when [`selectionMode`](https://help.syncfusion.com/api/angular/ejgrid#members:selectionsettings-selectionmode) is "cell"
@@ -262,7 +262,7 @@ The following code example describes the above behavior.
 
 The following output is displayed as a result of the above code example
 
-![](selection_images/selection_img4.png)
+![column selection in Angular Grid.](selection_images/selection_img4.png)
 
 
 ## Touch options
@@ -307,7 +307,7 @@ The following code example describes the above behavior.
 
 The following output is displayed as a result of the above code example.
 
-![](selection_images/selection_img5.png)
+![touch options in Angular Grid.](selection_images/selection_img5.png)
 
 
 ## Toggle Selection
@@ -405,4 +405,4 @@ The following code example describes the above behavior.
 
 The following output is displayed as a result of the above code example.
 
-![](selection_images/Selection_img7.png)
+![drag selection in Angular Grid.](selection_images/Selection_img7.png)
diff --git a/angular/Menu/Context-Menu.md b/angular/Menu/Context-Menu.md
@@ -80,7 +80,7 @@ Add the following code in menu.component.css file.
 
 The following screen shot displays the output of the above code.
 
-![](Context-Menu_images/Context-Menu_img1.png) 
+![context menu in Angular Menu](Context-Menu_images/Context-Menu_img1.png) 
 
 You can hide and show the context menu using the following methods.