commercial support offering

[zewa666]

Hey there again.

As I'm running a couple of tests and prepping a demo project for an evaluation of using angular-slickgrid in a larger company project I wanted to ask in advance before I perhaps get the same question from my peers.

Do you offer any kind of commercial support? I think it would primarily target architectural/feature design discussions and guidance on best practices vs actual paid feature implementation. Just to give you a few ideas of what type of Q might come up:

• how to create a more spreadsheet like appeal
• how to have two grids linked (scroll, same datasource, ...) but with different representations
• master/detail grids
• how would you implement a custom backend with feature A, B, C
• ...

I'm certainly not looking for any answers to these right now and not in the OSS context, where I'd instead provide an example and pin point to concrete questions.

Its more about providing my decision-makere with more info.

If you prefer discussing these on a different channel please dont hesitate to reach out to me via mail (you can find it on my github profile)

[ghiscoding]

To answer some of your questions, maybe not all but let see

Commercial Support

I do not necessarily offer commercial support but I do have sponsoring links via Ko-Fi and recently GitHub Sponsors, they are both shown on all my main projects. As you know I'm quite active on these projects and if it's something really custom or requires extra then I guess I could go with the sponsoring way. I did receive some in the past, it's been well over a year since I've received anything though.

how to create a more spreadsheet like appeal

I created a new theme in the original SlickGrid recently released (not available in Angular-Slickgrid because it uses a different theme) and you can see that it's quite doable to change a few CSS variables and get an Excel like visual, take a look at this SlickGrid Example. Like I said, this theme is only available in SlickGrid but it shouldn't be too hard to port it to Angular-Slickgrid

how to have two grids linked (scroll, same datasource, ...) but with different representations

hmm not exactly sure what you mean, do you want like an exact duplicate of the grid data or do you even want events to be replicated like scrolling in grid1 would also scroll in grid2? If it's the latter, I guess it's doable by subscribing to the scroll event but you'd have to make sure to not go in some kinda of infinite loop, never needed that kind of functionalities

master/detail grids

Some users tried to do that with Row Detail but they quickly saw that it wasn't created for that reason. It's typically better to simply go with 2 grids, I've done that with Angular-Slickgrid with 1 project we had that when I clicked on an item in the grid, I then opened a side bar with a 2nd grid and the sidebar was simply using Bootstrap flex like col-8 and col-4 then going back to col-12 when closing... or you could do a top/bottom grids, in both use case clicking on a row in 1st grid would drive 2nd grid, it's not too hard to do

how would you implement a custom backend with feature A, B, C

If you look at this Example 13, it was created by another user and in his use case he had an Oracle DB and his demo was to show that it's easy to create your own backend service. Basically, the easiest would be to look at either the OData or the GraphQL services that I've done, in both cases they implements BackendService which are defined interfaces that the lib uses internally and if you follow them then you can create services for any other type of DB and if it's for well known DB then you could also add them as new Slickgrid-Universal package(s) if you wish (I created that monorepo for reasons like this, easily extendable and new services could be added at any point in time)

I also wouldn't mind joining a call with you, since we contributed a lot in the past, as long as it's not during work time, it could even be a Saturday I don't mind. I'm in Montreal, Canada (Eastern TZ), so we probably have 6 hours or so of time diff? I wouldn't do this with everyone but since I know you quite well already, I wouldn't mind at all :)

[ghiscoding]

For comparison sake, Ag-Grid is the most known grid and most people don't know that but it was inspired by SlickGrid and Angular UI-Grid. The Ag was for Angular back then so... Ag-Grid is well known and is very popular but it's also quite expensive (the community edition is very basic and limited), on the other hand all SlickGrid features are totally free but off course it's not always to the level of Ag-Grid since they have paid developer to work on them every day and they have lot of enterprise paying top dollars to support whatever they dream of, on the other hand SlickGrid is developed by a bunch of us (mostly me lately) in our spare time lol

A great example of this is Tree Data, we needed it for a project in our Salesforce environment (kind of a BOM view) and I spent quite some time to get it working, but the entire Tree Data feature in Ag-Grid is in the Enterprise section, meaning not available in community edition and they have ton of features like this. It's free in Angular-Slickgrid, but of course it might be a bit better in Ag-Grid...for a cost 😆

Ag-Grid (requires Enterprise license)

• Tree Data

Angular-Slickgrid Tree Data (free)

• Example 28 - parent/child
• Example 29 - hierarchical

At the end, I'm not that far from Ag-Grid, it's comparable. Other features like Pinning (aka frozen columns) is also better in Ag-Grid than SlickGrid but all these features are paid features in Ag-Grid so free is good in SlickGrid :)

[zewa666]

thanks for all your feedback. as stated this is not about a concrete issue right now but merely to be prepared for upcoming questions during my presentation.

