work for the #7357

surveyjs · Dec 4, 2023 · 00aac31 · 00aac31
1 parent 95df902
commit 00aac31
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 4 deletions.
diff --git a/src/knockout/templates/question-ranking.html b/src/knockout/templates/question-ranking.html
@@ -16,7 +16,10 @@
         <!-- /ko -->
       <!-- /ko -->
       <!-- ko if: question.unRankingChoices.length === 0 -->
-        <div data-bind="css: cssClasses.containerPlaceholder, text: question.selectToRankEmptyRankedAreaText"></div>
+        <div data-bind="css: cssClasses.containerPlaceholder">
+            <!-- ko template: { name: 'survey-string', data: question.locSelectToRankEmptyRankedAreaText } -->
+            <!-- /ko -->
+        </div>
       <!-- /ko -->
     </div>
     <div data-bind="css: cssClasses.containersDivider"></div>
@@ -26,7 +29,10 @@
         <!-- /ko -->
       <!-- /ko -->
       <!-- ko if: question.rankingChoices.length === 0 -->
-      <div data-bind="css: cssClasses.containerPlaceholder, text: question.selectToRankEmptyUnrankedAreaText"></div>
+      <div data-bind="css: cssClasses.containerPlaceholder">
+          <!-- ko template: { name: 'survey-string', data: question.locSelectToRankEmptyUnrankedAreaText } -->
+          <!-- /ko -->
+      </div>
       <!-- /ko -->
     </div>
   </div>

diff --git a/src/question_ranking.ts b/src/question_ranking.ts
@@ -584,6 +584,24 @@ Serializer.addClass(
       visible: true,
       isSerializable: true,
     },
+    {
+      name: "selectToRankEmptyRankedAreaText:text",
+      serializationProperty: "locSelectToRankEmptyRankedAreaText",
+      category: "general",
+      dependsOn: "selectToRankEnabled",
+      visibleIf: (obj: any) => {
+        return !!obj.selectToRankEnabled;
+      },
+    },
+    {
+      name: "selectToRankEmptyUnrankedAreaText:text",
+      serializationProperty: "locSelectToRankEmptyUnrankedAreaText",
+      category: "general",
+      dependsOn: "selectToRankEnabled",
+      visibleIf: (obj: any) => {
+        return !!obj.selectToRankEnabled;
+      },
+    }, 
     {
       name: "maxSelectedChoices:number",
       visible: true,

diff --git a/tests/markup/snapshots/ranking-selectToRankEnabled-empty.snap.html b/tests/markup/snapshots/ranking-selectToRankEnabled-empty.snap.html
@@ -85,6 +85,8 @@
 	<div class="sv-ranking__containers-divider">
 	</div>
 	<div class="sv-ranking__container sv-ranking__container--empty sv-ranking__container--to" data-ranking="to-container">
-		<div class="sv-ranking__container-placeholder">Drag and drop choices here to rank them</div>
+		<div class="sv-ranking__container-placeholder">
+			<span class="sv-string-viewer">Drag and drop choices here to rank them</span>
+		</div>
 	</div>
 </div>
diff --git a/tests/markup/snapshots/ranking-selectToRankEnabled-vertical.snap.html b/tests/markup/snapshots/ranking-selectToRankEnabled-vertical.snap.html
@@ -85,6 +85,8 @@
 	<div class="sv-ranking__containers-divider">
 	</div>
 	<div class="sv-ranking__container sv-ranking__container--empty sv-ranking__container--to" data-ranking="to-container">
-		<div class="sv-ranking__container-placeholder">Drag and drop choices here to rank them</div>
+		<div class="sv-ranking__container-placeholder">
+			<span class="sv-string-viewer">Drag and drop choices here to rank them</span>
+		</div>
 	</div>
 </div>