Question T18176
Visible to All Users

How to add a checkbox type in general tab

created 8 months ago
Code
Survey.Serializer.addProperty("survey", { name: "competitionId", category: "general", visibleIndex: 4, type:"checkbox", displayName: "Select competition", choices: [ { value: "value1", text: "value1" }, { value: "value2", text: "value2" }, { value: "value3", text: "value3" }, ], onSetValue: (survey, value) => { survey.setPropertyValue("competitionId", value); } });

This instead adding of checkbox create dropdown Why

I also use only one checkbox highlighted red text in below image

Answers approved by surveyjs Support

created 8 months ago

Hello,
By default, a property grid uses a multi-select dropdown/tagbox to represent a multi-select property type. If a tagbox/multi-select is suitable, I would recommend that you change a property's type to multiplevalues.

JavaScript
Survey.Serializer.addProperty("survey", { name: "competitionId", category: "general", visibleIndex: 4, type:"multiplevalues", displayName: "Select competition", choices: [ { value: "value1", text: "value1" }, { value: "value2", text: "value2" }, { value: "value3", text: "value3" }, ], });

Clipboard-File-1.png

If you wish to create a Checkbox property type, consider registering a custom property grid editor.

JavaScript
import { Serializer } from "survey-core"; import { PropertyGridEditorCollection } from "survey-creator-core"; Serializer.addProperty("survey", { name: "competitionId", category: "general", visibleIndex: 4, type:"mycheckbox", displayName: "Select competition" }); PropertyGridEditorCollection.register({ fit: function(prop) { return prop.type === "mycheckbox"; }, getJSON: function(obj, prop,options) { return { type: "checkbox", choices: [ { value: "value1", text: "value1" }, { value: "value2", text: "value2" }, { value: "value3", text: "value3" }, ] } } });

Clipboard-File-2.png
Let me know if you require further assistance.