Is it possible to add dynamic matrix column wise

[ashygk]

Are you requesting a feature, reporting a bug or ask a question?

Question/Feature

What is the current behavior?

Able to add dynamic matrix row wise. is there a possibility to add them column wise?

What is the expected behavior?

Add the dynamic matrix questions column wise

How would you reproduce the current behavior (if this is a bug)?

Provide the test code and the tested page URL (if applicable)

Tested page URL:

Test code

your_code_here

Specify your

• browser: google chrome
• browser version:
• surveyjs platform (angular or react or jquery or knockout or vue): angular 5
• surveyjs version: 1.0.22

[andrewtelnov]

@ashygk column has properties: visibleIf and enableIf. The column will be still visible, but questions inside its cells may be invisible or disabled.
To get the column value of the current row you may use: {row.yourColumnName}

Thank you,
Andrew

[ashygk]

I really don't get it. Please find the below json.. The survey has a dynamic matrix.. I want the questions to be displayed left side in column wise (date, Amb device, amb distance...) and whenever I click add date, new columns should be added

{
pages: [
{
name: "page1",
elements: [
{
type: "matrixdynamic",
name: "Current Level of Function",
titleLocation: "hidden",
columns: [
{
name: "Date",
title: "Date",
cellType: "text",
inputType: "date"
},
{
name: "AmbDevice",
title: "Amb Device",
cellType: "dropdown"
},
{
name: "AmbDistance",
title: "Amb Distance",
cellType: "text"
},
{
name: "Amb Assistance\t",
cellType: "dropdown"
},
{
name: "W/C Mobility\t",
cellType: "dropdown"
},
{
name: "Bed Mobility\t",
cellType: "dropdown"
},
{
name: "Standing Tolerance\t",
cellType: "text"
},
{
name: "Stairs",
cellType: "text"
},
{
name: "Balance",
cellType: "dropdown"
},
{
name: "UE Strength\t",
cellType: "text"
},
{
name: "Cognitive Function\t",
cellType: "comment"
}
],
choices: [
1
],
cellType: "comment",
rowCount: 1,
confirmDelete: true,
addRowText: "Add Date +",
removeRowText: "Remove"
}
]
}
],
showQuestionNumbers: "off"
}

[andrewtelnov]

@ashygk Arh, you want to add a new column on "Add Date +".
It could be easily done via code

var column = matrixquestion.addColumn("newColumn", "My new Column");
//set column properties

However, there is no a button for it.
Do you need to add rows as well?

Thank you,
Andrew

[ashygk]

[ashygk]

i wanted to behave like this..where it add all columns when add date is selected..similar to dynamic matrix ..but to be displayed vertically

[andrewtelnov]

@ashygk We do not have this functionality yet.
So, you are using matrix dropdown and you want to add a column, where header has the cell question as well.
Will PanelDynamic question work for you for now?

Thank you,
Andrew

[ashygk]

Even panel dynamic questions doesn't add question column wise.. They do in the row wise

[andrewtelnov]

@ashygk In fact, it is a matrix dynamic where columns and rows are swapt.
Theoretically, it can be just one property. Of course rendering will be changed completly.
In your UI, where do you have remove column button?

Thank you,
Andrew

[ashygk]

Under the last row for each column

[andrewtelnov]

@ashygk I have started to work on this functinality. I hope it will be available on the next week.
Could you please provide me with your json and ideally with sample data (couple rows), so I could make a good example?

Thank you,
Andrew

[andrewtelnov]

@ashygk You may see the progress here: #1116

Thank you,
Andrew

[ashygk]

Thank you so much @andrewtelnov . I really appreciate your help in implementing this.

[ashygk]

Please use the below json for example:

{
pages: [
{
name: "page1",
elements: [
{
type: "matrixdynamic",
name: "Current Level of Function",
titleLocation: "hidden",
columns: [
{
name: "Date",
title: "Date",
cellType: "text",
inputType: "date"
},
{
name: "AmbDevice",
title: "Amb Device",
cellType: "dropdown"
},
{
name: "AmbDistance",
title: "Amb Distance",
cellType: "text"
},
{
name: "Amb Assistance\t",
cellType: "dropdown"
},
{
name: "W/C Mobility\t",
cellType: "dropdown"
},
{
name: "Bed Mobility\t",
cellType: "dropdown"
},
{
name: "Standing Tolerance\t",
cellType: "text"
},
{
name: "Stairs",
cellType: "text"
},
{
name: "Balance",
cellType: "dropdown"
},
{
name: "UE Strength\t",
cellType: "text"
},
{
name: "Cognitive Function\t",
cellType: "comment"
}
],
choices: [
1
],
cellType: "comment",
rowCount: 1,
confirmDelete: true,
addRowText: "Add Date +",
removeRowText: "Remove"
}
]
}
],
showQuestionNumbers: "off"
}

