Thanks!!!

[ryanhamilton]

Hi,

We have been using Slick Grid for over a year and I just wanted to say a massive thanks to all the contributors.

We are a startup creating a low-code tool for building real-time data applications.
Our two most important components include charting and a data grid (SlickGrid).
Slick Grid has been invaluable, including the plugins and tutorials for adding functionality.

As part of saying thanks, I've created an article on our website saying how awesome I think tihs project is:
https://www.timestored.com/time-series-data/slick-grid-review
I intend to publicise it and tell as many people as I think will find it useful :)

It has been great to see development really moving forward again with version 3 and now version 4.

Thanks again,
Ryan

[ryanhamilton]

Example of component for those interested:

[ghiscoding]

It has been great to see development really moving forward again with version 3 and now version 4.

@ryanhamilton We're already working on v5 😁, see Roadmap to v5 - ES6/ESM/TypeScript/ModernTheme

Your context menu with sub-menu is interesting, I always wanted to do that but never had the time to investigate how to do it. It would be nice to get contributions (either in the plugin, maybe by modifying slick.contextmenu plugin that I created, or via a new example).

[ghiscoding]

@ryanhamilton so any chance you can contribute back to the project, we are (at least I am) very interested in the Context Sub-Menus. It would be great to add this to our upcoming v5. If you do decide to contribute then please use the code from the next branch, the contextMenu plugin has already been converted to TypeScript. If this is too much work then could you please at least provide the code you used to create these sub-menus dynamically... Thank you

Contributing back to the project is the best way you can thank us all.

[ghiscoding]

@ryanhamilton it's a little sad to see that you haven't replied to my request for a contribution of the Context Sub-Menus that I see in your print screens. I'm making another plea at you to please make a contribution of this feature to the project. We've put a lot of effort to modernize the library, but I really wish that we would get more contributions and not having any responses from your side is kinda sad and makes me rethink if I should spend that much time on releasing another version. I don't think I am asking for that much of an effort from you, so please consider contributing back to the project. 🙏🏻 Thank you

[ryanhamilton]

Hi,

At the time, I actually went and had a look at this but our implementation is entirely outside AGrid style and context.

We use AGrid to subscribe to clicks and then everything else is highly custom. i.e. the context menu position and appearance is controlled by react. There's no part that's reusable, I would have to learn the new V5 approach and then basically reimplement it from scratch. I'm pasting key bits of code below so you can see for yourself the logic is highly custom.

I would love to have time to go add that functionality but you can see from the website, I'm running a new startup so I have zero spare time.

Popup activated in Slick Grid

            grid.onContextMenu.subscribe(function (e:any, args:any) {
              e.preventDefault();
              const cell = grid.getCellFromEvent(e);
              const itm = grid.getDataItem(cell.row); // reference to specyfic row
              const colDef = grid.getColumns()[cell.cell];
              if(gc.showContextMenu) { // Must be original name here as that's what is used to add formatters/align settings
                setShowContextMenu({visible:true, x:e.pageX, y:e.pageY, colName:colDef.originalName, rowItem:itm});
              }
            }); 

Context menu sits alongside the Chart or in our case a grid.

    return <ChartWrapper className="grcontainer">
        {showPager ?  
             <><ChartWrapper90 id={id} style={{ width:"100%" }}></ChartWrapper90><div id={pagerid} style={{height:"20px", width:"99%"}}></div></>
            :<ChartWrapper id={id} style={{ width:"100%" }}></ChartWrapper>}
        
        {showContextMenu.visible && <AGridContextMenu srs={srs} x={showContextMenu.x} y={showContextMenu.y} 
            colName={showContextMenu.colName} 
                actionHandlers={props.subConfig.actionHandlers.filter(a => a.trigger==="Menu")} 
                selectionMade={(ah) => { hideContextMenus(); if(ah){ props.actionRunner([ah],showContextMenu.rowItem);}}} 
                selected={props.subConfig.colConfig[showContextMenu.colName]?.colFormat ?? ""} 
                setColumnFormat={setColumnFormat} 
                setColumnAlign={(colAlign) => { setColumnAlign(showContextMenu.colName,colAlign)}} />}

    </ChartWrapper>;

