Our blazing fast Grid component built with pure JavaScript


Post by notepads »

I am using the url to readData. I need to declare store before the $scope.orderGrid is declared so I can use some data beforehand. So the pseudo code might be the code like the below. How can I read data and assign that data to store and declare grid afterwards?

[*]Pseudo Code

$scope.store = new brntum.grid.Grid.Store({
    readUrl:"api/orders"
});
 $scope.orderGrid = new bryntum.grid.Grid({
            ref: 'orderGrid',
            appendTo: 'orderGrid',
            //eventStore: jobGridScheduler.eventStore,
            store:$scope.store
     )

[]My code[*]


  $scope.orderGrid = new bryntum.grid.Grid({
            ref: 'orderGrid',
            appendTo: 'orderGrid',
            //eventStore: jobGridScheduler.eventStore,
            store: {
                modelClass: Task,
                readUrl: "api/orders",
                autoLoad: true,
            },
     )

Post by saki »

Yes, you can do it as shown in your pseudo code. You can create store before the grid and then assign it to https://bryntum.com/docs/grid/#Grid/view/Grid#property-store config option of the Grid.

This is the modified app.js of Grid basic demo that shows that approach:

import '../_shared/shared.js'; // not required, our example styling etc.
import Grid from '../../lib/Grid/view/Grid.js';
import '../../lib/Grid/column/NumberColumn.js';
import DataGenerator from '../../lib/Core/helper/util/DataGenerator.js';
import Store from '../../../Grid/lib/Core/data/Store.js';

const store = new Store({
    data : DataGenerator.generateData(50)
});

new Grid({

    adopt : 'container',

    minHeight : '20em',

    store,

    features : {
        group : false
    },

    // Headers will ripple on tap in Material theme
    ripple : {
        delegate : '.b-grid-header'
    },

    columns : [
        {
            text   : 'Name',
            field  : 'name',
            flex   : 2,
            editor : {
                type     : 'textfield',
                required : true
            }
        }, {
            text  : 'Age',
            field : 'age',
            width : 100,
            type  : 'number'
        }, {
            text  : 'City',
            field : 'city',
            flex  : 1
        }, {
            text  : 'Food',
            field : 'food',
            flex  : 1
        }, {
            text     : 'Color (not sortable)',
            field    : 'color',
            flex     : 1,
            sortable : false,
            renderer({ cellElement, value }) {
                // renderer that sets text color = text
                cellElement.style.color = value;
                return value;
            }
        }
    ]

});

Post Reply