PanelModel
A class that describes the Panel container element.
A panel can contain questions and other panels. Refer to the following help topic for an illustration: Survey Structure.
Inherited from the following class(es):
Properties
Methods
Adds a survey element (question or panel) to this panel/page. Returns true
if the element was added successfully; false
otherwise.
- Type:
- (element: IElement, index?: number) => boolean
- Parameters:
-
element, type: IElement ,
A survey element to add.
index, type: number ,A desired index of this element in the
elements
array.
- Implemented in:
- PanelModelBase
- See also:
- addNewQuestion * , addNewPanel
Creates a new panel and adds it to the end of the elements
array.
This method returns null
if the panel cannot be created or added to this panel/page; otherwise, the method returns the created panel.
- Type:
- (name?: string) => PanelModel
- Parameters:
-
name, type: string ,
A panel name.
- Implemented in:
- PanelModelBase
- See also:
- elementsup * , addElement
Creates a new question of a given type and adds it to the elements
array at a specified index.
This method returns null
if the question cannot be created or added to this panel/page; otherwise, the method returns the created question.
- Type:
- (questionType: string, name?: string, index?: number) => Question
- Parameters:
-
name, type: string ,
A question name.
index, type: number ,A desired index of the new question in the
elements
array.
- Implemented in:
- PanelModelBase
- See also:
- elements * , addElement
Returns true
if elements in this panel/page are arranged in random order.
- Type:
- boolean readonly
- Implemented in:
- PanelModelBase
- See also:
- questionsOrder
Empties the errors
array for this panel/page and all its child elements (panels and questions).
- Type:
- () => void
- Implemented in:
- PanelModelBase
- See also:
- errors
Removes values that cannot be assigned to nested questions, for example, choices unlisted in the choices
array.
Call this method after you assign new question values in code to ensure that they are acceptable.
This method does not remove values for invisible questions and values that fail validation. Call the
validate()
method to validate newly assigned values.
- Type:
- () => void
- Implemented in:
- PanelModelBase
- See also:
- validate
Creates a new object that has the same type and properties as the current SurveyJS object.
- Type:
- () => Base
- Implemented in:
- Base
Collapses the survey element.
In collapsed state, the element displays only title
and description
.
- Type:
- () => void
- Implemented in:
- SurveyElement
- See also:
- title * , description * , state * , toggleState * , expand * , isCollapsed * , isExpanded
Checks whether a given element belongs to this panel/page or nested panels.
- Type:
- (element: IElement) => boolean
- Parameters:
-
element, type: IElement ,
A survey element to check.
- Implemented in:
- PanelModelBase
Returns true
if the survey element or its child elements have validation errors.
This property contains the result of the most recent validation. This result may be outdated. Call the validate
method to get an up-to-date value.
- Type:
- boolean readonly
- Implemented in:
- SurveyElement
- See also:
- errors
Returns an object in which keys are UI elements and values are CSS classes applied to them.
Use the following events of the SurveyModel
object to override CSS classes:
- Type:
- any readonly
- Implemented in:
- SurveyElement
Explanatory text displayed under the title.
- Type:
- string writable
- Implemented in:
- SurveyElementCore
- See also:
- hasDescription
An array of all survey elements (questions or panels) within this panel/page. Does not include questions within nested panels.
- Type:
- IElement[] readonly
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Implemented in:
- PanelModelBase
- See also:
- questions
A Boolean expression. If it evaluates to false
, this panel/page becomes read-only.
A survey parses and runs all expressions on startup. If any values used in the expression change, the survey re-evaluates it.
Refer to the following help topic for more information: Conditional Visibility.
- Type:
- string writable
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Implemented in:
- PanelModelBase
- See also:
- readOnly * , isReadOnly
Validation errors. Call the validate()
method to validate survey element data.
- Type:
- SurveyError[] writable
- Implemented in:
- SurveyElement
- See also:
- validate
Expands the survey element.
- Type:
- () => void
- Implemented in:
- SurveyElement
- See also:
- state * , toggleState * , collapse * , isCollapsed * , isExpanded
Focuses the first question with a validation error in this panel/page.
- Type:
- () => void
- Implemented in:
- PanelModelBase
- See also:
- validate * , focusFirstQuestion
Focuses the first question in this panel/page.
- Type:
- () => void
- Implemented in:
- PanelModelBase
- See also:
- focusFirstErrorQuestion
Assigns a new configuration to the current SurveyJS object. This configuration is taken from a passed JSON object.
The JSON object should contain only serializable properties of this SurveyJS object. Event handlers and properties that do not belong to the SurveyJS object are ignored.
- Type:
- (json: any, options?: ILoadFromJSONOptions) => void
- Parameters:
-
json, type: any ,
A JSON object with properties that you want to apply to the current SurveyJS object.
options, type: ILoadFromJSONOptions ,An object with configuration options.
- Implemented in:
- Base
- See also:
- toJSON
Returns a JSON object with comments left to questions within this panel/page. Question names are used as keys.
- Type:
- () => any
- Implemented in:
- PanelModelBase
Returns a JSON object with display texts that correspond to question values nested in the panel/page.
- Type:
- (keysAsText: boolean) => any
- Parameters:
-
keysAsText, type: boolean ,
Pass
true
if not only values in the object should be display texts, but also keys. Default value:false
.
- Implemented in:
- PanelModelBase
- See also:
- getValue
Returns a survey element with a specified name
. This method can find survey elements within nested elements.
- Type:
- (name: string) => IElement
- Parameters:
-
name, type: string ,
An element name.
- Implemented in:
- PanelModelBase
Returns the survey's locale.
If a default locale is used, this method returns an empty string. To get the applied locale in this case, use the following code:
import { surveyLocalization } from 'survey-core';
const defaultLocale = surveyLocalization.defaultLocale;
- Type:
- () => string
- Implemented in:
- SurveyElement
- See also:
- Localization & Globalization
Returns a JsonObjectProperty
object with metadata about a serializable property that belongs to the current SurveyJS object.
If the property is not found, this method returns null
.
- Type:
- (propName: string) => JsonObjectProperty
- Parameters:
-
propName, type: string ,
A property name.
- Implemented in:
- Base
Returns the value of a property with a specified name.
If the property is not found or does not have a value, this method returns either undefined
, defaultValue
specified in the property configuration, or a value passed as the defaultValue
parameter.
- Type:
- (name: string, defaultValue?: any, calcFunc?: () => any) => any
- Parameters:
-
name, type: string ,
A property name.
defaultValue, type: any ,(Optional) A value to return if the property is not found or does not have a value.
calcFunc, type: () => any
- Implemented in:
- Base
Returns a question with a specified name
. This method does not find questions within nested panels.
- Type:
- (name: string) => Question
- Parameters:
-
name, type: string ,
A question name.
- Implemented in:
- PanelModelBase
Returns a JSON object with question values nested in the panel/page.
- Type:
- () => any
- Implemented in:
- PanelModelBase
- See also:
- getDisplayValue
Returns true
if the survey element has a description.
- Type:
- boolean readonly
- Implemented in:
- SurveyElementCore
- See also:
- description
Increases or decreases an indent of survey element content from the left edge. Accepts positive integer values and 0. Does not apply in the Default V2 theme.
- Type:
- number writable
- Implemented in:
- SurveyElement
- See also:
- rightIndent
Increases or decreases an indent of panel content from the left edge. Accepts positive integer values and 0.
- Type:
- number writable
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Accepted values:
- 0 , 1 , 2 , 3
- Implemented in:
- PanelModel
Returns true
if the object is included in a survey.
This property may return false
, for example, when you create a survey model dynamically.
- Type:
- boolean readonly
- Implemented in:
- Base
Returns true
if the survey element is collapsed.
- Type:
- boolean readonly
- Implemented in:
- SurveyElement
- See also:
- state * , toggleState * , collapse * , expand * , isExpanded
Returns true
if the survey is being designed in Survey Creator.
- Type:
- boolean readonly
- Implemented in:
- Base
Returns true
if the survey element is expanded.
- Type:
- boolean readonly
- Implemented in:
- SurveyElement
- See also:
- state * , toggleState * , collapse * , expand * , isCollapsed
Returns true
if the object configuration is being loaded from JSON.
- Type:
- boolean readonly
- Implemented in:
- Base
Returns true
if the survey element is a page.
- Type:
- boolean readonly
- Implemented in:
- SurveyElementCore
- See also:
- Base.getType
Returns true
if the survey element is a panel.
- Type:
- boolean readonly
- Implemented in:
- PanelModelBase
- See also:
- Base.getType
Returns true
if the survey element is a question.
- Type:
- boolean readonly
- Implemented in:
- SurveyElementCore
- See also:
- Base.getType
Returns true
if the survey element or its parent element is read-only.
If you want to switch a survey element to the read-only state based on a condition, specify the enableIf
property. Refer to the following help topic for information: Conditional Visibility.
- Type:
- boolean readonly
- Implemented in:
- SurveyElement
- See also:
- readOnly
Makes the panel/page require an answer at least in one nested question. If a respondent leaves the panel/page without any answers, the survey displays a validation error.
- Type:
- boolean writable
- Implemented in:
- PanelModelBase
- See also:
- requiredIf * , Data Validation
Returns true
if the element is a survey.
- Type:
- boolean readonly
- Implemented in:
- SurveyElementCore
- See also:
- Base.getType
Returns true
if a passed value
is an empty string, array, or object or if it equals to undefined
or null
.
- Type:
- (value: any, trimString?: boolean) => boolean
- Parameters:
-
value, type: any ,
A value to be checked.
trimString, type: boolean ,(Optional) When this parameter is
true
, the method ignores whitespace characters at the beginning and end of a string value. Passfalse
to disable this functionality.
- Implemented in:
- Base
Returns true
if the panel/page is visible or the survey is currently in design mode.
If you want to display or hide a question based on a condition, specify the visibleIf
property. Refer to the following help topic for information: Conditional Visibility.
- Type:
- boolean readonly
- Implemented in:
- PanelModelBase
- See also:
- visibleIf * , visible
Gets or sets maximum survey element width in CSS values.
Default value: "100%" (taken from settings.maxWidth
)
- Type:
- string writable
- Implemented in:
- SurveyElement
- See also:
- minWidth * , renderWidth * , width
Gets or sets minimum survey element width in CSS values.
Default value: "300px" (taken from settings.minWidth
)
- Type:
- string writable
- Implemented in:
- SurveyElement
- See also:
- maxWidth * , renderWidth * , width
A survey element identifier.
Question names must be unique.
- Type:
- string writable
- Implemented in:
- SurveyElement
A question number or letter (depends on the questionStartIndex
property).
When the question number, title, or the entire question is invisible, this property returns an empty string.
- Type:
- string readonly
- Implemented in:
- PanelModel
- See also:
- questionStartIndex * , showNumber * , visibleIf
An event that is raised when an ItemValue
property is changed.
Parameters:
sender
:this
A SurveyJS object whose property contains an array ofItemValue
objects.options.obj
:ItemValue
AnItemValue
object.options.propertyName
:string
The name of the property to which an array ofItemValue
objects is assigned (for example,"choices"
or"rows"
).options.name
:"text"
|"value"
The name of the changed property.options.newValue
:any
A new value for the property.
- Type:
- Event<(sender: Base, options: any) => any, Base, any>
- Implemented in:
- Base
An event that is raised when a property of this SurveyJS object has changed.
Parameters:
sender
:this
A SurveyJS object whose property has changed.options.name
:string
The name of the changed property.options.newValue
:any
A new value for the property.options.oldValue
:any
An old value of the property. If the property is an array,oldValue
contains the same array asnewValue
does.
If you need to add and remove property change event handlers dynamically, use the registerPropertyChangedHandlers
and unregisterPropertyChangedHandlers
methods instead.
- Type:
- EventBase<Base, any>
- Implemented in:
- Base
Returns a page to which the panel belongs and allows you to move this panel to a different page.
- Type:
- IPage writable
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Implemented in:
- PanelModel
- See also:
- PanelModelBase.parent
Returns a survey element (panel or page) that contains this panel and allows you to move this question to a different survey element.
This property is always null
for the PageModel
object.
- Type:
- PanelModelBase writable
- Implemented in:
- PanelModelBase
A Dynamic Panel, Dynamic Matrix, or Dropdown Matrix that includes the current question.
This property is null
for standalone questions.
- Type:
- E readonly
- Implemented in:
- SurveyElement
Specifies the error message position for questions that belong to this page/panel.
Use this property to override the questionErrorLocation
property specified for the survey. You can also set the errorLocation
property for individual questions.
Possible values:
"default"
(default) - Inherits the setting from thequestionErrorLocation
property specified for the survey."top"
- Displays error messages above questions."bottom"
- Displays error messages below questions.
- Type:
- string writable
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Default value:
- default
- Accepted values:
- default , top , bottom
- Implemented in:
- PanelModelBase
An array of all questions within this panel/page. Includes questions within nested panels.
- Type:
- Question[] readonly
- Implemented in:
- PanelModelBase
- See also:
- elements
Specifies the sort order of questions in the panel/page.
Possible values:
"initial"
- Preserves the original order of questions."random"
- Displays questions in random order."default"
(default) - Inherits the setting from the Survey'squestionsOrder
property.
- Type:
- string writable
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Default value:
- default
- Accepted values:
- default , initial , random
- Implemented in:
- PanelModelBase
- See also:
- SurveyModel.questionsOrder * , areQuestionsRandomized
Specifies a number or letter used to start numbering of elements inside the panel.
You can include desired prefixes and postfixes alongside the number or letter:
"questionStartIndex": "a.", // a., b., c., ...
"questionStartIndex": "#3", // #3, #4, #5, ...
"questionStartIndex": "(B)." // (B)., (C)., (D)., ...
Default value: "1."
(inherited from SurveyModel
's questionStartIndex
property)
- Type:
- string writable
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Implemented in:
- PanelModel
- See also:
- SurveyModel.questionStartIndex * , showQuestionNumbers
Sets a title location relative to the input field for questions that belong to this panel/page.
Use this property to override the questionTitleLocation
property specified for the survey. You can also set the titleLocation
property for individual questions.
Possible values:
"default"
(default) - Inherits the setting from thequestionTitleLocation
property specified for the survey."top"
- Displays the title above the input field."bottom"
- Displays the title below the input field."left"
- Displays the title to the left of the input field."hidden"
- Hides the question title.
Certain question types (Matrix, Multiple Text) do not support the
"left"
value. For them, the"top"
value is used.
- Type:
- string writable
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Default value:
- default
- Accepted values:
- default , top , bottom , left , hidden
- Implemented in:
- PanelModelBase
- See also:
- SurveyModel.questionTitleLocation
Sets consistent width for question titles in CSS values. Applies only when questionTitleLocation
evaluates to "left"
.
Default value: undefined
- Type:
- string readonly
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Implemented in:
- PanelModelBase
Makes the survey element read-only.
If you want to switch a survey element to the read-only state based on a condition, specify the enableIf
property. Refer to the following help topic for information: Conditional Visibility.
- Type:
- boolean writable
- Implemented in:
- SurveyElement
- See also:
- isReadOnly
Registers a single value change handler for one or multiple properties.
The registerPropertyChangedHandlers
and unregisterPropertyChangedHandlers
methods allow you to manage property change event handlers dynamically. If you only need to attach an event handler without removing it afterwards, you can use the onPropertyChanged
event instead.
- Type:
- (propertyNames: string[], handler: any, key?: string) => void
- Parameters:
-
propertyNames, type: string[] ,
An array of one or multiple property names.
handler, type: any ,A function to call when one of the listed properties change. Accepts a new property value as an argument.
key, type: string ,(Optional) A key that identifies the current registration. If a function for one of the properties is already registered with the same key, the function will be overwritten. You can also use the key to subsequently unregister handlers.
- Implemented in:
- Base
- See also:
- unregisterPropertyChangedHandlers
Deletes a survey element (question or panel) from this panel/page. Returns true
if the element was deleted successfully; false
otherwise.
- Type:
- (element: IElement) => boolean
- Parameters:
-
element, type: IElement ,
A survey element to delete.
- Implemented in:
- PanelModelBase
- See also:
- elements
Returns a calculated width of the rendered survey element in CSS values.
- Type:
- string writable
- Implemented in:
- SurveyElement
- See also:
- width * , minWidth * , maxWidth
Specifies a custom error message for a required panel/page.
- Type:
- string writable
- Implemented in:
- PanelModelBase
- See also:
- isRequired * , requiredIf
A Boolean expression. If it evaluates to true
, this panel/page becomes required (at least one question in the panel/page should have an answer).
A survey parses and runs all expressions on startup. If any values used in the expression change, the survey re-evaluates it.
Refer to the following help topic for more information: Conditional Visibility.
- Type:
- string writable
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Implemented in:
- PanelModelBase
- See also:
- isRequired
Returns a character or text string that indicates a required panel/page.
- Type:
- string readonly
- Implemented in:
- PanelModelBase
- See also:
- SurveyModel.requiredText * , isRequired
Increases or decreases an indent of survey element content from the right edge. Accepts positive integer values and 0. Does not apply in the Default V2 theme.
- Type:
- number writable
- Implemented in:
- SurveyElement
- See also:
- indent
Assigns a new value to a specified property.
- Type:
- (name: string, val: any) => void
- Parameters:
-
name, type: string ,
A property name.
val, type: any ,A new value for the property.
- Implemented in:
- Base
Specifies whether to show the panel number in the title.
Default value: false
- Type:
- boolean writable
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Implemented in:
- PanelModel
Gets or sets a value that specifies how the elements numbers inside panel are displayed.
The following options are available:
default
- display questions numbers as defined in parent panel or surveyonpanel
- display questions numbers, start numbering from beginning of this pageoff
- turn off the numbering for questions titles
- Type:
- string writable
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Default value:
- default
- Accepted values:
- default , onpanel , off
- Implemented in:
- PanelModel
- See also:
- showNumber
Disable this property if you want to render the current panel on the same line or row with the previous question or panel.
- Type:
- boolean writable
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Default value:
- True
- Implemented in:
- PanelModel
Gets and sets the survey element's expand state.
Possible values:
"default"
(default) - The survey element is displayed in full and cannot be collapsed in the UI."expanded"
- The survey element is displayed in full and can be collapsed in the UI."collapsed"
- The survey element displays onlytitle
anddescription
and can be expanded in the UI.
- Type:
- string writable
- Implemented in:
- SurveyElement
- See also:
- toggleState * , collapse * , expand * , isCollapsed * , isExpanded
A title for the survey element. If title
is undefined, the name
property value is displayed instead.
Empty pages and panels do not display their titles or names.
- Type:
- string writable
- Implemented in:
- SurveyElementCore
- See also:
- Configure Question Titles
Toggles the survey element's state
between collapsed and expanded.
- Type:
- () => boolean
- Implemented in:
- SurveyElement
- See also:
- state * , collapse * , expand * , isCollapsed * , isExpanded
Unregisters value change event handlers for the specified properties.
- Type:
- (propertyNames: string[], key?: string) => void
- Parameters:
-
propertyNames, type: string[] ,
An array of one or multiple property names.
key, type: string ,(Optional) A key of the registration that you want to cancel.
- Implemented in:
- Base
- See also:
- registerPropertyChangedHandlers
Validates questions within this panel or page and returns false
if the validation fails.
- Type:
- (fireCallback?: boolean, focusOnFirstError?: boolean, rec?: any) => boolean
- Parameters:
-
fireCallback, type: boolean ,
(Optional) Pass
false
if you do not want to show validation errors in the UI.focusOnFirstError, type: boolean ,(Optional) Pass
true
if you want to focus the first question with a validation error.rec, type: any
- Implemented in:
- PanelModelBase
- See also:
- Data Validation
Gets or sets panel/page visibility.
If you want to display or hide a survey element based on a condition, specify the visibleIf
property. Refer to the following help topic for information: Conditional Visibility.
- Type:
- boolean writable
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Default value:
- True
- Implemented in:
- PanelModelBase
- See also:
- visibleIf * , isVisible
A Boolean expression. If it evaluates to false
, this panel/page becomes hidden.
A survey parses and runs all expressions on startup. If any values used in the expression change, the survey re-evaluates it.
Refer to the following help topic for more information: Conditional Visibility.
- Type:
- string writable
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Implemented in:
- PanelModelBase
Returns the visible index of the panel in the survey. Commonly it is -1 and it doesn't show. You have to set showNumber to true to show index/numbering for the Panel
- Type:
- number readonly
- Implemented in:
- PanelModel
- See also:
- showNumber
Sets survey element width in CSS values.
Default value: ""
- Type:
- string writable
- Implemented in:
- SurveyElement
- See also:
- minWidth * , maxWidth
Copyright © 2024 Devsoft Baltic OÜ. All rights reserved.