The context memu component itself

export default function AGridContextMenu(props: { srs: SmartRs | null; x: number; y: number; selectionMade: (ah?:ActionHandler) => void; setColumnAlign:(colAlign:ColAlignOptions)=>void, actionHandlers:ActionHandler[]} & GridArgs) {
    const {srs,colName} = props;
    const context = useContext(ThemeContext);

    const clean = (e: React.MouseEvent, ah?:ActionHandler) => { e.stopPropagation(); props.selectionMade(undefined); }
    const toXL = (e: React.MouseEvent) => { if (srs) { copyTable(srs) } clean(e) }
    const toCSV = (e: React.MouseEvent) => { if (srs) { copyToClipboard(genCSV(srs, true, "\t")) } clean(e) }
    const downCSV = (e: React.MouseEvent) => { if (srs) { download(aNAME + ".csv", genCSV(srs, true)) } clean(e) }
    const downExcel = (e: React.MouseEvent) => { if (srs) { genExcel(srs) } clean(e) }
    const disabled = srs === null || srs.count() < 1;
    const colMenuHidden = !isAdmin(context) || colName === undefined || colName.length === 0;

    const gridArgs = {colName, setColumnFormat:props.setColumnFormat, selected:props.selected};
    const ColMenu = colMenuHidden ?
            <><MenuItem icon="column-layout" text="Format Column" onClick={() => {}} disabled={true} ></MenuItem>
              <MenuItem icon="align-center" text="Alignment" onClick={() => {}} disabled={true} ></MenuItem></>
        :   <><MenuItem icon="column-layout" text="Format Column" onClick={() => {}} >
                    <MenuItem icon="eraser" text="Clear Formatting" onClick={() =>{ props.setColumnFormat(props.colName,"") }} />
                    {getNumberFormatMenuOptions(gridArgs)}
                    {getDateFormatMenuOptions(gridArgs)}
                    {getTextFormatMenuOptions(gridArgs)}
                    <MenuItem text="Spark" icon="timeline-line-chart">
                        {getNumarrayFormatMenuOptions(gridArgs)}
                    </MenuItem>
                </MenuItem>
                <MenuItem icon="align-center" text="Alignment" onClick={() => {}} >
                    <MenuItem icon="align-left" text="Align Left" onClick={() =>{ props.setColumnAlign("left")  }} />
                    <MenuItem icon="align-center" text="Align Center" onClick={() =>{ props.setColumnAlign("center")  }} />
                    <MenuItem icon="align-right" text="Align Right" onClick={() =>{ props.setColumnAlign("right")  }} />
                </MenuItem></>;

    return <ContextMenu x={props.x} y={props.y}>
        <Menu large={false}>
        {props.actionHandlers && props.actionHandlers.length>0 &&
             <>
             {props.actionHandlers.map((a,idx) => 
                <MenuItem key={"action" + idx} icon={getIcon(a.name,"blank")} text={a.name.length>0 ? a.name : ("Action " + (1+idx))}  
                        onClick={e => { e.stopPropagation(); props.selectionMade(a); }} />)}
             <MenuDivider />
             </>
        }
            <MenuItem icon="clipboard" text="Copy Table" onClick={toCSV} disabled={disabled} />
            <MenuItem icon="download" text="Download CSV" onClick={downCSV} disabled={disabled} />
            {/*  This call is used by report generator / selenium to get HTML */}
            <MenuItem icon="th-derived" text="Copy Table with Formatting" onClick={toXL} disabled={disabled} />
            <MenuItem icon="download" text="Download Excel" onClick={downExcel} disabled={disabled} />
            <MenuDivider />
            {ColMenu}
        </Menu>
    </ContextMenu>;
}

[ghiscoding]

Thanks for providing some code, I will take a look at your code after finishing the work on v5. I gotta say it's kind weird to see Ag-Grid being mentioned so much since we're talking about SlickGrid here ;)

[ghiscoding]

Doing a quick a look at the code and it seems to be using Ag-Grid context-menu (which do support sub-menus) but that will not work or be useful for SlickGrid. So unfortunately, I don't think we can add this feature at the moment