• Demos
  • Docs
  • License
  • Download
  • Community
    • Forums
    • Blogs
    • Login
  • About
    • About Us
    • Contact Us
    • FAQ
new updated professional

  • Most Popular

  • Framework

  • Grid

  • Chart

  • Gantt Chart

  • Docking Layout

  • Web Components

  • Accordion

  • Badge

  • Button

  • Calendar

  • Card

  • Carousel

  • Checkbox

  • ComboBox

  • Color Panel

  • Color Picker

  • DateTimePicker

  • DropDownList

  • DropDownButton

  • File Upload

  • Gauge

  • ListBox

  • ListMenu

  • MaskedTextBox

  • Menu

  • MultilineTextBox

  • MultiSplitButton

  • NumericTextBox

  • Pager

  • PasswordTextBox

  • PowerButton

  • ProgressBar

  • Query Builder

  • RadioButton

  • RepeatButton

  • ScrollBar

  • Slider

  • Splitter

  • SwitchButton

  • Sortable

  • Table

  • Tabs

  • Tank

  • TextBox

  • TimePicker

  • Toast

  • ToggleButton

  • Tooltip

  • Tree

  • Validator

  • Window

  • Integration & Tools

  • Angular
  • React
  • Vue
  • Bootstrap
  • Theme Builder

  • Framework

  • Create Custom Element
  • Introduction
  • Overview
  • Loops. Render Table with smart-for
  • Declarative Rendering
  • Event Binding
  • Sub Property Two-Way Binding
  • App with Grid Binding
  • Form Binding
  • Handling User Input
  • Form Checkbox Binding
  • Form Checkbox Binding to Array
  • Form DropDownList Binding
  • Form Radio Input Binding
  • Form TextBox Binding
  • Form DateTimePicker Binding
  • HTML Elements Binding
  • HTML Checkbox input Model Binding
  • HTML Input Binding
  • HTML Checkbox Binding to Array
  • HTML Number Input Binding
  • HTML Radio Button Binding
  • HTML Select Binding
  • HTML Select Multiple Binding
  • Loops Rendering
  • List Rendering with smart-for
  • Advanced List Rendering with smart-for
  • Grid Layout System
  • Overview
  • Advanced
  • Equal Width
  • How it works
  • Layout with span
  • Nested Grid
  • No Gaps
  • Options
  • Ordering
  • Stacked to Horizontal
  • Stack Layout System
  • Overview
  • Gaps
  • Options
  • Spacing
  • Stretch
  • Uneven Stretch

  • Accordion

  • Overview
  • Basic
  • Events
  • Methods
  • Expand Modes
  • In Tabs
  • With Tabs
  • Reorder
  • Using with Angular
  • Using with Vue
  • Using with React

  • Badge

  • Overview

  • Button

  • Overview
  • Basic
  • Events
  • Images
  • Hover Glow effect
  • 3d
  • Blobs Button
  • Bootstrap Style
  • Progress Style
  • Change Style
  • Button Concept
  • Button Flip
  • Fizzy Button
  • Fancy Button
  • Flip Cover Button
  • Flush Button
  • Button with Icon
  • Fancy Icon
  • Rounded Button
  • Rounded Pulse Button
  • Sliced Button
  • Thin Buttons
  • Using with Angular
  • Using with Vue
  • Using with React

  • Card

  • Overview
  • Basic
  • Events

  • Carousel

  • Overview
  • Auto Play
  • 3D
  • 3D Directions
  • 3D Template
  • Full Page
  • Template
  • Thumbnails
  • Cards
  • Using with Angular
  • Using with Vue
  • Using with React

  • Calendar

  • Overview
  • Classic Display Mode
  • Custom Header
  • Events
  • First Day Of Week
  • Footer
  • Hotel Showcase
  • Important Days
  • List Display View
  • Locale
  • Methods
  • Min/Max Date
  • Multiple Months
  • Navigation Modes
  • Restricted Dates
  • Right To Left
  • Views
  • Week Numbers
  • Weeks Visibility
  • Using with Angular
  • Using with Vue
  • Using with React

  • Chart

  • Overview
  • Line and Area Series
  • Line Series
  • Stacked Line Series
  • 100% Stacked Line Series
  • Line Series with Labels
  • Line Series with Missing Points
  • Line Series with 50k Data Points
  • Line Series with Conditional Colors
  • Step Line Series
  • Spline Series
  • Spline Series with Color Bands
  • Area Series
  • 100% Stacked Area Series
  • Area Series with Missing Points
  • Area Range and Line Series
  • Column and Bar Series
  • Column Series
  • Stacked Column Series
  • Stacked and Grouped Column Series
  • 100% Stacked Column Series
  • Column Series with Conditional Colors
  • Column Range
  • Fixed Placement Columns
  • Bar Series
  • Column Series Spacing
  • Negative Bar Series
  • Column Series with Labels
  • Pie & Donut Series
  • Pie Series
  • Pie Series Legend
  • Donut Series
  • Logarithmic Axis
  • Columns with Logarithmic Axis
  • Columns with base 10 Logarithmic Axis
  • Logarithmic Axis Base Line
  • Logarithmic X Axis
  • Zooming (Range Selection)
  • Date X-axis Range Selection
  • Numeric X-axis Range Selection
  • Waterfall Series
  • Waterfall Series
  • Waterfall with Multiple Series
  • Financial Series
  • Candlestick Chart
  • OHLC Chart
  • Polar and Spider Series
  • Polar Chart
  • Partial Polar Chart
  • Polar Series Bands
  • Spider Chart
  • Funnel and Pyramid Series
  • Funnel Chart
  • Stacked Funnel Chart
  • Pyramid Chart
  • Stacked Pyramid Chart
  • Bubble Chart
  • Scatter Chart
  • Scatter Chart with 25k Data Points
  • Live Updates Performance
  • Add Data Points Dynamically
  • Color Bands
  • Sparklines
  • Styling and Layout
  • Axis Settings
  • Intervals and Steps
  • Systematic Colors Chart
  • Crosshairs
  • Color Schemes
  • Chart Background Image
  • Custom Styling
  • Custom Drawing
  • Chart Events
  • Chart Range Selector Events
  • Chart Methods
  • Chart Export and Printing
  • Using with Angular
  • Using with Vue
  • Using with React

  • CheckBox

  • Overview
  • Basic
  • Events
  • Images
  • Using with Angular
  • Using with Vue
  • Using with React

  • ComboBox

  • Overview
  • Auto Complete
  • Automatic Positioning
  • Basic
  • Button Position
  • Checkboxes
  • Filterable
  • Item Template
  • Methods
  • Multiple Selection Tokens
  • Multiple Selection Mode
  • Open Modes
  • Popup Resizing
  • Position
  • Token Template
  • Using with Angular
  • Using with Vue
  • Using with React

  • Color Panel

  • Overview
  • Apply Value Mode
  • Default
  • Grid
  • Hexagonal
  • Material Grid
  • Palette Mode
  • Radial
  • Spectrum Grid
  • Events
  • Localization
  • Tooltips
  • Using with Angular
  • Using with Vue
  • Using with React

  • Color Picker

  • Overview
  • Color Editing
  • Default
  • Grid
  • Hexagonal
  • Material Grid
  • Palette Mode
  • Radial
  • Spectrum Grid
  • Editing
  • Value Display Mode
  • Value Format
  • Using with Angular
  • Using with Vue
  • Using with React

  • DateTimePicker

  • Overview
  • Basic
  • Dropdown Display Mode
  • Dropdown position
  • Edit Modes
  • Formats
  • High Precision/Scientific
  • Localization
  • Time Zones
  • Using with Angular
  • Using with Vue
  • Using with React

  • DropDownButton

  • Overview
  • Auto Height
  • Auto Position
  • Button Position
  • Dropdown Position
  • Dropdown Resize
  • Open Modes
  • Events
  • Methods
  • Using with Angular
  • Using with Vue
  • Using with React

  • DropDownList

  • Overview
  • Auto Complete
  • Automatic Positioning
  • Basic
  • Button Position
  • Checkboxes
  • Multiple Selection Mode
  • Filterable
  • Item Template
  • Methods
  • Multiple Selection
  • Open Modes
  • Popup Resizing
  • Position
  • Token Template
  • Using with Angular
  • Using with Vue
  • Using with React

  • Docking Layout

  • Overview
  • Auto Hide Item
  • Auto Save/Load
  • Drop Position
  • Insert Before/After Item
  • Insert Outside Target Group
  • Insert Top Level Item
  • Inside Window
  • Item Dock & Undock
  • Layout Item
  • Layout Item Group
  • Remove Item
  • Snap Modes
  • State
  • Update Item
  • Visual Studio Showcase
  • Using with Angular
  • Using with Vue
  • Using with React

  • File Upload

  • Overview
  • Directory
  • Drop Zone
  • Events
  • File Zone
  • Images only
  • Item Template
  • Localization
  • Multiple
  • Show Progress
  • Using with Angular
  • Using with Vue
  • Using with React

  • Gantt Chart

  • Overview
  • Auto Height
  • Auto Schedule
  • Auto Scroll
  • Expand/Collapse
  • Custom Popup Editor
  • Custom Task Editor
  • Disable Drag Resize
  • Duration
  • Inverted Layout
  • State Load and Save
  • Localization
  • Many Tasks
  • Methods
  • Min/Max Task Dates
  • Nested Project
  • Nonworking Days
  • Nonworking Hours
  • Project Drag
  • Snap to nearest
  • Sync Project
  • Sync Project Drag
  • Task Columns
  • Task Connections
  • View
  • Using with Angular
  • Using with Vue
  • Using with React

  • Gauge

  • Overview
  • Analog Display Type
  • Basic
  • Change Font Size
  • Coercion
  • Custom Interval
  • Custom Needle
  • Date Scale
  • Integer 64-bit
  • Logarithmic Scale
  • Mechanical Action
  • Showcase
  • Size-Mode Auto
  • Styling
  • Tick label settings
  • Using with Angular
  • Using with Vue
  • Using with React

  • Grid

  • Overview
  • Featured
  • Charting Grid Data
  • Dashboard
  • Business
  • Spreadsheet
  • Spreadsheet from JSON
  • Financial Live Data
  • Auto-show Select Checkbox
  • Test App
  • Init
  • Default Init
  • Init from DIV
  • Init from Attribute
  • Import as ES6 Module
  • Smart App
  • Tree Grid
  • Tree Grid
  • Tree Grid Nested JSON
  • Tree Grid Icons
  • Tree Grid Large Data
  • Tree Grid Animation
  • Tree Grid Checkboxes
  • Virtual Tree Grid
  • Virtual Tree Grid with Pagination
  • Appearance
  • Auto Size
  • Cells Wrap
  • Row Header Context Icons
  • Alternating Rows
  • Grid Lines
  • Merged Cells(RowSpan, ColSpan)
  • Columns & Rows
  • Columns: Template
  • Columns: Dynamic Template
  • Columns: Components Template
  • Columns: Formatting
  • Columns: Sticky
  • Columns: Checkbox
  • Context Menu
  • Row Headers
  • Row Details
  • Large Data Set
  • Localization
  • Columns & Rows CRUD
  • Columns: CRUD
  • Rows: CRUD
  • Columns & Rows Pin/Freeze
  • Freeze Column
  • Freeze Last Column
  • Freeze First & Last Column
  • Freeze Rows
  • Freeze Far Rows
  • Freeze First & Last Row
  • Freeze Rows & Columns
  • Columns & Rows Resize
  • Columns: Resize
  • Row Resize
  • Columns: Dynamic Width
  • Nested Grids
  • Nested Grids
  • Nested Grids Dialog
  • Editing
  • Cells Editing
  • Batch Editing
  • Row Editing
  • Dialog Editing
  • Add New Row
  • Add New Row with Auto Insert
  • Auto Complete Cell Editor
  • Auto Complete Dropdown Editor
  • DatetimePicker Editor
  • Textarea Editor
  • Custom Editor
  • Column Header Edit
  • Row Header Edit
  • Command Column
  • Command Column Position
  • Command Column Labels
  • Command Column Inline
  • Custom Command Column
  • Selection
  • Selection: Rows
  • Selection: Cells
  • Selection: Checkbox
  • Selection: Checkbox Config
  • Selection: Events
  • Live Updates
  • Live Updates (1s)
  • Live Updates Performance (50ms)
  • Live Updates Performance (10ms)
  • Pagination
  • Pagination
  • Pagination: Options
  • Virtual Pagination
  • Virtual Paging, Filtering, Sorting
  • Paging Spinner
  • Grouping
  • Grouping
  • Grouping: Styling
  • Filter
  • Filtering
  • Sort
  • Sort by One Column
  • Sort by Many Columns
  • Sort Animation
  • Custom Sort Icons
  • Data Export & Print
  • Export Data
  • Export to Image
  • Import Data
  • Export with Grouping
  • Export Tree Grid
  • Print
  • Scrolling
  • Scroll: Infinite
  • Scroll: Deferred
  • Scroll: Virtual
  • Scroll: Virtual with Immediate Fetch
  • Scroll: Virtual with Sorting and Filtering
  • Scroll: CellValue Callback
  • Using with Angular
  • Using with Vue
  • Using with React

  • LED

  • Overview
  • Input Group
  • Input Group with Custom Elements

  • ListBox

  • Overview
  • Basic
  • Checkboxes
  • Custom Filtering
  • Custom Elements in Items
  • Editable Items
  • Filter
  • Grouping
  • Images
  • Item Template
  • Lazy Loading
  • Methods
  • Radio Buttons
  • Reorder
  • Multiple Selection
  • Virtualization
  • Using with Angular
  • Using with Vue
  • Using with React

  • ListMenu

  • Overview
  • Basic
  • Data Source
  • Filterable
  • Grouped
  • Lazy Loading
  • Using with Angular
  • Using with Vue
  • Using with React

  • MaskedTextBox

  • Overview
  • Basic
  • Cut, Copy & Paste
  • Hide Prompt char on Blur
  • Overwrite Mode
  • Prompt char
  • Validation
  • Using with Angular
  • Using with Vue
  • Using with React

  • Menu

  • Overview
  • Add & Remove Items
  • Basic
  • Checkboxes
  • Context Menu
  • Data Source
  • Dropdown Position
  • Hidden Scroll Buttons
  • Items Layout
  • Items with Icons
  • Load from UL
  • Selection Mode
  • Tree Mode
  • Vertical Mode
  • Using with Angular
  • Using with Vue
  • Using with React

  • MultiSplitButton

  • Overview
  • Basic
  • Button Group
  • Button Position
  • Checkboxes
  • Events
  • Using with Angular
  • Using with Vue
  • Using with React

  • MultilineTextBox

  • Overview
  • Basic
  • Display Mode
  • Enter Key Behavior
  • Resizable
  • Scrollbars
  • Using with Angular
  • Using with Vue
  • Using with React

  • NumericTextBox

  • Overview
  • Basic
  • Complex Numbers
  • Floating-Point Numbers
  • Integer Numbers
  • Localization
  • Scientific Notation Numbers
  • Styling
  • Using with Angular
  • Using with Vue
  • Using with React

  • Pager

  • Overview
  • Basic
  • Events
  • Localization
  • Page Size Selector
  • Using with Angular
  • Using with Vue
  • Using with React

  • PasswordTextBox

  • Overview
  • Basic
  • Custom Password Strength
  • Events
  • Password Icon
  • Strength
  • Localization
  • Strength Template
  • Using with Angular
  • Using with Vue
  • Using with React

  • PowerButton

  • Overview

  • ProgressBar

  • Overview
  • Barber Shop Style
  • Basic
  • Amazon Echo Style
  • Events
  • Methods
  • Nested Button
  • Using with Angular
  • Using with Vue
  • Using with React

  • Query Builder

  • Overview
  • Custom Operations
  • Value
  • Using with Angular
  • Using with Vue
  • Using with React

  • RadioButton

  • Overview
  • Basic
  • Events
  • Images
  • Using with Angular
  • Using with Vue
  • Using with React

  • RepeatButton

  • Overview

  • ScrollBar

  • Overview
  • Using with Angular
  • Using with Vue
  • Using with React

  • Slider

  • Overview
  • Basic
  • Buttons
  • Click Coordinates
  • Coercion
  • Custom Interval
  • Date Scale
  • Integer Scale
  • Labels
  • Logarithmic Scale
  • Mechanical Action
  • Range Selection
  • Ticks On Track
  • Tooltip
  • Using with Angular
  • Using with Vue
  • Using with React

  • Splitter

  • Overview
  • Auto Sizing
  • Expand / Collapse
  • Events
  • Live Resize
  • Locked Items
  • Methods
  • Min / Max Item Size
  • Nested Splitters
  • Orientation
  • Resize Modes
  • Resize With Window
  • Using with Angular
  • Using with Vue
  • Using with React

  • Sortable

  • Overview
  • List
  • Vertical Puzzle
  • Horizontal Puzzle
  • Using with Angular
  • Using with Vue
  • Using with React

  • SwitchButton

  • Overview
  • Using with Angular
  • Using with Vue
  • Using with React

  • Table

  • Overview
  • Table Bordered
  • Table Dark Bordered
  • Table CRUD
  • Sort
  • Sort by Many Columns
  • Dark Table
  • Dark Head
  • Hover
  • Primary Head
  • Striped
  • Responsive Table
  • Using with Angular
  • Using with Vue
  • Using with React

  • Tabs

  • Overview
  • Auto Height
  • Badges
  • Basic
  • Close Buttons
  • Data Source
  • Grouping
  • Hidden Scroll Buttons
  • Insert, Remove, Update
  • Integration
  • Label Settings
  • Layout
  • Position
  • Reorder
  • Selection Mode
  • Styling
  • Title Template
  • Using with Angular
  • Using with Vue
  • Using with React

  • Tank

  • Overview
  • Basic
  • Coercion
  • Custom Interval
  • Date Scale
  • Labels
  • Layout
  • Logarithmic Scale
  • Mechanical Action
  • Resizing on Label Change
  • Scientific Notation
  • Settings
  • Label Colors
  • Ticks On Track
  • Tooltip
  • Using with Angular
  • Using with Vue
  • Using with React

  • TextBox

  • Overview
  • Auto Complete
  • Basic
  • Data Source Callback
  • Display Mode
  • Events
  • Using with Angular
  • Using with Vue
  • Using with React

  • TimePicker

  • Overview
  • 24-hour Format
  • Auto Switch to Minutes
  • Basic
  • Footer
  • Landscape View
  • Settings
  • Using with Angular
  • Using with Vue
  • Using with React

  • Toast

  • Overview
  • Auto Close
  • Basic
  • Blink
  • Custom Container
  • Custom Icon
  • Events
  • Item Template
  • Modal
  • Settings
  • Using with Angular
  • Using with Vue
  • Using with React

  • ToggleButton

  • Overview
  • Using with Angular
  • Using with Vue
  • Using with React

  • Tooltip

  • Overview
  • Absolute Position
  • Basic
  • Custom Arrow Position
  • Events
  • On Progress Bar
  • Using with Angular
  • Using with Vue
  • Using with React

  • Tree

  • Overview
  • Add / Remove Items
  • Connecting Lines
  • Custom Toggle Element
  • Data Source
  • Drag & Drop
  • Editable Labels
  • Filtering
  • Hierarchical Checkboxes
  • Item Template
  • Load on Demand
  • Move up/down
  • Scroll Modes
  • Selection Modes
  • Selection Display Modes
  • Sorting
  • State Maintenance
  • Using with Angular
  • Using with Vue
  • Using with React

  • Validator

  • Overview
  • Base Inputs

  • Window

  • Overview
  • Basic
  • Custom Header Buttons
  • Events
  • Header Buttons
  • Header/Footer Template
  • Header Position
  • Inside Container
  • Methods
  • Minimization
  • Modal
  • Multiple Windows
  • Resizing
  • Snap Mode
  • Tabs
  • Window Types
  • Wait Window
  • Using with Angular
  • Using with Vue
  • Using with React

