1+ using Microsoft . JSInterop ;
2+ using MyBlazorApp . Models ;
3+ using System ;
4+ using System . Collections . Generic ;
5+ using System . Linq ;
6+ using System . Threading . Tasks ;
7+ using Telerik . Blazor . Components ;
8+ using Telerik . DataSource ;
9+
10+ namespace MyBlazorApp . Components ;
11+
12+ public partial class DemoMain
13+ {
14+ // "Main" is the name of the Razor component that holds this code
15+ private DotNetObjectReference < DemoMain > DotNetRef { get ; set ; }
16+ private TelerikChart ChartRef { get ; set ; }
17+ public IEnumerable < PodcastViewModel > Podcasts { get ; set ; }
18+ private List < ChartModel > Series1Data { get ; set ; } = new ( ) ;
19+ private List < ChartModel > Series2Data { get ; set ; } = new ( ) ;
20+ private List < ChartModel > Series3Data { get ; set ; } = new ( ) ;
21+ private List < ThemeModel > ThemeData { get ; set ; } = new ( ) ;
22+ private int ThemeSwatchValue { get ; set ; } = 1 ;
23+ private const string ThemeUrlTemplate = "https://unpkg.com/@progress/kendo-theme-{0}@11.0.2/dist/{0}-{1}.css" ;
24+ private bool LoaderVisible { get ; set ; }
25+
26+ protected override async Task OnAfterRenderAsync ( bool firstRender )
27+ {
28+ if ( firstRender )
29+ {
30+ // Ensure HTML is ready
31+ await Task . Delay ( 1 ) ;
32+
33+ // Send the Razor component's reference to the client
34+ // to be able to call NotifyThemeChanged()
35+ await Js . InvokeVoidAsync ( "saveDotNetRef" , DotNetRef ) ;
36+ }
37+
38+ await base . OnAfterRenderAsync ( firstRender ) ;
39+ }
40+
41+ protected override async Task OnInitializedAsync ( )
42+ {
43+ DotNetRef = DotNetObjectReference . Create ( this ) ;
44+
45+ PopulateThemes ( ) ;
46+
47+ await GenerateData ( ) ;
48+
49+
50+ await base . OnInitializedAsync ( ) ;
51+ }
52+
53+ private void PopulateThemes ( )
54+ {
55+ ThemeData . Add ( new ThemeModel ( 1 , "Default" , "Main" ) ) ;
56+ ThemeData . Add ( new ThemeModel ( 2 , "Default" , "Main-Dark" ) ) ;
57+ ThemeData . Add ( new ThemeModel ( 3 , "Default" , "Ocean-Blue" ) ) ;
58+ ThemeData . Add ( new ThemeModel ( 4 , "Bootstrap" , "Main" ) ) ;
59+ ThemeData . Add ( new ThemeModel ( 5 , "Bootstrap" , "Main-Dark" ) ) ;
60+ ThemeData . Add ( new ThemeModel ( 6 , "Material" , "Main" ) ) ;
61+ ThemeData . Add ( new ThemeModel ( 7 , "Material" , "Main-Dark" ) ) ;
62+ ThemeData . Add ( new ThemeModel ( 8 , "Fluent" , "Main" ) ) ;
63+ }
64+
65+ private async Task GenerateData ( )
66+ {
67+ Podcasts = await DataService . GetPodcasts ( ) ;
68+
69+ var now = DateTime . Today ;
70+
71+ const int monthsBack = 6 ;
72+
73+ for ( var i = 1 ; i <= monthsBack ; i ++ )
74+ {
75+ var dateTimeValue = now . AddMonths ( - monthsBack + i ) ;
76+
77+ Series1Data . Add ( new ChartModel
78+ {
79+ Id = i ,
80+ Product = "Product 1" ,
81+ Revenue = Random . Shared . Next ( 1 , 500 ) ,
82+ TimePeriod = dateTimeValue
83+ } ) ;
84+
85+ Series2Data . Add ( new ChartModel
86+ {
87+ Id = i ,
88+ Product = "Product 2" ,
89+ Revenue = Random . Shared . Next ( 1 , 500 ) ,
90+ TimePeriod = dateTimeValue
91+ } ) ;
92+
93+ Series3Data . Add ( new ChartModel
94+ {
95+ Id = i ,
96+ Product = "Product 3" ,
97+ Revenue = Random . Shared . Next ( 1 , 500 ) ,
98+ TimePeriod = dateTimeValue
99+ } ) ;
100+ }
101+ }
102+
103+ void OnStateInit ( GridStateEventArgs < PodcastViewModel > args )
104+ {
105+ args . GridState = new GridState < PodcastViewModel >
106+ {
107+ SortDescriptors = new List < SortDescriptor >
108+ {
109+ new SortDescriptor { Member = nameof ( PodcastViewModel . Streams ) , SortDirection = ListSortDirection . Descending }
110+ }
111+ } ;
112+ }
113+
114+ private async Task ThemeSwatchValueChanged ( int newValue )
115+ {
116+ // Update DropDownList Value
117+ ThemeSwatchValue = newValue ;
118+
119+ LoaderVisible = true ;
120+
121+ // Generate new theme URL
122+ var newThemeModel = ThemeData . First ( x => x . Id == ThemeSwatchValue ) ;
123+ var newThemeSwatchUrl = string . Format ( ThemeUrlTemplate , newThemeModel . Theme . ToLower ( ) , newThemeModel . Swatch . ToLower ( ) ) ;
124+
125+ // Change current Telerik theme
126+ await Js . InvokeVoidAsync ( "changeTelerikTheme" , newThemeSwatchUrl ) ;
127+
128+ // The algorithm continues in the NotifyThemeChanged method
129+ }
130+
131+ [ JSInvokable ( "NotifyThemeChanged" ) ]
132+ public void NotifyThemeChanged ( )
133+ {
134+ // Refresh all Telerik components that use SVG or Canvas rendering (Charts, Gauges, BarCodes, QR Codes)
135+ ChartRef ? . Refresh ( ) ;
136+
137+ LoaderVisible = false ;
138+
139+ // This method is not an EventCallback, so you need StateHasChanged() to hide the Loader or make other changes in the UI
140+ StateHasChanged ( ) ;
141+ }
142+
143+ public void Dispose ( )
144+ {
145+ DotNetRef ? . Dispose ( ) ;
146+ }
147+ }
0 commit comments