this is my current screen which has details of list of items in table.
Now there is a requirement where on Add row new row should be added but it should have two text boxes Min & Max and the Column1 should be dropdown selection on whose selection it should add the value.
Question
T12744
Visible to All Users
Hello Abhishek,
Please excuse me but I don't completely follow. Do you wish to create a matrix which is demonstrated on your second screenshot? Would you please elaborate on your question?
If possible, please share a survey JSON showing your current survey layout.
I look forward to your reply.
{ "type": "matrixdropdown", "name": "chemical_composition", "title": "Chemical", "hideNumber": true, "columns": [ { "name": "Min", "title": "Min", "cellType": "text" }, { "name": "Max", "title": "Max" } ], "cellType": "text", "rows": [ { "value": "C", "text": "% C" }, { "value": "Mn", "text": "%Mn" }, { "value": "S", "text": "%S" }, { "value": "P", "text": "%P" }, { "value": "Si", "text": "%Si" }, { "value": "Al", "text": "%Al" }, { "value": "N", "text": "%N" }, "Others" ] }
this is my current json now the user wants to add new rows which should be based on dropdown selection as I showed in my 2nd screenshot.
Is that possible?
anything?
Hello,
Thank you for the update. The JSON you shared contains a Multiple-Choice Matrix. If you wish to allow users to add new rows, you need to use a Matrix Dynamic question. Please let me know if you already tried that. If yes, please clarify whether you have any questions.
For the record: if you wish to display a row title in a first column, you may wish to use an Expression column type.

Example
When a user adds a new matrix row, the survey.onMatrixRowAdded function. You can define a title column text at this point.
Please let me know if this option works for you.
but here i need my row header to be dynamic onthe basis of dropdown choice.
Suppose user selects A from choices[A,B,C] then it should add A row with mix max columns.
Hello,
You can use the survey.onMatrixRowAdded function to define a title column text for a newly added row.
Please refer to the following example: https://plnkr.co/edit/eklXWJOSm5WtqkSJ.
survey.onMatrixRowAdded.add((sender, options) => { options.row.getQuestionByName('rowHeader').value = sender.getQuestionByName('q2').value; });
Let me know if this helps.
Hi Team,
Will this example satisfy my below condition??

I have one dropdown like below and it has the list of rows which can be added in the table below.
Now I want that table to be empty initially and want the user to multiselect from the dropdown and them the rows and columns gets populated.
Like %C Min & Max
%Mn Min & Max should come after selection only
Is that possible???
I want dropdown to be multiselect and also the first two rows dummy should not come
Can you help?
Hello Abhishek,

