ILIAS-eLearning · fhelfer · Jul 13, 2026
diff --git a/components/ILIAS/UI/src/Implementation/Component/Input/ViewControl/Renderer.php b/components/ILIAS/UI/src/Implementation/Component/Input/ViewControl/Renderer.php
@@ -22,6 +22,7 @@
 
 use ILIAS\UI\Implementation\Render\AbstractComponentRenderer;
 use ILIAS\UI\Implementation\Render\ResourceRegistry;
+use ILIAS\UI\Implementation\Render\Template;
 use ILIAS\UI\Renderer as RendererInterface;
 use ILIAS\UI\Component;
 use LogicException;
@@ -132,14 +133,17 @@ protected function renderSortation(Sortation $component, RendererInterface $defa
             $internal_signal->addOption('value', $opt_value);
             $item = $ui_factory->button()->shy((string) $opt_label, '#')
                 ->withOnClick($internal_signal);
-            $tpl->setCurrentBlock("option");
-            $tpl->setVariable("OPTION", $default_renderer->render($item));
-
-            if ($opt_value === $component->getValue()) {
-                $tpl->touchBlock("selected");
-                $tpl->setCurrentBlock("option");
-            }
-            $tpl->parseCurrentBlock();
+            $this->appendDropdownMenuItem(
+                $tpl,
+                'option',
+                'OPTION',
+                $default_renderer->render($item),
+                $this->isDropdownOptionSelected(
+                    $opt_value,
+                    $component->getValue(),
+                    $opt_label === array_key_first($component->getOptions())
+                )
+            );
         }
 
         if ($container_submit_signal = $component->getOnChangeSignal()) {
@@ -306,13 +310,13 @@ protected function renderPagination(Pagination $component, RendererInterface $de
 
             $item = $ui_factory->button()->shy($option_label, '#')
                 ->withOnClick($signal);
-            $tpl->setCurrentBlock("option_limit");
-            $tpl->setVariable("OPTION_LIMIT", $default_renderer->render($item));
-            if ($option === $limit) {
-                $tpl->touchBlock("selected");
-                $tpl->setCurrentBlock("option_limit");
-            }
-            $tpl->parseCurrentBlock();
+            $this->appendDropdownMenuItem(
+                $tpl,
+                'option_limit',
+                'OPTION_LIMIT',
+                $default_renderer->render($item),
+                $option === $limit
+            );
         }
 
         if ($container_submit_signal = $component->getOnChangeSignal()) {
@@ -384,6 +388,51 @@ protected function renderMode(Mode $component, RendererInterface $default_render
         return $tpl->get();
     }
 
+    protected function appendDropdownMenuItem(
+        Template $tpl,
+        string $block,
+        string $content_variable,
+        string $content,
+        bool $is_selected
+    ): void {
+        $tpl->setCurrentBlock($block);
+        $tpl->setVariable($content_variable, $content);
+        if ($is_selected) {
+            $tpl->touchBlock('selected');
+            $tpl->setCurrentBlock($block);
+        }
+        $tpl->parseCurrentBlock();
+    }
+
+    /**
+     * @param array<int|string, mixed>|null $current_value
+     */
+    protected function isDropdownOptionSelected(
+        mixed $option_value,
+        ?array $current_value,
+        bool $is_sortation_default_option
+    ): bool {
+        if ($this->isUnsetViewControlValue($current_value)) {
+            return $is_sortation_default_option;
+        }
+
+        return $option_value === $current_value;
+    }
+
+    /**
+     * @param array<int|string, mixed>|null $value
+     */
+    protected function isUnsetViewControlValue(?array $value): bool
+    {
+        if ($value === null) {
+            return true;
+        }
+
+        $first = $value[0] ?? null;
+
+        return $first === null || $first === '';
+    }
+
     /**
      * @inheritdoc
      */

diff --git a/components/ILIAS/UI/tests/Component/Input/ViewControl/ViewControlSortationTest.php b/components/ILIAS/UI/tests/Component/Input/ViewControl/ViewControlSortationTest.php
@@ -93,7 +93,7 @@ public function testViewControlFieldSortationRendering(): void
 <div class="dropdown il-viewcontrol il-viewcontrol-sortation l-bar__element" id="id_3">
     <button class="btn btn-ctrl dropdown-toggle" type="button" data-toggle="dropdown" aria-label="label_sortation" aria-expanded="false" aria-controls="id_3_ctrl"><span class="glyphicon-sort"></span></button>
     <ul id="id_3_ctrl" class="dropdown-menu">
-        <li><button class="btn btn-link" id="id_1">A</button></li>
+        <li class="selected"><button class="btn btn-link" id="id_1">A</button></li>
         <li><button class="btn btn-link" id="id_2">B</button></li>
     </ul>
     <div class="il-viewcontrol-value" role="none">
@@ -128,7 +128,7 @@ public function testViewControlFieldWithSignalsRendering(): void
 <div class="dropdown il-viewcontrol il-viewcontrol-sortation l-bar__element" id="id_3">
     <button class="btn btn-ctrl dropdown-toggle" type="button" data-toggle="dropdown" aria-label="label_sortation" aria-expanded="false" aria-controls="id_3_ctrl"><span class="glyphicon-sort"></span></button>
     <ul id="id_3_ctrl" class="dropdown-menu">
-        <li><button class="btn btn-link" id="id_1">A</button></li>
+        <li class="selected"><button class="btn btn-link" id="id_1">A</button></li>
         <li><button class="btn btn-link" id="id_2">B</button></li>
     </ul>
     <div class="il-viewcontrol-value" role="none">

diff --git a/templates/default/070-components/UI-framework/ViewControl/_ui-component_viewcontrol.scss b/templates/default/070-components/UI-framework/ViewControl/_ui-component_viewcontrol.scss
@@ -67,13 +67,7 @@ $il-vc-pagination-btn-active-bg: $il-main-bg;
 
 // viewcontrols as single buttons
 // should in the future be done by using btn-ctrl class on these buttons
-.il-viewcontrol-sortation,
-.il-viewcontrol-sortation .dropdown,
-.il-table-presentation-viewcontrols .l-bar__space-keeper .l-bar__group .l-bar__element {
-	> .btn-default.btn {
-		@extend .btn-ctrl;
-		border-radius: $il-border-radius-secondary-large;
-	}
+@mixin il-viewcontrol-dropdown-selected-item {
 	li .btn.btn-link {
 		padding-left: $il-padding-large-horizontal * 3;
 	}
@@ -87,6 +81,20 @@ $il-vc-pagination-btn-active-bg: $il-main-bg;
 	}
 }
 
+.il-viewcontrol-sortation,
+.il-viewcontrol-sortation .dropdown,
+.il-table-presentation-viewcontrols .l-bar__space-keeper .l-bar__group .l-bar__element {
+	> .btn-default.btn {
+		@extend .btn-ctrl;
+		border-radius: $il-border-radius-secondary-large;
+	}
+	@include il-viewcontrol-dropdown-selected-item;
+}
+
+.il-viewcontrol-pagination__num-of-items {
+	@include il-viewcontrol-dropdown-selected-item;
+}
+
 .il-viewcontrol-fieldselection .dropdown-menu {
 	padding: $il-padding-xlarge-horizontal $il-padding-xlarge-vertical;
 }

diff --git a/templates/default/delos.css b/templates/default/delos.css
@@ -13386,6 +13386,17 @@ tr.c-table-data__row.c-table-data__row--drag-settle {
   content: "\e013";
 }
 
+.il-viewcontrol-pagination__num-of-items li .btn.btn-link {
+  padding-left: 36px;
+}
+.il-viewcontrol-pagination__num-of-items li.selected .btn::before {
+  position: absolute;
+  left: 12px;
+  font-family: "Glyphicons Halflings";
+  color: #4c6586;
+  content: "\e013";
+}
+
 .il-viewcontrol-fieldselection .dropdown-menu {
   padding: 15px 9px;
 }