Skip to content

Commit 932cd7d

Browse files
iancaringal-devexpressiancaringal-devexpress
committed
add icons and footer menu
1 parent 1c9fb2f commit 932cd7d

5 files changed

Lines changed: 67 additions & 29 deletions

File tree

‎CS/GridWithContextMenu/Data/GridContextMenuHelper.cs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@ static List<ContextMenuItem> CreateCustomContextMenuItems() {
3535
new ContextMenuItem { ItemType = GridContextMenuItemType.FullCollapse, Text = "Collapse All", IconCssClass="grid-context-menu-item-full-collapse" },
3636
new ContextMenuItem { ItemType = GridContextMenuItemType.ShowGroupPanel, Text = "Group Panel", IconCssClass="grid-context-menu-item-show-group-panel" },
3737
new ContextMenuItem { ItemType = GridContextMenuItemType.ShowColumnChooser, Text = "Column Chooser", IconCssClass="grid-context-menu-item-column-chooser" },
38-
new ContextMenuItem { ItemType = GridContextMenuItemType.ClearFilter, Text = "Clear Filter", BeginGroup = true, IconCssClass="grid-context-menu-item-clear-filter" },
39-
new ContextMenuItem { ItemType = GridContextMenuItemType.ShowFilterRow, Text = "Filter Row", IconCssClass="grid-context-menu-item-filter-row" },
38+
new ContextMenuItem { ItemType = GridContextMenuItemType.ShowFilterRow, Text = "Filter Row", BeginGroup = true, IconCssClass="grid-context-menu-item-filter-row" },
39+
new ContextMenuItem { ItemType = GridContextMenuItemType.ClearFilter, Text = "Clear Filter", IconCssClass="grid-context-menu-item-clear-filter" },
4040
new ContextMenuItem { ItemType = GridContextMenuItemType.ShowFooter, Text = "Footer", IconCssClass="grid-context-menu-item-footer" },
4141
new ContextMenuItem { ItemType = GridContextMenuItemType.ExportCsv, Text = "Export to CSV", BeginGroup = true, IconCssClass="grid-context-menu-item-export" },
4242
new ContextMenuItem { ItemType = GridContextMenuItemType.ExportXlsx, Text = "Export to XLSX", IconCssClass="grid-context-menu-item-export" },

‎CS/GridWithContextMenu/Pages/Index.razor‎

Lines changed: 55 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -61,76 +61,110 @@
6161
void Grid_CustomizeContextMenu(GridCustomizeContextMenuEventArgs args) {
6262
if (args.Context is GridDataRowCommandContext rowContext) {
6363
if (rowContext.Grid.IsEditing()) {
64-
var save = args.Items.AddCustomItem("Save", async () => {
64+
var saveEdit = args.Items.AddCustomItem("Save", async () => {
6565
rowContext.Grid.BeginUpdate();
6666
await rowContext.Grid.SaveChangesAsync();
6767
rowContext.Grid.EndUpdate();
6868
});
69-
args.Items.AddCustomItem("Cancel", async () => {
69+
saveEdit.IconCssClass = "grid-context-menu-item-edit-row";
70+
71+
var cancelEdit = args.Items.AddCustomItem("Cancel", async () => {
7072
rowContext.Grid.BeginUpdate();
7173
await rowContext.Grid.CancelEditAsync();
7274
rowContext.Grid.EndUpdate();
7375
});
76+
cancelEdit.IconCssClass = "grid-context-menu-item-delete-row";
7477
}
75-
args.Items.AddCustomItem("New", async () => {
78+
var newRow = args.Items.AddCustomItem("New", async () => {
7679
rowContext.Grid.BeginUpdate();
7780
await rowContext.Grid.StartEditNewRowAsync();
7881
rowContext.Grid.EndUpdate();
79-
}).BeginGroup = true;
80-
args.Items.AddCustomItem("Edit", async () => {
82+
});
83+
newRow.IconCssClass = "grid-context-menu-item-new-row";
84+
newRow.BeginGroup = true;
85+
86+
var editRow = args.Items.AddCustomItem("Edit", async () => {
8187
rowContext.Grid.BeginUpdate();
8288
await rowContext.Grid.StartEditRowAsync(rowContext.RowVisibleIndex);
8389
rowContext.Grid.EndUpdate();
8490
});
85-
args.Items.AddCustomItem("Delete", async () => {
91+
editRow.IconCssClass = "grid-context-menu-item-edit-row";
92+
93+
var deleteRow = args.Items.AddCustomItem("Delete", () => {
8694
rowContext.Grid.BeginUpdate();
8795
rowContext.Grid.ShowRowDeleteConfirmation(rowContext.RowVisibleIndex);
8896
rowContext.Grid.EndUpdate();
8997
});
98+
deleteRow.IconCssClass = "grid-context-menu-item-delete-row";
9099
}
91100

92101
if (args.Context is GridHeaderCommandContext headerContext) {
93102
var isFilterRowVisible = headerContext.Grid.ShowFilterRow != false;
94-
string filterRowItemText = isFilterRowVisible ? "Hide Filter Row" : "Show Filter Row";
95103
var newFilterRowState = isFilterRowVisible ? false : true;
96-
args.Items.AddCustomItem(filterRowItemText, () => {
104+
var filterRow = args.Items.AddCustomItem("Filter Row", () => {
97105
headerContext.Grid.BeginUpdate();
98106
headerContext.Grid.ShowFilterRow = newFilterRowState;
99107
headerContext.Grid.EndUpdate();
100108
});
109+
filterRow.IconCssClass = "grid-context-menu-item-filter-row";
110+
filterRow.CssClass = isFilterRowVisible ? "menu-item-selected" : "";
101111

102112
var isFiltered = headerContext.Grid.GetFilterCriteria() != null;
103-
args.Items.AddCustomItem("Clear Filter", () => {
113+
var clearFilter = args.Items.AddCustomItem("Clear Filter", () => {
104114
headerContext.Grid.BeginUpdate();
105115
headerContext.Grid.ClearFilter();
106116
headerContext.Grid.EndUpdate();
107-
}).Enabled = isFiltered ? true : false;
117+
});
118+
clearFilter.IconCssClass = "grid-context-menu-item-clear-filter";
119+
clearFilter.Enabled = isFiltered ? true : false;
120+
121+
var isFooterVisible = headerContext.Grid.FooterDisplayMode == GridFooterDisplayMode.Always
122+
|| headerContext.Grid.FooterDisplayMode == GridFooterDisplayMode.Auto && headerContext.Grid.GetTotalSummaryItems().Count > 0;
123+
var newFooterState = isFooterVisible ? GridFooterDisplayMode.Never : GridFooterDisplayMode.Always;
124+
var footer = args.Items.AddCustomItem("Footer", () =>
125+
{
126+
headerContext.Grid.BeginUpdate();
127+
headerContext.Grid.FooterDisplayMode = newFooterState;
128+
headerContext.Grid.EndUpdate();
129+
});
130+
footer.IconCssClass = "grid-context-menu-item-footer";
131+
footer.CssClass = isFooterVisible ? "menu-item-selected" : "";
108132

109-
args.Items.AddCustomItem("Fix Column to the Left", () => {
133+
var fixLeft = args.Items.AddCustomItem("Fix Column to the Left", () => {
110134
headerContext.Grid.BeginUpdate();
111135
headerContext.Column.FixedPosition = GridColumnFixedPosition.Left;
112136
headerContext.Grid.EndUpdate();
113-
}).BeginGroup = true;
114-
args.Items.AddCustomItem("Fix Column to the Right", () => {
137+
});
138+
fixLeft.IconCssClass = "grid-context-menu-item-fix-column-left";
139+
fixLeft.BeginGroup = true;
140+
141+
var fixRight = args.Items.AddCustomItem("Fix Column to the Right", () => {
115142
headerContext.Grid.BeginUpdate();
116143
headerContext.Column.FixedPosition = GridColumnFixedPosition.Right;
117144
headerContext.Grid.EndUpdate();
118145
});
119-
args.Items.AddCustomItem("Unfix Column", () => {
146+
fixRight.IconCssClass = "grid-context-menu-item-fix-column-right";
147+
148+
var unfix = args.Items.AddCustomItem("Unfix Column", () => {
120149
headerContext.Grid.BeginUpdate();
121150
headerContext.Column.FixedPosition = GridColumnFixedPosition.None;
122151
headerContext.Grid.EndUpdate();
123152
});
153+
unfix.IconCssClass = "grid-context-menu-item-unfix-column";
154+
}
124155

125-
var isFooterVisible = headerContext.Grid.FooterDisplayMode == GridFooterDisplayMode.Always
126-
|| headerContext.Grid.FooterDisplayMode == GridFooterDisplayMode.Auto && headerContext.Grid.GetTotalSummaryItems().Count > 0;
127-
string footerItemText = isFooterVisible ? "Hide Footer" : "Show Footer";
156+
if (args.Context is GridFooterCommandContext footerContext) {
157+
var isFooterVisible = footerContext.Grid.FooterDisplayMode == GridFooterDisplayMode.Always
158+
|| footerContext.Grid.FooterDisplayMode == GridFooterDisplayMode.Auto && footerContext.Grid.GetTotalSummaryItems().Count > 0;
128159
var newFooterState = isFooterVisible ? GridFooterDisplayMode.Never : GridFooterDisplayMode.Always;
129-
args.Items.AddCustomItem(footerItemText, () => {
130-
headerContext.Grid.BeginUpdate();
131-
headerContext.Grid.FooterDisplayMode = newFooterState;
132-
headerContext.Grid.EndUpdate();
160+
var footer = args.Items.AddCustomItem("Footer", () =>
161+
{
162+
footerContext.Grid.BeginUpdate();
163+
footerContext.Grid.FooterDisplayMode = newFooterState;
164+
footerContext.Grid.EndUpdate();
133165
});
166+
footer.IconCssClass = "grid-context-menu-item-footer";
167+
footer.CssClass = isFooterVisible ? "menu-item-selected" : "";
134168
}
135169
}
136170

‎CS/GridWithContextMenu/wwwroot/css/icons.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -170,8 +170,8 @@
170170
-webkit-mask-image: url(../images/icons/delete-row.svg);
171171
}
172172
.grid-context-menu-item-export {
173-
mask-image: url(../images/icons/export.svg);
174-
-webkit-mask-image: url(../images/icons/export.svg);
173+
mask-image: url(../images/icons/export-grid.svg);
174+
-webkit-mask-image: url(../images/icons/export-grid.svg);
175175
}
176176

177177

‎CS/GridWithContextMenu/wwwroot/images/icons/export-grid.svg‎

Lines changed: 8 additions & 0 deletions
Loading

‎CS/GridWithContextMenu/wwwroot/images/icons/export.svg‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

0 commit comments

Comments
 (0)