Implemented renderCustomTreeItem

Author: nanddeepn

docs/documentation/docs/controls/TreeView.md

@@ -104,14 +104,17 @@ For example, you can define your function in a tsx file like this:
 ```typescript
 import * as React from 'react';
 
-export const renderCustomTreeItem = (item: ITreeItem): JSX.Element => {
-    return (
-        <span>
-            <i className={"ms-Icon ms-Icon--" + item.iconProps.iconName} style={{paddingRight:'4px'}}/>
-            {item.label}
-        </span>
-    );
-};
+private renderCustomTreeItem(item: ITreeItem): JSX.Element {
+  return (
+    <span>
+      {
+        item.iconProps &&
+        <i className={"ms-Icon ms-Icon--" + item.iconProps.iconName} style={{ paddingRight: '4px' }} />
+      }
+      {item.label}
+    </span>
+  );
+}
 ```
 
 ## Implementation

src/controls/treeView/TreeItem.tsx

@@ -158,38 +158,38 @@ export default class TreeItem extends React.Component<ITreeItemProps, ITreeItemS
       return (
         // Default rendering of tree item
         <div
-        className={styles.labels}
-        onClick={(e) => {
-          
-          if (this.props.selectionMode != TreeViewSelectionMode.None && item.selectable != false) {
-          e.stopPropagation();
-          if (!item.disabled) {
-            this._itemSelected(e, !this.state.selected);
-          }
-        }}}>
+          className={styles.labels}
+          onClick={(e) => {
+            if (this.props.selectionMode != TreeViewSelectionMode.None && item.selectable != false) {
+              e.stopPropagation();
+              if (!item.disabled) {
+                this._itemSelected(e, !this.state.selected);
+              }
+            }
+          }}>
           {
             this.props.showCheckboxes && item.selectable == false && !item.children &&
             <span className={styles.blankspace}>&nbsp;</span>
           }
+          
           {
             // Rendering when item has iconProps
             item.iconProps &&
-             <span>
+            <span>
               <Icon className={styles.icon} iconName={item.iconProps.iconName} style={item.iconProps.style} />
               &nbsp;
               </span>
           }
-         
-            {item.label}
-            {
-              // Render sublabel
-              item.subLabel &&
-              <div className={styles.itemSubLabel}>
-                {item.subLabel}
-              </div>
-            }
-          </div>
-      
+
+          {item.label}
+          {
+            // Render sublabel
+            item.subLabel &&
+            <div className={styles.itemSubLabel}>
+              {item.subLabel}
+            </div>
+          }
+        </div>
       );
     }
   }

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -934,19 +934,17 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
         </div>
 
         <div>
-          Demo of Tree View
-              <TreeView items={this.treeitems} 
-              defaultExpanded={false} 
-              selectionMode={TreeViewSelectionMode.Multiple} 
-              showCheckboxes={true}
-              treeItemActionsDisplayMode={TreeItemActionsDisplayMode.ContextualMenu}
-              defaultSelectedKeys={['R2', '6']}
-              onExpandCollapse={this.onExpandCollapseTree}
-              onSelect={this.onItemSelected}
-              >
-
-              </TreeView>
-          </div>
+          <h3>Tree View</h3>
+          <TreeView items={this.treeitems}
+            defaultExpanded={false}
+            selectionMode={TreeViewSelectionMode.Multiple}
+            showCheckboxes={true}
+            treeItemActionsDisplayMode={TreeItemActionsDisplayMode.ContextualMenu}
+            defaultSelectedKeys={['R2', '6']}
+            onExpandCollapse={this.onExpandCollapseTree}
+            onSelect={this.onItemSelected}
+            onRenderItem={this.renderCustomTreeItem} />
+        </div>
       </div>
     );
   }
@@ -959,6 +957,18 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
     console.log("items selected: " + items.length);
   }
 
+  private renderCustomTreeItem(item: ITreeItem): JSX.Element {
+    return (
+      <span>
+        {
+          item.iconProps &&
+          <i className={"ms-Icon ms-Icon--" + item.iconProps.iconName} style={{ paddingRight: '4px' }} />
+        }
+        {item.label}
+      </span>
+    );
+  }
+
   private skypeCheckIcon: IIconProps = { iconName: 'SkypeCheck' };
   private treeitems = [
     {
@@ -1053,7 +1063,5 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
 
   private _onFolderSelect = (folder: IFolder): void => {
     console.log('selected folder', folder);
-
   }
-
 }