[andrewtelnov]

@ashygk FYI: The feature has been implemented.
Could you please provide a sample data, one two records, so our example would look good?

Thank you,
Andrew

[ashygk]

{ pages: [ { name: "page1", elements: [ { type: "matrixdynamic", name: "Current Level of Function", titleLocation: "hidden", columns: [ { name: "Date", title: "Date", cellType: "text", inputType: "date" }, { name: "AmbDevice", title: "Amb Device", cellType: "dropdown" }, { name: "AmbDistance", title: "Amb Distance", cellType: "text" }, { name: "Amb Assistance\t", cellType: "dropdown" }, { name: "W/C Mobility\t", cellType: "dropdown" }, { name: "Bed Mobility\t", cellType: "dropdown" }, { name: "Standing Tolerance\t", cellType: "text" }, { name: "Stairs", cellType: "text" }, { name: "Balance", cellType: "dropdown" }, { name: "UE Strength\t", cellType: "text" }, { name: "Cognitive Function\t", cellType: "comment" } ], choices: [ 1 ], cellType: "comment", rowCount: 1, confirmDelete: true, addRowText: "Add Date +", removeRowText: "Remove" } ] } ], showQuestionNumbers: "off" }

[andrewtelnov]

@ashygk I have got the survey json :) I would love to have a json result for one-two columns.
survey.data = {"Current Level of Function" : [
{"AmbDevice": "something",...},
{...}
]}
And there is no choices for amdDevices and other dropdown in your json :(

Thank you,
Andrew

[ashygk]

Survey Result: {"Current Level of Function":[{"Date":"2018-05-01","AmbDistance":"34","Amb Assistance\t":"D","Standing Tolerance\t":"high","UE Strength\t":"no ","Cognitive Function\t":"no function"},{"Date":"2018-05-09","AmbDistance":"23","Amb Assistance\t":"MAX","Standing Tolerance\t":"low","UE Strength\t":"yes","Cognitive Function\t":"blah blah"}]}

[ashygk]

surveydata : { pages: [ { name: "page1", elements: [ { type: "matrixdynamic", name: "Current Level of Function", titleLocation: "hidden", columns: [ { name: "Date", title: "Date", cellType: "text", inputType: "date" }, { name: "AmbDistance", title: "Amb Distance", cellType: "text" }, { name: "Amb Assistance\t", cellType: "dropdown", choices: [ "D", "MAX", "MOD", "MIN" ] }, { name: "Standing Tolerance\t", cellType: "text" }, { name: "UE Strength\t", cellType: "text" }, { name: "Cognitive Function\t", cellType: "comment" } ], choices: [ 1 ], cellType: "comment", rowCount: 1, confirmDelete: true, addRowText: "Add Date +", removeRowText: "Remove" } ] } ], showQuestionNumbers: "off" }

[andrewtelnov]

@ashygk The release is out. Here is the demo

Thank you,
Andrew

[ashygk]

Thank you @andrewtelnov

[ashygk]

Hi, We have updated our applications, package.json to point to survey-angular: "1.0.25" to include the above functionality.
The survey doesn't get loaded and error pops up while rendering when Survey.SurveyNG.render is called.
Error below:
core.js:1448 ERROR TypeError: Cannot read property 'children' of null
at Object.render (survey.angular.js:1268)
at Function.SurveyNG.render (survey.angular.js:8121)
at DecisionTreeComponent.generateSurveyFromDefinition (decision-tree.component.ts:122)
at SafeSubscriber.eval [as _next] (decision-tree.component.ts:96)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:240)
at SafeSubscriber.next (Subscriber.js:187)
at Subscriber._next (Subscriber.js:128)
at Subscriber.next (Subscriber.js:92)
at MapSubscriber._next (map.js:85)
at MapSubscriber.Subscriber.next (Subscriber.js:92)

