Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 2 commits into from
Jul 15, 2024
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
afdb339
docs(Grid): update examples in kb articles
Tsvetomir-Hr Jul 9, 2024
6f88e6f
apply suggestion
Tsvetomir-Hr Jul 10, 2024
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
112 changes: 88 additions & 24 deletions knowledge-base/chart-draw-horizontal-vertical-lines.md
View file
Open in desktop
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)
45 changes: 37 additions & 8 deletions knowledge-base/grid-filter-column-list.md
View file
Open in desktop
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,10 @@ The example below includes two Grids - one for each `FilterMode`.
{
MenuFilteredSpiceIds = new List<int>();
await context.ClearFilterAsync();

// Since the filtering occurs outside the Grid,
// we need to clear the active filter style manually.
Tsvetomir-Hr marked this conversation as resolved.
Show resolved Hide resolved
SpicesHeaderClass = "";
}

private async Task OnGridReadMenuFilter(GridReadEventArgs args)
Expand All @@ -206,6 +231,10 @@ The example below includes two Grids - one for each `FilterMode`.
if (MenuFilteredSpiceIds.Any())
{
filteredData.RemoveAll(x => !MenuFilteredSpiceIds.All(y => x.SpiceIds.Contains(y)));

// Since the filtering occurs outside the Grid,
// we need to apply the active filter style manually.
SpicesHeaderClass = "active-filter";
}

var result = await filteredData.ToDataSourceResultAsync(args.Request);
Expand All @@ -228,11 +257,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
Loading