add editor.onPropertyAfterRender event: #266

surveyjs · Feb 8, 2018 · 117bcf3 · 117bcf3
1 parent f32064e
commit 117bcf3
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 13 deletions.
diff --git a/src/editor.ts b/src/editor.ts
@@ -125,6 +125,18 @@ export class SurveyEditor implements ISurveyObjectEditorOptions {
     (sender: SurveyEditor, options: any) => any,
     any
   > = new Survey.Event<(sender: SurveyEditor, options: any) => any, any>();
+  /**
+   * The event allows you modify DOM element for a property in the Property Grid. For example, you may change it's styles.
+   * <br/> sender the survey editor object that fires the event
+   * <br/> options.obj the survey object, Survey, Page, Panel or Question
+   * <br/> options.htmlElement the html element (html table row in our case) that renders the property display name and it's editor.
+   * <br/> options.property object property (Survey.JsonObjectProperty object).
+   * <br/> options.propertyEditor the property Editor.
+   */
+  public onPropertyAfterRender: Survey.Event<
+    (sender: SurveyEditor, options: any) => any,
+    any
+  > = new Survey.Event<(sender: SurveyEditor, options: any) => any, any>();
   /**
    * The event is called on deleting an element (question/panel/page) from the survey. Typically, when a user click the delete from the element menu.
    * <br/> sender the survey editor object that fires the event
@@ -451,6 +463,20 @@ export class SurveyEditor implements ISurveyObjectEditorOptions {
         );
       }
     );
+    this.selectedObjectEditorValue.onAfterRenderCallback = function(
+      obj,
+      htmlElement,
+      prop
+    ) {
+      if (self.onPropertyAfterRender.isEmpty) return;
+      var options = {
+        obj: obj,
+        htmlElement: htmlElement,
+        property: prop.property,
+        propertyEditor: prop.editor
+      };
+      self.onPropertyAfterRender.fire(self, options);
+    };
     this.questionEditorWindow = new SurveyPropertyEditorShowWindow();
     this.questionEditorWindow.onCanShowPropertyCallback = function(
       object: any,

diff --git a/src/objectEditor.ts b/src/objectEditor.ts
@@ -9,6 +9,7 @@ import { SurveyHelper } from "./surveyHelper";
 export class SurveyObjectEditor {
   private selectedObjectValue: any;
   private oldActiveProperty: SurveyObjectProperty = null;
+  koAfterRender: any;
   public koProperties = ko.observableArray<SurveyObjectProperty>();
   public koActiveProperty = ko.observable<SurveyObjectProperty>();
   public koHasObject = ko.observable<boolean>();
@@ -28,6 +29,11 @@ export class SurveyObjectEditor {
     property1: Survey.JsonObjectProperty,
     property2: Survey.JsonObjectProperty
   ) => number;
+  public onAfterRenderCallback: (
+    object: any,
+    htmlElement: HTMLElement,
+    property: SurveyObjectProperty
+  ) => any;
 
   constructor(public propertyEditorOptions: ISurveyObjectEditorOptions = null) {
     this.koActiveProperty.subscribe(newValue => {
@@ -36,6 +42,10 @@ export class SurveyObjectEditor {
       this.oldActiveProperty = newValue;
       if (newValue) newValue.isActive = true;
     });
+    var self = this;
+    this.koAfterRender = function(el, con) {
+      self.afterRender(el, con);
+    };
   }
 
   public get selectedObject(): any {
@@ -61,6 +71,20 @@ export class SurveyObjectEditor {
   public objectChanged() {
     this.updatePropertiesObject();
   }
+  protected afterRender(elements, prop) {
+    if (
+      !Survey.SurveyElement ||
+      !Survey.SurveyElement.GetFirstNonTextElement ||
+      !this.onAfterRenderCallback
+    )
+      return;
+    var el = Survey.SurveyElement.GetFirstNonTextElement(elements);
+    var tEl = elements[0];
+    if (tEl.nodeName === "#text") tEl.data = "";
+    tEl = elements[elements.length - 1];
+    if (tEl.nodeName === "#text") tEl.data = "";
+    this.onAfterRenderCallback(this.selectedObject, el, prop);
+  }
   protected updateProperties() {
     if (!this.selectedObject || !this.selectedObject.getType) {
       this.koProperties([]);

diff --git a/src/templates/objecteditor.html b/src/templates/objecteditor.html
@@ -1,19 +1,23 @@
 <script type="text/html" id="objecteditor">
     <table class="table svd_table-nowrap">
         <tbody data-bind="foreach: koProperties">
-            <tr data-bind="click: $parent.changeActiveProperty($data), css: {'active': $parent.koActiveProperty() == $data}">
-                <td width="50%">
-                    <span data-bind="text: displayName, attr: {title: title || displayName}"></span>
-                </td>
-                <td width="50%">
-                    <span data-bind="css: {'form-control': !editor.alwaysShowEditor && (koText() === '' || koText() === null) }, 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, afterRender: function(elements) { afterRenderHandler($element.parentElement, elements); } } -->
-                        <!-- /ko -->
-                    </div>
-                </td>
-            </tr>
+            <!-- ko template: { name: 'objecteditorproperty', afterRender: $parent.koAfterRender } -->
+            <!-- /ko -->
         </tbody>
     </table>
+</script>
+<script type="text/html" id="objecteditorproperty">
+    <tr data-bind="click: $parent.changeActiveProperty($data), css: {'active': $parent.koActiveProperty() == $data}">
+        <td width="50%">
+            <span data-bind="text: displayName, attr: {title: title || displayName}"></span>
+        </td>
+        <td width="50%">
+            <span data-bind="css: {'form-control': !editor.alwaysShowEditor && (koText() === '' || koText() === null) }, 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, afterRender: function(elements) { afterRenderHandler($element.parentElement, elements); } } -->
+                <!-- /ko -->
+            </div>
+        </td>
+    </tr>
 </script>