API Reference: Panel Model | Form Builder Libraries

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):

PanelModelBase

SurveyElement

SurveyElementCore

Base

Type to filter the list:

	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: elements * , addElement
	addNewQuestion method
	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
	areQuestionsRandomized property
	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
	clearIncorrectValues method
	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
	containsElement method
	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: `onUpdatePageCssClasses` `onUpdatePanelCssClasses` `onUpdateQuestionCssClasses` 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
	focusFirstErrorQuestion method
	Sets focus on the input of the first question in this panel/page that has an error. Type: () => void Implemented in: PanelModelBase See also: validate
	focusFirstQuestion method
	Sets focus on the input of the first question in this panel/page. Type: () => void Implemented in: PanelModelBase
	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) => void Parameters: json, type: any , A JSON object with properties that you want to apply to the current SurveyJS object. 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
	getDisplayValue method
	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
	getElementByName method
	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
	getPropertyByName method
	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
	getPropertyValue method
	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) => 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. Implemented in: Base
	getQuestionByName method
	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: PanelModelBase
	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
	isDescendantOf method
	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. 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
	isLoadingFromJson property
	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: SurveyElement 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: SurveyElement 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
	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
	onItemValuePropertyChanged event
	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
	onPropertyChanged event
	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. 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
	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
	questionStartIndex property
	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
	questionTitleLocation property
	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
	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
	registerPropertyChangedHandlers method
	Registers a function to call when a property value changes. 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. 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
	requiredErrorText property
	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
	setPropertyValue method
	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
	showQuestionNumbers property
	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: () => any Implemented in: Base See also: fromJSON
	unregisterPropertyChangedHandlers method
	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

PanelModel

Why we use cookies.

Your renewal subscription expires soon.

Your renewal subscription has expired.