docs(Grid): update examples in kb articles (#2219)

Tsvetomir-Hr · web-flow · commit 9b7d65db7007 · 2024-07-15T16:54:46.000+03:00
* docs(Grid): update examples in kb articles

* apply suggestion
diff --git 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
 <TelerikChart>
+    <ChartLegend Visible="true"></ChartLegend>
+
     <ChartSeriesItems>
-        <ChartSeries Type="ChartSeriesType.Column" Name="Column 1" Data="@firstColumnTypeData">
-        </ChartSeries>
-        <ChartSeries Type="ChartSeriesType.Column" Name="Column 2" Data="@secondColumnTypeData">
+        <ChartSeries Type="ChartSeriesType.Scatter"
+                     Data="@SeriesScatterData"
+                     Name="Scatter"
+                     XField="@nameof(ModelData.X)"
+                     YField="@nameof(ModelData.Y)">
         </ChartSeries>
-        <ChartSeries Type="ChartSeriesType.Line" Name="Line 1" Data="@firstLineTypeData">
+
+        <ChartSeries Type="ChartSeriesType.Bubble"
+                     Data="@SeriesBubbleData"
+                     Name="Bubble"
+                     XField="@nameof(ModelData.X)"
+                     YField="@nameof(ModelData.Y)"
+                     SizeField="@nameof(BubbleData.SizeField)">
         </ChartSeries>
-        <ChartSeries Type="ChartSeriesType.Line" Name="Line 2" Data="@secondLineTypeData">
+
+        <ChartSeries Type="ChartSeriesType.ScatterLine"
+                     Data="@Series1Data"
+                     Name="Line"
+                     XField="@nameof(ModelData.X)"
+                     YField="@nameof(ModelData.Y)">
+            <ChartSeriesMarkers Visible="false" />
         </ChartSeries>
-    </ChartSeriesItems>
 
-    <ChartCategoryAxes>
-        <ChartCategoryAxis Categories="@xColumnAxisItems"></ChartCategoryAxis>
-    </ChartCategoryAxes>
+        <ChartSeries Type="ChartSeriesType.ScatterLine"
+                     Data="@Series2Data"
+                     Name="Dashed Line"
+                     XField="@nameof(ModelData.X)"
+                     YField="@nameof(ModelData.Y)"
+                     DashType="@DashType.Dash">
+            <ChartSeriesMarkers Visible="false" />
+        </ChartSeries>
 
-    <ChartTitle Text="Draw Horizontal and Vertical Lines"></ChartTitle>
+        <ChartSeries Type="ChartSeriesType.ScatterLine"
+                     Data="@Series3Data"
+                     Name="Dotted Line"
+                     XField="@nameof(ModelData.X)"
+                     YField="@nameof(ModelData.Y)"
+                     DashType="@DashType.Dot">
+            <ChartSeriesMarkers Visible="false" />
+        </ChartSeries>
 
-    <ChartLegend Position="ChartLegendPosition.Right">
-    </ChartLegend>
+    </ChartSeriesItems>
 </TelerikChart>
 
 @code {
-    #region LinesData
-    private List<object> firstColumnTypeData = new List<object>() { 10, 2, 5, 6 };
-    private List<object> secondColumnTypeData = new List<object>() { 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<ModelData> Series1Data = new List<ModelData>()
+    {
+        new ModelData() { X = 120, Y = 0 },
+        new ModelData() { X = 120, Y = 100 },
+    };
 
-    private List<object> firstLineTypeData = new List<object>() { 8, 8, 8, 6 };
-    private List<object> secondLineTypeData = new List<object>() { 5, 8, 2, 7 };
+    public List<ModelData> Series2Data = new List<ModelData>()
+    {
+        new ModelData() { X = 0, Y = 20 },
+        new ModelData() { X = 140, Y = 20 },
+    };
 
-    private string[] xColumnAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };
-    #endregion
+    public List<ModelData> Series3Data = new List<ModelData>()
+    {
+        new ModelData() { X = 0, Y = 80 },
+        new ModelData() { X = 140, Y = 80 },
+    };
+
+    public List<BubbleData> SeriesBubbleData = new List<BubbleData>()
+    {
+        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<ModelData> SeriesScatterData = new List<ModelData>()
+    {
+        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
@@ -72,7 +72,9 @@ The example below includes two Grids - one for each `FilterMode`.
         <GridColumn Field="@nameof(Food.Name)" Title="Food" />
         <GridColumn Field="@nameof(Food.SpiceIds)" Title="Spices" Sortable="false">
             <Template>
-                @{ var dataItem = (Food)context; }
+                @{
+                    var dataItem = (Food)context;
+                }
                 <ul>
                     @foreach (var spiceId in dataItem.SpiceIds)
                     {
@@ -104,9 +106,11 @@ The example below includes two Grids - one for each `FilterMode`.
              Height="600px">
     <GridColumns>
         <GridColumn Field="@nameof(Food.Name)" Title="Food" />
-        <GridColumn Field="@nameof(Food.SpiceIds)" Title="Spices" Sortable="false">
+        <GridColumn Field="@nameof(Food.SpiceIds)" Title="Spices" Sortable="false" HeaderClass="@SpicesHeaderClass">
             <Template>
-                @{ var dataItem = (Food)context; }
+                @{
+                    var dataItem = (Food)context;
+                }
                 <ul>
                     @foreach (var spiceId in dataItem.SpiceIds)
                     {
@@ -133,9 +137,22 @@ The example below includes two Grids - one for each `FilterMode`.
     </GridColumns>
 </TelerikGrid>
 
+<style>
+    .active-filter .k-grid-header-menu {
+        background-color: var(--kendo-color-primary);
+        color: var(--kendo-color-on-primary);
+    }
+
+        .active-filter .k-grid-header-menu:hover {
+            background-color: var(--kendo-color-primary);
+        }
+</style>
+
 @code {
     private List<Food> GridData { get; set; } = new List<Food>();
 
+    private string SpicesHeaderClass { get; set; } = string.Empty;
+
     private List<Spice> Spices { get; set; } = new List<Spice>() {
         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<int>();
         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();
