Dynamically change the elements in a dropdown column

Tags: #<Tag:0x00007f8b28ec8b90>
#1

Hi,

I need to dynamically change the values in a dropdown column based on some user action. As you can see in my column definition, the Project_name field is of dropdown type and the source is an array (this.projectDropdown). However, even if i change the elements in my array, the same is not reflected in the dropdown. Could you please help me on how i can reload the dropdown with a different set of data elements?

I tried render() and updateSettings(), but it did not help.

// My column definition. The grid have 60+ columns, added only few below for reference.

Cols = [{data:’’,readOnly:true,colWidths:50},
{data: ‘resource_name’, readOnly:true, colWidths:150},
{data: ‘resource_type’, readOnly:true},
{data: ‘project_name’,readOnly:true, type: ‘autocomplete’, strict:true, allowInvalid:false, trimDropdown: false, source:this.projectDropDown,colWidths:230},
{data: ‘project_manager’, readOnly:true, colWidths:100},
{data: ‘week_1’, type:‘numeric’,allowInvalid:false},
{data: ‘week_2’, type:‘numeric’,allowInvalid:false},
{data: ‘week_3’, type:‘numeric’,allowInvalid:false},
{data: ‘week_4’, type:‘numeric’,allowInvalid:false},
{data: ‘m_1’, type:‘numeric’,allowInvalid:false},

hotSettings: Handsontable.GridSettings = {
columns:this.Cols,
minCols:65,
width: ‘100%’,
fixedColumnsLeft: 5,
colHeaders: [ ‘Action’, ‘Resource Name’,‘Type’,‘Project/Demand/Admin Task’,‘Manager’, ‘Wk1’,‘Wk2’, ‘Wk3’, ‘Wk4’, ‘MAY’, ‘Wk1’,‘Wk2’, ‘Wk3’, ‘Wk4’, ‘JUN’, ‘Wk1’,‘Wk2’, ‘Wk3’, ‘Wk4’, ‘Wk5’, ‘JUL’, ‘Wk1’,‘Wk2’, ‘Wk3’, ‘Wk4’, ‘AUG’, ‘Wk1’,‘Wk2’, ‘Wk3’, ‘Wk4’, ‘SEP’, ‘Wk1’,‘Wk2’, ‘Wk3’, ‘Wk4’, ‘Wk5’, ‘OCT’, ‘Wk1’,‘Wk2’, ‘Wk3’, ‘Wk4’, ‘NOV’, ‘Wk1’,‘Wk2’, ‘Wk3’, ‘Wk4’, ‘DEC’, ‘Wk1’,‘Wk2’, ‘Wk3’, ‘Wk4’, ‘Wk5’, ‘JAN’, ‘Wk1’,‘Wk2’, ‘Wk3’, ‘Wk4’, ‘FEB’, ‘Wk1’,‘Wk2’, ‘Wk3’, ‘Wk4’, ‘MAR’, ‘Wk1’,‘Wk2’, ‘Wk3’, ‘Wk4’, ‘Wk5’, ‘APR’ ],

};

Please find the code snippet for UpdateSettings() below,

   // reset the source array and fill with new  elements
    this.projectDropDown = [{}]  ;
    this.projectDropDown.push("--mySelect--")  ;
    this.projectDropDown.push("My proj");

    hotInstance.updateSettings({
        columns: this.Cols,
        undo:false,
    });
	
	hotInstance.render()

Appreciate your help!

Regards
Prasanth

#2

Hi @prasanth.sivakumar

I used your code here https://jsfiddle.net/r39vd7tL/ and it works as expected. I have placed some helpful comments in the code.

You just need to remember to take off the readOnly state of the column if you want to use the dropdown as the readOnly state blocks the ability to show the list of choices.

#3

Thanks you Aleksandra…

setCellMeta seems to be a better option for me rather than updateSettings… So basically i will have to loop through each row and call setCellMeta… right? Or any easy way to apply this for a column rather than a cell?

Regards
Prasanth

#4

There is only a bulk meta getter, setter works only per cell.
But you call the render() method only once when you add all the setCellMeta.

You can also use batching to test if it changes the performance of the application https://handsontable.com/docs/batch-operations/

#5