Nested row with dropdown menu not working

Tags: #<Tag:0x00007f8b1db55b30>
#1

I am using a nested row with some static dropdown. But I am not able to select the Dropdown list getting this below error.
Uncaught TypeError: Cannot read property ‘highlight’ of undefined

`cells: function (row, column, prop) {
         var cellProperties = {};
         //console.log(prop)
         if ( [7,8,9].indexOf(column) > -1 ) {
          if ( this.instance.getData(row,column).length && this.instance.getData(row,column)[row] && !this.instance.getData(row,column)[row][0] ) {

             if ( column === 7 ) {
               cellProperties.data = 'options',
               cellProperties.type = 'dropdown';
               cellProperties.source = ['0224', '0225', '0226', '0227'];
               cellProperties.readOnly = false;
               cellProperties.correctFormat = true;
               cellProperties.className= 'mywindow'
             }
             cellProperties.className = "htRight htMiddle highlight";
             cellProperties.readOnly = false;
             cellProperties.className = "htRight htMiddle editQty";
           }
         }
         
         return cellProperties;
     },`

image%20(1)
image (1).png935×435 55.3 KB

#2

Hi @anil

The issue might be connected to some other settings or a correlation between them.

I’ve used your cells method here https://jsfiddle.net/93odn5ks/ But while using the demo on my Chrome 91 / Windows 10 I do not get any errors in the console.

#3

Thanks I think on Salesforce Aura component it’s not working but

cellProperties.renderer= select_list_renderer;

is working fine for me.

Just wanted to know if there is any way to add a nested __children on dropdown?change.

#4

Our dropdown cell type does not provide nested options out-of-the-box. However, that would be possible by creating your own renderer.

#5

Can we not insert the row based on some button click on the row header?

image

#6

Do you mean you would like to exclude the insert child row (and possibly insert a row above and Insert row below) for some cells in the table?
If so, then yes. You can use the hidden option of the context menu like in this example http://jsfiddle.net/AMBudnik/nLhqcx7m/ where we hide the custom option for col < 2 (column with a lower index than 2).

#7

Thanks for sharing the details but I just want to add a row on some button click.
Instead of right-clicking + insert row/child row below option.

#8

Here http://jsfiddle.net/s9L2y16x/ is a demo for adding a row via button based on cell coordinates

#9

Thanks @aleksandra_budnik, but I need this button on every row header along with collapsible + icon.
example - Add New child row + collapse button/icon

#10

Then I propose to use the demo (to copy the alter method and getSelectedLast) and paste those in the afterGetColHeader hook, which is used to overwrite the default column headers. Also, please remember that the hook adds by default values to all the headers (not only those on the lowest level) - it can be tested here https://jsfiddle.net/ms10y39z/

#11

Will this work the same for the Row Header as well?

#12

Yes, but for rows we have the afterGetRowHeader hook and in the alter method you change the string from insert_col to insert_row.