Smart.Grid

Theme

Edit Theme
DEMO
INDEX.JS
INDEX.HTML
STYLES.CSS
APP.MODULE.TS
API

				
		

		

			

			
		

		

			

				
		

		

			

		
	
		

		
	
		
		

	
		

			

				

					

						
	
							
							

						

					

				

			

	  	

		

		
			

	

		
		
		
		
		
	

	

		
		
		
	

	

		
		
	






Smart Grid Web Component Tree Grid with Nested Rows Demo



Do you like it? Support us with your  star:  Star




	


Edit in CodePen


	

	
	



		

    






  

	

	

	  

		
Documentation & Learning Resources

		
    
		  
  • Getting Started
    • 
		  
  • CSS Styling and Appearance
    • 
		  
  • API Documentation
    • 
		  
  • Open Theme Builder
    • 
		

	  

	  
	

  













    

      

        
    
          
  • Demo
    • 
          
  • Download
    • 
          
  • Docs
    • 
          
  • License
    • 
          
  • Services
    • 
        

        
    
          
  • Forums
    • 
          
  • About
    • 
          
  • Terms of Use
    • 
          
  • Privacy Policy
    • 
          
  • Contact Us
    • 
        

      

      

        
    
          
    • 
          
    • 
		      
    • 
        

      

      

        

          
		  
Smart HTML Elements by jQWidgets © 2018-2019. All Rights Reserved.