Documentation Docs
Documentation Docs

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.

View Demo

Inherited from the following class(es):

addElement method

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
addNewPanel method

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:
questionType, type: string ,

A question type.

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
clearErrors method

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
clone method

Creates a new object that has the same type and properties as the current SurveyJS object.

Type:
() => Base
Implemented in:
Base
collapse method

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
containsErrors property

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
cssClasses property

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
description property

Explanatory text displayed under the title.

Type:
string writable
Implemented in:
SurveyElementCore
See also:
hasDescription
elements property

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
enableIf property

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
errors property

Validation errors. Call the validate() method to validate survey element data.

Type:
SurveyError[] writable
Implemented in:
SurveyElement
See also:
validate
expand method

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
fromJSON method

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
getComments method

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
getLocale method

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
getType method

Returns the object type as it is used in the JSON schema.

Type:
() => string
Implemented in:
Base
getValue method

Returns a JSON object with question values nested in the panel/page.

Type:
() => any
Implemented in:
PanelModelBase
See also:
getDisplayValue
hasDescription property

Returns true if the survey element has a description.

Type:
boolean readonly
Implemented in:
SurveyElementCore
See also:
description
id property

An auto-generated unique element identifier.

Type:
string writable
Implemented in:
PanelModelBase
indent property

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
innerIndent property

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
inSurvey property

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
isCollapsed property

Returns true if the survey element is collapsed.

Type:
boolean readonly
Implemented in:
SurveyElement
See also:
state * , toggleState * , collapse * , expand * , isExpanded

Use this method to find out if the current object is of a given typeName or inherited from it.

Type:
(typeName: string) => boolean
Parameters:
typeName, type: string ,

One of the values listed in the getType() description.

Return Value:

true if the current object is of a given typeName or inherited from it.

Implemented in:
Base
See also:
getType
isDesignMode property

Returns true if the survey is being designed in Survey Creator.

Type:
boolean readonly
Implemented in:
Base
isExpanded property

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
isPage property

Returns true if the survey element is a page.

Type:
boolean readonly
Implemented in:
SurveyElementCore
See also:
Base.getType
isPanel property

Returns true if the survey element is a panel.

Type:
boolean readonly
Implemented in:
PanelModelBase
See also:
Base.getType
isQuestion property

Returns true if the survey element is a question.

Type:
boolean readonly
Implemented in:
SurveyElementCore
See also:
Base.getType
isReadOnly property

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
isRequired property

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
isSurvey property

Returns true if the element is a survey.

Type:
boolean readonly
Implemented in:
SurveyElementCore
See also:
Base.getType
isValueEmpty method

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. Pass false to disable this functionality.

Implemented in:
Base
isVisible property

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
maxWidth property

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
minWidth property

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
name property

A survey element identifier.

Question names must be unique.

Type:
string writable
Implemented in:
SurveyElement
no property

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 of ItemValue objects.
  • options.obj: ItemValue
    An ItemValue object.
  • options.propertyName: string
    The name of the property to which an array of ItemValue 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 as newValue 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
page property

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
parent property

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
parentQuestion property

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 the questionErrorLocation 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
questions property

An array of all questions within this panel/page. Includes questions within nested panels.

Type:
Question[] readonly
Implemented in:
PanelModelBase
See also:
elements
questionsOrder property

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's questionsOrder 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 the questionTitleLocation 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
readOnly property

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
removeElement method

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
renderWidth property

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
requiredIf property

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
requiredText property

Returns a character or text string that indicates a required panel/page.

Type:
string readonly
Implemented in:
PanelModelBase
See also:
SurveyModel.requiredText * , isRequired
rightIndent property

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
showNumber property

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
See also:
SurveyModel.showQuestionNumbers * , SurveyModel.questionTitlePattern

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 survey
  • onpanel - display questions numbers, start numbering from beginning of this page
  • off - 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
startWithNewLine property

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
state property

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 only title and description and can be expanded in the UI.
Type:
string writable
Implemented in:
SurveyElement
See also:
toggleState * , collapse * , expand * , isCollapsed * , isExpanded
survey property

Returns the survey object.

Type:
ISurvey readonly
Implemented in:
SurveyElement
title property

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
toggleState method

Toggles the survey element's state between collapsed and expanded.

Type:
() => boolean
Implemented in:
SurveyElement
See also:
state * , collapse * , expand * , isCollapsed * , isExpanded
toJSON method

Returns a JSON object that corresponds to the current SurveyJS object.

Type:
(options?: ISaveToJSONOptions) => any
Parameters:
options, type: ISaveToJSONOptions
Implemented in:
Base
See also:
fromJSON

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
validate method

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
visible property

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
visibleIf property

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
See also:
visible * , isVisible
visibleIndex property

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
width property

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.

Your cookie settings

We use cookies on our site to make your browsing experience more convenient and personal. In some cases, they are essential to making the site work properly. By clicking "Accept All", you consent to the use of all cookies in accordance with our Terms of Use & Privacy Statement. However, you may visit "Cookie settings" to provide a controlled consent.

Your renewal subscription expires soon.

Since the license is perpetual, you will still have permanent access to the product versions released within the first 12 month of the original purchase date.

If you wish to continue receiving technical support from our Help Desk specialists and maintain access to the latest product updates, make sure to renew your subscription by clicking the "Renew" button below.

Your renewal subscription has expired.

Since the license is perpetual, you will still have permanent access to the product versions released within the first 12 month of the original purchase date.

If you wish to continue receiving technical support from our Help Desk specialists and maintain access to the latest product updates, make sure to renew your subscription by clicking the "Renew" button below.