Ej2 5149 label issue master

Author: pipeline

production/react/demos/samples/form-validator/default/app/index.tsx

@@ -7,10 +7,12 @@ export class Default extends SampleBase<{}, {}>{
   public formValidator: FormValidatorModel;
 
   public rendereComplete(): void {
+    // Initialize the custom function
     let customFunction: (args: Object) => boolean = (args: {}) => {
       return (args as { value: string[] }).value.length <= 5;
     };
     this.formValidator = {
+      // Defines the validation rules
       rules: {
         Required: { required: true },
         Email: { required: true, email: true },
@@ -28,11 +30,13 @@ export class Default extends SampleBase<{}, {}>{
         Regex: { regex: ['^[A-z]+$', 'Allowed only alphabets'] },
         Custom: { custom: [customFunction, 'Allowed char length is 5'] }
       },
+      // Initialize the custom placement
       customPlacement: (inputElement: HTMLElement, errorElement: HTMLElement) => {
         inputElement.parentElement.appendChild(errorElement);
       },
     };
 
+    // Initialize the form-validator
     let formObj: FormValidator;
     formObj = new FormValidator('#htmlFormId', this.formValidator);
   }
@@ -174,6 +178,7 @@ export class Default extends SampleBase<{}, {}>{
             </form>
           </div>
         </div>
+        <div id='description'>
       </div>
     )
   }

production/react/demos/src/common/all-routes.tsx

@@ -78,7 +78,7 @@ export const category: any = {"accordion": {"default":{"name":"Default Functiona
 "daterangepicker": {"default":{"name":"Default Functionalities","category":"DateRangePicker"},"daterange":{"name":"Date Range","category":"DateRangePicker"},"dayspan":{"name":"Day Span","category":"DateRangePicker"},"globalization":{"name":"Globalization","category":"DateRangePicker"},"presets":{"name":"Preset Ranges","category":"DateRangePicker"},"defaultSample":"daterangepicker/default"},
 "dialog": {"basic":{"name":"Basic Usage","category":"Dialog"},"modal":{"name":"Modal","category":"Dialog"},"ajax":{"name":"Ajax Content","category":"Dialog"},"rtl":{"name":"RTL","category":"Dialog"},"defaultSample":"dialog/basic"},
 "dropdownlist": {"default":{"name":"Default Functionalities","category":"DropDownList"},"grouping-icon":{"name":"Grouping and Icons","category":"DropDownList"},"data-binding":{"name":"Data Binding","category":"DropDownList"},"filtering":{"name":"Filtering","category":"DropDownList"},"template":{"name":"Templates","category":"DropDownList"},"cascading":{"name":"Cascading","category":"DropDownList"},"defaultSample":"dropdownlist/default"},
-"form-validator": {"default":{"name":"Default Functionalities","category":"FormValidator"},"defaultSample":"form-validator/default"},
+"form-validator": {"default":{"name":"Default Functionalities","category":"Form Validator"},"defaultSample":"form-validator/default"},
 "grid": {"default":{"name":"Default Functionalities","category":"GRID"},"gridlines":{"name":"GridLines","category":"GRID"},"paging":{"name":"Paging","category":"GRID"},"filtering":{"name":"Filtering","category":"GRID"},"filtermenu":{"name":"Filter Menu","category":"GRID"},"grouping":{"name":"Grouping","category":"GRID"},"sorting":{"name":"Sorting","category":"GRID"},"scrolling":{"name":"Default Scrolling","category":"SCROLLING"},"virtualization":{"name":"Virtual Scrolling","category":"SCROLLING"},"searching":{"name":"Searching","category":"GRID"},"masterdetail":{"name":"Master/Detail","category":"GRID"},"rowdraganddrop":{"name":"Row Drag and Drop","category":"GRID"},"hierarchy":{"name":"Hierarchy Grid","category":"GRID"},"clipboard":{"name":"Clipboard","category":"GRID"},"localbinding":{"name":"Local Binding","category":"DATABINDING"},"remotedata":{"name":"Remote Binding","category":"DATABINDING"},"showhide":{"name":"Show Hide Column","category":"COLUMN"},"stackedheader":{"name":"Stacked Header","category":"COLUMN"},"autowrap":{"name":"AutoWrap Column cells","category":"COLUMN"},"reorder":{"name":"Reorder Columns","category":"COLUMN"},"selection":{"name":"Default Selection","category":"SELECTION"},"selectionapi":{"name":"Selection API","category":"SELECTION"},"checkboxselection":{"name":"Checkbox Selection","category":"SELECTION"},"columnchooser":{"name":"Column Chooser","category":"COLUMN"},"columnresizing":{"name":"Column Resizing","category":"COLUMN"},"normaledit":{"name":"Inline Editing","category":"EDITING"},"dialogedit":{"name":"Dialog Editing","category":"EDITING"},"batch":{"name":"Batch Editing","category":"EDITING"},"command-column":{"name":"CommandColumn","category":"EDITING"},"exporting":{"name":"Basic","category":"EXPORTING"},"advanceexporting":{"name":"Advance Exporting","category":"EXPORTING"},"frozenrows":{"name":"Frozen Rows And Columns","category":"COLUMN"},"columnmenu":{"name":"Column Menu","category":"COLUMN"},"contextmenu":{"name":"Context Menu","category":"GRID"},"columnspanning":{"name":"Column Spanning","category":"COLUMN"},"defaultSample":"grid/default"},
 "lineargauge": {"default":{"name":"Default","category":"Linear Gauge"},"container":{"name":"Container","category":"Linear Gauge"},"data":{"name":"Data Sample","category":"Linear Gauge"},"ranges":{"name":"Ranges","category":"Linear Gauge"},"axes":{"name":"Axes and Pointers","category":"Linear Gauge"},"annotation":{"name":"Annotation","category":"Linear Gauge"},"tooltip":{"name":"Tooltip","category":"Linear Gauge"},"style":{"name":"Styles","category":"Linear Gauge"},"defaultSample":"lineargauge/default"},
 "listview": {"default":{"name":"Default Functionalities","category":"ListView"},"remote-list":{"name":"Remote Data","category":"ListView"},"nested-list":{"name":"Nested List","category":"ListView"},"rtl":{"name":"RTL","category":"ListView"},"defaultSample":"listview/default"},

production/react/demos/src/common/sample-list.tsx

@@ -48,7 +48,7 @@ export let samplesList: any = [
         'name': 'Linear Gauge', 'category': 'Data Visualization', 'order': '02', 'path': 'lineargauge', 'samples': LinearGaugeSampleOrder
     },
     {
-        'name': 'FormValidator', 'category': 'Editors', 'order': '04', 'path': 'form-validator', 'samples': FormSampleOrder
+        'name': 'Form Validator', 'category': 'Editors', 'order': '04', 'path': 'form-validator', 'samples': FormSampleOrder
     },
     {
         'name': 'DropDownList', 'category': 'Editors', 'order': '04', 'path': 'dropdownlist', 'samples': DropDownListSampleOrder

production/react/demos/src/form-validator/config.tsx

@@ -1,3 +1,3 @@
 export const FormSampleOrder: Object = [
-    { 'path': 'form-validator/default', 'component': 'Default', 'name': 'Default Functionalities', 'category': 'FormValidator' }
+    { 'path': 'form-validator/default', 'component': 'Default', 'name': 'Default Functionalities', 'category': 'Form Validator' }
 ]