Skip to content

Commit

Permalink
chore: add Context, Header & Grid Menus to Trading Demo (#1071)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ghiscoding
ghiscoding authored Oct 12, 2024
1 parent 8d3c60f commit ef548c5
Show file tree
Hide file tree
Showing 4 changed files with 112 additions and 6 deletions.
2 changes: 1 addition & 1 deletion dist/styles/css/slick-icons.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion examples/example-icons.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
</style>
<script>
const iconList = [
'sgi-chevron-start', 'sgi-chevron-left', 'sgi-chevron-right', 'sgi-chevron-end', 'sgi-cancel', 'sgi-caret', 'sgi-check', 'sgi-check-bold',
'sgi-arrow-collapse', 'sgi-arrow-expand', 'sgi-chevron-start', 'sgi-chevron-left', 'sgi-chevron-right', 'sgi-chevron-end', 'sgi-cancel', 'sgi-caret', 'sgi-check', 'sgi-check-bold',
'sgi-close', 'sgi-checkbox-blank-outline', 'sgi-checkbox-outline', 'sgi-checkbox-marked-outline',
'sgi-checkbox-intermediate', 'sgi-coffee-outline', 'sgi-drag', 'sgi-drag-vertical', 'sgi-help-circle-outline', 'sgi-hashtag', 'sgi-information-outline',
'sgi-lightbulb', 'sgi-loading', 'sgi-menu', 'sgi-message-outline',
Expand Down
112 changes: 108 additions & 4 deletions examples/example-trading-esm.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@
<link rel="shortcut icon" type="image/ico" href="favicon.ico" />
<title>SlickGrid example 4: Model</title>
<link rel="stylesheet" href="../dist/styles/css/slick.columnpicker.css" type="text/css"/>
<link rel="stylesheet" href="../dist/styles/css/slick.gridmenu.css" type="text/css"/>
<link rel="stylesheet" href="../dist/styles/css/slick.contextmenu.css" type="text/css" />
<link rel="stylesheet" href="../dist/styles/css/slick.headermenu.css" type="text/css" />
<link rel="stylesheet" href="../dist/styles/css/slick-icons.css" type="text/css"/>
<link rel="stylesheet" href="../dist/styles/css/example-demo.css" type="text/css"/>
<link rel="stylesheet" href="../dist/styles/css/slick-alpine-theme.css" type="text/css"/>
Expand Down Expand Up @@ -55,6 +58,13 @@
.color-warning {
color: #ffa700;
}
.slick-header-menubutton {
border: 1px solid #dedede;
border-width: 0 1px 0 1px;
}
.slick-header-menubutton span {
margin-top: 40%;
}
</style>
</head>
<body>
Expand Down Expand Up @@ -120,8 +130,11 @@ <h2>View Source:</h2>
SlickGlobalEditorLock,
SlickRowSelectionModel,
SlickColumnPicker,
SlickContextMenu,
SlickDataView,
SlickGrid,
SlickGridMenu,
SlickHeaderMenu,
SlickGroupItemMetadataProvider,
Utils,
} from '../dist/esm/index.js';
Expand Down Expand Up @@ -178,12 +191,48 @@ <h2>View Source:</h2>
},
];

// also add Header Menu options
for (var i = 0; i < columns.length; i++) {
columns[i].header = {
menu: {
commandItems: [
{
iconCssClass: 'sgi sgi-caret sgi-flip-v',
title: "Sort Ascending",
disabled: !columns[i].sortable,
// hidden: !columns[i].sortable, // you could disable or hide the command completely
command: "sort-asc"
},
{
iconCssClass: 'sgi sgi-caret',
title: "Sort Descending",
disabled: !columns[i].sortable,
// hidden: !columns[i].sortable, // you could disable or hide the command completely
cssClass: !columns[i].sortable ? 'italic' : '',
command: "sort-desc"
},
{
title: "Hide Column",
command: "hide",
},
]
}
};
}

// keep a copy of all column for the array of visible columns
var visibleColumns = columns;

const options = {
editable: true,
enableAddRow: true,
enableCellNavigation: true,
asyncEditorLoading: true,
forceFitColumns: false,
gridMenu: {
iconCssClass: "sgi sgi-menu sgi-17px",
columnTitle: "Columns",
},
topPanelHeight: 35,
rowHeight: 28
};
Expand Down Expand Up @@ -369,6 +418,18 @@ <h2>View Source:</h2>
return floor ? Math.floor(number) : number;
}

function removeColumnById(array, idVal) {
return array.filter(function (el, i) {
return el.id !== idVal;
});
}

function removeSortColumnById(array, idVal) {
return array.filter(function (el, i) {
return el.columnId !== idVal;
});
}

