Our blazing fast Grid component built with pure JavaScript


Post by dave@mogolabs.com »

AngularJs + NPM + Bryntum Grid 5.2.3

Hi,

Encountered an issue when clicking the calendar icon on the filterBar and cell, the datepicker pop up is not showing.

The console log showed some error about the date picker.
https://imgur.com/a/Z0wZb8Q

Any Ideas on what could be the cause of this?


 import { Grid } from '@bryntum/grid/grid.module.js';

const grid = new Grid({
                adopt: "testGrid",
                autoHeight: true,

            features: {
                filterBar: true
            },
            columns: [
                { field: 'name', text: 'Name', width: 200 },
                { field: 'city', text: 'City', flex: 1 },
                { field: 'date', text: 'Date', flex: 1, type: 'date' }
            ],

            data: [
                { id: 1, name: 'Dan Stevenson', city: 'Los Angeles', date: '20/08/2022' },
                { id: 2, name: 'Talisha Babin', city: 'Paris', date: '20/04/2022' }
            ]
        });
 

Post by tasnim »

Hello,
Have you read our guide on integration with angular ? https://bryntum.com/products/grid/docs/guide/Grid/integration/angular/guide

Have you followed the instruction that the guide says? If not please check the guide link above. And If you've followed all of the instruction Could you please provide us a runnable test case so we can reproduce and debug it? (I've tried to reproduce it with our online example but I wasn't able to reproduce it)

Good Luck :),
Tasnim


Post by dave@mogolabs.com »

I have read and followed this guide
https://www.bryntum.com/products/grid/docs/guide/Grid/quick-start/javascript-npm
as we are currently in the middle of upgrading our application from Angularjs to Angular (currently a hybrid).

The rest of the features such as filtering, grouping, sorting, combo box, row expander and etc is working as expected. The issue that I encountered only happens when I try to get the date picker modal to popup.

Following angular tutorial that is provided
I am also struggling to reproduce this exact issue that was mentioned in a brand new angular project.

But, I found another issue.
When selecting a value in the calendar from the Filter Bar, it does not select any value and breaks the filtering feature completely.
Angular Test project => https://www.dropbox.com/t/Qc3DN97bNK5E45IC
Video on the issue => https://imgur.com/a/kuPA80z


Post by marcio »

Hey dave,

Could you please open a separate ticket for that Filter Bar issue?? We have a policy of one post per issue, to facilitate the workflow and support.

Let's maintain this one for the popup issue.

Best regards,
Márcio


Post by tasnim »

The problem with your application is that the date is received as string in the store. You should extend the model to add fields according to the types you want for the grid store.
In your code

data = [
      { id: 1, name: 'Dan Stevenson', city: 'Los Angeles', date: new Date('2022-08-20') },
      { id: 2, name: 'Talisha Babin', city: 'Paris', date: new Date('2022-04-20') }
    ];

This solves the issue.

And also you shouldn't use the features object directly instead you should use features like this

<bryntum-grid
    #grid
    [data] = “data”
    [columns] = “gridConfig.columns”
    [filterBarFeature]= “gridConfig.features.filterBar”
</bryntum-grid>

Good Luck :),
Tasnim


Post Reply