Skip to content

Commit 72ece80

Browse files
dimodidimodi
committed
Configure export column widths conditionally
1 parent 7a34178 commit 72ece80

File tree

2 files changed

+62
-48
lines changed

2 files changed

+62
-48
lines changed

‎sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Components/Pages/Overview.razor‎

Lines changed: 54 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,11 @@
1919
<SummaryCard Title="Investments" Value="35000" Change="-0.8" />
2020

2121
<UICard Title="Savings"
22-
SubTitle="@Savings.ToString("c2")"
23-
ColSpanOnLargeScreen="6"
24-
ColSpanOnMediumScreen="6"
25-
ContentClass="k-justify-content-between"
26-
ContentGap="3">
22+
SubTitle="@Savings.ToString("c2")"
23+
ColSpanOnLargeScreen="6"
24+
ColSpanOnMediumScreen="6"
25+
ContentClass="k-justify-content-between"
26+
ContentGap="3">
2727
<div class="progressbar-wrapper">
2828
<div class="k-d-flex k-justify-content-between">
2929
<span>Education</span>
@@ -72,8 +72,8 @@ ContentGap="3">
7272
</UICard>
7373

7474
<UICard Title="Budget Utilization"
75-
SubTitle="@( $"{(UsedBudget / TotalBudget).ToString("P0")} of the Budget used" )"
76-
ColSpanOnMediumScreen="6" ColSpanOnLargeScreen="6" TitleGap="11" ContentGap="11">
75+
SubTitle="@( $"{(UsedBudget / TotalBudget).ToString("P0")} of the Budget used" )"
76+
ColSpanOnMediumScreen="6" ColSpanOnLargeScreen="6" TitleGap="11" ContentGap="11">
7777
<TelerikArcGauge Width="260px" Height="140px" Class="k-ml-auto k-mr-auto">
7878
<ArcGaugePointers>
7979
<ArcGaugePointer Value="50" Size="12" Color="var(--kendo-color-series-b)" />
@@ -99,64 +99,64 @@ ColSpanOnMediumScreen="6" ColSpanOnLargeScreen="6" TitleGap="11" ContentGap="11"
9999

100100
<UICard Title="Transactions">
101101
<TelerikGrid Data="@GridData"
102-
TItem="@Transaction"
103-
FilterMode="GridFilterMode.FilterMenu"
104-
Groupable="true"
105-
Height="570px"
106-
Navigable="true"
107-
OnStateInit="@OnGridStateInit"
108-
Pageable="true"
109-
SelectionMode="@GridSelectionMode.Multiple"
110-
@bind-SelectedItems="@GridSelectedItems"
111-
ShowColumnMenu="true"
112-
Sortable="true">
102+
TItem="@Transaction"
103+
FilterMode="GridFilterMode.FilterMenu"
104+
Groupable="true"
105+
Height="570px"
106+
Navigable="true"
107+
OnStateInit="@OnGridStateInit"
108+
Pageable="true"
109+
SelectionMode="@GridSelectionMode.Multiple"
110+
@bind-SelectedItems="@GridSelectedItems"
111+
ShowColumnMenu="true"
112+
Sortable="true">
113113
<GridToolBar>
114114
<GridToolBarExcelExportTool>Export to Excel</GridToolBarExcelExportTool>
115115
<GridToolBarPdfExportTool>Export to PDF</GridToolBarPdfExportTool>
116116
</GridToolBar>
117117
<GridSettings>
118118
<GridExcelExport AllPages="true"
119-
FileName="blazor-financial-dashboard"
120-
OnBeforeExport="@OnGridBeforeExcelExport" />
119+
FileName="blazor-financial-dashboard"
120+
OnBeforeExport="@OnGridBeforeExcelExport" />
121121
<GridPdfExport AllPages="true"
122-
FileName="blazor-financial-dashboard"
123-
OnBeforeExport="@OnGridBeforePdfExport"
124-
PageOrientation="@GridPdfExportPageOrientation.Landscape" />
122+
FileName="blazor-financial-dashboard"
123+
OnBeforeExport="@OnGridBeforePdfExport"
124+
PageOrientation="@GridPdfExportPageOrientation.Landscape" />
125125
</GridSettings>
126126
<GridColumns>
127127
<GridCheckboxColumn SelectAll="true" SelectAllMode="@GridSelectAllMode.All" ShowColumnMenu="false" />
128128
<GridColumn Field="@nameof(Transaction.Date)"
129-
DisplayFormat="{0:d}" />
129+
DisplayFormat="{0:d}" />
130130
<GridColumn Field="@nameof(Transaction.Amount)"
131-
DisplayFormat="{0:c2}"
132-
HeaderClass="right-header"
133-
TextAlign="@ColumnTextAlign.Right" />
131+
DisplayFormat="{0:c2}"
132+
HeaderClass="right-header"
133+
TextAlign="@ColumnTextAlign.Right" />
134134
<GridColumn Field="@nameof(Transaction.Merchant)"
135-
HeaderClass="centered-header"
136-
TextAlign="@ColumnTextAlign.Center"
137-
Visible="@IsMediumOrLargeScreen" />
135+
HeaderClass="centered-header"
136+
TextAlign="@ColumnTextAlign.Center"
137+
Visible="@IsMediumOrLargeScreen" />
138138
<GridColumn Field="@nameof(Transaction.Category)"
139-
HeaderClass="centered-header"
140-
TextAlign="@ColumnTextAlign.Center"
141-
Visible="@IsLargeScreen" />
139+
HeaderClass="centered-header"
140+
TextAlign="@ColumnTextAlign.Center"
141+
Visible="@IsLargeScreen" />
142142
<GridColumn Field="@nameof(Transaction.PaymentMethodId)"
143-
HeaderClass="centered-header"
144-
TextAlign="@ColumnTextAlign.Center"
145-
Visible="@IsLargeScreen">
143+
HeaderClass="centered-header"
144+
TextAlign="@ColumnTextAlign.Center"
145+
Visible="@IsLargeScreen">
146146
<Template>
147147
@{ var dataItem = (Transaction)context; }
148148
@PaymentMethods.FirstOrDefault(x => x.Id == dataItem.PaymentMethodId)?.Name
149149
</Template>
150150
</GridColumn>
151151
<GridColumn Field="@nameof(Transaction.Status)"
152-
HeaderClass="centered-header"
153-
TextAlign="@ColumnTextAlign.Center">
152+
HeaderClass="centered-header"
153+
TextAlign="@ColumnTextAlign.Center">
154154
<Template>
155155
@{ var dataItem = (Transaction)context; }
156156
<TelerikBadge ThemeColor="@dataItem.GetStatusThemeColor()"
157-
Rounded="@ThemeConstants.Badge.Rounded.Large"
158-
Size="@ThemeConstants.Badge.Size.Large"
159-
Class="inline-badge">
157+
Rounded="@ThemeConstants.Badge.Rounded.Large"
158+
Size="@ThemeConstants.Badge.Size.Large"
159+
Class="inline-badge">
160160
@dataItem.Status.ToString()
161161
</TelerikBadge>
162162
</Template>
@@ -189,27 +189,33 @@ ColSpanOnMediumScreen="6" ColSpanOnLargeScreen="6" TitleGap="11" ContentGap="11"
189189
{
190190
args.GridState.SortDescriptors.Add(new()
191191
{
192-
Member = nameof(Transaction.Date),
193-
SortDirection = ListSortDirection.Descending
192+
Member = nameof(Transaction.Date),
193+
SortDirection = ListSortDirection.Descending
194194
});
195195
}
196196

