Cannot delete property 'fixed' of #<MouseEvent> and error in calling api in editor type='dropdown'

[neetu@ciirus.com]

Hi I am trying to show a dropdown when click on a column but I want the array from my api so I wrote this code-

const loadAOA = async () => {
        const response = await fetch("myUrl");
        const data = await response.json();
        return data.items.map(item => ({
            text: item.Description,
            value: item.ID
        })) || [];
    }

and calling this in column like

{
                    text: "AOA Category", field: "AOACategory", flex: 1, 
                    minWidth: 190,
                    editor: {
                        type: 'dropdown',
                        valueField: 'value',
                        displayField: 'text',
                        width:100,
                        items: loadAOA
                    }
                },

but its not calling api and showing on screen No results and when I am trying to debug in console Its showing me error

Uncaught TypeError: Cannot delete property 'fixed' of #<MouseEvent>
    at HTMLBodyElement.o (grid.module.js:10:183255)

I am giving reference of js file like

 <script type="module" src="~/lib/bryntum/build/thin/grid.module.thin.js"></script> 

Please correct me where/what i am doing wrong

[marcio]

Hey neetu,

Glad to have you here on the forums!

Please check this thread with a codepen example on how to configure the Combo to use remote data as you described viewtopic.php?p=138369#p138369

[neetu@ciirus.com]

Hi Marcio
Thanks for quick reply but did you check the link you sent that is not working.
Plz either send me working links or working examples asap.

[marcio]

Hey,

Yes, I checked and it's working - https://codepen.io/Animal-Nige/pen/zYbZpRN?editors=0010

But I'm sharing also the code example here

const events = [
      {
        "id"         : 1,
        "startDate"  : "2023-04-02T08:00:00",
        "endDate"    : "2023-04-02T10:00:00",
        "name"       : "Team Building Workshop",
        "resourceId" : 1,
        "eventColor" : "blue",
        "country"    : "Australia"
      }
    ];

const resources = [
      {
        "id"         : 1,
        "name"       : "Dan",
        "eventColor" : "blue",
        "team"       : "Austin",
        "image"      : "dan.jpg"
      }
    ];

const calendar = new Calendar({
  // Start life looking at this date
  date: new Date(2023, 3, 2),
  events,
  resources,
  appendTo: document.body,

  // Features named by the properties are included.
  // An object is used to configure the feature.
  features: {
    eventEdit : {
      items : {
        countryField : {
          name : 'country',
          weight : 150,
          label : 'Country',
          type : 'combo',
          displayField : 'name',
          valueField : 'name',
          minChars : 2,
          store : {
            readUrl : 'https://restcountries.com/v3.1/name/',
            restfulFilter : true,
            idField : 'cioc',
            fields : [{
              name : 'name',
              dataSource : 'name.official'
            }]
          }
        }
      }
    }
  }
});

[Animal]

You have to await async functions to acquire what their Promise yields, otherwise, what you end up with is the Promise.

[neetu@ciirus.com]

Hey, Thanks for the response , the issue is resolved but still you guys didn't reply how to fix this error

Uncaught TypeError: Cannot delete property 'fixed' of #<MouseEvent>
    at HTMLBodyElement.o (grid.module.js:10:183255)

[marcio]

Hey neetu,

How to reproduce this error? I don't see that error on Animal's codepen.

Could you please provide some steps on how to reproduce that?

[neetu@ciirus.com]

Hi Marcio

I am trying to integrate the features in grid in my project

import { StringHelper,Grid, AjaxStore, Combo, DateHelper } from '/lib/bryntum/build/grid.module.js';

 var columns = [
 { text: "Spa?", field: "Spa", flex: 1, type: 'check' },
 {
                    text: "Comments",  flex: 1, 
                    htmlEncode: false,
                    renderer: ({ value }) => {
                        return {
                            element: 'div',
                            className:'fal fa-file-alt'                          

                        }
                    }
                      },
                { text: "Booking Restrictions?", field: "Restrictions",  flex: 1 }
              ]
                

 var store=new AjaxStore({
        readUrl: "/mylistUrl",
    });
 const grid = new Grid({
        autoHeight: true,
        columnLines: true,
        loadMask: 'Loading...',
        maxHeight: "500px",
        scrollable: true,
        appendTo: 'target',
        columns: columns,
        store,
        features: {
            cellEdit: true,
            stripe: true,
            filter: true
        },
    });

When I move cursor up-down I am getting the error,

grid.module.js:10 Uncaught TypeError: Cannot delete property 'fixed' of #<MouseEvent>
    at HTMLBodyElement.o (grid.module.js:10:183255)
    

loadMask: 'Loading...', is also not working

So can you plz check what wrong I am doing, there are lot of issues I am facing

[marcio]

Hey,

So, after some debugging, there are a few points here.

• You need to add autoLoad: true to the AjaxStore, if that is not set you need to call store.load() somewhere.
  Please check https://bryntum.com/products/grid/docs/api/Core/data/AjaxStore#config-autoLoad

• Regarding the click listener, that is not how we set up event listeners here, In your case, you most likely need to add a listener object in the Grid with one of these events https://bryntum.com/products/grid/docs/api/Grid/view/mixin/GridElementEvents#events
  You can have more info about that here https://bryntum.com/products/grid/docs/guide/Grid/basics/events

[marcio]

Regarding the load mask, I create a ticket to investigate/fix why that's not being displayed https://github.com/bryntum/support/issues/8333