From 01f7efe08f5272d4655229a03777d3c534965b21 Mon Sep 17 00:00:00 2001 From: Asha Bhaskaran Date: Fri, 27 Jun 2025 14:57:13 +0530 Subject: [PATCH] img alt tag --- aspnet-core/Autocomplete/Behavior-Settings.md | 16 +- aspnet-core/Chart/Chart-Dimensions.md | 6 +- aspnet-core/Chart/Chart-Types.md | 194 +++++++++--------- aspnet-core/DropDownList/Customization.md | 12 +- aspnet-core/MaskEdit/Behavior-Settings.md | 40 ++-- aspnet-core/Menu/Orientation.md | 6 +- aspnet-core/SpellCheck/Functionalities.md | 4 +- aspnet-core/TreeView/Full-Row-Selection.md | 6 +- 8 files changed, 142 insertions(+), 142 deletions(-) diff --git a/aspnet-core/Autocomplete/Behavior-Settings.md b/aspnet-core/Autocomplete/Behavior-Settings.md index ad7f97b8..cd83570a 100644 --- a/aspnet-core/Autocomplete/Behavior-Settings.md +++ b/aspnet-core/Autocomplete/Behavior-Settings.md @@ -1,7 +1,7 @@ --- layout: post title: Behavior Settings | AutoComplete | ASP.NET Core | Syncfusion -description: behavior settings +description: Check out and learn here all about behavior settings of Syncfusion AutoComplete ASP.NET Core and much more details. platform: aspnet-core control: AutoComplete documentation: ug @@ -39,7 +39,7 @@ The following steps explain the configuration of the filtering conditions for an The following image is the output for AutoComplete control that filters list items based on the ‘contains’ option. -![](Behavior-Settings_images/Behavior-Settings_img1.png) +![Autocomplete control that filters list items.](Behavior-Settings_images/Behavior-Settings_img1.png) AutoComplete using "contains" filterType {:.caption} @@ -75,7 +75,7 @@ The following steps explain how to enable the AutoFill property for an AutoCompl The following image is the output for AutoComplete when EnableAutoFill is set to ‘true’. -![](Behavior-Settings_images/Behavior-Settings_img2.png) +![the enable-auto-fill property.](Behavior-Settings_images/Behavior-Settings_img2.png) AutoComplete with AutoFill {:.caption} @@ -112,7 +112,7 @@ The following image is the output for AutoComplete when “SortOrder” is confi -![](Behavior-Settings_images/Behavior-Settings_img3.png) +![sort order.](Behavior-Settings_images/Behavior-Settings_img3.png) AutoComplete PopUp sorted in descending order {:.caption} @@ -169,7 +169,7 @@ The following steps explain you how to enable this property. The following images are the outputs for AutoComplete when enable-distinct is set to “true” and “false”. -![](Behavior-Settings_images/Behavior-Settings_img4.png) +![property disabled and enabled.](Behavior-Settings_images/Behavior-Settings_img4.png) AutoComplete PopUp items with Distinct property disabled and enabled {:.caption} @@ -197,7 +197,7 @@ The following steps explains you how to configure the Popup button for an AutoCo The following image is the output for AutoComplete when ShowPopupButton is enabled. -![](Behavior-Settings_images/Behavior-Settings_img5.png) +![show popup button is enabled.](Behavior-Settings_images/Behavior-Settings_img5.png) AutoComplete with popup icon {:.caption} @@ -232,7 +232,7 @@ The following steps help you to disable editing in an AutoComplete textbox. The following image is the output for the AutoComplete textbox configured to restrict editing. -![](Behavior-Settings_images/Behavior-Settings_img6.png) +![configured to restrict editing.](Behavior-Settings_images/Behavior-Settings_img6.png) AutoComplete with readOnly property {:.caption} @@ -268,7 +268,7 @@ The following steps allow you to set text for empty results of an AutoComplete t The following image is the output of the AutoComplete textbox when the list doesn’t return any value. -![](Behavior-Settings_images/Behavior-Settings_img7.png) +![customized empty result text.](Behavior-Settings_images/Behavior-Settings_img7.png) AutoComplete with customized EmptyResultText {:.caption} diff --git a/aspnet-core/Chart/Chart-Dimensions.md b/aspnet-core/Chart/Chart-Dimensions.md index 7d802df3..5f33c6c4 100644 --- a/aspnet-core/Chart/Chart-Dimensions.md +++ b/aspnet-core/Chart/Chart-Dimensions.md @@ -1,7 +1,7 @@ --- layout: post title: Chart size |Chart | ASP.NET CORE | Syncfusion -description: Learn how to set Chart size and make it responsive. +description: Check out and learn here all about how to set chart size in chart dimensions of Syncfusion Chart and much more. platform: aspnet-core control: Chart documentation: ug @@ -39,7 +39,7 @@ You can also set the chart dimension by using the **Size** property of the chart {% endhighlight %} -![](Chart-Dimensions_images/Chart-Dimensions_img1.png) +![size property of the chart.](Chart-Dimensions_images/Chart-Dimensions_img1.png) ## Setting size relative to the container size @@ -56,7 +56,7 @@ You can specify the chart size in percentage by using the **Size** property. The {% endhighlight %} -![](Chart-Dimensions_images/Chart-Dimensions_img2.png) +![dimension with respect to its container.](Chart-Dimensions_images/Chart-Dimensions_img2.png) ## Responsive chart diff --git a/aspnet-core/Chart/Chart-Types.md b/aspnet-core/Chart/Chart-Types.md index 07e169cb..d3392376 100644 --- a/aspnet-core/Chart/Chart-Types.md +++ b/aspnet-core/Chart/Chart-Types.md @@ -1,7 +1,7 @@ --- layout: post title: Chart types |Chart | ASP.NET CORE | Syncfusion -description: What are the different types of Charts available in Essential JavaScript Chart. +description: Learn here all about what the different types of charts available in Essential JavaScript Chart are and much more. platform: aspnet-core control: Chart documentation: ug @@ -25,7 +25,7 @@ To render a line chart, set the series type to **Line** in the chart series. To {% endhighlight %} -![](Chart-Types_images/Chart-Types_img1.png) +![the line segment color.](Chart-Types_images/Chart-Types_img1.png) ### Change the line width @@ -44,7 +44,7 @@ To change the width of the line segment, use the **Width** property of the serie {% endhighlight %} -![](Chart-Types_images/Chart-Types_img2.png) +![the width property of the series.](Chart-Types_images/Chart-Types_img2.png) ### Dashed lines @@ -63,7 +63,7 @@ To render a line chart with dotted lines, use the **DashArray** option of the se {% endhighlight %} -![](Chart-Types_images/Chart-Types_img3.png) +![the dash array option of the series.](Chart-Types_images/Chart-Types_img3.png) ### Changing the line cap @@ -82,7 +82,7 @@ For customizing the start and end caps of the line segment, use the **LineCap** {% endhighlight %} -![](Chart-Types_images/Chart-Types_img4.png) +![ the line cap property.](Chart-Types_images/Chart-Types_img4.png) ### Changing the line join @@ -102,7 +102,7 @@ To specify how the two intersecting line segments should be joined, use the **Li {% endhighlight %} -![](Chart-Types_images/Chart-Types_img5.png) +![the line join property.](Chart-Types_images/Chart-Types_img5.png) ### Multi color line @@ -123,7 +123,7 @@ You can change the color of the line segments by using the **Fill** property of {% endhighlight %} -![](Chart-Types_images/Chart-Types_img81.png) +![multi color line.](Chart-Types_images/Chart-Types_img81.png) ## Step Line Chart @@ -143,7 +143,7 @@ To render a step line chart, set the series type to **StepLine"** in the chart s {% endhighlight %} -![](Chart-Types_images/Chart-Types_img6.png) +![step line chart.](Chart-Types_images/Chart-Types_img6.png) ### Changing the line width @@ -162,7 +162,7 @@ To change the line width, use the **Width** property. {% endhighlight %} -![](Chart-Types_images/Chart-Types_img7.png) +![ change the line width.](Chart-Types_images/Chart-Types_img7.png) ### Dashed lines @@ -181,7 +181,7 @@ To render the step line series with dotted lines, use the **DashArray** option o {% endhighlight %} -![](Chart-Types_images/Chart-Types_img8.png) +![the step line series with dotted lines.](Chart-Types_images/Chart-Types_img8.png) ### Changing the line cap @@ -200,7 +200,7 @@ For customizing the start and end caps of the line segment, use the **LineCap** {% endhighlight %} -![](Chart-Types_images/Chart-Types_img9.png) +![changing the line cap.](Chart-Types_images/Chart-Types_img9.png) ### Changing the line join @@ -219,7 +219,7 @@ To specify how the two intersecting line segments should be joined, use the **Li {% endhighlight %} -![](Chart-Types_images/Chart-Types_img10.png) +![changing the line join.](Chart-Types_images/Chart-Types_img10.png) ## Area Chart @@ -237,7 +237,7 @@ To render an area chart, specify the series type to **Area** in the chart series {% endhighlight %} -![](Chart-Types_images/Chart-Types_img11.png) +![area in the chart series.](Chart-Types_images/Chart-Types_img11.png) ## Range Area Chart @@ -262,7 +262,7 @@ Since the range area series requires two y values for a point, add **High** and {% endhighlight %} -![](Chart-Types_images/Chart-Types_img12.png) +![range area in the chart series.](Chart-Types_images/Chart-Types_img12.png) ## Step Area Chart @@ -280,7 +280,7 @@ To render a step area chart, set the type to **StepArea** in the chart series. T {% endhighlight %} -![](Chart-Types_images/Chart-Types_img13.png) +![step area in the chart series.](Chart-Types_images/Chart-Types_img13.png) ## Spline Area Chart @@ -298,7 +298,7 @@ To render a spline area chart, set the type to **SplineArea** in the chart serie {% endhighlight %} -![](Chart-Types_images/Chart-Types_img14.png) +![spline area in the chart series.](Chart-Types_images/Chart-Types_img14.png) ## Stacked Area Chart @@ -317,7 +317,7 @@ To render a stacked area chart, set the type to **StackingArea** in the chart se {% endhighlight %} -![](Chart-Types_images/Chart-Types_img15.png) +![stacking area in the chart series.](Chart-Types_images/Chart-Types_img15.png) ## 100% Stacked Area Chart @@ -336,7 +336,7 @@ To render a 100% stacked area chart, set the type to **StackingArea100** in the {% endhighlight %} -![](Chart-Types_images/Chart-Types_img16.png) +![stacking area100 in the chart series.](Chart-Types_images/Chart-Types_img16.png) ## Stacked Spline Area Chart @@ -356,7 +356,7 @@ To render a stacked spline area chart, set the type to **StackingSplineArea** in {% endhighlight %} -![](Chart-Types_images/Chart-Types_img97.png) +![stacking spline area in the chart series.](Chart-Types_images/Chart-Types_img97.png) ## 100% Stacked Spline Area Chart @@ -376,7 +376,7 @@ To render a 100% stacked spline area chart, set the type to **StackingSplineArea {% endhighlight %} -![](Chart-Types_images/Chart-Types_img98.png) +![stacking spline area100 in the chart series.](Chart-Types_images/Chart-Types_img98.png) ## Column Chart @@ -395,7 +395,7 @@ To render a column chart, set the type to **Column** in the chart series. To cha {% endhighlight %} -![](Chart-Types_images/Chart-Types_img17.png) +![column in the chart series.](Chart-Types_images/Chart-Types_img17.png) ### Change a point color @@ -416,7 +416,7 @@ You can change the color of a column by using the **Fill** property of the point {% endhighlight %} -![](Chart-Types_images/Chart-Types_img18.png) +![change the color of a column.](Chart-Types_images/Chart-Types_img18.png) ### Column width customization @@ -437,7 +437,7 @@ N> Width of a column also depends on the **ColumnSpacing** property, because Col {% endhighlight %} -![](Chart-Types_images/Chart-Types_img88.png) +![column width customization.](Chart-Types_images/Chart-Types_img88.png) ### Column with rounded corners Corners of the column chart can be customized by setting value to the **CornerRadius** property. @@ -452,7 +452,7 @@ Corners of the column chart can be customized by setting value to the **CornerRa {% endhighlight %} -![](Chart-Types_images/Chart-Types_img90.png) +![the corner radius property.](Chart-Types_images/Chart-Types_img90.png) ### Spacing between column series @@ -473,7 +473,7 @@ N> Space between the columns will also affect the width of the column. For examp {% endhighlight %} -![](Chart-Types_images/Chart-Types_img89.png) +![the column spacing property.](Chart-Types_images/Chart-Types_img89.png) ### Cylindrical Chart @@ -498,7 +498,7 @@ The following chart types can be rendered as cylinder in both 2D and 3D views: {% endhighlight %} -![](Chart-Types_images/Chart-Types_img91.png) +![set the column facet property.](Chart-Types_images/Chart-Types_img91.png) ## Range Column Chart @@ -524,7 +524,7 @@ Since the range column series requires two y values for a point, add the **High* {% endhighlight %} -![](Chart-Types_images/Chart-Types_img19.png) +![range column in the chart series.](Chart-Types_images/Chart-Types_img19.png) ### Change a point color @@ -545,7 +545,7 @@ To change the color of a range column, use the **Fill** property of point. {% endhighlight %} -![](Chart-Types_images/Chart-Types_img20.png) +![the fill property of point.](Chart-Types_images/Chart-Types_img20.png) ## Stacked Column Chart @@ -565,7 +565,7 @@ To render a stacked column chart, set the type to **StackingColumn** in the char {% endhighlight %} -![](Chart-Types_images/Chart-Types_img21.png) +![to stacking column in the chart series.](Chart-Types_images/Chart-Types_img21.png) ### Cluster/Group stacked columns @@ -589,7 +589,7 @@ You can use the **StackingGroup** property to group the stacked columns. Columns {% endhighlight %} -![](Chart-Types_images/Chart-Types_img22.png) +![stacking group property to group the stacked columns.](Chart-Types_images/Chart-Types_img22.png) ### Change a point color @@ -610,7 +610,7 @@ To change the color of a stacking column, use the **Fill** property of the point {% endhighlight %} -![](Chart-Types_images/Chart-Types_img23.png) +![the fill property of the point.](Chart-Types_images/Chart-Types_img23.png) ## 100% Stacked Column Chart @@ -630,7 +630,7 @@ To render a 100% stacked column chart, set the type to **StackingColumn100** in {% endhighlight %} -![](Chart-Types_images/Chart-Types_img24.png) +![stacking column100 in the chart series.](Chart-Types_images/Chart-Types_img24.png) ### Cluster/Group 100% stacked columns @@ -654,7 +654,7 @@ By using the **StackingGroup** property, you can group the 100% stacking columns {% endhighlight %} -![](Chart-Types_images/Chart-Types_img25.png) +![the stacking group property.](Chart-Types_images/Chart-Types_img25.png) ### Change a point color @@ -675,7 +675,7 @@ To change the color of a 100% stacking column, use the **Fill** property of the {% endhighlight %} -![](Chart-Types_images/Chart-Types_img26.png) +![the color of a 100% stacking column.](Chart-Types_images/Chart-Types_img26.png) ## Bar Chart @@ -695,7 +695,7 @@ To render a bar Chart, set the type to **Bar** in the chart series. To change th {% endhighlight %} -![](Chart-Types_images/Chart-Types_img27.png) +![set the type to bar in the chart series.](Chart-Types_images/Chart-Types_img27.png) ### Change the color of a bar @@ -716,7 +716,7 @@ By using the **Fill** property of the point, you can change the specific point o {% endhighlight %} -![](Chart-Types_images/Chart-Types_img28.png) +![change the color of a bar.](Chart-Types_images/Chart-Types_img28.png) ## Stacked Bar Chart @@ -736,7 +736,7 @@ To render a stacked bar chart, set the type to **StackingBar** in the chart seri {% endhighlight %} -![](Chart-Types_images/Chart-Types_img29.png) +![stacking bar in the chart series.](Chart-Types_images/Chart-Types_img29.png) ### Cluster/Group stacked bars @@ -760,7 +760,7 @@ You can use the **StackingGroup** property to group the stacking bars with the s {% endhighlight %} -![](Chart-Types_images/Chart-Types_img30.png) +![the stacking group property to group the stacking bars.](Chart-Types_images/Chart-Types_img30.png) ### Change a point color @@ -781,7 +781,7 @@ You can change the color of a stacking bar by using the **Fill** property of the {% endhighlight %} -![](Chart-Types_images/Chart-Types_img31.png) +![the color of a stacking bar by using the fill property of the point.](Chart-Types_images/Chart-Types_img31.png) ## 100% Stacked Bar Chart @@ -801,7 +801,7 @@ To render a 100% stacked bar chart, set the type to **StackingBar100** in the ch {% endhighlight %} -![](Chart-Types_images/Chart-Types_img32.png) +![set the type to stacking bar100 in the chart series.](Chart-Types_images/Chart-Types_img32.png) By using the **StackingGroup** property, you can group the 100% stacking bars with the same group name. @@ -843,7 +843,7 @@ To change the color of a 100% stacking bar, use the Fill property of the point. {% endhighlight %} -![](Chart-Types_images/Chart-Types_img34.png) +![chart - change the color.](Chart-Types_images/Chart-Types_img34.png) ## Spline Chart @@ -862,7 +862,7 @@ To render a spline chart, set the type to **Spline** in the chart series. To cha {% endhighlight %} -![](Chart-Types_images/Chart-Types_img35.png) +![set the type to spline in the chart series.](Chart-Types_images/Chart-Types_img35.png) ### Spline types @@ -917,7 +917,7 @@ To change the width of the spline segment, use the **Width** property of the ser {% endhighlight %} -![](Chart-Types_images/Chart-Types_img36.png) +![the spline type property in the series.](Chart-Types_images/Chart-Types_img36.png) ### Dashed lines @@ -936,7 +936,7 @@ To render the spline chart with dotted lines, use the **DashArray** option of th {% endhighlight %} -![](Chart-Types_images/Chart-Types_img37.png) +![the dash array option of the series.](Chart-Types_images/Chart-Types_img37.png) ## Pie Chart @@ -955,7 +955,7 @@ You can create a pie chart by setting the series type to **Pie** in the chart se {% endhighlight %} -![](Chart-Types_images/Chart-Types_img38.png) +![the series type to pie in the chart series.](Chart-Types_images/Chart-Types_img38.png) ### Change the pie size @@ -974,7 +974,7 @@ You can use the **PieCoefficient** property to change the diameter of the pie ch {% endhighlight %} -![](Chart-Types_images/Chart-Types_img39.png) +![the pie co efficient property.](Chart-Types_images/Chart-Types_img39.png) ### Explode a pie segment @@ -994,7 +994,7 @@ You can explode a pie segment on the chart load by using the **ExplodeIndex** pr {% endhighlight %} -![](Chart-Types_images/Chart-Types_img40.png) +![the explode index property of the series.](Chart-Types_images/Chart-Types_img40.png) ### Explode all the segments @@ -1014,7 +1014,7 @@ To explode all the segments of the pie chart, enable the **ExplodeAll** property {% endhighlight %} -![](Chart-Types_images/Chart-Types_img41.png) +![the explode all property.](Chart-Types_images/Chart-Types_img41.png) ### Explode a pie segment by hovering the mouse @@ -1034,7 +1034,7 @@ To explode a pie segment by hovering the mouse, enable the **Explode** property {% endhighlight %} -![](Chart-Types_images/Chart-Types_img42.png) +![to explode a pie segment by hovering the mouse.](Chart-Types_images/Chart-Types_img42.png) ### Sector of Pie @@ -1054,7 +1054,7 @@ Chart allows you to render all the data points/segments in the semi-pie, quarter {% endhighlight %} -![](Chart-Types_images/Chart-Types_img43.png) +![the start angle and end angle options.](Chart-Types_images/Chart-Types_img43.png) ## Doughnut Chart @@ -1074,7 +1074,7 @@ To create a doughnut chart, specify the series type to **Doughnut** in the chart {% endhighlight %} -![](Chart-Types_images/Chart-Types_img44.png) +![to doughnut in the chart series.](Chart-Types_images/Chart-Types_img44.png) ### Change doughnut inner radius @@ -1094,7 +1094,7 @@ You can change the doughnut chart inner radius by using the **DoughnutCoefficien {% endhighlight %} -![](Chart-Types_images/Chart-Types_img45.png) +![the doughnut coefficient with respect to the plot area.](Chart-Types_images/Chart-Types_img45.png) ### Change the doughnut size @@ -1114,7 +1114,7 @@ You can use the **DoughnutSize** property to change the diameter of the doughnut {% endhighlight %} -![](Chart-Types_images/Chart-Types_img46.png) +![change the doughnut size.](Chart-Types_images/Chart-Types_img46.png) ### Explode a doughnut segment @@ -1134,7 +1134,7 @@ To explode a specific doughnut segment, set the index to be exploded by using th {% endhighlight %} -![](Chart-Types_images/Chart-Types_img47.png) +![to explode a specific doughnut segment.](Chart-Types_images/Chart-Types_img47.png) ### Explode all the segments @@ -1154,7 +1154,7 @@ To explode all the segments, enable the **ExplodeAll** property of the series. {% endhighlight %} -![](Chart-Types_images/Chart-Types_img48.png) +![enable the explode all property of the series.](Chart-Types_images/Chart-Types_img48.png) ### Explode a doughnut segment by hovering the mouse @@ -1174,7 +1174,7 @@ To explode a doughnut segment by hovering the mouse, enable the **Explode** prop {% endhighlight %} -![](Chart-Types_images/Chart-Types_img49.png) +![to explode a doughnut segment by hovering the mouse.](Chart-Types_images/Chart-Types_img49.png) ### Sector of doughnut @@ -1194,7 +1194,7 @@ Chart allows you to render all the data points/segments in the semi-doughnut, qu {% endhighlight %} -![](Chart-Types_images/Chart-Types_img50.png) +![the start angle and end angle options.](Chart-Types_images/Chart-Types_img50.png) ## Multiple Pie Chart @@ -1218,12 +1218,12 @@ Chart provides support to render more than one series in pie and doughnut chart. **Multiple pie** -![](Chart-Types_images/Chart-Types_img82.png) +![multiple pie chart.](Chart-Types_images/Chart-Types_img82.png) **Multiple doughnut** -![](Chart-Types_images/Chart-Types_img83.png) +![multiple doughnut](Chart-Types_images/Chart-Types_img83.png) ### Start and end angles support @@ -1232,12 +1232,12 @@ In the multiple pie chart, the **StartAngle** and **EndAngle** properties are al **Sector of multiple pie** -![](Chart-Types_images/Chart-Types_img84.png) +![start and end angles support](Chart-Types_images/Chart-Types_img84.png) **Sector of multiple doughnut** -![](Chart-Types_images/Chart-Types_img85.png) +![sector of multiple doughnut](Chart-Types_images/Chart-Types_img85.png) ## Pyramid Chart @@ -1257,7 +1257,7 @@ To create a pyramid chart, specify the series type to **Pyramid** in the chart s {% endhighlight %} -![](Chart-Types_images/Chart-Types_img51.png) +![to pyramid in the chart series.](Chart-Types_images/Chart-Types_img51.png) ### Pyramid mode @@ -1277,7 +1277,7 @@ Pyramid mode has two types, namely Linear and Surface. The default **PyramidMode {% endhighlight %} -![](Chart-Types_images/Chart-Types_img52.png) +![linear pyramid mode in chart series.](Chart-Types_images/Chart-Types_img52.png) ### Gap between the segments @@ -1296,7 +1296,7 @@ You can control the gap between the segments by using the **GapRatio** property {% endhighlight %} -![](Chart-Types_images/Chart-Types_img53.png) +![the gap ratio property of the series.](Chart-Types_images/Chart-Types_img53.png) ### Explode a pyramid segment @@ -1316,7 +1316,7 @@ You can explode a pyramid segment on the chart load by using the **ExplodeIndex* {% endhighlight %} -![](Chart-Types_images/Chart-Types_img54.png) +![explode a pyramid segment in chart series.](Chart-Types_images/Chart-Types_img54.png) ## Funnel Chart @@ -1336,7 +1336,7 @@ You can create a funnel chart by setting the series type to **Funnel** in the ch {% endhighlight %} -![](Chart-Types_images/Chart-Types_img55.png) +![funnel in the chart series.](Chart-Types_images/Chart-Types_img55.png) ### Change the funnel width and height @@ -1355,7 +1355,7 @@ Funnel segment's height and width are calculated from the chart size, by default {% endhighlight %} -![](Chart-Types_images/Chart-Types_img56.png) +![the chart size by using the funnel height and funnel width properties of the series.](Chart-Types_images/Chart-Types_img56.png) ### Explode a funnel segment @@ -1375,7 +1375,7 @@ You can explode a funnel segment on the chart load by using the **ExplodeIndex** {% endhighlight %} -![](Chart-Types_images/Chart-Types_img57.png) +![explode a funnel segment on the chart load.](Chart-Types_images/Chart-Types_img57.png) ## Bubble Chart @@ -1409,7 +1409,7 @@ To create a Bubble chart, set the series type to **Bubble** in the chart series. {% endhighlight %} -![](Chart-Types_images/Chart-Types_img58.png) +![to bubble in the chart series.](Chart-Types_images/Chart-Types_img58.png) ## Scatter @@ -1428,7 +1428,7 @@ To create a scatter chart, set the series type to **Scatter** in the chart serie {% endhighlight %} -![](Chart-Types_images/Chart-Types_img59.png) +![the series type to scatter in the chart series.](Chart-Types_images/Chart-Types_img59.png) ### Customize the scatter chart @@ -1448,7 +1448,7 @@ You can change the scatter size and scatter color by using the **Size** and **Fi {% endhighlight %} -![](Chart-Types_images/Chart-Types_img60.png) +![customize the scatter chart.](Chart-Types_images/Chart-Types_img60.png) ## HiLoOpenClose Chart  @@ -1481,7 +1481,7 @@ To create a HiLo open close chart, set the series type to **HiloOpenClose** in t {% endhighlight %} -![](Chart-Types_images/Chart-Types_img61.png) +![to hilo open close in the chart series.](Chart-Types_images/Chart-Types_img61.png) ### DrawMode @@ -1501,7 +1501,7 @@ You can change the HiLo open close chart's **DrawMode** option to Open, Close, o {% endhighlight %} -![](Chart-Types_images/Chart-Types_img62.png) +![draw mode option in chart type.](Chart-Types_images/Chart-Types_img62.png) ### Bull and bear Color @@ -1521,7 +1521,7 @@ You can change the HiLo open close chart's **DrawMode** option to Open, Close, o {% endhighlight %} -![](Chart-Types_images/Chart-Types_img63.png) +![bull and bear color in chart type.](Chart-Types_images/Chart-Types_img63.png) ## Candle @@ -1555,7 +1555,7 @@ You can create a Candle chart by specifying the series type to **Candle** in the {% endhighlight %} -![](Chart-Types_images/Chart-Types_img64.png) +![ the series type to candle in the chart series.](Chart-Types_images/Chart-Types_img64.png) ### Bull and Bear Color @@ -1575,7 +1575,7 @@ You can create a Candle chart by specifying the series type to **Candle** in the {% endhighlight %} -![](Chart-Types_images/Chart-Types_img65.png) +![bull and bear color in chart type.](Chart-Types_images/Chart-Types_img65.png) ## HiLo @@ -1608,7 +1608,7 @@ HiLo chart is created by setting the series type to **Hilo** in the chart series {% endhighlight %} -![](Chart-Types_images/Chart-Types_img66.png) +![to hilo in the chart series.](Chart-Types_images/Chart-Types_img66.png) ## Polar @@ -1628,7 +1628,7 @@ Polar chart is created by setting the series type to **Polar** in the chart seri {% endhighlight %} -![](Chart-Types_images/Chart-Types_img67.png) +![to polar in the chart series.](Chart-Types_images/Chart-Types_img67.png) ### DrawType @@ -1648,7 +1648,7 @@ Polar **DrawType** property is used to change the series plotting type to *Line* {% endhighlight %} -![](Chart-Types_images/Chart-Types_img68.png) +![draw type is line in chart series.](Chart-Types_images/Chart-Types_img68.png) ### Stack columns in polar chart @@ -1668,7 +1668,7 @@ By using the **IsStacking** property, you can specify whether the column has to {% endhighlight %} -![](Chart-Types_images/Chart-Types_img69.png) +![stack columns in polar chart in chart series.](Chart-Types_images/Chart-Types_img69.png) ## Radar Chart @@ -1689,7 +1689,7 @@ To create a radar chart, specify the series type to **Radar** in the chart serie {% endhighlight %} -![](Chart-Types_images/Chart-Types_img70.png) +![to radar in the chart series.](Chart-Types_images/Chart-Types_img70.png) ### DrawType @@ -1709,7 +1709,7 @@ Radar **DrawType** property is used to change the series plotting type to *Line* {% endhighlight %} -![](Chart-Types_images/Chart-Types_img71.png) +![draw type is line in chart serise.](Chart-Types_images/Chart-Types_img71.png) ### Stack columns in Radar chart @@ -1730,7 +1730,7 @@ By using the **IsStacking** property, you can specify whether the column has to {% endhighlight %} -![](Chart-Types_images/Chart-Types_img72.png) +![stack columns in radar chart in chart series.](Chart-Types_images/Chart-Types_img72.png) ## Waterfall Chart @@ -1753,7 +1753,7 @@ N> The inline property of the **Series.PositiveFill** has the first priority, an {% endhighlight %} -![](Chart-Types_images/Chart-Types_img73.png) +![to waterfall in the chart series.](Chart-Types_images/Chart-Types_img73.png) **ShowIntermediateSum** @@ -1816,7 +1816,7 @@ To customize the connector line color, width, opacity, and dashArray of the wate {% endhighlight %} -![](Chart-Types_images/Chart-Types_img74.png) +![show intermediate sum in chart serise.](Chart-Types_images/Chart-Types_img74.png) ## Error Bar Chart @@ -1837,7 +1837,7 @@ Chart can generate error bar for Cartesian type series, such as line, column, ba {% endhighlight %} -![](Chart-Types_images/Chart-Types_img75.png) +![connectorLine option of series.](Chart-Types_images/Chart-Types_img75.png) ### Changing error bar type @@ -1858,7 +1858,7 @@ You can change the error bar rendering type by using **Type** (like FixedValue, {% endhighlight %} -![](Chart-Types_images/Chart-Types_img76.png) +![to error bar in the series.](Chart-Types_images/Chart-Types_img76.png) #### Customizing error bar type @@ -1879,7 +1879,7 @@ To customize the error bar type, set error bar type to **Custom**, and then chan {% endhighlight %} -![](Chart-Types_images/Chart-Types_img77.png) +![customize the error bar type in chart series.](Chart-Types_images/Chart-Types_img77.png) ### Changing error bar mode @@ -1900,7 +1900,7 @@ Error bar mode is used to define whether the error bar line has to be drawn Hori {% endhighlight %} -![](Chart-Types_images/Chart-Types_img78.png) +![changing error bar mode in chart series.](Chart-Types_images/Chart-Types_img78.png) ### Changing error bar direction @@ -1920,7 +1920,7 @@ You can change the error bar direction to plus, minus, or both side by using **E {% endhighlight %} -![](Chart-Types_images/Chart-Types_img79.png) +![change the error bar direction in chart series.](Chart-Types_images/Chart-Types_img79.png) ### Customizing error bar cap @@ -1941,14 +1941,14 @@ To customize the visibility, length, width, and fill color of error bar cap, use {% endhighlight %} -![](Chart-Types_images/Chart-Types_img80.png) +![customizing error bar cap in chart series.](Chart-Types_images/Chart-Types_img80.png) ## Box and Whisker Chart To render a box and whisker chart, set the series type to **boxAndWhisker**. This chart requires 2 fields, namely x and y to plot a segment. The field y requires n number of data, or it should contains minimum of five values to plot a segment. -![](Chart-Types_images/Chart-Types_img90.png) +![box and whisker chart.](Chart-Types_images/Chart-Types_img90.png) ### BoxPlotMode @@ -1986,7 +1986,7 @@ Outlier symbol's width and height can be customized by using outlierSettings thr {% endhighlight %} -![](Chart-Types_images/Chart-Types_img92.png) +![customize the outlier.](Chart-Types_images/Chart-Types_img92.png) ## Pie of Pie Chart To render the pie of pie chart, set the series type to **pieofpie**. Pie of pie chart is used for displaying the data of a pie slice as another pie chart. The values in the second pie is displayed based on the **splitMode** property. @@ -2003,7 +2003,7 @@ To render the pie of pie chart, set the series type to **pieofpie**. Pie of pie {% endhighlight %} -![](Chart-Types_images/Chart-Types_img93.png) +![the pie of pie chart.](Chart-Types_images/Chart-Types_img93.png) ### Split mode and split value @@ -2028,7 +2028,7 @@ By default, the splitMode is set to **Value**. {% endhighlight %} -![](Chart-Types_images/Chart-Types_img94.png) +![split mode and split value.](Chart-Types_images/Chart-Types_img94.png) ### Changing pie Of pie size The size of the second pie can be customized by using the **PieOfPieCoefficient** property. The default value of pieOfPieCoefficient is 0.6. Its value ranges from 0 to 1. @@ -2048,7 +2048,7 @@ The size of the second pie can be customized by using the **PieOfPieCoefficient* The following screenshot represents the pie of pie series with pieOfPieCoefficient as 1. -![](Chart-Types_images/Chart-Types_img95.png) +![pie of pie coefficient property.](Chart-Types_images/Chart-Types_img95.png) #### Customizing the Gap @@ -2067,4 +2067,4 @@ The distance between the two pies in the pie of pie chart can be controlled by u {% endhighlight %} -![](Chart-Types_images/Chart-Types_img96.png) +![customizing the gap.](Chart-Types_images/Chart-Types_img96.png) diff --git a/aspnet-core/DropDownList/Customization.md b/aspnet-core/DropDownList/Customization.md index fa940e52..2f2761fe 100644 --- a/aspnet-core/DropDownList/Customization.md +++ b/aspnet-core/DropDownList/Customization.md @@ -1,7 +1,7 @@ --- layout: post title: Customization in DropDownList control for Syncfusion ASP.NET Core -description: Customization in DropDownList control for Syncfusion ASP.NET Core +description: Check out and learn here all customization in DropDownList control for Syncfusion ASP.NET Core and much more. platform: aspnet-core control: DropDownList documentation: ug @@ -47,9 +47,9 @@ It provides the short description of the expected value in dropdown and will dis {% endtabs %} -![](Customization_images/Customization_img1.png) +![adding watermark text.](Customization_images/Customization_img1.png) -![](Customization_images/Customization_img2.png) +![watermarkText property.](Customization_images/Customization_img2.png) ## Applying Rounded Corner @@ -88,7 +88,7 @@ You can use ShowRoundedCorner property to add rounded borders to the input and p {% endtabs %} -![](Customization_images/Customization_img3.png) +![disabled in drop down list.](Customization_images/Customization_img3.png) I> The browser support details for rounded corner is given [here](https://www.w3schools.com/cssref/css3_pr_border-radius.asp). @@ -129,7 +129,7 @@ The Enabled property is used to indicate whether the control can respond to the {% endtabs %} -![](Customization_images/Customization_img4.png) +![enabled property in drop down list.](Customization_images/Customization_img4.png) ## Applying HTML Attributes @@ -173,4 +173,4 @@ Additional HTML attributes can be applied to the control by using HtmlAttributes {% endtabs %} -![](Customization_images/Customization_img5.png) \ No newline at end of file +![additional html attributes.](Customization_images/Customization_img5.png) \ No newline at end of file diff --git a/aspnet-core/MaskEdit/Behavior-Settings.md b/aspnet-core/MaskEdit/Behavior-Settings.md index 3a113b63..714f9d6c 100644 --- a/aspnet-core/MaskEdit/Behavior-Settings.md +++ b/aspnet-core/MaskEdit/Behavior-Settings.md @@ -1,7 +1,7 @@ --- layout: post title: Behavior Settings | MaskEdit | ASP.NET Core | Syncfusion -description: behavior settings +description: Check out and learn here all behavior settings of Syncfusion ASP.NET Core MaskEdit and much more details. platform: aspnet-core control: MaskEdit documentation: ug @@ -28,12 +28,12 @@ Output of MaskEditTextBox with EnablePersistence is as follows. -![](Behavior-Settings_images/Behavior-Settings_img1.png) +![mask edit text box at initial load.](Behavior-Settings_images/Behavior-Settings_img1.png) MaskEditTextBox at initial load {:.caption} -![](Behavior-Settings_images/Behavior-Settings_img2.png) +![mask edit text box after changing the value](Behavior-Settings_images/Behavior-Settings_img2.png) MaskEditTextBox after changing the value and after page refresh {:.caption} @@ -56,12 +56,12 @@ In the View page add MaskEditTextBox helper, and configure the Enabled property. Output when Enabled is “true” and when Enabled is “false”. -![](Behavior-Settings_images/Behavior-Settings_img3.png) +![textboxes with enabled as true.](Behavior-Settings_images/Behavior-Settings_img3.png) Textboxes with enabled as true {:.caption} -![](Behavior-Settings_images/Behavior-Settings_img4.png) +![textboxes with enabled as false.](Behavior-Settings_images/Behavior-Settings_img4.png) Textboxes with enabled as false {:.caption} @@ -82,7 +82,7 @@ MaskEditTextBox size can be modified by using the Height and Width properties. Output of MaskEditTextBox after setting “Height” and “Width” is as follows. -![](Behavior-Settings_images/Behavior-Settings_img5.png) +![mask edit text box with height and width.](Behavior-Settings_images/Behavior-Settings_img5.png) MaskEditTextBox with height and width {:.caption} @@ -108,7 +108,7 @@ In the View page add MaskEditTextBox helper, and configure the Value property Output of MaskEditTextBox with the value property is as follows. -![](Behavior-Settings_images/Behavior-Settings_img6.png) +![maskedit textbox with value.](Behavior-Settings_images/Behavior-Settings_img6.png) MaskEditTextBox with value {:.caption} @@ -131,7 +131,7 @@ Output of MaskEditTextBox when ReadOnly is “true” is as follows. MaskEditTex -![](Behavior-Settings_images/Behavior-Settings_img7.png) +![maskedit textbox with readonly.](Behavior-Settings_images/Behavior-Settings_img7.png) MaskEditTextBox with readOnly {:.caption} @@ -158,13 +158,13 @@ Output for MaskEditTextBox when ShowError is “true” is as follows. -![](Behavior-Settings_images/Behavior-Settings_img8.png) +![textbox with showerror.](Behavior-Settings_images/Behavior-Settings_img8.png) Textbox with showError {:.caption} -![](Behavior-Settings_images/Behavior-Settings_img9.png) +![textbox without error.](Behavior-Settings_images/Behavior-Settings_img9.png) Textbox without error {:.caption} @@ -205,34 +205,34 @@ In the View page use the corresponding Textbox helper for rendering MaskEdit con The output for MaskEditTextBox with its properties is as follows. -![](Behavior-Settings_images/Behavior-Settings_img10.png) +![maskedit with maskformat.](Behavior-Settings_images/Behavior-Settings_img10.png) MaskEdit with MaskFormat {:.caption} -![](Behavior-Settings_images/Behavior-Settings_img11.png) +![maskedit with hide prompt on leave.](Behavior-Settings_images/Behavior-Settings_img11.png) MaskEdit with HidePromptOnLeave {:.caption} -![](Behavior-Settings_images/Behavior-Settings_img12.png) +![maskedit with prompt focus.](Behavior-Settings_images/Behavior-Settings_img12.png) MaskEdit with prompt focus {:.caption} -![](Behavior-Settings_images/Behavior-Settings_img13.png) +![maskedit with inputmode text.](Behavior-Settings_images/Behavior-Settings_img13.png) MaskEdit with InputMode text {:.caption} -![](Behavior-Settings_images/Behavior-Settings_img14.png) +![maskedit with customcharacter.](Behavior-Settings_images/Behavior-Settings_img14.png) MaskEdit with CustomCharacter {:.caption} @@ -318,7 +318,7 @@ The output for MaskEditTextBox after applying CssClass is as follows. -![](Behavior-Settings_images/Behavior-Settings_img15.png) +![textboxes with cssclass.](Behavior-Settings_images/Behavior-Settings_img15.png) Textboxes with cssClass {:.caption} @@ -341,7 +341,7 @@ In the View page add MaskEditTextBox helper, and configure the ShowRoundedCorner Output of MaskEditTextBox when ShowRoundedCorner is “true”. -![](Behavior-Settings_images/Behavior-Settings_img16.png) +![textboxes with showroundedcorner.](Behavior-Settings_images/Behavior-Settings_img16.png) Textboxes with showRoundedCorner {:.caption} @@ -362,7 +362,7 @@ In the View page use the corresponding Textbox helper for rendering Textbox cont Output of MaskEditTextBox with watermark text. -![](Behavior-Settings_images/Behavior-Settings_img17.png) +![mask edit text box with watermark text.](Behavior-Settings_images/Behavior-Settings_img17.png) MaskEditTextBox with watermark text {:.caption} @@ -385,7 +385,7 @@ In the View page use the corresponding MaskEdit helper for rendering MaskEdit co The output for Textboxes when TextAlign is set to “right”. -![](Behavior-Settings_images/Behavior-Settings_img18.png) +![mask edit text with textalign.](Behavior-Settings_images/Behavior-Settings_img18.png) MaskEditTextBox with textAlign {:.caption} @@ -445,7 +445,7 @@ The MaskEditTextBox provides support for adding HTML attributes to the component The output for MaskEditTextBox after configuring the HtmlAttributes property -![](Behavior-Settings_images/Behavior-Settings_img19.png) +![mask edit text with focus.](Behavior-Settings_images/Behavior-Settings_img19.png) MaskEditTextBox with focus {:.caption} diff --git a/aspnet-core/Menu/Orientation.md b/aspnet-core/Menu/Orientation.md index 96f98e8a..963640de 100644 --- a/aspnet-core/Menu/Orientation.md +++ b/aspnet-core/Menu/Orientation.md @@ -1,7 +1,7 @@ --- layout: post title: Orientation | Menu | ASP.NET Core | Syncfusion -description: orientation +description: Check out and learn here everything about the orientation of the Syncfusion ASP.NET Core Menu and much more details. platform: aspnet-core control: Menu documentation: ug @@ -72,7 +72,7 @@ The following steps explains you the details on rendering the Menu control. The following screenshot displays the output of the above code. -![](Orientation_images/Orientation_img1.png) +![horizontal orientation in menu.](Orientation_images/Orientation_img1.png) Horizontal Menu {:.caption} @@ -137,7 +137,7 @@ You can also render Menu control in vertical direction using orientation.To set The following screen shot displays the output of the above code. -![](Orientation_images/Orientation_img2.png) +![render menu control.](Orientation_images/Orientation_img2.png) Vertical Menu {:.caption} \ No newline at end of file diff --git a/aspnet-core/SpellCheck/Functionalities.md b/aspnet-core/SpellCheck/Functionalities.md index 8af1f015..966473a5 100644 --- a/aspnet-core/SpellCheck/Functionalities.md +++ b/aspnet-core/SpellCheck/Functionalities.md @@ -1,6 +1,6 @@ --- title: SpellCheck - Functionalities -description: SpellCheck Functionalities +description: Check out and learn here all spellcheck functionalities of Syncfusion ASP.NET Core Spellcheck and much more details. platform: aspnet-core control: spellcheck documentation: ug @@ -249,7 +249,7 @@ The following code example describes the above behavior. The following screenshot displays the output for the above code -![](ValidateOnType_Images/validateontype.png) +![checking content on typing.](ValidateOnType_Images/validateontype.png) ## Suggestion Words diff --git a/aspnet-core/TreeView/Full-Row-Selection.md b/aspnet-core/TreeView/Full-Row-Selection.md index f54fdc24..26b8067f 100644 --- a/aspnet-core/TreeView/Full-Row-Selection.md +++ b/aspnet-core/TreeView/Full-Row-Selection.md @@ -1,6 +1,6 @@ --- layout: post -title: TreeView with Full Row Selection | TreeView | ASP.NET Core | Syncfusion +title: TreeView with Full Row Selection | TreeView | Syncfusion description: specify full row selection option in TreeView and its settings platform: aspnet-core control: TreeView @@ -75,7 +75,7 @@ In the view page, add the following code and map the properties defined to the c {% endhighlight %} By running the previous code, you will get the output like the following: -![](Fullrowselection_images/selection1.png) +![full row selection property.](Fullrowselection_images/selection1.png) ## Customization @@ -189,4 +189,4 @@ In the view page, add the following code and map the properties defined to the c {% endhighlight %} By running the above code, you will get the output like the following: -![](Fullrowselection_images/custom.png) \ No newline at end of file +![customize the tree view full row selection.](Fullrowselection_images/custom.png) \ No newline at end of file