Show checkboxes for boolean properties in property grid for inactive …

…properties: #199

src/objectEditor.ts

@@ -16,6 +16,8 @@ export class SurveyObjectEditor {
     constructor(public propertyEditorOptions: ISurveyObjectEditorOptions = null) {
         this.koProperties = ko.observableArray();
         this.koActiveProperty = ko.observable();
+        this.koActiveProperty.subscribe(function(oldValue) { if(oldValue) oldValue.isActive = false; }, null, "beforeChange");
+        this.koActiveProperty.subscribe(function(newValue) { if(newValue) newValue.isActive = true;  });        
         this.koHasObject = ko.observable();
     }
     public get selectedObject(): any { return this.selectedObjectValue; }

src/objectProperty.ts

@@ -10,12 +10,15 @@ export class SurveyObjectProperty {
     private objectValue: any;
     private isValueUpdating: boolean;
     private onPropertyChanged: SurveyOnPropertyChangedCallback;
+    private isActiveValue: boolean;
     public name: string;
     public disabled: boolean;
     public editor: SurveyPropertyEditorBase;
     public editorType: string;
     public baseEditorType: string;
 
+    koIsShowEditor: any;
+
     constructor(public property: Survey.JsonObjectProperty, onPropertyChanged: SurveyOnPropertyChangedCallback = null, propertyEditorOptions: ISurveyObjectEditorOptions = null) {
         this.onPropertyChanged = onPropertyChanged;
         this.name = this.property.name;
@@ -26,9 +29,16 @@ export class SurveyObjectProperty {
         this.editor.onGetLocale = this.doOnGetLocale;
         this.editor.options = propertyEditorOptions;
         this.editorType = this.editor.editorType;
+        this.koIsShowEditor = ko.observable(false);
+        this.isActive = false;
     }
     public get displayName(): string { return this.editor.displayName; }
     public get title(): string { return this.editor.title; }
+    public get isActive(): boolean { return this.isActiveValue; }
+    public set isActive(val: boolean) {
+        this.isActiveValue = val;
+        this.koIsShowEditor(!this.disabled && (this.editor.alwaysShowEditor || this.isActive));
+    }
     public get koValue(): any { return this.editor.koValue; }
     public get koText(): any { return this.editor.koText; }
     public get koIsDefault(): any { return this.editor.koIsDefault; }

src/propertyEditors/propertyEditorBase.ts

@@ -48,6 +48,7 @@ export class SurveyPropertyEditorBase implements Survey.ILocalizableOwner {
     public get property(): Survey.JsonObjectProperty { return this.property_; }
     public get editablePropertyName(): string { return this.property ? this.property.name : "" };
     public get readOnly() { return this.property ? this.property.readOnly : false; }
+    public get alwaysShowEditor(): boolean { return false; }
     public get title(): string { return this.titleValue; }
     public get displayName(): string { return this.displayNameValue; }
     public set displayName(val: string) { 

src/propertyEditors/propertyEditorFactory.ts

@@ -88,6 +88,7 @@ export class SurveyBooleanPropertyEditor extends SurveyPropertyEditorBase {
         super(property);
     }
     public get editorType(): string { return "boolean"; }
+    public get alwaysShowEditor(): boolean { return true; }
     public get canShowDisplayNameOnTop(): boolean { return false; }
     public getValueText(value: any): string { 
         return editorLocalization.getPropertyValue(value);

src/templates/objecteditor.html

@@ -4,8 +4,8 @@
             <tr data-bind="click: $parent.changeActiveProperty($data), css: {'active': $parent.koActiveProperty() == $data}">
                 <td data-bind="text: displayName, attr: {title: title}" width="50%"></td>
                 <td width="50%">
-                    <span data-bind="text: koText, visible: $parent.koActiveProperty() != $data || disabled, attr: {title: koText}" style="text-overflow:ellipsis;white-space:nowrap;overflow:hidden"></span>
-                    <div data-bind="visible: $parent.koActiveProperty() == $data && !disabled">
+                    <span data-bind="text: koText, visible: !koIsShowEditor(), attr: {title: koText}" style="text-overflow:ellipsis;white-space:nowrap;overflow:hidden"></span>
+                    <div data-bind="visible: koIsShowEditor()">
                         <!-- ko template: { name: 'propertyeditor-' + editorType, data: $data.editor } -->
                         <!-- /ko -->
                     </div>

tests/ObjectEditorTests.ts

@@ -52,6 +52,20 @@ QUnit.test("Active property", function (assert) {
     editor.selectedObject = new TruckDefaultValue();
     assert.equal(editor.koActiveProperty().name, "name", "name property is active by default");
 });
+QUnit.test("Is show property", function (assert) {
+    var editor = new SurveyObjectEditor();
+    editor.selectedObject = new TruckDefaultValue();
+    var nameProperty = editor.getPropertyEditor("name");
+    var maxWeightProperty = editor.getPropertyEditor("maxWeight");
+    var isNewProperty = editor.getPropertyEditor("isNew");
+    assert.equal(nameProperty.koIsShowEditor(), true, "name property is active by default");
+    assert.equal(maxWeightProperty.koIsShowEditor(), false, "name property is not active");
+    editor.koActiveProperty(maxWeightProperty);
+    assert.equal(nameProperty.koIsShowEditor(), false, "name property is inactive now");
+    assert.equal(maxWeightProperty.koIsShowEditor(), true, "maxWeight property is active");
+
+    assert.equal(isNewProperty.koIsShowEditor(), true, "isNewProperty property always show Editor");
+});
 QUnit.test("On property changed", function (assert) {
     var editor = new SurveyObjectEditor();
     var car = new TruckDefaultValue();