as for ag-grid and other commercial tools like bryntum. I worked with a couple of them and werent nearly impressed as to what they're price range might suggest. Additionally having access to source code and the way its written with the slickgrid wrappers is a safeguard. worst case we could always expand the core with whatever is needed. try that with ag-grid 😅

moreover I'm a firm believer that if you use OSS you're obliged to give back. so as a private person I chose to do so via PRs but in an enterprise setting, spending a couple of bucks is way easier ;)

[ghiscoding]

• how to create a more spreadsheet like appeal

I created a new Slickgrid-Universal Example 19 to test a feature. I decided to investigate if I could turn it an Excel like grid and it sure was quite easy, less than 10 CSS variables that already exist and it looks like Excel

/** override slick-cell to make it look like Excel sheet */
.grid19 {
  --slick-border-color: #d4d4d4;
  --slick-cell-odd-background-color: #fbfbfb;
  --slick-cell-border-left: 1px solid var(--slick-border-color);
  --slick-header-menu-display: none;
  --slick-header-column-height: 20px;
  --slick-grid-border-color: #d4d4d4;
  --slick-row-selected-color: #d4ebfd;
}

and voila! Excel it is 😆

[zewa666]

I already anticipate future customers requests in adding https://github.com/handsontable/hyperformula after seeing this 🤣

[ghiscoding]

interesting first time seeing it, you can always provide new examples 😆

[ghiscoding]

Reading this hyperformula again and I think that is technically speaking already achievable with the Excel-Builder code that I've exposed into Slickgrid-Universal. If you take a look at the Slickgrid-Universal Example 2, it has the following column definitions with the excelExportOptions that provides a way to customize styling output which I added last year and that's great... You can try Slickgrid-Universal Example 2 with some groupings to see the custom styling, but keep reading for the wow thing...

this.columnDefinitions = [
  // ...
  {
        id: 'cost', name: 'Cost', field: 'cost',
        minWidth: 70, width: 80,
        sortable: true, filterable: true,
        filter: { model: Filters.compoundInputNumber },
        type: FieldType.number,
        formatter: Formatters.currency,
        groupTotalsFormatter: GroupTotalFormatters.sumTotalsCurrency,
        params: { displayNegativeNumberWithParentheses: true, currencyPrefix: '€', groupFormatterCurrencyPrefix: '€', minDecimal: 2, maxDecimal: 4, groupFormatterPrefix: '<b>Total</b>: ' },
        excelExportOptions: {
          style: {
            font: { outline: true, italic: true },
            format: '€0.00##;[Red](€0.00##)',
          },
          width: 18
        },
];

ok great but I think there's even more interesting stuff, I also exposed a valueParserCallback which has to return any of Date | string | number | ExcelCellFormat and the last type is the most interesting part for our use case, since that is basically an Excel-Builder cell metadata. With that in mind, if you take a look at the new Excel-Builder-Vanilla Example 8, you can add formulas via a metadata like this

{ value: 'C2+D2', metadata: { type: 'formula' } }

so you've probably guessed it by now, that you can use valueParserCallback to add that said formula, I assume something like this code would work (but untested)

this.columnDefinitions = [
  // ...
  {
        id: 'cost', name: 'Cost', field: 'cost',
        excelExportOptions: {
          valueParserCallback: (data: Date | string | number, columnDef: Column, excelFormatterId: number | undefined, excelStylesheet: unknown, gridOptions: GridOption) => {
            // assuming that we want to calculate: (Price * Qty) => Cost
            const itemRow = this.angularGrid.slickDataView.getRowById(data.id);
            const priceIdx = this.angularGrid.slickGrid.getColumnIndex('price');
            const qtyIdx = this.angularGrid.slickGrid.getColumnIndex('qty');
            const excelPriceCol = `${String.fromCharCode('A'.charCodeAt(0) + priceIdx}${itemRow}`;
            const excelQtyCol = `${String.fromCharCode('A'.charCodeAt(0) + qtyIdx}${itemRow}`;
            return { value: `${excelPriceCol}*${excelQtyCol}, metadata: { type: 'formula' } };
         }
         formatter: CostFormatter,   // show calculate cost to users with a custom formatter
         exportWithFormatter: false, // but don't use it in Excel since we want to keep our formula
      }
  }
];

Note that some things might be challenging... I have the itemRow in the code because if you have a static grid then everything is easier but assuming that the grid can be sorted and filtered, it becomes challenging to have the correct Excel position. I assume that the itemRow and the column index with String.fromCharCode('A') would be sufficient but it might not. Also something that I did not include is that you'll also need a Formatter to actually show the calculated value on the screen but without using it in the export because you would want to keep the Excel formulas on that end. It could be nice to create such Example in the future :) ... and here is the Example - Excel Formulas

Anyway, it seems like a nice challenge that is most probably already doable... ahh the power and flexibility of SlickGrid and everything that I've added in over the years. Awesome, isn't it!?!

[zewa666]

damn and there goes another evening with playing around with this 😄