Fix Chart Runtime Exceptions, Button Group Multi-Selection, and Picker Input Validation

samples/Blazor.Toolkit.Samples.Client/Pages/Components/Calendars/Calendar.razor

@@ -128,11 +128,15 @@
         margin: 0 auto;
         padding: 15px 0;
         font-size: 13px;
+        text-align: center;
+        width: 300px;
+        max-width: 100%;
+        box-sizing: border-box;
     }
 
     .control-wrapper {
         margin: 0 auto;
-        padding-top: 20px;
+        width: fit-content;
     }
 
     .e-calendar .e-content .e-cell.personal-appointment span.e-day,

samples/Blazor.Toolkit.Samples.Client/Pages/Components/Calendars/DateTimePicker.razor

@@ -111,7 +111,7 @@
             This sample demonstrates the list of events of the DateTimePicker component which will be triggered for appropriate DateTimePicker actions.
         </p>
         <p>
-            <table class="table table-bordered">
+            <table class="table">
                 <thead>
                     <tr>
                         <th>Event Name</th>
@@ -221,7 +221,7 @@
         <p>
             The DateTimePicker provides the <code><a href="https://help.syncfusion.com/cr/blazor-toolkit/Syncfusion.Blazor.Toolkit.CalendarBase-1.html#Syncfusion_Blazor_Toolkit_Calendars_CalendarBase_1_WeekNumber" target="_blank" rel="noreferrer noopener">WeekNumber</a></code> and <code><a href="https://help.syncfusion.com/cr/blazor-toolkit/Syncfusion.Blazor.Toolkit.CalendarBase-1.html#Syncfusion_Blazor_Toolkit_Calendars_CalendarBase_1_WeekRule" target="_blank" rel="noreferrer noopener">WeekRule</a></code> properties to specify the rule for defining the first week of the year with options: <code>FirstDay</code>, <code>FirstFullWeek</code>, and <code>FirstFourDayWeek</code>.
         </p>
-        <table class="table table-bordered">
+        <table class="table">
             <thead>
                 <tr>
                     <th>Types</th>
@@ -315,4 +315,50 @@
     .e-calendar .e-content td.e-selected.e-focused-date.e-cell.official-appointment span.e-day {
         background-color: rgb(255 255 0 / 90%);
     }
