Skip to content

Grid overview examples #3155

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

Merged
merged 2 commits into from
Aug 6, 2025
Merged

Grid overview examples #3155

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9d1bcdc
chore: replace example with live example url
Tsvetomir-Hr Aug 4, 2025
11213c2
chore: add live examples to overview page
Tsvetomir-Hr Aug 4, 2025
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
54 changes: 3 additions & 51 deletions components/chart/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,50 +24,8 @@ The <a href="https://demos.telerik.com/blazor-ui/chart/overview" target="_blank"

>caption Basic chart

````RAZOR
<TelerikChart>
<ChartSeriesItems>
<ChartSeries Type="ChartSeriesType.Line" Name="Product 1 (bound to simple data)" Data="@simpleData">
</ChartSeries>
<ChartSeries Type="ChartSeriesType.Line" Name="Product 2 (bound to model)" Data="@modelData" Field="@nameof(MyDataModel.SecondSeriesValue)">
<ChartSeriesLabels Template="#=value# in #=dataItem.ExtraData# quarter" Visible="true"></ChartSeriesLabels>
</ChartSeries>
</ChartSeriesItems>

<ChartValueAxes>
<ChartValueAxis Color="red"></ChartValueAxis>
</ChartValueAxes>

<ChartCategoryAxes>
<ChartCategoryAxis Categories="@xAxisItems"></ChartCategoryAxis>
</ChartCategoryAxes>

<ChartTitle Text="Quarterly sales trend"></ChartTitle>

<ChartLegend Position="Telerik.Blazor.ChartLegendPosition.Bottom">
</ChartLegend>
</TelerikChart>

@code {
public class MyDataModel
{
public int SecondSeriesValue { get; set; }
public string ExtraData { get; set; }
}

public List<MyDataModel> modelData = new List<MyDataModel>()
{
new MyDataModel() { SecondSeriesValue = 1, ExtraData = "first" },
new MyDataModel() { SecondSeriesValue = 5, ExtraData = "second" },
new MyDataModel() { SecondSeriesValue = 3, ExtraData = "third" },
new MyDataModel() { SecondSeriesValue = 2, ExtraData = "fourth" },
};

public List<object> simpleData = new List<object>() { 10, 2, 7, 5 };

public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };
}
````
<demo metaUrl="client/chart/overview/" height="500"></demo>

## Chart Elements

Expand Down Expand Up @@ -252,16 +210,10 @@ To execute Chart methods, obtain reference to the component instance via `@ref`.
| `Refresh` | Use the method to programmatically re-render the Chart. |
| `ResetDrilldownLevel` | Use the method to programmatically reset the drilldown level of the Chart. For more information refer to the [DrillDown article](slug:chart-drilldown#reset-drilldown-level). |

<div class="skip-repl"></div>

````RAZOR
<TelerikButton OnClick="@RefreshChart">Refresh Chart</TelerikButton>

<TelerikChart @ref="ChartRef" />
````RAZOR.skip-repl
<TelerikChart @ref="@ChartRef" />

@code {
public TelerikChart ChartRef;

private void RefreshChart()
{
ChartRef.Refresh();
Expand Down
87 changes: 2 additions & 85 deletions components/grid/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,56 +29,7 @@ The Telerik Blazor grid is built on native Blazor from the ground up, by a compa

>caption Get started with the Blazor Grid

````RAZOR
@* Telerik Blazor Grid with some common features *@

<TelerikGrid Data="@GridData"
Pageable="true"
Sortable="true"
FilterMode="@GridFilterMode.FilterRow">
<GridColumns>
<GridColumn Field="Name" Title="Product Name" />
<GridColumn Field="Price" DisplayFormat="{0:C2}" />
<GridColumn Field="@nameof(Product.Released)" DisplayFormat="{0:D}" />
<GridColumn Field="@nameof(Product.Discontinued)" />
</GridColumns>
</TelerikGrid>

@code {
private List<Product> GridData { get; set; }

protected override void OnInitialized()
{
GridData = new List<Product>();

var rnd = new Random();

for (int i = 1; i <= 30; i++)
{
GridData.Add(new Product
{
Id = i,
Name = "Product name " + i,
Price = (decimal)(rnd.Next(1, 50) * 3.14),
Released = DateTime.Now.AddDays(-rnd.Next(1, 365)).AddYears(-rnd.Next(1, 10)).Date,
Discontinued = i % 5 == 0
});

}

base.OnInitialized();
}

public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public decimal Price { get; set; }
public DateTime Released { get; set; }
public bool Discontinued { get; set; }
}
}
````
<demo metaUrl="client/grid/overview/" height="555"></demo>

## Blazor Grid Video Tutorial

Expand Down Expand Up @@ -186,41 +137,7 @@ To execute these methods, obtain reference to the Grid instance via `@ref`.

>caption How to obtain a Grid reference and call methods

````RAZOR
<TelerikButton OnClick="@AutoFit">Autofit All Columns</TelerikButton>

<TelerikGrid @ref="TheGrid"
Data="@GridData"
Width="600px">
<GridColumns>
<GridColumn Field="@(nameof(GridModel.Id))" />
<GridColumn Field="@(nameof(GridModel.Text))" Width="300px" />
</GridColumns>
</TelerikGrid>

@code {
private TelerikGrid<GridModel> TheGrid { get; set; }

private async Task AutoFit()
{
await TheGrid.AutoFitAllColumnsAsync();
}

private IEnumerable<GridModel> GridData = Enumerable.Range(1, 5)
.Select(x => new GridModel
{
Id = x,
Text = "some longer text here that will not fit on a single line and we would like to expand it " + x
});

public class GridModel
{
public int Id { get; set; }
public string Text { get; set; }
}
}
````

<demo metaUrl="client/grid/overview-ref/" height="450"></demo>

## Next Steps

Expand Down