diff --git a/source/Ox.UI/js/List/ColumnList.js b/source/Ox.UI/js/List/ColumnList.js
index 4f1994bb..4429d0b8 100644
--- a/source/Ox.UI/js/List/ColumnList.js
+++ b/source/Ox.UI/js/List/ColumnList.js
@@ -11,16 +11,92 @@ Ox.ColumnList = function(options, self) {
     var that = Ox.Element({}, self)
         .defaults({
             columns: [],
-            item: {},
+            custom: {},
             items: [],
             list: 'table',
+            selected: [],
+            width: 768
         })
         .options(options || {})
         .update({
-        
+            width: function() {
+                self.columnWidths = getColumnWidths();
+                self.$panel.size(0, self.columnWidths[0]),
+                self.$panel.size(2, self.columnWidths[2])
+            }
         })
         .addClass('OxColumnList');
 
+    self.columnWidths = getColumnWidths();
+    self.numberOfColumns = self.options.columns.length;
+
+    self.$lists = self.options.columns.map(function(column, i) {
+        var isLastColumn = i == self.numberOfColumns - 1;
+        return Ox.CustomList({
+                item: self.options.columns[i].item,
+                itemHeight: self.options.columns[i].itemHeight,
+                items: i == 0 ? self.options.items : [],
+                itemWidth: self.columnWidths[i],
+                keys: self.options.columns[i].keys,
+                max: 1,
+                scrollbarVisible: true,
+                unique: 'id'
+            })
+            .bindEvent({
+                key_left: function() {
+                    i && self.$lists[i - 1].gainFocus();
+                },
+                key_right: function() {
+                    var object, selected = self.$lists[i].options('selected');
+                    if (selected.length) {
+                        if (i < self.numberOfColumns - 1) {
+                            object = Ox.getObjectById(self.options.items, self.options.selected[0][0]);
+                            if (i == 1) {
+                                object = Ox.getObjectById(object.items, self.options.selected[1][0]);
+                            }
+                            self.$lists[i + 1]
+                                .options({selected: [object.items[0].id]})
+                                .gainFocus();
+                        }
+
+                    }
+                },
+                select: function(data) {
+                    var id = data.ids[0], index;
+                    self.options.selected[i] = data.ids;
+                    if (i == 0) {
+                        index = Ox.getIndexById(self.options.items, id);
+                        self.$lists[1].options({
+                            items: id ? self.options.items[index].items : []
+                        });
+                    } else if (i == 1) {
+                        index = [];
+                        index[0] = Ox.getIndexById(self.options.items, self.options.selected[0][0]);
+                        index[1] = Ox.getIndexById(self.options.items[index[0]].items, id);
+                        self.$lists[2].options({
+                            items: id ? self.options.items[index[0]].items[index[1]].items : []
+                        });
+                    }
+                }
+            });
+    });
+
+    self.$panel = Ox.SplitPanel({
+        elements: self.$lists.map(function($list, index) {
+            return Ox.extend(
+                {element: $list},
+                index == 1 ? {} : {size: self.columnWidths[index]}
+            );
+        }),
+        orientation: 'horizontal'
+    });
+
+    that.setElement(self.$panel);
+
+    function getColumnWidths() {
+        return Ox.splitInt(self.options.width, 3);
+    }
+
     return that;
 
 };
\ No newline at end of file
diff --git a/source/Ox.UI/js/List/CustomList.js b/source/Ox.UI/js/List/CustomList.js
index 5ff7c73c..80278d3a 100644
--- a/source/Ox.UI/js/List/CustomList.js
+++ b/source/Ox.UI/js/List/CustomList.js
@@ -29,13 +29,20 @@ Ox.CustomList = function(options, self) {
         })
         .options(options || {})
         .update({
-        
+            items: function() {
+                self.$list.options({items: self.options.items});
+            },
+            selected: function() {
+                self.$list.options({selected: self.options.selected});
+                // FIXME: TableList doesn't trigger event here
+                that.triggerEvent('select', {ids: self.options.selected});
+            }
         })
         .addClass('OxCustomList');
 
     self.$list = Ox.List({
             construct: function(data) {
-                return self.options.item(data).addClass('OxTarget');
+                return self.options.item(data, self.options.itemWidth - Ox.UI.SCROLLBAR_SIZE).addClass('OxTarget');
             },
             draggable: self.options.draggable,
             itemHeight: self.options.itemHeight,
@@ -60,10 +67,36 @@ Ox.CustomList = function(options, self) {
             overflowY: (self.options.scrollbarVisible ? 'scroll' : 'hidden')
         })
         .bindEvent(function(data, event) {
+            if (event == 'select') {
+                self.options.selected = data.ids;
+            }
             that.triggerEvent(event, data);
         })
         .appendTo(that);
 
+    /*@
+    gainFocus <f> gain Focus
+    @*/
+    that.gainFocus = function() {
+        self.$list.gainFocus();
+        return that;
+    };
+
+    /*@
+    hasFocus <f> has Focus
+    @*/
+    that.hasFocus = function() {
+        return self.$list.hasFocus();
+    };
+
+    /*@
+    loseFocus <f> lose Focus
+    @*/
+    that.loseFocus = function() {
+        self.$list.loseFocus();
+        return that;
+    };
+
     return that;
 
 };
\ No newline at end of file