+
+    :root {
+        --table-bg: var(--panel-bg);
+        --table-border: rgba(0,0,0,0.06);
+        --table-border-radius: 6px;
+        --table-header-bg: rgba(0,0,0,0.02);
+        --table-header-color: var(--top-text);
+        --table-row-bg: #ffffff;
+        --table-row-border: rgba(0,0,0,0.04);
+    }
+
+    .dark {
+        --table-bg: var(--panel-bg);
+        --table-border: rgba(255,255,255,0.10);
+        --table-header-bg: rgba(255,255,255,0.04);
+        --table-header-color: var(--top-text);
+        --table-row-bg: rgba(255,255,255,0.01);
+        --table-row-border: rgba(255,255,255,0.04);
+    }
+
+    .table {
+        background-color: var(--table-bg, #ffffff);
+        color: var(--text-color, #111827);
+        border: 1px solid var(--table-border, rgba(0,0,0,0.06));
+        border-radius: var(--table-border-radius, 6px);
+        overflow: hidden;
+        border-collapse: separate;
+        border-spacing: 0;
+        width: 100%;
+    }
+
+    .table thead th {
+        background-color: var(--table-header-bg, rgba(0,0,0,0.02));
+        color: var(--table-header-color, var(--top-text, #111827));
+        padding: 0.75rem 1rem;
+        text-align: left;
+        font-weight: 600;
+        border-bottom: 1px solid var(--table-row-border, rgba(0,0,0,0.04));
+    }
+
+    .table tbody td {
+        padding: 0.75rem 1rem;
+        border-top: 1px solid var(--table-row-border, rgba(0,0,0,0.04));
+        background-color: var(--table-row-bg, #ffffff);
+        color: var(--text-color, #111827);
+    }
 </style>

samples/Blazor.Toolkit.Samples.Client/Pages/Components/Calendars/TimePicker.razor

@@ -139,7 +139,7 @@
 			This sample demonstrates the list of events of the TimePicker component which will be triggered for appropriate <code>TimePicker</code> actions.
 		</p>
 		<p>
-			<table class="table table-bordered">
+			<table class="table">
 				<thead>
 					<tr>
 						<th>Event Name</th>
@@ -213,4 +213,50 @@
 		font-size: 14px;
 		margin-bottom: 6px;
 	}
+
+	    :root {
+        --table-bg: var(--panel-bg);
+        --table-border: rgba(0,0,0,0.06);
+        --table-border-radius: 6px;
+        --table-header-bg: rgba(0,0,0,0.02);
+        --table-header-color: var(--top-text);
+        --table-row-bg: #ffffff;
+        --table-row-border: rgba(0,0,0,0.04);
+    }
+
+    .dark {
+        --table-bg: var(--panel-bg);
+        --table-border: rgba(255,255,255,0.10);
+        --table-header-bg: rgba(255,255,255,0.04);
+        --table-header-color: var(--top-text);
+        --table-row-bg: rgba(255,255,255,0.01);
+        --table-row-border: rgba(255,255,255,0.04);
+    }
+
+    .table {
+        background-color: var(--table-bg, #ffffff);
+        color: var(--text-color, #111827);
+        border: 1px solid var(--table-border, rgba(0,0,0,0.06));
+        border-radius: var(--table-border-radius, 6px);
+        overflow: hidden;
+        border-collapse: separate;
+        border-spacing: 0;
+        width: 100%;
+    }
+
+    .table thead th {
+        background-color: var(--table-header-bg, rgba(0,0,0,0.02));
+        color: var(--table-header-color, var(--top-text, #111827));
+        padding: 0.75rem 1rem;
+        text-align: left;
+        font-weight: 600;
+        border-bottom: 1px solid var(--table-row-border, rgba(0,0,0,0.04));
+    }
+
+    .table tbody td {
+        padding: 0.75rem 1rem;
+        border-top: 1px solid var(--table-row-border, rgba(0,0,0,0.04));
+        background-color: var(--table-row-bg, #ffffff);
+        color: var(--text-color, #111827);
+    }
 </style>

samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Calendars/Calendar/SpecialDatesDemo.razor

@@ -30,12 +30,12 @@
         var CurrentMonth = CurrentDate.Value.Month;
         if (args.Value.Value.Month == CurrentMonth && (args.Value.Value.Day == 7 || args.Value.Value.Day == 14 || args.Value.Value.Day == 24 || args.Value.Value.Day == 29))
         {
-            this.SelectedValue = this.SelectedDate?.ToString("M / d / yyyy") + "(Personal appointment)";
+            this.SelectedValue = this.SelectedDate?.ToString("M / d / yyyy") + " (Personal appointment)";
             Count++;
         }
         if (args.Value.Value.Month == CurrentMonth && (args.Value.Value.Day == 3 || args.Value.Value.Day == 11 || args.Value.Value.Day == 17 || args.Value.Value.Day == 22))
         {
-            this.SelectedValue = this.SelectedDate?.ToString("M / d / yyyy") + "(Official appointment)";
+            this.SelectedValue = this.SelectedDate?.ToString("M / d / yyyy") + " (Official appointment)";
             Count++;
         }
         if (Count == 0)

samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Calendars/DatePicker/ViewsDemo.razor

@@ -1 +1 @@
-<SfDatePicker TValue="DateTime?" Width="270px" Placeholder='Select a date' Start='CalendarView.Year' Depth='CalendarView.Decade' ShowClearButton="true"></SfDatePicker>
+<SfDatePicker TValue="DateTime?" Width="270px" Placeholder='Select a date' Start='CalendarView.Decade' Depth='CalendarView.Year' ShowClearButton="true"></SfDatePicker>

samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Calendars/DateTimePicker/DateTimeFormatDemo.razor

@@ -1,4 +1,4 @@
-<SfDateTimePicker TValue="DateTime?" Width="300px" Format="yyyy-MM-dd hh:mm:ss" @bind-Value="@FormattedDateValue" ShowClearButton="true" Placeholder="Select a date and time" />
+<SfDateTimePicker TValue="DateTime?" Width="300px" Format="yyyy-MM-dd hh:mm:ss tt" @bind-Value="@FormattedDateValue" ShowClearButton="true" Placeholder="Select a date and time" />
 @code {
     public DateTime? FormattedDateValue { get; set; } = new DateTime(2026, 12, 11, 11, 30, 00);
 }

samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Charts/BubbleAndScatterCharts/ScatterChart/DataLabelDemo.razor

@@ -11,7 +11,9 @@
 
     <ChartSeries DataSource="@ScatterLabelData" Name="18-20 Years" LegendShape="LegendShape.Circle" Fill="#807BFF" EnableTooltip="true" Opacity="0.5" XName="Height" YName="Weight" Type="ChartSeriesType.Scatter">
         <ChartMarker Visible="true" Shape="ChartShape.Diamond" Height="15" Width="15">
-            <ChartDataLabel Name="Name" Visible="true" />
+            <ChartDataLabel Name="Name" Visible="true">
+                <ChartDataLabelFont Color="@TextColor" />
+            </ChartDataLabel>
         </ChartMarker>
     </ChartSeries>
 </SfChart>

samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Charts/ColumnAndBarCharts/BarChart/DataLabelDemo.razor

@@ -18,7 +18,9 @@
                  Fill="#8AA624"
                  ColumnSpacing="0.3">
         <ChartMarker>
-            <ChartDataLabel Visible="true" Format="{value}M" />
+            <ChartDataLabel Visible="true" Format="{value}M">
+                <ChartDataLabelFont Color="@TextColor" />
+            </ChartDataLabel>
         </ChartMarker>
         <ChartCornerRadius BottomRight="8" TopRight="8" />
     </ChartSeries>
@@ -32,7 +34,9 @@
                  Fill="#D25D5D"
                  ColumnSpacing="0.3">
         <ChartMarker>
-            <ChartDataLabel Visible="true" Format="{value}M" />
+            <ChartDataLabel Visible="true" Format="{value}M">
+                <ChartDataLabelFont Color="@TextColor" />
+            </ChartDataLabel>
         </ChartMarker>
         <ChartCornerRadius BottomRight="8" TopRight="8" />
     </ChartSeries>
@@ -46,7 +50,9 @@
                  Fill="#239BA7"
                  ColumnSpacing="0.3">
         <ChartMarker>
-            <ChartDataLabel Visible="true" Format="{value}M" />
+            <ChartDataLabel Visible="true" Format="{value}M">
+                <ChartDataLabelFont Color="@TextColor" />
+            </ChartDataLabel>
         </ChartMarker>
         <ChartCornerRadius BottomRight="8" TopRight="8" />
     </ChartSeries>
@@ -69,6 +75,9 @@
         _currentTheme = CurrentTheme;
     }
 
+    private bool IsDarkTheme => _currentTheme.ToString().Contains("Dark") || _currentTheme.ToString().Contains("HighContrast");
+    private string TextColor => IsDarkTheme ? "#FFFFFF" : "#000000";
+
     public class PhonePalette
     {
         public string Year { get; set; } = string.Empty;

samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Charts/ColumnAndBarCharts/BarChart/StackingLabelsDemo.razor

@@ -7,7 +7,9 @@
     </ChartPrimaryYAxis>
 
     <!-- Stack Labels -->
-    <ChartStackLabelSettings Visible="true" Format="{value}TWh" />
+    <ChartStackLabelSettings Visible="true" Format="{value}TWh">
+        <ChartStackLabelFont Color="@TextColor" />
+    </ChartStackLabelSettings>
     <!-- Tooltip -->
     <ChartTooltipSettings Enable="true" />
 
@@ -56,6 +58,9 @@
         _currentTheme = CurrentTheme;
     }
 
+    private bool IsDarkTheme => _currentTheme.ToString().Contains("Dark") || _currentTheme.ToString().Contains("HighContrast");
+    private string TextColor => IsDarkTheme ? "#FFFFFF" : "#000000";
+
     public class AnnualEnergyDataLabel
     {
         public string X { get; set; } = string.Empty;

samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Charts/ColumnAndBarCharts/ColumnChart/StackingLabelsDemo.razor

@@ -2,9 +2,10 @@
     <ChartTooltipSettings Enable="true" Header="" />
     <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Toolkit.ValueType.Category" Interval="1"></ChartPrimaryXAxis>
     <ChartPrimaryYAxis Interval="20"><ChartAxisLineStyle Width="0" /></ChartPrimaryYAxis>
-    <ChartStackLabelSettings Visible="true"></ChartStackLabelSettings>
 
-    <ChartStackLabelSettings Visible="true"></ChartStackLabelSettings>
+    <ChartStackLabelSettings Visible="true">
+        <ChartStackLabelFont Color="@TextColor" />
+    </ChartStackLabelSettings>
     <ChartSeries DataSource="@Data" XName="X" YName="Y1" Name="India" Type="ChartSeriesType.StackingColumn" Fill="#5C6BC0" ColumnWidth="0.4"></ChartSeries>
     <ChartSeries DataSource="@Data" XName="X" YName="Y2" Name="China" Type="ChartSeriesType.StackingColumn" Fill="#00796B" ColumnWidth="0.4"></ChartSeries>
     <ChartSeries DataSource="@Data" XName="X" YName="Y3" Name="United States" Type="ChartSeriesType.StackingColumn" Fill="#B71C1C" ColumnWidth="0.4">
@@ -24,6 +25,9 @@
         _currentTheme = CurrentTheme;
     }
 
+    private bool IsDarkTheme => _currentTheme.ToString().Contains("Dark") || _currentTheme.ToString().Contains("HighContrast");
+    private string TextColor => IsDarkTheme ? "#FFFFFF" : "#000000";
+
     public class StackingColumnData
     {
         public string X { get; set; } = string.Empty;

samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Charts/LineCharts/SplineChart/DataLabelDemo.razor

@@ -28,7 +28,9 @@
                  Fill="#FF7F50"
                  Type="ChartSeriesType.Spline">
         <ChartMarker Visible="true" IsFilled="true">
-            <ChartDataLabel Visible="true" />
+            <ChartDataLabel Visible="true">
+                <ChartDataLabelFont Color="@TextColor" />
+            </ChartDataLabel>
         </ChartMarker>
     </ChartSeries>
 
@@ -40,7 +42,9 @@
                  Fill="#19DA00"
                  Type="ChartSeriesType.Spline">
         <ChartMarker Visible="true" IsFilled="true">
-            <ChartDataLabel Visible="true" />
+            <ChartDataLabel Visible="true">
+                <ChartDataLabelFont Color="@TextColor" />
+            </ChartDataLabel>
         </ChartMarker>
     </ChartSeries>
 </SfChart>
@@ -57,6 +61,9 @@
         _currentTheme = CurrentTheme;
     }
 
+    private bool IsDarkTheme => _currentTheme.ToString().Contains("Dark") || _currentTheme.ToString().Contains("HighContrast");
+    private string TextColor => IsDarkTheme ? "#FFFFFF" : "#000000";
+
     public class SplinePoint
     {
         public string X { get; set; } = string.Empty;

samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Inputs/Uploader/TemplateDemo.razor

@@ -6,7 +6,7 @@
             <div style="padding: 10px;">
                 <div class="name file-name" title="@context.Name">File Name : @context.Name</div>
                 <div class="file-size">File Size : @context.Size</div>
-                <div class="e-file-status">File Status : @context.Status</div>
+                <div class="file-info">File Status : @context.Status</div>
             </div>
         </Template>
     </UploaderTemplates>

src/Base/SfThemeRoot.Payload.cs

@@ -1499,13 +1499,6 @@ .eJSVGTooltip tspan {
     z-index: 1;
   }
 
-  .e-btn-group input:hover + label.e-btn,
-  .e-btn-group input:focus + label.e-btn,
-  .e-btn-group label.e-btn.e-active {
-    border-color: Highlight !important;
-    color: Highlight !important;
-  }
-
   .e-btn-group input[aria-pressed] + label.e-btn {
     border-color: Highlight !important;
     color: Highlight !important;
@@ -1529,6 +1522,13 @@ .eJSVGTooltip tspan {
     forced-color-adjust: none;
   }
 
+  .e-btn-group input:checked + label.e-btn:not(.e-active):not(.e-disabled):not(.e-outline) {
+    background-color: ButtonFace !important;
+    border-color: ButtonText !important;
+    color: ButtonText !important;
+    forced-color-adjust: none;
+  }
+
   .e-btn-group input + label:hover {
     border-color: Highlight !important;
     color: Highlight !important;
@@ -1537,22 +1537,15 @@ .eJSVGTooltip tspan {
     forced-color-adjust: none;
   }
 
-  .e-btn-group input:hover + label.e-btn:not(.e-disabled):not(.e-outline) {
+  .e-btn-group input:hover + label.e-btn:not(.e-disabled):not(.e-outline),
+  .e-btn-group input:hover:checked + label.e-btn:not(.e-active):not(.e-disabled):not(.e-outline)  {
     background-color: HighlightText !important;
     border-color: Highlight !important;
     color: Highlight !important;
     box-shadow: none !important;
     forced-color-adjust: none;
   }
 
-  .e-btn-group input:checked + label.e-btn:not(.e-disabled):not(.e-outline) {
-    background-color: Highlight !important;
-    border-color: Highlight !important;
-    color: HighlightText !important;
-    box-shadow: none !important;
-    forced-color-adjust: none;
-  }
-
   .e-switch-wrapper .e-switch-handle {
     background-color: ButtonText !important;
     forced-color-adjust: none !important;

src/Components/Buttons/ButtonGroup/Button.razor

@@ -36,7 +36,7 @@ else
            @onchange="HandleInputChangeAsync"
            @attributes="HtmlAttributes">
 
-    <label for="@InputId" class="@GetSelectionCssClass()" @onclick="ClickHandlerAsync" title="@title">
+    <label for="@InputId" class="@GetSelectionCssClass()" @onclick="ClickHandlerAsync" @onclick:preventDefault="true" title="@title">
         @if (!string.IsNullOrEmpty(IconCss) && (IconPosition == IconPosition.Left || IconPosition == IconPosition.Top))
         {
             <span class="@IconCss e-btn-icon"></span>