Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions aspnet-core/Autocomplete/Appearance-and-Styling.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Appearance and Styling | AutoComplete | ASP.NET Core | Syncfusion
description: appearance and styling
description: Learn here about appearance and styling in ASP.NET Core AutoComplete Control, its elements, and more.
platform: aspnet-core
control: AutoComplete
documentation: ug
---

# Appearance and Styling
# Appearance and Styling in ASP.NET Core AutoComplete

## Adjusting AutoComplete size

Expand Down Expand Up @@ -40,7 +40,7 @@ The following image is the output for AutoComplete textbox with customized dimen



![](Appearance-and-Styling_images/Appearance-and-Styling_img1.png)
![ASP.NET Core AutoComplete define height and weight](Appearance-and-Styling_images/Appearance-and-Styling_img1.png)

AutoComplete with Customized dimensions
{:.caption}
Expand Down Expand Up @@ -76,7 +76,7 @@ The following image is the output for AutoComplete when ShowRoundedCorner is set



![](Appearance-and-Styling_images/Appearance-and-Styling_img2.png)
![ASP.NET Core AutoComplete rounded corner](Appearance-and-Styling_images/Appearance-and-Styling_img2.png)

AutoComplete with Rounded corners
{:.caption}
Expand Down Expand Up @@ -106,7 +106,7 @@ The following image is the output for AutoComplete when WatermarkText is defined



![](Appearance-and-Styling_images/Appearance-and-Styling_img3.png)
![ASP.NET Core AutoComplete watermark text](Appearance-and-Styling_images/Appearance-and-Styling_img3.png)

AutoComplete loaded with watermark text
{:.caption}
Expand Down Expand Up @@ -140,7 +140,7 @@ The following image is the output for AutoComplete, after configuring the height



![](Appearance-and-Styling_images/Appearance-and-Styling_img4.png)
![ASP.NET Core AutoComplete popup panel](Appearance-and-Styling_images/Appearance-and-Styling_img4.png)

AutoComplete PopUp panel with configured dimensions
{:.caption}
Expand Down Expand Up @@ -259,7 +259,7 @@ The following steps allow you to configure CssClass for an AutoComplete textbox.

The following image is of an AutoComplete textbox configured based on CSS class.

![](Appearance-and-Styling_images/Appearance-and-Styling_img5.png)
![ASP.NET Core AutoComplete css class](Appearance-and-Styling_images/Appearance-and-Styling_img5.png)

AutoComplete widget configured with CSS class
{:.caption}
4 changes: 2 additions & 2 deletions aspnet-core/Autocomplete/Data-Binding.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Data Binding | AutoComplete | ASP.NET Core | Syncfusion
description: data-binding
description: Learn here about data binding in Syncfusion Essential ASP.NET Core AutoComplete Control, its elements, and more.
platform: aspnet-core
control: AutoComplete
documentation: ug
---

# Data-Binding
# Data Binding in ASP.NET Core AutoComplete

In order to render the AutoComplete control, the data needs to be bound to it in a proper way. The following sub-properties provide a way to bind either the local or remote data to the AutoComplete widget by binding the appropriate data fields to the corresponding options.

Expand Down
22 changes: 11 additions & 11 deletions aspnet-core/CircularGauge/Legend.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Legend | CircularGauge | ASP.NET Core| Syncfusion
description: legend
description: Learn here about Legend in Syncfusion Essential ASP.NET Core CircularGauge Control, its elements, and more.
platform: aspnet-core
control: CircularGauge
documentation: ug
---

# Legend
# Legend in ASP.NET Core CircularGauge

The legend contains the list of the ranges that appear in the circular gauge

Expand All @@ -23,7 +23,7 @@ By default, the legend the legend will not be displayed in the circular gauge.

{% endhighlight %}

![](Legend_images/Legend_img1.png)
![ASP.NET Core CircularGauge legend visibility](Legend_images/Legend_img1.png)