[ashygk]

SurveyData : { pages: [ { name: "page1", elements: [ { type: "matrixdynamic", name: "CurrentLevelOfFunction", titleLocation: "hidden", columns: [ { name: "Date", cellType: "text", inputType: "date" }, { name: "AmbDevice", title: "Amb Device", cellType: "dropdown", choices: [ { value: "StandardWalker", text: "Standard Walker" }, "WheelChair", { value: "QuadCane", text: "Quad Cane" }, "Crutches", "Cane" ] }, { name: "AmbDistance", title: "Amb Distance", cellType: "text" }, { name: "AmbAssistance", title: "Amb Assistance", cellType: "dropdown", choices: [ "IND", "MOD", "MAX", "MIN", "DEP", "SBA", "I" ] }, { name: "W/CMobility", title: "W/C Mobility", cellType: "dropdown", choices: [ "IND", "MOD", "MAX", "MIN", "DEP", "SBA", "I" ] }, { name: "StandingTolerance", title: "Standing Tolerance", cellType: "text" }, { name: "BedMobility", title: "Bed Mobility", cellType: "dropdown", choices: [ "IND", "MOD", "MAX", "MIN", "DEP", "SBA", "I" ] }, { name: "ToiletTransfer", title: "Toilet Transfer", cellType: "dropdown", choices: [ "IND", "MOD", "MAX", "MIN", "DEP", "SBA", "I" ] }, { name: "ROM", cellType: "text" }, { name: "FineMotor", title: "Fine Motor", cellType: "text" } ], columnsLocation: "vertical", choices: [ 1, 2, 3, 4, 5 ], rowCount: 1, addRowLocation: "top", addRowText: "ADD CLOF +" } ] } ], showTitle: false, showQuestionNumbers: "off", questionErrorLocation: "bottom" }

[andrewtelnov]

@ashygk Unfortunately, I could not reproduce it :(
Here is your json in plunker, angular, v1.0.25

Thank you,
Andrew

[ashygk]

We have moved directly from survey-angular: 1.0.0 to 1.0.25 directly.. Is there any dependency?

[andrewtelnov]

@ashygk the current version successful work with json created for the first release, more than two years ago.
Do you use any events?
It is very likely the bug, but we have to reproduce it on our side to be able to fix it.

Thank you,
Andrew

[ashygk]

The json is created with the online builder, which is using 1.0.25

Yes, we are using events for onComplete, onAfterRenderQuestion, onTextMarkdown, onUpdateQuestionCssClasses. That is all

[andrewtelnov]

Could you please comment onAfterRenderQuestion, and then onTextMarkdown?

Thank you,
Andrew

[ashygk]

Tried, but no luck

[ashygk]

As per my analysis, function render(vnode, parent, callback) in the survey.angular.js, the parent is null which is why there is no html collection in the children and raising error.
div#Current Problem accessKey : "" align : "" assignedSlot : null attributeStyleMap : StylePropertyMap {size: 0} attributes : NamedNodeMap {0: id, id: id, length: 1} autocapitalize : "" baseURI : "https://blah.blah.us:4200/" childElementCount : 0 childNodes : NodeList [] children : HTMLCollection [] classList : DOMTokenList [value: ""] className : "" clientHeight : 0

[ashygk]

The above is for different survey "Current Problem" which has parent as above

[andrewtelnov]

@ashygk Could you try to use non minimized/developer version and copy here the stack in our library. So we can get some ideas?

Thank you,
Andrew

[andrewtelnov]

Is any way, we can reproduce this problem on a page?

Thank you,
Andrew

[ashygk]

Not sure, just happens when the survey has this new functionality..as all the other surveys are working fine

[ashygk]

the typeof elementid is still string.. there is an issue with document.getelementbyid(elementid), not sure why it is returning null.

var SurveyNG = /** @class */ (function () {
    function SurveyNG() {
    }
    SurveyNG.render = function (elementId, props) {
        var element = typeof elementId === "string"
            ? document.getElementById(elementId)
            : elementId;
        __WEBPACK_IMPORTED_MODULE_2_react_dom__["render"](__WEBPACK_IMPORTED_MODULE_1_react__["createElement"](__WEBPACK_IMPORTED_MODULE_4__react_reactSurvey__["a" /* Survey */], __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __assign */]({}, props)), element);
    };
    return SurveyNG;
}());

