adding groups

build/css/ox.ui.css

@@ -537,7 +537,7 @@ Lists
     background: rgb(24, 24, 24);
     cursor: ew-resize;
 }
-.OxTextList .OxBar .OxSelect {
+.OxTextList .OxBar .OxButton {
     position: absolute;
     right: 0px;
     width: 11px;

build/js/ox.ui.js

@@ -2598,6 +2598,9 @@ requires
                         }
                         $.each(result.data.items, function(i, v) {
                             var pos = offset + i;
+                            if (Ox.isUndefined(v.id)) {
+                                 v.id = pos;
+                            }
                             self.$items[pos] = new Ox.ListItem({
                                 construct: self.options.construct,
                                 data: v,
@@ -2962,10 +2965,11 @@ requires
         that.$titles[getColumnPositionById(self.options.columns[self.selectedColumn].id)].css({
             width: (self.options.columns[self.selectedColumn].width - 25) + "px"
         });
-        that.$select = $("<div>")
-            .addClass("OxSelect")
-            .html(oxui.symbols.select)
-            .appendTo(that.$bar.$element);
+        that.$select = new Ox.Button({
+            style: "symbol",
+            type: "image",
+            value: "select"
+        }).appendTo(that.$bar.$element);
 
         // Body
 
@@ -4083,6 +4087,7 @@ requires
             length = self.options.elements.length,
             dimensions = oxui.getDimensions(self.options.orientation),
             edges = oxui.getEdges(self.options.orientation);
+        Ox.print("dimensions, edges", dimensions, edges)
         $.each(self.options.elements, function(i, v) {
             var element = v.element
                 .css({

demos/test/list.js

@@ -1,6 +1,7 @@
 $(function() {
     Ox.theme("modern");
     var $body = $("body"),
+        $document = $(document),
         app = new Ox.App({
             requestURL: "http://blackbook.local:8000/api/"
             // requestURL: "http://lion.oil21.org:8000/api/"
@@ -33,6 +34,106 @@ $(function() {
             ],
             size: "large"
         }),
+        groups = [
+            {
+                id: "director",
+                title: "Director"
+            },
+            {
+                id: "country",
+                title: "Country"
+            },
+            {
+                id: "year",
+                title: "Year"
+            },
+            /*
+            {
+                id: "language",
+                title: "Language"
+            },
+            {
+                id: "genre",
+                title: "Genre"
+            }
+            */
+        ],
+        elements = [],
+        documentWidth = $document.width();
+    Ox.print("documentWidth", documentWidth)
+    $.each(groups, function(i, v) {
+        var size = documentWidth / 3 + (documentWidth % 3 > i);
+        elements.push({
+            element: new Ox.TextList({
+                columns: [
+                    {
+                        align: "left",
+                        id: "name",
+                        operator: "+",
+                        title: "Name",
+                        visible: true,
+                        width: size - 72
+                    },
+                    {
+                        align: "right",
+                        id: "items",
+                        operator: "-",
+                        title: "Items",
+                        visible: true,
+                        width: 60
+                    }
+                ],
+                id: "group_" + v.id,
+                request: function(options) {
+                    delete options.keys;
+                    app.request("find", $.extend(options, {
+                        group: v.id,
+                        query: {
+                            conditions: [
+                                {
+                                    key: "country",
+                                    value: "",
+                                    operator: ""
+                                }
+                            ],
+                            operator: ""
+                        }
+                    }), options.callback);
+                },
+                sort: [
+                    {
+                        key: "name",
+                        operator: "+"
+                    }
+                ]
+            }),
+            size: size
+        });
+    });
+    Ox.print("elements", elements)
+    var $groups = new Ox.SplitPanel({
+            elements: elements,
+            orientation: "horizontal"
+        }),
+        $listbar = Ox.Bar({
+            size: 24
+        });
+        $select = Ox.Select({
+            id: "selectView",
+            items: [
+                {
+                    checked: true,
+                    id: "list",
+                    title: "View: List"
+                },
+                {
+                    id: "icons",
+                    title: "View: Icons"
+                }
+            ]
+        }).css({
+            margin: "4px"
+        }).width(128).appendTo($listbar);
         $list = new Ox.TextList({
             columns: [
                 {
@@ -138,10 +239,14 @@ $(function() {
                 }
             ]
         }),
-        $main = Ox.SplitPanel({
+        $right = Ox.SplitPanel({
             elements: [
                 {
-                    element: $menu,
+                    element: $groups,
+                    size: 128
+                },
+                {
+                    element: $listbar,
                     size: 24
                 },
                 {
@@ -149,5 +254,17 @@ $(function() {
                 }
             ],
             orientation: "vertical"
+        })
+        $main = Ox.SplitPanel({
+            elements: [
+                {
+                    element: $menu,
+                    size: 24
+                },
+                {
+                    element: $right
+                }
+            ],
+            orientation: "vertical"
         }).appendTo($body);
 });