Skip to content

Commit

Permalink
docs(Grid): update examples in kb articles (#2219)
Browse files Browse the repository at this point in the history 
* docs(Grid): update examples in kb articles

* apply suggestion
  • Loading branch information
@Tsvetomir-Hr @NansiYancheva
Tsvetomir-Hr authored and NansiYancheva committed Aug 1, 2024
1 parent 9667961 commit 8979900
Show file tree
Hide file tree
Showing 2 changed files with 123 additions and 32 deletions.
112 changes: 88 additions & 24 deletions knowledge-base/chart-draw-horizontal-vertical-lines.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
43 changes: 35 additions & 8 deletions knowledge-base/grid-filter-column-list.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
{
Expand Down Expand Up @@ -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)
{
Expand All @@ -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" },
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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)
Expand All @@ -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);
Expand All @@ -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();
Expand Down

0 comments on commit 8979900

Please sign in to comment.