[Click](http://ng2jq.syncfusion.com/#/circulargauge/legend) here to view the online demo sample for legend .
Expand Down Expand Up @@ -75,7 +75,7 @@ By using the `position` property, you can position the legend at *left*, *right*

{% endhighlight %}

![](Legend_images/Legend_img2.png)
![ASP.NET Core CircularGauge legend fill](Legend_images/Legend_img2.png)

### Legend Alignment

Expand All @@ -89,7 +89,7 @@ You can align the legend to the *center*, *far* or *near* based on its position

{% endhighlight %}

![](Legend_images/Legend_img3.png)
![ASP.NET Core CircularGauge legend alignment`](Legend_images/Legend_img3.png)

## Customization

Expand All @@ -105,7 +105,7 @@ To change the legend item, shape, you have to specify the desired shape in the `

{% endhighlight %}

![](Legend_images/Legend_img4.png)
![ASP.NET Core CircularGauge legend shape](Legend_images/Legend_img4.png)


### Legend Item Size and Border
Expand All @@ -124,7 +124,7 @@ You can change the size of the legend items by using the `width` and `height` pr

{% endhighlight %}

![](Legend_images/Legend_img5.png)
![ASP.NET Core CircularGauge legend item size](Legend_images/Legend_img5.png)

### Legend size

Expand All @@ -140,7 +140,7 @@ You can change the default legend size by using the `size` property of the legen

{% endhighlight %}

![](Legend_images/Legend_img6.png)
![ASP.NET Core CircularGauge size](Legend_images/Legend_img6.png)


### Legend Item Padding
Expand All @@ -157,7 +157,7 @@ You can control the spacing between the legend items by using the `item-padding`

{% endhighlight %}

![](Legend_images/Legend_img7.png)
![ASP.NET Core CircularGauge item padding](Legend_images/Legend_img7.png)

### Legend border

Expand All @@ -174,7 +174,7 @@ You can customize the legend border by using the `border` option in the legend.

{% endhighlight %}

![](Legend_images/Legend_img8.png)
![ASP.NET Core CircularGauge border](Legend_images/Legend_img8.png)

### Font of the legend text

Expand All @@ -191,7 +191,7 @@ The font of the legend item text can be customized by using the `font` property
{% endhighlight %}


![](Legend_images/Legend_img9.png)
![ASP.NET Core CircularGauge events](Legend_images/Legend_img9.png)

## Events

Expand Down
16 changes: 8 additions & 8 deletions aspnet-core/CircularGauge/Ranges-and-Frames.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Ranges and Frames | CircularGauge | Syncfusion
description: ranges and frames
title: Ranges and Frames in ASP.NET Core CircularGauge Control | Syncfusion
description: Learn here about ranges and frames in Syncfusion Essential ASP.NET Core CircularGauge Control, its elements, and more.
platform: aspnet-core
control: CircularGauge
documentation: ug
---

# Ranges and Frames
# Ranges and Frames in ASP.NET Core CircularGauge

Ranges are used to specify or group the scale values. By using ranges, you can describe the values in the pointers.

Expand Down Expand Up @@ -55,7 +55,7 @@ Range collection is directly added to the scale object. Refer the following code

Execute the above code to render the following output.

![](Ranges-and-Frames_images/Ranges-and-Frames_img1.png)
![ASP.NET Core CircularGauge range and frame](Ranges-and-Frames_images/Ranges-and-Frames_img1.png)

Circular Gauge with customized ranges with startValues and endValues
{:.caption}
Expand Down Expand Up @@ -84,7 +84,7 @@ placement="@RangePlacement.Far">

Execute the above code to render the following output.

![](Ranges-and-Frames_images/Ranges-and-Frames_img2.png)
![ASP.NET Core CircularGauge color and border](Ranges-and-Frames_images/Ranges-and-Frames_img2.png)

Circular Gauge with customized range colors and borders
{:.caption}
Expand Down Expand Up @@ -118,7 +118,7 @@ Execute the above code to render the following output.



![](Ranges-and-Frames_images/Ranges-and-Frames_img3.png)
![ASP.NET Core CircularGauge position the ranges](Ranges-and-Frames_images/Ranges-and-Frames_img3.png)

Circular Gauge with customized ranges
{:.caption}
Expand Down Expand Up @@ -152,7 +152,7 @@ placement="@RangePlacement.Far">

Execute the above code to render the following output.

![](Ranges-and-Frames_images/Ranges-and-Frames_img4.png)
![ASP.NET Core CircularGauge multiple ranges](Ranges-and-Frames_images/Ranges-and-Frames_img4.png)

Circular Gauge with multiple ranges
{:.caption}
Expand Down Expand Up @@ -185,7 +185,7 @@ half-circle-frame-start-angle="205" half-circle-frame-end-angle="335"></e-frame>

Execute the above code to render the following output.

![](Ranges-and-Frames_images/Ranges-and-Frames_img5.png)
![ASP.NET Core CircularGauge frames](Ranges-and-Frames_images/Ranges-and-Frames_img5.png)

Circular Gauge with multiple ranges
{:.caption}
16 changes: 8 additions & 8 deletions aspnet-core/ColorPicker/Appearance-and-Styling.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Appearance and Styling | ColorPicker | ASP.NET Core | Syncfusion
description: appearance and styling
description: Learn here about appearance and styling in ASP.NET Core ColorPicker Control, its elements, and more.
platform: aspnet-core
control: ColorPicker
documentation: ug
---

# Appearance and Styling
# Appearance and Styling in ASP.NET Core ColorPicker

## modelType

Expand Down Expand Up @@ -67,7 +67,7 @@ N> To render the ColorPicker Control you can use either Razor or Tag helper code

The following screenshot displays the output of the above code example.

![](Appearance-and-Styling_images/Appearance-and-Styling_img1.png)
![ASP.NET Core ColorPicker appearance](Appearance-and-Styling_images/Appearance-and-Styling_img1.png)

ColorPicker rendered with Palette Model
{:.caption}
Expand Down Expand Up @@ -190,7 +190,7 @@ PresetType(PresetsType.CandyCrush)</td></tr>

The following screenshot displays the output of the above code example.

![](Appearance-and-Styling_images/Appearance-and-Styling_img2.png)
![ASP.NET Core ColorPicker styling](Appearance-and-Styling_images/Appearance-and-Styling_img2.png)

ColorPicker with Presets
{:.caption}
Expand Down Expand Up @@ -227,7 +227,7 @@ The CustomPalette property is a dependent property of Palette and ModelType prop

The following screenshot displays the output of the above code example.

![](Appearance-and-Styling_images/Appearance-and-Styling_img3.png)
![ASP.NET Core ColorPicker customized color](Appearance-and-Styling_images/Appearance-and-Styling_img3.png)

ColorPicker with Customized Colors
{:.caption}
Expand Down Expand Up @@ -263,7 +263,7 @@ The following steps explain you how to get the ColorPicker popup in DisplayInlin

The following screenshot displays the output of the above code example.

![](Appearance-and-Styling_images/Appearance-and-Styling_img4.png)
![ASP.NET Core ColorPicker display inline](Appearance-and-Styling_images/Appearance-and-Styling_img4.png)

ColorPicker in Display Inline
{:.caption}
Expand Down Expand Up @@ -352,7 +352,7 @@ N> jQuery.easing external dependency has been removed from version 14.3.0.49 onw

The following screenshot displays the output of the above code example.

![](Appearance-and-Styling_images/Appearance-and-Styling_img5.png)
![ASP.NET Core ColorPicker theme](Appearance-and-Styling_images/Appearance-and-Styling_img5.png)

ColorPicker with Theme Support
{:.caption}
Expand Down Expand Up @@ -415,7 +415,7 @@ Using this property you can override the existing styles under the theme style s
{% endhighlight %}
The following screenshot displays the output of above steps.

![](Appearance-and-Styling_images/Appearance-and-Styling_img6.png)
![ASP.NET Core ColorPicker custom theme](Appearance-and-Styling_images/Appearance-and-Styling_img6.png)

ColorPicker with Custom Theme
{:.caption}
6 changes: 3 additions & 3 deletions aspnet-core/ProgressBar/Enabling-the-ProgressBar.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Enabling the ProgressBar | Progress Bar | ASP.NET Core | Syncfusion
description: enabling the progressbar
description: Learn here about enabling the progressbar in Syncfusion Essential ASP.NET Core Progress Bar Control, its elements, and more.
platform: aspnet-core
control: Progress Bar
documentation: ug
---

## Enabling the ProgressBar
# Enabling the ProgressBar in ASP.NET Core

The ProgressBar is enabled by using the ‘Enabled’ Property. When this property is set to ‘false’, it disables the ProgressBar widget. By default, ‘Enabled’ property is set to ‘true’ in the ProgressBar widget.

Expand All @@ -25,7 +25,7 @@ The following steps explain how to disable the ProgressBar widget when ‘Enable

The following screenshot displays the output for the above code.

![](Enabling-the-ProgressBar_images/Enabling-the-ProgressBar_img1.png)
![ASP.NET Core Progress Bar enable](Enabling-the-ProgressBar_images/Enabling-the-ProgressBar_img1.png)

Disabled Progress Bar
{:.caption}
8 changes: 4 additions & 4 deletions aspnet-core/TreeGrid/Searching.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Searching | TreeGrid | ASP.NET Core | Syncfusion
description: Searching
description: Learn here about Searching in Syncfusion Essential ASP.NET Core TreeGrid Control, its elements, and more.
platform: aspnet-core
control: TreeGrid
documentation: ug
---

## Searching
# Searching in ASP.NET Core TreeGrid

The TreeGrid control has an option to search its content using toolbar search box. The toolbar search box can be enabled by using the `ToolbarSettings.ToolbarItems` property. The following code example explains how to integrate search textbox in toolbar.

Expand All @@ -34,7 +34,7 @@ public partial class TreeGridController : Controller
{% endhighlight %}

The below screenshot shows TreeGrid search with `plan` key word.
![](Searching_images/Searching_img1.png)
![ASP.NET Core TreeGrid searching](Searching_images/Searching_img1.png)

## Search Hierarchy Modes

Expand Down Expand Up @@ -62,6 +62,6 @@ The following code example shows how to set the `SearchHierarchyMode` in the tre
{% endhighlight %}

The following image depicts the output of the previous code example.
![](Searching_images/SearchHierarchyModes_img1.png)
![ASP.NET Core TreeGrid search hierarchy mode](Searching_images/SearchHierarchyModes_img1.png)

The above screenshot shows Tree Grid with `child` search mode.