Our blazing fast Grid component built with pure JavaScript


Post by th@digi3 »

I'm trying to hide/show columns with a custom component.
Sadly i can't get a ColumnStore instance,
neither from grid.columns (returns array of columns, that don't have the hide/show native functions since they are just generic Objects),
nor can i create a working instance with 'new ColumnStore (grid.store)' and even if i get an unchained ColumnStore the instance doesn't have the fields, methods and properties discribed in the docs.

Here is my column-list (set via columns-property in gridConfig):

[
  { 
    text : 'Id', 
    field : 'secondaryId', 
    width : 50, 
    filterable: false,
    hideable: true
  },
  { 
    text : 'Name', 
    field : 'name', 
    flex : 0, 
    width: 180,
    filterable: false,
    hideable: true
  },
  ....
]

My Questions are:

  1. Is there a Problem with the way i set up my Columns?
  2. Why doesn't the ColumnStore instance have the correct fields, methods etc?
  3. How can i hide/show specific columns with VUE3?

thanks in advance & kind regards.


Post by alex.l »

Is there a Problem with the way i set up my Columns?

Could you please share your application?

Why doesn't the ColumnStore instance have the correct fields, methods etc?
How can i hide/show specific columns with VUE3?

Basically, grid.columns should return ColumnStore instance in case your grid is also instance and not some config. We need to see your full app to know that.
Here is example how to change columns visibility using vue component methods:

    methods: {
        hideNameColumn(event) {
            const grid = this.$refs.grid.instance;
            grid.columns.get('name').hidden = true;
        },

https://bryntum.com/docs/grid/api/Grid/data/ColumnStore#function-get

All the best,
Alex


Post by th@digi3 »

thx alex, maybe it's an grid-instance issue good pointer, but here is my grid & config (boiled down to safe space) i use in the setup of my view:

import { locationGridColumns } from "@/AppConfig";
...
const grid = ref(null);
const gridStore = ref(null);

const useGridConfig = {
    features: {
        sort : true,
        cellEdit : false,
        cellTooltip: {
            hoverDelay: 200,
            tooltipRenderer: () => "" //disabled or not showing for every column
        },
        filter: {
            prioritizeColumns : true
        },
        headerMenu : false
        }
    },
    enableTextSelection: false,
    selectionMode: {
        checkbox: true,
        rowCheckboxSelection: true,
        deselectFilteredOutRecords: true
    },
    columns : locationGridColumns,
    listeners: {
        renderRows() {
            if (gridStore.value === null) gridStore.value = grid.value.store;
            // TODO set gridColumnStore here for ref
        }
    },
    data: locationData, //loaded asnyc from backend
    store: new Store()
};

const gridConfig = reactive(useGridConfig);
...

do you need more?
thanks


Post by th@digi3 »

@Alex: the instance was an issue aswell as the timing, i try to access the ColumnStore after Rendering the rows where it is not accessable aswell as using the wrong instance to get it, via 'grid.value.instance.value' i was successful at getting the ColmnStore as discribed in the docs

THANKS ALOT :)


Post Reply