Premium support for our pure JavaScript UI components


Post by abisht »

Hi,
When I am. trying to edit a cell which has array of values, then on edit, I am getting the following view :

Screen Shot 2022-01-21 at 1.24.53 PM.png
Screen Shot 2022-01-21 at 1.24.53 PM.png (46.16 KiB) Viewed 230 times

This is the actual view :

Screen Shot 2022-01-21 at 1.31.24 PM.png
Screen Shot 2022-01-21 at 1.31.24 PM.png (28.89 KiB) Viewed 230 times

This column is reading the data from an object : drivers: any[];

I tried displayValueRenderer function, but it only works, when data from backend populates the store data.

This is my column definition :

    {
      text: 'Driver(s)',
      field: 'drivers',
      resizable: false,
      flex: 1,
      sortable: false,
      draggable: false,
      renderer: ({ value }) => {
        return value && value.length > 0 ? value.map(data => data.driverName).join(', ') : '';
      },
      editor: {
        type: 'combo',
        // specify valueField'/'displayField' to match the data format in the employeeStore store
        valueField: 'DriverId',
        displayField: 'DriverCode',
        store: this.employeeStore 
      },
      tooltipRenderer: false,
      enableCellContextMenu: false
    }

And I am populating store data like this :

 public onSchedulerEvents(event: any): Promise<void> { 
    case 'startcelledit':
        const { record, editor, column } = event.editorContext;
        if (column.field === 'drivers') {
          //load driver
          this.driverService.searchDrivers().subscribe((response: [DriverDetails]) => {
            editor.inputField.store.data = response;
          });
        }
        break; 
 }

Post by alex.l »

renderer is using to show data in a cell before editor is shown, all the rest is managed by a config for your editor field.

For test purposes I tried to edit our online celledit example https://bryntum.com/examples/grid/celledit/

const 
	cities = DataGenerator.cities,
    	storeCities = cities.map(name => {
            	return {
            		cityName : name + ' name', cityId : name
        	}
    	});

// ...
   columns : [
        { text : 'Name', field : 'name', flex : 1 },
        {
            text   : 'Birthplace',
            field  : 'city',
            width  : '8em',
            editor : {
                type : 'dropdown',
                store : {
                    data : storeCities
                },
                displayField : 'cityName',
                valueField : 'cityId'
            }
        },

I don't see that problem. Could you please provide data format you are using in your store? Does it reproducible with our examples?

All the best,
Alex


Post by abisht »

When populating the data from backend, the data is populated from another api, where driver will come like this :

{
  "ShipmentId" : "SHip1",
  "driver" : [ {
   "driverId" : "2",
   "driverName" : "Test Test2"
     } 
  ]
}
,
{
  "ShipmentId" : "SHip2",
  "driver" : [ 
   {
   "driverId" : "2",
   "driverName" : "Test Test2"
     } 
  ]
}

For populating the store, I create a custom API, so that I can use AjaxStore.
Its data will be :

[ 
 {
   "id" : 1,
   "name" : "Test Test"
 },
 {
   "id" : 2,
   "name" : "Test Test2"
 }
]

Post by abisht »

Regarding online example, The Birthplace column must be reading a value from

"city" :"Moscow"

Since I don't know how to play with data, can you please try with :

"city" : ["Moscow"]


Post by alex.l »

Well, driver is a really Object in your data, that's why you see that as [object Object], it should be a value.

"city" : ["Moscow"]

it won't work, because value is an Array.

Try to make data in format you need (DriverCode is a String) before set it to store (in here this.driverService.searchDrivers().subscribe((). This is the easiest way.

All the best,
Alex


Post by abisht »

Issue is , I can have more than 1 driver in each shipment. In that case, value will be an array right?


Post by alex.l »

In case you have an array of drivers, do you have ids for all these drivers or you want to add them all at once? I don't really follow how this data will be stored in 1 field of the record you are editing. I know it multiSelect combo, bit will it still be an array, or it will be an array of arrays?

You can do join(' ,') if you want to select them as 1 value, or you still may go throw all your drivers and create an array of id/value objects.

Could you please describe a full logic process, how do you want to display them, what data you want to save in your drivers field, how do you expect to see a record in your combo list?

All the best,
Alex


Post by abisht »

{
"shipmentId" : "1",
"driver" : [ {
   "driverId" : "1",
   "driverName" : "Test Test2"
     } ,
   {
   "driverId" : "2",
   "driverName" : "Test Test2"
     } 
  ]
}

For same shipment, I have two driver, as part of driver array and my column driver , is able to use the render method to join driver name :

renderer: ({ value }) => {
        return value && value.length > 0 ? value.map(data => data.driverName).join(', ') : '';
      },

My expectation is : Even though its an array of drivers, but on double click, it should now show [Object Object]
For now, multiselect is disabled. So I can only assign one driver.


Post by alex.l »

Something like this?

 public onSchedulerEvents(event: any): Promise<void> { 
    case 'startcelledit':
        const { record, editor, column } = event.editorContext;
        if (column.field === 'drivers') {
          //load driver
          this.driverService.searchDrivers().subscribe((response: [DriverDetails]) => {
            const drivers = response.map(shipment => {
            	return { 
            		driverId : shipment. shipmentId, 
            		driverName : shipment.driver.map(d => d.driverName).join(' ,') 
            	};
            });
            editor.inputField.store.data = drivers;
          });
        }
        break; 
 }

All the best,
Alex


Post by abisht »

This method is used to load the driver dropdown, when the column is opened in edit mode. That is working fine.
The only issue is, when I double click on the cell, it show [object object].

This grid, is populated using /getShipmentByDate API, which has a list of drivers . Which on double click generates [Object object]

while for dropdown, I am using a separate /getDrivers api, which is working fine.


Post Reply