document.addEventListener("DOMContentLoaded", () => {
// prepare the data
data = getData(200);
Expand All @@ -387,12 +448,55 @@ <h2>View Source:</h2>
grid.setSelectionModel(new SlickRowSelectionModel());

const columnpicker = new SlickColumnPicker(columns, grid, options);
const gridMenuControl = new SlickGridMenu(columns, grid, options);

const contextMenuOptions = {
commandTitle: "Commands",
commandItems: [
{
command: "group-collapse", iconCssClass: "sgi sgi-arrow-collapse", title: "Collapse all Groups",
action: () => toggleGrouping(false),
itemUsabilityOverride: () => dataView.getGrouping().length
},
{
command: "group-expand", iconCssClass: "sgi sgi-arrow-expand", title: "Expand all Groups",
action: () => toggleGrouping(true),
itemUsabilityOverride: () => dataView.getGrouping().length
},
{
command: "group-clearing", iconCssClass: "sgi sgi-close", title: "Clear Grouping",
action: () => dataView.setGrouping([]),
itemUsabilityOverride: () => dataView.getGrouping().length
},
],
};
const contextMenuPlugin = new SlickContextMenu(contextMenuOptions);
const headerMenuPlugin = new SlickHeaderMenu({ buttonCssClass: 'sgi sgi-caret' });
grid.registerPlugin(contextMenuPlugin);
grid.registerPlugin(headerMenuPlugin);


headerMenuPlugin.onCommand.subscribe((e, args) => {
if (args.command === "hide") {
// hide column
visibleColumns = removeColumnById(visibleColumns, args.column.id);
grid.setColumns(visibleColumns);
} else if (args.command === "sort-asc" || args.command === "sort-desc") {
const isSortedAsc = (args.command === "sort-asc");
const sortCols = removeSortColumnById(grid.getSortColumns(), args.column.id);
sortCols.push({ sortAsc: isSortedAsc, columnId: args.column.id });
grid.setSortColumns(sortCols);
dataView.sort(comparer, isSortedAsc);
} else {
alert("Command: " + args.command);
}
});

grid.onCellChange.subscribe(function (e, args) {
grid.onCellChange.subscribe((e, args) => {
dataView.updateItem(args.item.id, args.item);
});

grid.onSort.subscribe(function (e, args) {
grid.onSort.subscribe((e, args) => {
sortdir = args.sortAsc ? 1 : -1;
sortcol = args.sortCol.field;

Expand All @@ -403,12 +507,12 @@ <h2>View Source:</h2>
// wire up model events to drive the grid
// !! both dataView.onRowCountChanged and dataView.onRowsChanged MUST be wired to correctly update the grid
// see Issue#91
dataView.onRowCountChanged.subscribe(function (e, args) {
dataView.onRowCountChanged.subscribe((e, args) => {
grid.updateRowCount();
grid.render();
});

dataView.onRowsChanged.subscribe(function (e, args) {
dataView.onRowsChanged.subscribe((e, args) => {
grid.invalidateRows(args.rows);
grid.render();
});
Expand Down
2 changes: 2 additions & 0 deletions src/styles/slick-icons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ $slick-icon-width-max-size: 30 !default;
@include createSvgClass("sgi-chevron-right", "M8.59 16.58 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.42Z");
@include createSvgClass("sgi-chevron-end", "M5.59 7.41 10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z");

@include createSvgClass("sgi-arrow-collapse", "M19.5,3.09L15,7.59V4H13V11H20V9H16.41L20.91,4.5L19.5,3.09M4,13V15H7.59L3.09,19.5L4.5,20.91L9,16.41V20H11V13H4Z");
@include createSvgClass("sgi-arrow-expand", "M10,21V19H6.41L10.91,14.5L9.5,13.09L5,17.59V14H3V21H10M14.5,10.91L19,6.41V10H21V3H14V5H17.59L13.09,9.5L14.5,10.91Z");
@include createSvgClass("sgi-cancel", "M12 2C17.5 2 22 6.5 22 12S17.5 22 12 22 2 17.5 2 12 6.5 2 12 2M12 4C10.1 4 8.4 4.6 7.1 5.7L18.3 16.9C19.3 15.5 20 13.8 20 12C20 7.6 16.4 4 12 4M16.9 18.3L5.7 7.1C4.6 8.4 4 10.1 4 12C4 16.4 7.6 20 12 20C13.9 20 15.6 19.4 16.9 18.3Z");
@include createSvgClass("sgi-caret", "M7,10L12,15L17,10H7Z");
@include createSvgClass("sgi-check", "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z");
Expand Down

0 comments on commit ef548c5

Please sign in to comment.