diff --git a/example/src/index.ts b/example/src/index.ts
index d17138f..a17aeef 100644
--- a/example/src/index.ts
+++ b/example/src/index.ts
@@ -9,7 +9,7 @@ import { TimeGraphChartSelectionRange } from "timeline-chart/lib/layer/time-grap
 import { TimeGraphAxisCursors } from "timeline-chart/lib/layer/time-graph-axis-cursors";
 // import { timeGraph } from "timeline-chart/lib/test-data";
 import { TimelineChart } from "timeline-chart/lib/time-graph-model";
-import { TimeGraphRowElement, TimeGraphRowElementStyle } from "timeline-chart/lib/components/time-graph-row-element";
+import { TimeGraphRowElementStyle } from "timeline-chart/lib/components/time-graph-row-element";
 import { TestDataProvider } from "./test-data-provider";
 import { TimeGraphChartGrid } from "timeline-chart/lib/layer/time-graph-chart-grid";
 import { TimeGraphVerticalScrollbar } from "timeline-chart/lib/layer/time-graph-vertical-scrollbar";
@@ -86,15 +86,6 @@ const timeGraphChart = new TimeGraphChart('timeGraphChart', {
         const newRange: TimelineChart.TimeGraphRange = { start, end };
         const newResolution: number = resolution * 0.1;
         timeGraph = testDataProvider.getData({ range: newRange, resolution: newResolution });
-        if (selectedElement) {
-            for (const row of timeGraph.rows) {
-                const selEl = row.states.find(el => !!selectedElement && el.id === selectedElement.id);
-                if (selEl) {
-                    selEl.selected = true;
-                    break;
-                }
-            }
-        }
         return {
             rows: timeGraph.rows,
             range: newRange,
@@ -149,17 +140,6 @@ timeGraphChart.registerRowElementMouseInteractions({
         }
     }
 });
-let selectedElement: TimeGraphRowElement | undefined;
-timeGraphChart.onSelectedRowElementChanged((model) => {
-    if (model) {
-        const el = timeGraphChart.getElementById(model.id);
-        if (el) {
-            selectedElement = el;
-        }
-    } else {
-        selectedElement = undefined;
-    }
-})
 
 const timeGraphChartArrows = new TimeGraphChartArrows('timeGraphChartArrows', rowController);
 timeGraphChartContainer.addLayer(timeGraphChartArrows);
diff --git a/timeline-chart/src/layer/time-graph-chart.ts b/timeline-chart/src/layer/time-graph-chart.ts
index 266ab64..e8badc5 100644
--- a/timeline-chart/src/layer/time-graph-chart.ts
+++ b/timeline-chart/src/layer/time-graph-chart.ts
@@ -295,18 +295,22 @@ export class TimeGraphChart extends TimeGraphChartLayer {
         }).bind(this));
         this.addChild(rowComponent);
         this.rowComponents.set(row, rowComponent);
-        let selectedElement: TimeGraphRowElement | undefined;
+        if (this.rowController.selectedRow && this.rowController.selectedRow.id === row.id) {
+            this.selectRow(row);
+        }
         row.states.forEach((rowElementModel: TimelineChart.TimeGraphRowElementModel) => {
             const el = this.createNewRowElement(rowElementModel, rowComponent);
             if (el) {
-                el.model.selected && (this.selectedElementModel = el.model) && (selectedElement = el);
                 this.addElementInteractions(el);
-                !el.model.selected && this.addChild(el);
+                this.addChild(el);
+                if (this.selectedElementModel && this.rowController.selectedRow
+                    && this.rowController.selectedRow.id === row.id
+                    && this.selectedElementModel.range.start === el.model.range.start
+                    && this.selectedElementModel.range.end === el.model.range.end) {
+                    this.selectRowElement(el.model);
+                }
             }
         });
-        if (selectedElement) {
-            this.addChild(selectedElement);
-        }
     }
 
     protected createNewRowElement(rowElementModel: TimelineChart.TimeGraphRowElementModel, rowComponent: TimeGraphRow): TimeGraphRowElement | undefined {