41
Views
6
Comments
[OutSystems Data Grid] data grid multi select drop down issue
outsystems-data-grid
Reactive icon
Forge asset by OutSystems

I'm trying to implement a multiselect dropdown inside a Data Grid in an OutSystems Reactive application using javascript. I've successfully set it up — I can select multiple elements, and everything appears to work fine on the front end.

However, I'm encountering two issues:

A. After selecting an item, if I click outside the dropdown, I get the following error in the console: OutSystemsDataGrid.Gridframework.js?WOyzELj9un146azjXkNqyA:9649 Uncaught TypeError: Cannot read properties of undefined (reading 'uniqueId')

B. When I change the multiselect value for the first time and click on save button, it doesn't detect the row as an "Edited Line." It only marks the row as edited on the second change. Instead, the previously edited row gets flagged.

Has anyone else faced this issue or successfully implemented a multiselect dropdown in the Data Grid?

2025-03-12 07-08-15
Nilesh Trivedi

Hi,

"uniqueId" error occurs because the Data Grid loses track of the dropdown context. 

Can you please share your JS here so that we can investigate further?

Thank you.

2024-10-19 11-15-19
Sazid

Many thanks for your quick response. What i am doing i am adding a drop down in grid with visible to false than I am adding following javasciprt on grid initialize event. 

let provider = OutSystems.GridAPI.GridManager.GetGridById($parameters.GridWidgetId).provider;// Get its underlying Wijmo columnlet dropdownWijmoColumn = provider.columns.find(col => col.header === 'Category1');// Extract editor and config from the dropdownconst dropdownEditor = dropdownWijmoColumn?.editor;console.log(dropdownEditor);/*const dropdownConfig = dropdownEditor?.itemsSource ? {    itemsSource: dropdownEditor.itemsSource,    headerPath: dropdownEditor.headerPath,    displayMemberPath: dropdownEditor.displayMemberPath,    selectedValuePath: dropdownEditor.selectedValuePath,    placeholder: 'Select categories',    showSelectAllCheckbox: true,    checkedMemberPath: null} : null;console.log(dropdownConfig);*/let configs = {    itemsSource: ['Accessories', 'Headphones', 'Laptops','Smartphones', 'Printers', 'Storage','Speakers','Smartwatches'], // Static list    headerPath: null, // if using simple array    displayMemberPath: null, // or 'name' if using object array    selectedValuePath: null, // or 'id' if using object array    placeholder: 'Select categories',    showSelectAllCheckbox: true,    checkedMemberPath: null, // optional        valueChanged: function (sender, args) {        // Handle value change and update the grid's data        //let activeGrid = OutSystems.GridAPI.GridManager.GetActiveGrid();        provider.setCellData(rowIndex, columnIndex, sender.checkedItems, true);    }};console.log(configs);let column = new wijmo.grid.Column({    header: 'Category',    binding: 'Sample_Product.Category',     editor: new wijmo.input.MultiSelect(document.createElement('div'), configs)})// Optional: add fake OutSystems metadata for compatibility//column.uniqueId = 'custom_Category1212'; // Custom identifier// When finding OSColumn, fall back to this:console.log(column);provider.columns.push(column);// Optional: Log cellEditEnded events to track changesprovider.cellEditEnded.addHandler(function (s, e) {    const column = s.getColumn(e.col);    const newValue = s.getCellData(e.row, e.col, false);    const oldValue = provider._grid.features.dirtyMark.getOldValue(e.row, column.binding);    // Try to find OSColumn (only works for OutSystems-managed columns)    const OSColumn = provider._grid.getColumns().find(item =>        item.provider && item.provider.index === column.index    );    const isNewValue = oldValue !== newValue;    if (isNewValue) {        if (OSColumn) {            const uniqueId = OSColumn.uniqueId;            provider._grid._triggerEventsFromColumn(e.row, uniqueId, oldValue, newValue);        } else {            console.warn('[Warning] No OSColumn found for column index:', column.index);            // Handle custom column update manually if needed        }    }});// Optional: Log prepareCellForEdit to confirm activationprovider.prepareCellForEdit.addHandler((s, e) => {    console.log('[Edit] Preparing cell for edit - Row:', e.row, 'Col:', e.col);    console.log('[Edit] Cell value before edit:', s.getCellData(e.row, e.col, false));});

2025-03-12 07-08-15
Nilesh Trivedi

Can you please try with this.



let provider = OutSystems.GridAPI.GridManager.GetGridById($parameters.GridWidgetId).provider;


// Configuration for the MultiSelect editor

let configs = {

    itemsSource: ['Accessories', 'Headphones', 'Laptops', 'Smartphones', 'Printers', 'Storage', 'Speakers', 'Smartwatches'],

    placeholder: 'Select categories',

    showSelectAllCheckbox: true,

    checkedMemberPath: null,

    isEditable: true,

    valueChanged: function (sender, args) {

        // Get current cell being edited

        const editCell = provider.grid.hostElement.querySelector('.wj-state-editing');

        const rowIndex = parseInt(editCell?.parentElement.getAttribute('data-row-index'));

        const colIndex = parseInt(editCell?.getAttribute('data-col-index'));

        

        if (rowIndex >= 0 && colIndex >= 0) {

            // Update grid data

            provider.setCellData(rowIndex, colIndex, sender.checkedItems, true);

            

            // Manually mark row as edited

            provider._grid.features.dirtyMark.setOldValue(

                rowIndex, 

                provider.columns[colIndex].binding, 

                provider.getCellData(rowIndex, colIndex, false)

            );

        }

    }

};


// Create the new column

let column = new wijmo.grid.Column({

    header: 'Category',

    binding: 'Sample_Product.Category',

    editor: new wijmo.input.MultiSelect(document.createElement('div'), configs),

    dataType: wijmo.DataType.Object // Important for array values

});


// Add the column to the grid

provider.columns.push(column);


provider.cellEditEnded.addHandler(function (s, e) {

    const column = s.getColumn(e.col);

    const newValue = s.getCellData(e.row, e.col, false);

    const oldValue = provider._grid.features.dirtyMark.getOldValue(e.row, column.binding);

    

    if (JSON.stringify(oldValue) !== JSON.stringify(newValue)) {

        // Force trigger edit event

        provider._grid._triggerEventsFromColumn(

            e.row, 

            'custom_Category', 

            oldValue, 

            newValue

        );

    }

});


document.addEventListener('click', function(e) {

    if (!e.target.closest('.wj-dropdown-panel')) {

        const activeEditor = provider.grid.activeEditor;

        if (activeEditor && activeEditor.hostElement.classList.contains('wj-multiselect')) {

            provider.finishEditing();

        }

    }

});

2024-10-19 11-15-19
Sazid

getting error on value changed have. Is this code working at your enviroment?

2019-11-11 17-10-24
Manish Jawla
 
MVP

Hi @Sazid ,

You can check the below post as well for reference:

https://www.outsystems.com/forums/discussion/85026/outsystems-data-grid-multi-select-dropdown-column/ 

Regards,

Manish Jawla

2024-10-19 11-15-19
Sazid

Thanks @Manish Jawla - I got initial JS code from that post.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.