Skip to content

Commit 5febb45

Browse files
radkostanevradkostanev
authored
Merge pull request #330 from telerik/fin-export-config
Configure export column widths conditionally
2 parents 7a34178 + 72ece80 commit 5febb45

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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy