diff --git a/knowledge-base/chart-draw-horizontal-vertical-lines.md b/knowledge-base/chart-draw-horizontal-vertical-lines.md
index 4d030c28e..21c4acdec 100644
--- a/knowledge-base/chart-draw-horizontal-vertical-lines.md
+++ b/knowledge-base/chart-draw-horizontal-vertical-lines.md
@@ -109,52 +109,116 @@ Steps for drawing vertical and horizontal lines with [plot bands]({%slug chart-p
}
`````
-### Using Additional Line Series
+### Using Additional ScatterLine Series
-Steps for drawing horizontal and vertical lines with additional [Lines Series]({%slug components/chart/types/line%}):
+Steps for drawing horizontal and vertical lines with additional [ScatterLine Series]({%slug components/chart/types/scatterline%}):
-1. Add `ChartSeries` instances of type `ChartSeriesType.Line` based on the needed number of lines.
+1. Add `ChartSeries` instances of type `ChartSeriesType.ScatterLine` based on the needed number of lines.
2. Set data for the lines based on the information shown from the main Chart.
->caption Drawing Horizontal and Vertical lines with additional Lines Chart
+>caption Drawing Horizontal and Vertical lines with additional ScatterLine Chart
````CSHTML
+
+
-
-
-
+
-
+
+
-
+
+
+
-
-
-
-
+
+
+
-
+
+
+
-
-
+
@code {
- #region LinesData
- private List firstColumnTypeData = new List() { 10, 2, 5, 6 };
- private List secondColumnTypeData = new List() { 5, 8, 2, 7 };
+ public class ModelData
+ {
+ public int X { get; set; }
+ public int Y { get; set; }
+ }
+ public class BubbleData
+ {
+ public int X { get; set; }
+ public int Y { get; set; }
+ public int SizeField { get; set; }
+ }
+
+ public List Series1Data = new List()
+ {
+ new ModelData() { X = 120, Y = 0 },
+ new ModelData() { X = 120, Y = 100 },
+ };
- private List firstLineTypeData = new List() { 8, 8, 8, 6 };
- private List secondLineTypeData = new List() { 5, 8, 2, 7 };
+ public List Series2Data = new List()
+ {
+ new ModelData() { X = 0, Y = 20 },
+ new ModelData() { X = 140, Y = 20 },
+ };
- private string[] xColumnAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };
- #endregion
+ public List Series3Data = new List()
+ {
+ new ModelData() { X = 0, Y = 80 },
+ new ModelData() { X = 140, Y = 80 },
+ };
+
+ public List SeriesBubbleData = new List()
+ {
+ new BubbleData() { X = 40, Y = 40 , SizeField=1000},
+ new BubbleData() { X = 66, Y = 77 , SizeField=500},
+ new BubbleData() { X = 90, Y = 50 , SizeField=200},
+ new BubbleData() { X = 120, Y = 70 , SizeField=350}
+ };
+
+ public List SeriesScatterData = new List()
+ {
+ new ModelData() { X = 10, Y = 10 },
+ new ModelData() { X = 17, Y = 50 },
+ new ModelData() { X = 18, Y = 70 },
+ new ModelData() { X = 35, Y = 90 },
+ new ModelData() { X = 47, Y = 95 },
+ new ModelData() { X = 100, Y = 100 }
+ };
}
````
## See Also
* [Charts Plot Bands]({%slug chart-plot-bands%})
-* [Lines Chart](https://demos.telerik.com/blazor-ui/chart/line-chart)
+* [ScatterLine Chart](https://demos.telerik.com/blazor-ui/chart/scatter-line-chart)
diff --git a/knowledge-base/grid-filter-column-list.md b/knowledge-base/grid-filter-column-list.md
index 1ab39aecf..9a5d80c4a 100644
--- a/knowledge-base/grid-filter-column-list.md
+++ b/knowledge-base/grid-filter-column-list.md
@@ -72,7 +72,9 @@ The example below includes two Grids - one for each `FilterMode`.
- @{ var dataItem = (Food)context; }
+ @{
+ var dataItem = (Food)context;
+ }
@foreach (var spiceId in dataItem.SpiceIds)
{
@@ -104,9 +106,11 @@ The example below includes two Grids - one for each `FilterMode`.
Height="600px">
-
+
- @{ var dataItem = (Food)context; }
+ @{
+ var dataItem = (Food)context;
+ }
@foreach (var spiceId in dataItem.SpiceIds)
{
@@ -133,9 +137,22 @@ The example below includes two Grids - one for each `FilterMode`.
+
+
@code {
private List GridData { get; set; } = new List();
+ private string SpicesHeaderClass { get; set; } = string.Empty;
+
private List Spices { get; set; } = new List() {
new Spice() { Id = 1, Name = "Salt" },
new Spice() { Id = 2, Name = "Pepper" },
@@ -165,6 +182,10 @@ The example below includes two Grids - one for each `FilterMode`.
{
filteredData.RemoveAll(x => !RowFilteredSpiceIds.All(y => x.SpiceIds.Contains(y)));
}
+ else
+ {
+ SpicesHeaderClass = string.Empty;
+ }
var result = await filteredData.ToDataSourceResultAsync(args.Request);
@@ -197,6 +218,9 @@ The example below includes two Grids - one for each `FilterMode`.
{
MenuFilteredSpiceIds = new List();
await context.ClearFilterAsync();
+
+ // Because the filtering occurs outside of the Grid, the active filter style requires manual clearing.
+ SpicesHeaderClass = "";
}
private async Task OnGridReadMenuFilter(GridReadEventArgs args)
@@ -206,6 +230,9 @@ The example below includes two Grids - one for each `FilterMode`.
if (MenuFilteredSpiceIds.Any())
{
filteredData.RemoveAll(x => !MenuFilteredSpiceIds.All(y => x.SpiceIds.Contains(y)));
+
+ // Because the filtering occurs outside of the Grid, the active filter style requires manual applying.
+ SpicesHeaderClass = "active-filter";
}
var result = await filteredData.ToDataSourceResultAsync(args.Request);
@@ -228,11 +255,11 @@ The example below includes two Grids - one for each `FilterMode`.
var spiceIdsForItem = Spices.OrderBy(x => rnd.Next()).Take(3).OrderBy(x => x.Name).Select(x => x.Id).ToList();
GridData.Add(new Food()
- {
- Id = i,
- Name = $"Food {i}",
- SpiceIds = spiceIdsForItem
- });
+ {
+ Id = i,
+ Name = $"Food {i}",
+ SpiceIds = spiceIdsForItem
+ });
}
Spices = Spices.OrderBy(x => x.Name).ToList();