[andrewtelnov]

You are saying it works for other jsons. It doesn’t make sense to me :(

Thank you,
Andrew

[ashygk]

Yes, it works for other jsons. Not just this one.

[ashygk]

Current Problem survey works.
Current Level of FunctionCS doesn't. because getElementbyid is returning null from survey.angular.js

[andrewtelnov]

You may pass HtmlElement into the Survey constructor. Could you try it please?

Thank you,
Andrew

[ashygk]

Not sure which survey constructor you are talking about

[andrewtelnov]

You may pass element Id or element itself. If it is an element, then there is no need for calling getElementById.

[ashygk]

We are not calling it..it is internally being called in the survey.angular.js render function.

We are just making call Survey.SurveyNG.render(this.surveyName, { model: this.survey, css: cssConfig }); from our application.. that's it

[andrewtelnov]

@ashygk Sorry for being confusing. I'm talking about this code:

  let htmlEl = document.getElementById("surveyElement")
  //raise error if htmlEl is null
  Survey.SurveyNG.render(htmlEl, {
    model: survey
  });

Here is the updated plunker

Thank you,
Andrew

[ashygk]

Copied the above snippet. htmlEl is returning null for this survey

[andrewtelnov]

@ashygk Then the problem somewhere in your code. SurveyJS starts to work after the render function is called. You just pass into the render function an invalid argument.
We should do a better job and raise an error that renderedElement parameter is invalid. I will add it into our TODO list.

Thank you,
Andrew

[ashygk]

Ok. Also, i tried to include a dynamic matrix (vertical columns) in a separate survey. the survey still has columns showing horizontally. Changed the property of columnsLocation to vertical..works fine in online survey builder, not in our application

[ashygk]

[ashygk]

And, addRowLocation is set to top, but still is at the bottom

[andrewtelnov]

@ashygk I am afraid you are using the old version of SurveyJS for some reason on this page. Could you please recheck it? Unfortunately, I do not see any other reason.

Thank you,
Andrew

[ashygk]

Does newer version of surveyjs need knockout? I get these errors when i update to latest.

ERROR in node_modules/survey-angular/survey.angular.d.ts(606,14): error TS2304: Cannot find name 'KnockoutObservable'.
node_modules/survey-angular/survey.angular.d.ts(607,17): error TS2304: Cannot find name 'KnockoutComputed'.
node_modules/survey-angular/survey.angular.d.ts(608,13): error TS2304: Cannot find name 'KnockoutComputed'.
node_modules/survey-angular/survey.angular.d.ts(609,19): error TS2304: Cannot find name 'KnockoutObservable'.

I have installed knockout using npm i knockout but still get the same errors

[andrewtelnov]

@ashygk You do not need knockout, it is already inside the library.
Have you tried our quick start repo for angular
and for angular cli

Thank you,
Andrew

[ashygk]

Was this made mandatory after surveyjs 1.0.0?

[andrewtelnov]

@ashygk Yes, we moved from pReact to knockout after v1.0.0 release, during a lot issues with pReact.
However, knockout and before pReact has been included into the library and you should not see any difference.

Thank you,
Andrew

[ashygk]

Included "types": [ "knockout" ] in tsconfig.app.json. Works now. I see the new functionality.
You can close this thread :)

[andrewtelnov]

@ashygk I just talked to the guys. You are right. Angular2+ requires knockout typings. I did not know about it.

Thank you,
Andrew

[andrewtelnov]

@ashygk We have added the following issue

Thank you,
Andrew

[Huuvinh94]

Hi @andrewtelnov
survey.onValueChanged.add((sender, options) => {
.....
listMatrix.forEach((item, index) => {
sender.getQuestionByName(name).addColumn('matrix-col-' + index, item.value);
//Check from type text Ex: ( item.visibleIf = '{nameTex} = item.value' )
sender.getQuestionByName(name).columns[index].setPropertyValue('visibleIf', item.visibleIf);
sender.getQuestionByName(name).columns[index].choices = [''];
sender.getQuestionByName(name).columns[index].cellType = 'checkbox';
});
})
I am create question with type matrixdropdown and add column dynamic (function addColumn()), but when i add function setPropertyValue() then not working :(
Please help me!