Panel-based Controllers

Many controllers in Kitto^x are panel-based. These controllers use the HTMX Panel control as basic rendering solutions. This page is meant to document the features of all panel-based controllers.

Among the controllers to which the information presented here applies are:

• TabPanel, BorderPanel, HtmlPanel, AccordionPanel and so on.
• List, Form, GridPanel, ChartPanel and all data panels.

Any custom controller that you might want to build, as long as it ultimately inherits from TKXPanelControllerBase, will get the same features. Apart from the tool controllers, everything else is a panel-based controller.

Common properties

All panel-based controllers inherit these properties from TKXPanelControllerBase:

Property	Type	Default	Description
Title	String		Panel title text (shown in dialog header or panel header)
IsModal	Boolean	False (List), True (Form, Wizard)	Show as a dialog overlay. When False, the panel is rendered inline (e.g. inside a tab).
Maximized	Boolean	False	Dialog fills the entire viewport. On mobile, forced True for all views. Width and Height are ignored when Maximized is True.
AllowClose	Boolean	True	Show the close button (X) in the dialog header and the Close button in form toolbars. Set to False for views that should not be dismissible (e.g. Login).
Width	Integer	0 (auto)	Dialog width in pixels. Only applies when IsModal is True and Maximized is False.
Height	Integer	0 (auto)	Dialog height in pixels. Only applies when IsModal is True and Maximized is False.
Resizable	Boolean	True	Allow the user to resize the dialog by dragging its edges. Only applies when IsModal is True.
Autoscroll	Boolean	False	Enable scrollbars when content overflows the panel body.
Border	Boolean	False	Show a border around the panel.
Header	Boolean	False	Show a panel header bar (with optional collapse support).
Collapsible	Boolean	False	Allow the panel to be collapsed/expanded via the header. Requires Header: True.
Collapsed	Boolean	False	Panel starts in collapsed state. Requires Collapsible: True.

IsModal vs AllowClose

These two properties control different aspects of the dialog:

• IsModal determines how the view is displayed: as a dialog overlay (True) or inline in a tab/region (False).
• AllowClose determines whether the user can dismiss the dialog: close button (X) in the header and Close button in form toolbars.

For example, the Login form has IsModal: True (shown as a dialog) but AllowClose: False (no X button — the user must log in).

Maximized and mobile support

When Maximized is True, the dialog fills the entire viewport regardless of Width and Height settings. The property getters for Width and Height return 0 when Maximized is active, so the original values are preserved and restored if Maximized is later set to False.

On mobile devices, Kitto^x automatically forces IsModal: True and Maximized: True for all fragment views and forms opened from menus. This ensures every view fills the phone screen. The initial Home/Login page is not affected — it is already a full-page render.

This logic is handled by AdjustControllerForContext in the server, which is called only for views loaded via HTMX/fetch (not for the initial page). Menu controllers (TreePanel, TilePanel) delegate to kxApp.openView() which decides whether to open in a desktop tab or as a body-appended overlay.

Help button

When the application configures a Help URL in Config.yaml, a Help button appears automatically:

• Forms: as the first button in the toolbar
• List/Grid: after the Refresh button, before ToolViews

Configuration in Config.yaml:

Defaults:
  Help:
    HRef: https://help.example.com/page/%s
    ShortText: Help...
    LongText: Open help for "%s"...

The %s placeholder is replaced with the view name. For forms, the URL includes a colon separator and the table model name (e.g. ViewName:ModelName).

Tools

Tools are buttons, rendered on the upper tool bar of the view, that launch controllers (either predefined or custom). They are defined as children of the ToolViews node.

Example:

ToolViews:
  TestDownload:
    DisplayLabel: Download a file
    ImageName: download
    Controller: DownloadFile
      ConfirmationMessage: Are you sure you want to download the file?
      # Always enable the button. Use False to require selection of a
      # specific row (whose data is then passed as context info to the
      # controller). This only applies to data panels that support
      # row selection, such as the GridPanel.
      RequireSelection: False
      # Serve a static file (with expansion rules). 
      # Inherit from the controller if you want
      # to provide a file on demand (like a custom report).
      FileName: %APP_PATH%\temp\test.pdf
      # Provide a default file name for the user (which can save the
      # file under a different name if needed).
      ClientFileName: somefile.pdf
      # Empty means infer the content type from the file name.
      # In this case, it is going to be application/pdf.
      ContentType:

The example above will render a button with the text (or tooltip) "Download a file" and the "download" icon (one of Kitto^x's predefined icons, located under Home\Resources) that, when clicked, serves the specified file. By inheriting from the DownloadFile controller you can serve a file or stream built on-demand.

See the documentation for Tools controllers, for more details.