When we are setting celltype as 'default' (default celltype = dropdown) then this property 'availableInMatrixColumn' not working. While class name to which I have added property is dropdown.
Re: Custom property for Dynamic Matrix Column
Answers approved by surveyjs Support
created 6 days ago
(modified 6 days ago)
Hi,
Thank you for sharing the code. To access a custom property for a Dropdown matrix column, please explicitly specify the "dropdown" cell type:
JSON{
"pages": [
{
"name": "page1",
"elements": [
{
"type": "matrixdropdown",
"name": "question1",
"columns": [
{
"name": "Column 1",
"cellType": "dropdown"
},
{
"name": "Column 2"
},
{
"name": "Column 3"
}
],
"choices": [
1,
2,
3,
4,
5
],
"rows": [
"Row 1",
"Row 2"
]
},
{
"type": "dropdown",
"name": "question2",
"choices": [
"Item 1",
"Item 2",
"Item 3"
]
}
]
}
],
"headerView": "advanced"
}
For the record: to register a custom property for a matrix column, it is sufficient to use the Serializer API only. No need to modify a property grid editor definition.
JavaScriptSerializer.addProperty('dropdown', {
category: 'Source',
name: 'listId',
displayName: 'List',
visibleIndex: 0,
availableInMatrixColumn: true,
choices: allList.map(({ ListID, ListName }) => ({ value: ListID, text: ListName })),
onSetValue(surveyElement, value) {
// You can perform required checks or modify the `value` here
// ...
// Set the `value`
if (!surveyElement) {
return;
}
surveyElement.setPropertyValue('listId', value);
const choicesByUrlProp = surveyElement.getPropertyValue('choicesByUrl');
if (choicesByUrlProp) {
choicesByUrlProp.setPropertyValue('url', `ListEntry/ListID/${value}/All`);
choicesByUrlProp.setPropertyValue('valueName', 'ListEntryID');
choicesByUrlProp.setPropertyValue('titleName', 'DisplayValue');
}
// surveyElement.setPropertyValue('choicesByUrl', choicesByUrlProp);
// console.log(choicesByUrlProp);
},
});
Let me know if you have any further questions.
Comments
(2)
TG
5 days ago
Thank You,
This is working fine now but I just have a small doubt that by default the cellType is dropdown only in matrix column then what's the need to set celltype explicitly.
And the dropdown column with default cellType doesn't behave like normal dropdown.
Hello,
The dropdown cell type is enabled by default at the level of the entire Multi-Select Matrix. With such a configuration, each column which uses the default cell type inherits the dropdown cell type and choices defined at the level of the matrix. If you wish to be able to customize settings of a specific column, you may want to explicitly specify the cell type for the column and further adjust required settings of this individual column.
If you're using SurveyJS Creator, I may suggest that you override the default matrix configuration and enable the dropdown cell type for individual columns. To override the default toolbox question configuration, use the settings.toolbox.defaultJSON configuration object. For instance:
JavaScriptimport { settings } from "survey-creator-core";
settings.toolbox.defaultJSON.matrixdropdown = {
columns: [
{
name: "Column 1",
cellType: "dropdown"
},
{
name: "Column 2",
cellType: "dropdown"
},
{
name: "Column 3",
cellType: "dropdown"
},
]
};
I hope this information helps. Let us know if you have any further questions.
Hello Tanu,
Please share the code which you use to register a custom property. Additionally, share a sample matrix definition.
Thank you
const propertiesDef = SurveyCreator.SurveyQuestionEditorDefinition.definition; // Add tab for a column with cellType = default propertiesDef['matrixdropdowncolumn@default'].tabs.push({ name: 'Source', index: 0 }); Serializer.addProperty('dropdown', { category: 'Source', name: 'listId', displayName: 'List', visibleIndex: 0, availableInMatrixColumn: true, choices: allList.map(({ ListID, ListName }) => ({ value: ListID, text: ListName })), onSetValue(surveyElement, value) { // You can perform required checks or modify the `value` here // ... // Set the `value` if (!surveyElement) { return; } surveyElement.setPropertyValue('listId', value); const choicesByUrlProp = surveyElement.getPropertyValue('choicesByUrl'); if (choicesByUrlProp) { choicesByUrlProp.setPropertyValue('url', `ListEntry/ListID/${value}/All`); choicesByUrlProp.setPropertyValue('valueName', 'ListEntryID'); choicesByUrlProp.setPropertyValue('titleName', 'DisplayValue'); } // surveyElement.setPropertyValue('choicesByUrl', choicesByUrlProp); // console.log(choicesByUrlProp); }, }); // Add a property into this tab propertiesDef['matrixdropdowncolumn@dropdown'].properties.push({ name: 'listId', tab: 'Source' });