Custom Views of Grid Columns

[kevinburkett]

I am attempting to build in Custom Views in React very similar to your following example in universal.

https://github.com/ghiscoding/slickgrid-universal/blob/eaf3bfd8771944c325c870dcd42b1533bc77caed/examples/vite-demo-vanilla-bundle/src/examples/example11.ts#L717-L720

I have defined custom presets that I apply dynamically from a drop down with a preact signal. The presets are properly being set when I log to console the before and after of the column definitions. Sorting and Filtering are working as expected. However, it is showing all of the columns in the column definitions (147 total columns) instead of the columns in the preset. The filter and sorting are being properly applied but the visibility of the columns are not correct. Do you have any advice on what I am doing wrong?

const costPresets: GridState = {
    columns: [...baseColumns, ...teamColumns, ...costColumns],
    filters: [{columnId: 'totalMonthlyCost', operator: OperatorType.greaterThan, searchTerms: [0.0]}],
    sorters: [{columnId: 'totalMonthlyCost', direction: 'DESC'}],
};
const scorecardPresets: GridState = {
    columns: [...baseColumns, ...teamColumns, ...scorecardColumns],
    filters: [{columnId: 'any', operator: OperatorType.equal, searchTerms: [1]}],
    sorters: [
        {columnId: 'namespace', direction: 'ASC'},
    ],
};

const finalGridOptions = computed(() => ({
    ...gridOptions,
    ...gridOptionsOverride,
}));
effect(() => {
    if (finalGridOptions.value && finalGridOptions.value.presets && grid) {
        if (grid.filterService && finalGridOptions.value.presets.filters) {
            grid.filterService.updateFilters(finalGridOptions.value.presets.filters as CurrentFilter[]);
        }
        if (grid.sortService && finalGridOptions.value.presets.sorters) {
            grid.sortService.updateSorting(finalGridOptions.value.presets.sorters as CurrentSorter[]);
        }
        if (grid.gridStateService && finalGridOptions.value.presets.columns) {
            grid.gridStateService.changeColumnsArrangement(finalGridOptions.value.presets.columns);
        }
    }
});

[ghiscoding]

It might be because you're using the same column definitions array without making a deep copy. The Grid Preset is only working at the grid creation lifecycle, it has no effect after the initialization of the grid, I added the changeColumnsArrangement() afterward because I wanted to change the columns after the grid init. If you just want to hide some columns you can also use gridService.hideColumnByIds(). Behind the scene what all these functions do is to call grid.setColumns(), any column(s) missing from the original definition will be considered hidden, also if you move a column in the array, it will also move it in the grid, so in other words it respect what you provide to setColumns() without changing the original definitions.

It's a bit hard to help you without a repro, I added Stackblitz link to the main readme last week, so if you want to provide a repro, you can start using the Stackblitz template, that would be great. I would also like to mention again, in case you didn't know, that I'm not a React developer and this project was originally created by someone else and transferred to me later because I maintain all other SlickGrid repos.

[kevinburkett]

I tried opening your stackblitz but it takes about 30 minutes (installing dependencies) for it to load. I have not used it before and not sure what to do with it next. I will read the docs. I will spend some time putting together a smaller demo to send you that is a much narrow focus of the issue. It just requires rewriting some code.

I tried using hideColumnsByIds but it had the same issue changeColumnsArrangement did. It just loads all of the default columnDefinitions. I also tried using deepCopy but that did not fix the issue (I am changing the entire GridOptions when I change the view from the drop down). I also tried to use setColumns directly but that also did not work. I am not sure why updateFilters and updateSorting would work and not the hiding/unhiding of columns. Is there some other function call that I need to make to reload the grid after calling hideColumnsByIds or changeColumnsArrangement? I can only get this to work on the initial load of the grid. Right now to get it to work, after I pick the view from the drop down, then I set the value in a cookie and then use location.reload() to reload the page and then it works. This is not ideal as it takes longer for it to reload the page. I am hoping there are better options.

Finally, I don't think this is a React issue. React is not wonderful, but it seems to be working as expected based on typical debugging techniques. I believe this would be an issue even if using vanilla JavaScript.

Thanks for your help!

[ghiscoding]

(I am changing the entire GridOptions when I change the view from the drop down)

are you recreating the entire grid then? Changing the entire grid is not typically what I do, in 1 project we have, we have different custom view that the user can change (which is pretty much Slickgrid-Universal Example 11, hence why I created that demo) and the user can use the dropdown to change the view and we also save that view in the backend so that the next time the user loads the page then the grid loads the last view that the user was. I thought that is what you wanted to do but I'm not sure anymore. So is your use case different?

For Stackblitz, it loads within a minute on my side in either Edge or Firefox (I'm on Windows), but if it's not helpful, you can always clone the slickgrid-react-demos and modify or add a new example. I could then clone your GitHub repo, that would work too, I just need a full repro. I didn't recreate the Slickgrid-Universal Example 11 in all other downstream libs (slickgrid-react, angular-slickgrid, ...) but I assume it should work the same (however, we could replicate it if it's helpful). The changeColumnsArrangement(), updateFilters() and updateSorting were mainly all created because I needed to do the Example 11 use case (BTW, my mother tongue is French so sometime the words I choose in English aren't the best one, feel free to propose other function names haha).

So if your use case is similar to Slickgrid-Universal, then maybe we should recreate that example into Slickgrid-React too? I always assumed that changeColumnsArrangement() would work the same in here, but maybe it doesn't? I started working on another feature, so I might not do this change right away but it could be done soon if it helps.

[ghiscoding]

oh and the other thing to note is that originally, SlickGrid was a separate dependency (in previous major, I was using 6pac/slickgrid dependency, but with recent major I dropped the dependency and moved the code in Slickgrid-Universal). So the thing to note is that because it was a separate dependency, I needed a way to keep ColumnPicker/GridMenu (and other plugins) column definitions in sync, so internally I have a SharedService when I keep the original column definitions array and also the current one, so it happens in the past that some developers were calling grid.setColumns() by themselves but they started to have problems with plugins like ColumnPicker/GridMenu being out of sync because they called SlickGrid functions instead of the functions I created, so which is why it's always better to use the function I specifically created changeColumnsArrangement() and others... so it would be better to fix any issues directly in there, if any, since these functions do keep the columns in sync (they just updated the SharedService column definitions). You can see what I mean in this changeColumnsArrangement() line

[ghiscoding]

@kevinburkett I finished working on the new Dark Mode feature, so I was wondering if you managed to fix this problem of yours or if it's still a problem? A GitHub repo to clone with the problem in the repo would be helpful. Cheers

[kevinburkett]

I have not fixed my problem. I am putting together a repo to share with soon.