Multi-Select/Dynamic Matrix: Deprecate columnsLayout, implement the t…

src/jsonobject.ts

@@ -201,6 +201,7 @@ export class JsonObjectProperty implements IObject {
     "isLocalizableValue",
     "className",
     "alternativeName",
+    "oldName",
     "layout",
     "version",
     "classNamePart",
@@ -248,6 +249,7 @@ export class JsonObjectProperty implements IObject {
   public isBindable: boolean = false;
   public className: string;
   public alternativeName: string;
+  public oldName: string;
   public classNamePart: string;
   public baseClassName: string;
   public defaultValueValue: any;
@@ -476,12 +478,17 @@ export class JsonObjectProperty implements IObject {
     this.visibleValue = val;
   }
   public isAvailableInVersion(ver: string): boolean {
-    if(!!this.alternativeName) return true;
+    if(!!this.alternativeName || this.oldName) return true;
     return this.isAvailableInVersionCore(ver);
   }
   public getSerializedName(ver: string): string {
     if(!this.alternativeName) return this.name;
-    return this.isAvailableInVersionCore(ver) ? this.name : this.alternativeName;
+    return this.isAvailableInVersionCore(ver) ? this.name : this.alternativeName || this.oldName;
+  }
+  public getSerializedProperty(obj: any, ver: string): JsonObjectProperty {
+    if(!this.oldName || this.isAvailableInVersionCore(ver)) return this;
+    if(!obj || !obj.getType) return null;
+    return Serializer.findProperty(obj.getType(), this.oldName);
   }
   private isAvailableInVersionCore(ver: string): boolean {
     if(!ver || !this.version) return true;
@@ -946,6 +953,9 @@ export class JsonMetadataClass {
       if (propInfo.alternativeName) {
         prop.alternativeName = propInfo.alternativeName;
       }
+      if(propInfo.oldName) {
+        prop.oldName = propInfo.oldName;
+      }
       if (propInfo.layout) {
         prop.layout = propInfo.layout;
       }
@@ -1718,6 +1728,14 @@ export class JsonObject {
     if(!options) options = {};
     if (prop.isSerializable === false || (prop.isLightSerializable === false && this.lightSerializing)) return;
     if(options.version && !prop.isAvailableInVersion(options.version)) return;
+    this.valueToJsonCore(obj, result, prop, options);
+  }
+  private valueToJsonCore(obj: any, result: any, prop: JsonObjectProperty, options?: ISaveToJSONOptions): void {
+    const serProp = prop.getSerializedProperty(obj, options.version);
+    if(serProp && serProp !== prop) {
+      this.valueToJsonCore(obj, result, serProp, options);
+      return;
+    }
     var value = prop.getSerializableValue(obj);
     if (!options.storeDefaults && prop.isDefaultValueByObj(obj, value)) return;
     if (this.isValueArray(value)) {

src/question_baseselect.ts

@@ -2024,8 +2024,8 @@ Serializer.addClass(
     { name: "separateSpecialChoices:boolean", visible: false },
     { name: "showOtherItem:boolean", alternativeName: "hasOther" },
     { name: "showNoneItem:boolean", alternativeName: "hasNone" },
-    { name: "showRefuseItem:boolean", visible: false },
-    { name: "showDontKnowItem:boolean", visible: false },
+    { name: "showRefuseItem:boolean", visible: false, version: "1.9.128" },
+    { name: "showDontKnowItem:boolean", visible: false, version: "1.9.128" },
     {
       name: "otherPlaceholder",
       alternativeName: "otherPlaceHolder",

src/question_matrixdropdownbase.ts

@@ -900,7 +900,7 @@ export class QuestionMatrixDropdownModelBase extends QuestionMatrixBaseModel<Mat
     );
     this.registerPropertyChangedHandlers(
       [
-        "columnLayout",
+        "transposeData",
         "addRowLocation",
         "hideColumnsIfEmpty",
         "showHeader",
@@ -959,6 +959,12 @@ export class QuestionMatrixDropdownModelBase extends QuestionMatrixBaseModel<Mat
       this.clearRowsAndResetRenderedTable();
     }
   }
+  public get transposeData(): boolean {
+    return this.getPropertyValue("transposeData");
+  }
+  public set transposeData(val: boolean) {
+    this.setPropertyValue("transposeData", val);
+  }
   /**
    * Specifies the matrix layout. Set this property to `"vertical"` if you want to display columns instead of rows and rows instead of columns.
    *
@@ -968,10 +974,10 @@ export class QuestionMatrixDropdownModelBase extends QuestionMatrixBaseModel<Mat
    * @see isColumnLayoutHorizontal
    */
   public get columnLayout(): string {
-    return this.getPropertyValue("columnLayout");
+    return this.transposeData ? "vertical" : "horizontal";
   }
   public set columnLayout(val: string) {
-    this.setPropertyValue("columnLayout", val);
+    this.transposeData = val === "vertical";
   }
   get columnsLocation(): string {
     return this.columnLayout;
@@ -1019,12 +1025,11 @@ export class QuestionMatrixDropdownModelBase extends QuestionMatrixBaseModel<Mat
   /**
    * Returns `true` if columns are placed in the horizontal direction and rows in the vertical direction.
    *
-   * To specify the layout, use the `columnLayout` property. If you set it to `"vertical"`, the survey applies it only when the screen has enough space. Otherwise, the survey falls back to the horizontal layout, but the `columnLayout` property remains set to `"vertical"`. Unlike `columnLayout`, the `isColumnLayoutHorizontal` property always indicates the current layout.
-   * @see columnLayout
+   * To specify the layout, use the `transposeData` property. If you set it to `true`, the survey applies it only when the screen has enough space. Otherwise, the survey falls back to the horizontal layout, but the `transposeData` property remains set to `true`. Unlike `transposeData`, the `isColumnLayoutHorizontal` property always indicates the current layout.
+   * @see transposeData
    */
-  public get isColumnLayoutHorizontal() {
-    if (this.isMobile) return true;
-    return this.columnLayout != "vertical";
+  public get isColumnLayoutHorizontal(): boolean {
+    return this.isMobile ? true : !this.transposeData;
   }
   /**
    * Enables case-sensitive comparison in columns with the `isUnique` property set to `true`.
@@ -2491,8 +2496,11 @@ Serializer.addClass(
     {
       name: "columnLayout",
       alternativeName: "columnsLocation",
-      default: "horizontal",
       choices: ["horizontal", "vertical"],
+      visible: false, isSerializable: false
+    },
+    {
+      name: "transposeData:boolean", version: "1.9.130", oldName: "columnLayout"
     },
     {
       name: "detailElements",

tests/question_matrixdynamictests.ts

@@ -8941,6 +8941,62 @@ QUnit.test("Errors: matrixdynamic + show in multiple columns + vertical layout",
   assert.strictEqual(table.rows[4].cells[1].question, table.rows[5].cells[1].question);
 });
 
+QUnit.test("transposeData property", function (assert) {
+  const survey = new SurveyModel({
+    elements: [
+      {
+        type: "matrixdropdown",
+        name: "matrix",
+        rows: ["row1"],
+        columnLayout: "vertical",
+        columns: [
+          {
+            name: "col1",
+          }
+        ]
+      }
+    ]
+  });
+  const q = <QuestionMatrixDynamicModel>survey.getQuestionByName("matrix");
+  assert.equal(q.transposeData, true, "transposeData #1");
+  q.columnLayout = "horizontal";
+  assert.equal(q.transposeData, false, "transposeData #2");
+  q.transposeData = true;
+  assert.equal(q.columnLayout, "vertical", "columnsLayout #1");
+  assert.equal(q.isColumnLayoutHorizontal, false, "isColumnLayoutHorizontal #1");
+  q.transposeData = false;
+  assert.equal(q.columnLayout, "horizontal", "columnsLayout #2");
+  assert.equal(q.isColumnLayoutHorizontal, true, "isColumnLayoutHorizontal #2");
+  q.transposeData = true;
+  const json1 = q.toJSON();
+  const json2 = q.toJSON({ version: "1.9.129" });
+  assert.equal(json1.transposeData, true, "json #1");
+  assert.notOk(json1.columnLayout, "json #2");
+  assert.notOk(json2.transposeData, "json #3");
+  assert.equal(json2.columnLayout, "vertical", "json #4");
+});
+
+QUnit.test("transposeData property load from json", function (assert) {
+  const survey = new SurveyModel({
+    elements: [
+      {
+        type: "matrixdropdown",
+        name: "matrix",
+        rows: ["row1"],
+        transposeData: true,
+        columns: [
+          {
+            name: "col1",
+          }
+        ]
+      }
+    ]
+  });
+  const q = <QuestionMatrixDynamicModel>survey.getQuestionByName("matrix");
+  assert.equal(q.transposeData, true, "transposeData #1");
+  assert.equal(q.columnLayout, "vertical", "columnsLayout #1");
+});
+
 QUnit.test("Errors: matrixdropdown + mobile mode", function (assert) {
   const survey = new SurveyModel({
     elements: [