197197
private void OnGridBeforeExcelExport(GridBeforeExcelExportEventArgs args)
198198
{
199199
args.Columns.First(x => x.Field == nameof(Transaction.Date)).Width = "180px";
200200
args.Columns.First(x => x.Field == nameof(Transaction.Amount)).Width = "100px";
201-
args.Columns.First(x => x.Field == nameof(Transaction.Category)).Width = "120px";
202-
args.Columns.First(x => x.Field == nameof(Transaction.PaymentMethodId)).Width = "100px";
201+
if (IsLargeScreen)
202+
{
203+
args.Columns.First(x => x.Field == nameof(Transaction.Category)).Width = "120px";
204+
args.Columns.First(x => x.Field == nameof(Transaction.PaymentMethodId)).Width = "100px";
205+
}
203206
args.Columns.First(x => x.Field == nameof(Transaction.Merchant)).Width = "140px";
204207
args.Columns.First(x => x.Field == nameof(Transaction.Status)).Width = "100px";
205208
}
206209

207210
private void OnGridBeforePdfExport(GridBeforePdfExportEventArgs args)
208211
{
209212
args.Columns.First(x => x.Field == nameof(Transaction.Date)).Width = "180px";
210-
args.Columns.First(x => x.Field == nameof(Transaction.Amount)).Width = "100px";
211-
args.Columns.First(x => x.Field == nameof(Transaction.Category)).Width = "120px";
212-
args.Columns.First(x => x.Field == nameof(Transaction.PaymentMethodId)).Width = "100px";
213+
args.Columns.First(x => x.Field == nameof(Transaction.Amount)).Width = "100px";
214+
if (IsLargeScreen)
215+
{
216+
args.Columns.First(x => x.Field == nameof(Transaction.Category)).Width = "120px";
217+
args.Columns.First(x => x.Field == nameof(Transaction.PaymentMethodId)).Width = "100px";
218+
}
213219
args.Columns.First(x => x.Field == nameof(Transaction.Merchant)).Width = "140px";
214220
args.Columns.First(x => x.Field == nameof(Transaction.Status)).Width = "100px";
215221
}

‎sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Components/Pages/Transactions.razor‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -206,13 +206,21 @@
206206
{
207207
args.Columns.First(x => x.Field == nameof(Transaction.Date)).Width = "180px";
208208
args.Columns.First(x => x.Field == nameof(Transaction.Amount)).Width = "100px";
209+
if (IsMediumOrLargeScreen)
210+
{
211+
args.Columns.First(x => x.Field == nameof(Transaction.Merchant)).Width = "140px";
212+
}
209213
args.Columns.First(x => x.Field == nameof(Transaction.Status)).Width = "100px";
210214
}
211215

212216
private void OnGridBeforePdfExport(GridBeforePdfExportEventArgs args)
213217
{
214218
args.Columns.First(x => x.Field == nameof(Transaction.Date)).Width = "180px";
215219
args.Columns.First(x => x.Field == nameof(Transaction.Amount)).Width = "100px";
220+
if (IsMediumOrLargeScreen)
221+
{
222+
args.Columns.First(x => x.Field == nameof(Transaction.Merchant)).Width = "140px";
223+
}
216224
args.Columns.First(x => x.Field == nameof(Transaction.Status)).Width = "100px";
217225
}
218226

0 commit comments

Comments
 (0)