If you wish to allow users to select multiple options for a Dynamic Matrix cell, consider using a Tagbox column for your Dynamic Matrix question:
A user will be able to add a row and select required options from a dropdown list. Here is an example of a Dynamic Matrix question which first column has a list of selectable options:
{ "logoPosition": "right", "pages": [ { "name": "page1", "elements": [ { "type": "matrixdynamic", "name": "question1", "columns": [ { "name": "Column 1", "cellType": "tagbox", "width": "30%", "choices": [ "Item 1", "Item 2", "Item 3", "Item 4", "Item 5" ] }, { "name": "Column 2", "cellType": "text", "width": "30%" }, { "name": "Column 3", "cellType": "text", "width": "30%" } ], "choices": [ 1, 2, 3, 4, 5 ] } ] } ] }
Please let me know if this configuration works for you.
not in this way I need on multi select it should add all the selected as rows not as header name.
Also what about the static 2 row added
https://plnkr.co/edit/IZiYX9E014pXDNcT?open=lib%2Fscript.js
I want this kind of implementation as we have multiple pages having this kind of implementation so its not working.
Also, I need on multi select dropdown and it should add all the selected as rows not as single row header name.
Hello Abhishek,
I modified your demo and added the condition which checks the matrix question name:
survey.onMatrixRowAdded.add((sender, options) => { if(options.question.name === 'chemical_composition'){ options.row.getQuestionByName('rowHeader').value = sender.getQuestionByName('q2').value; } }); survey.onMatrixRowAdded.add((sender, options) => { if(options.question.name === 'mech_composition'){ options.row.getQuestionByName('mechrowHeader').value = sender.getQuestionByName('q3').value; } });
https://plnkr.co/edit/dhN1h7FKRIcVFSRk?open=lib%2Fscript.js
Please let me know if it works for you.
Hi Jane,
This works thanks.
Need one more help.
I need a multi select dropdown and it should add all the selected as rows not as single row header name.
Like in the above images you see %C , %Mn are seperate row right but on single click and add we have added them.
But i need a multiselect and it should add as rows not a single rowheader name
Hello Abhishek,
Thank you for the update. To get a list of selected options, iterate through QuestionTagboxModel's value items. Call the addRow function to create rows for a Dynamic Matrix question.
Should you have any questions or require further assistance, we are here to help.
survey.onMatrixRowAdded.add((sender, options) => { var tagbox = sender.getQuestionByName('chemical_properties').value; if (options.question.name === 'chemical_composition') { tagbox.forEach(function (choice) { //console.log(choice); options.row.getQuestionByName('chemicalRowHeader').value = choice; }); } });
this way??
Hello Abhishek,
The resulting code depends on what you're trying to achieve.
If you wish to append a new Dynamic Matrix row once a user adds a new item to the Multi-Select Dropdown, you can subscribe to the survey.onValueChanged and call the addRow function to create a Dynamic Matrix row.
You can refer to the SurveyJS Form Library API for more information on available functions and properties and write the code which completes the task:
If you have further questions or require any assistance, we are always here to help.
Currently when I use above code with textbox it performs as the image attached above instead of adding separate row for each selection it is adding into one row header only.
I need like below attached image.
Do let me know what changes are required from below code?
Hi Jane,
Can you suggest anything for above query?
Also I saw the remove button is not working properly
Hi Abhishek,
The Add Row button allows you to add a single row at a time. Do you wish to add as much rows as the number of selected Tag Box items? If so, I may recommend that you add a new matrix row as soon as a user selects another Tagbox item.
For this, subscribe to the survey.onValueChanged function and call the addRow function to create a Dynamic Matrix row.
The following demo shows a simple usage:
const json = { "logoPosition": "right", "pages": [ { "name": "page2", "elements": [{ type: "tagbox", name: "chemical_properties", choices: ['item4', 'item5', 'item6'] }, { "type": "matrixdynamic", "name": "chemical_composition", "rowCount": 0, "hideNumber": true, "columns": [ { "name": "chemRowHeader", "title":" ", "cellType": "expression" }, { "name": "Min", "title": "Min", "cellType": "text" }, { "name": "Max", "title": "Max" } ], "cellType": "text" } ] } ] } survey.onValueChanged.add((sender, options) => { if(options.name === 'chemical_properties'){ let matrix = sender.getQuestionByName('chemical_composition'); if(!!matrix) { matrix.addRow(); matrix.setRowValue(matrix.visibleRows.length-1, { 'chemRowHeader' : options.value.pop() }) } }});
Example

This example shows a basic usage; you may additionally need to remove Matrix rows if a user removes corresponding Tag Box items. To remove a matrix row, use the removeRow function.
Please let me know if you have further questions.
Thanks Jane,
This example shows a basic usage; you may additionally need to remove Matrix rows if a user removes corresponding Tag Box items. To remove a matrix row, use the removeRow function.
But I need to remove the element from matrix as well as the selection from dropdown can you give one example or sample?
Hello Abhishek,
To remove a matrix row, use the removeRow function.
To remove an element from a TagBox, first get an object with a selected choices using the TagBox'es value property, remove an unnecessary element from this object, and assign a new object to the value property.
Let me know if any questions remains.
That works thanks Jane
function getValueFromApi(props, callback) { let grade = props[0]; let chemistryType = props[1]; let apiUrl = location.origin + "/StdChemistry/" + grade + "/" + chemistryType; fetch(apiUrl) .then((response) => { if (!response.ok) { throw new Error(`HTTP error! Status: ${response.status}`); } return response.json(); }) .then((data) => { survey.mergeData({ chemical_composition: { C: { Min: data.scarbonPctMin, Max: data.scarbonPctMax, }, Mn: { Min: data.smanganesePctMin, Max: data.smanganesePctMax, }, S: { Min: data.ssulphurPctMin, Max: data.ssulphurPctMax, }, P: { Min: data.sphosphorusPctMin, Max: data.sphosphorusPctMax, }, Si: { Min: data.ssiliconPctMin, Max: data.ssiliconPctMax, }, Al: { Min: data.saluminiumPctMin, Max: data.saluminiumPctMax, }, N: { Min: data.snitrogenPctMin, Max: data.snitrogenPctMax, } }, }); }); } Survey.FunctionFactory.Instance.register('getValueFromApi', getValueFromApi,true);
Will this work for assigning values to the table as we took the example above
Hello Abhishek,
I see that you wish to call the
survey.mergeData
in a custom function. This should basically work.For the record: use the
this.survey
to access a survey instance from a custom function:function getValueFromApi(props, callback) { let survey = this.survey; //... }
Please let me know if you have any questions.
HI Jane,

If you see below is my table having dynamic rowHeader
When Im trying to assign values to them from API call its not working
function getValueFromApi(props, callback) { let survey = this.survey; let grade = props[0]; let chemistryType = props[1]; let apiUrl = location.origin + "/StdChemistry/" + grade + "/" + chemistryType; fetch(apiUrl) .then((response) => { if (!response.ok) { throw new Error(`HTTP error! Status: ${response.status}`); } return response.json(); }) .then((data) => { survey.mergeData({ chemical_composition: { %C: { Min: data.scarbonPctMin, Max: data.scarbonPctMax, }, %Mn: { Min: data.smanganesePctMin, Max: data.smanganesePctMax, }, %S: { Min: data.ssulphurPctMin, Max: data.ssulphurPctMax, }, %P: { Min: data.sphosphorusPctMin, Max: data.sphosphorusPctMax, }, %Si: { Min: data.ssiliconPctMin, Max: data.ssiliconPctMax, }, %Al: { Min: data.saluminiumPctMin, Max: data.saluminiumPctMax, }, %N: { Min: data.snitrogenPctMin, Max: data.snitrogenPctMax, } }, }); }); } Survey.FunctionFactory.Instance.register('getValueFromApi', getValueFromApi,true);
I want to assing the values to First Two columns only can you help?
Hello,
The code looks fine to me.
You can set the data incorrectly, wrong question, columns or rows names or
survey.mergeData
is never calls.survey.mergeData
works correctly. Call your code of updated the question value on button click outside the surveysurvey.mergeData
function to make sure that the function is actually executed.Thank you,
Andrew
SurveyJS Team
Hi Andrew,
The console log is printed but the data is not loaded.
Below is my JSON which has first column has dynamic.
"elements": [ { "type": 'dropdown', "name": 'mech_properties_dropdown', "placeholder": "Select Mechanical Property...", "title": " ", "hideNumber": true, "choicesByUrl": { "url": location.origin + "/Enquiry/PropertyMaster/Mechanical Properties/CR", "valueName": "name", "titleName": "name" }, "showSelectAllItem": true, "hideSelectedItems": true }, { "type": "matrixdynamic", "name": "mechanical_properties", "rowCount": 0, "title": " ", "hideNumber": true, "allowRemoveRows": false, "columns": [ { "name": "mechRowHeader", "title": " ", "cellType": "expression" }, { "name": 'Min', "title": 'JSW Min', "cellType": 'text', }, { "name": 'Max', "title": 'JSW Max', }, { "name": 'CustMin', "title": 'Cust Min', "cellType": 'text', }, { "name": 'CustMax', "title": 'Cust Max', "cellType": 'text', }, { "name": 'MutuallyAgreedMin', "title": 'Mutually agreed Min', "cellType": 'text', }, { "name": 'MutuallyAgreedMax', "title": 'Mutually agreed Max', "cellType": 'text', } ], "cellType": "text" } ],
survey.onMatrixRowAdded.add((sender, options) => { if (options.question.name === 'mechanical_properties') { options.row.getQuestionByName('mechRowHeader').value = sender.getQuestionByName('mech_properties_dropdown').value; } });
Below is the API call which will use mergeData
function getMechPropertyValuesFromApi(props, callback) { let survey = this.survey; let grade = props[0]; let apiUrl = location.origin + "/AdminMechanicalProperty/" + grade; fetch(apiUrl) .then((response) => { if (!response.ok) { throw new Error(`HTTP error! Status: ${response.status}`); } return response.json(); }) .then((data) => { console.log(data); survey.mergeData({ "mechanical_properties": { "YS in Mpa": { Min: data.sysMpaMin, Max: data.sysMpaMax, }, "UTS in Mpa": { Min: data.stsMpaMin, Max: data.stsMpaMax, }, "% El with Guage Length": { Min: data.selPctMin, Max: data.selPctMax, } }, }); }); } Survey.FunctionFactory.Instance.register('getMechPropertyValuesFromApi', getMechPropertyValuesFromApi, true);
Can anyone help??
Hello,
You set the matrix dynamic value incorrectly. It's value is an array.
Here is the example.
Thank you,
Andrew
SurveyJS Team
Hi Andrew,
Thanks for the correction.
But here the matrix row will be added dynamically so we cannot set that like this seems to be static only.
I means there can be 2 row or more than two also on the basis of dropdown selection.
I want whenever I add a new row it should set the values for these.
Also, i need remove row also.
Hello,
You can use matrix.addRow and matrix.removeRow functions.
As another option. You can get the previous matrix value, modify it as you need and then set it back:
let val = matrix.value; if(!Array.isArray(val)) val = []; //Delete the third row val.splice(2, 1); //Add a new row into the end of array val.push({ min: 1, max: 3}); //Insert as a first row val.push({ min: 1, max: 3}); matrix.value = val;
Thank you,
Andrew
SurveyJS Team