From d5352646e42284467758aefbc0d7158e37db87cd Mon Sep 17 00:00:00 2001 From: Timothy Sweet Date: Mon, 17 Dec 2012 17:51:39 -0800 Subject: [PATCH] making enableSorting and resize meaningful also fixed pointers fixed #164 and #167 --- KoGrid.css | 8 -------- src/classes/column.js | 10 ++++++++-- src/classes/grid.js | 7 ++++--- src/classes/row.js | 7 ++++--- src/templates/headerCellTemplate.html | 2 +- src/templates/rowTemplate.html | 2 +- workbench/main.js | 3 +++ 7 files changed, 21 insertions(+), 18 deletions(-) diff --git a/KoGrid.css b/KoGrid.css index c4bee90a..f022f859 100644 --- a/KoGrid.css +++ b/KoGrid.css @@ -111,13 +111,11 @@ .kgHeaderSortColumn{ position:absolute; overflow: hidden; - cursor: pointer; } .kgHeaderCell{ border-left: 1px solid rgb(212,212,212); position: absolute; - cursor: pointer; } .kgHeaderCell:first-child{ @@ -187,7 +185,6 @@ .kgRow { position: absolute; border-bottom: 1px solid rgb(229, 229, 229); - cursor: pointer; } .kgRow.even { background-color: rgb(243, 243, 243); @@ -198,9 +195,6 @@ .kgRow.selected { background-color: rgb(189, 208, 203); } -.kgRow.canSelect { - cursor: pointer; -} /******** Cells ********/ @@ -324,7 +318,6 @@ input { z-index: 5; background-color: rgb(179, 191, 188); cursor: pointer; - /* width and height can be anything, as long as they're equal */ } .kgHeaderButtonArrow { position: absolute; @@ -335,7 +328,6 @@ input { border-style: solid; border-width: 6.5px 4.5px 0 4.5px; border-color: #000 transparent transparent transparent; - /* width and height can be anything, as long as they're equal */ } .kgColMenu { right: 2px; diff --git a/src/classes/column.js b/src/classes/column.js index c2bacb3f..9c5f2210 100644 --- a/src/classes/column.js +++ b/src/classes/column.js @@ -8,6 +8,8 @@ self.groupIndex = ko.observable(0); self.isGroupedBy = ko.observable(false); self.groupedByClass = ko.computed(function(){ return self.isGroupedBy() ? "kgGroupedByIcon":"kgGroupIcon";}); + self.sortable = ko.observable(false); + self.resizable = ko.observable(false); self.minWidth = !colDef.minWidth ? 50 : colDef.minWidth; self.maxWidth = !colDef.maxWidth ? 9000 : colDef.maxWidth; self.headerRowHeight = config.headerRowHeight; @@ -27,8 +29,12 @@ self.toggleVisible(val); } }); - self.sortable = ko.observable(kg.utils.isNullOrUndefined(colDef.sortable) || colDef.sortable); - self.resizable = ko.observable(kg.utils.isNullOrUndefined(colDef.resizable) || colDef.resizable); + if (config.enableSort) { + self.sortable(kg.utils.isNullOrUndefined(colDef.sortable) || colDef.sortable); + } + if (config.enableResize) { + self.resizable(kg.utils.isNullOrUndefined(colDef.resizable) || colDef.resizable); + } self.sortDirection = ko.observable(undefined); self.sortingAlgorithm = colDef.sortFn; self.headerClass = ko.observable(colDef.headerClass); diff --git a/src/classes/grid.js b/src/classes/grid.js index 11b5bfef..656d282b 100644 --- a/src/classes/grid.js +++ b/src/classes/grid.js @@ -26,10 +26,10 @@ kg.Grid = function (options) { multiSelect: ko.observable(true), tabIndex: -1, enableColumnResize: true, + enableSorting: true, maintainColumnRatios: undefined, - enableSorting:ko.observable(true), beforeSelectionChange: function () { return true;}, - afterSelectionChange: function () { return true;}, + afterSelectionChange: function () { }, rowTemplate: undefined, headerRowTemplate: undefined, jqueryUITheme: false, @@ -152,7 +152,8 @@ kg.Grid = function (options) { headerRowHeight: self.config.headerRowHeight, sortCallback: self.sortData, resizeOnDataCallback: self.resizeOnData, - enableResize: self.config.enableColumnResize + enableResize: self.config.enableColumnResize, + enableSort: self.config.enableSorting }, self); cols.push(column); var indx = self.config.groups.indexOf(colDef.field); diff --git a/src/classes/row.js b/src/classes/row.js index 8e95d35e..e7e3ed5c 100644 --- a/src/classes/row.js +++ b/src/classes/row.js @@ -5,8 +5,9 @@ /// /// kg.Row = function (entity, config, selectionService) { - var self = this, // constant for the selection property that we add to each data item - canSelectRows = config.canSelectRows; + var self = this; // constant for the selection property that we add to each data item + + self.canSelectRows = config.canSelectRows; self.rowClasses = config.rowClasses; self.selectedItems = config.selectedItems; @@ -18,7 +19,7 @@ kg.Row = function (entity, config, selectionService) { self.selectionService.ChangeSelection(self, event); }; self.toggleSelected = function (row, event) { - if (!canSelectRows) { + if (!self.canSelectRows) { return true; } var element = event.target || event; diff --git a/src/templates/headerCellTemplate.html b/src/templates/headerCellTemplate.html index 38310724..19943697 100644 --- a/src/templates/headerCellTemplate.html +++ b/src/templates/headerCellTemplate.html @@ -1,5 +1,5 @@ -
+
diff --git a/src/templates/rowTemplate.html b/src/templates/rowTemplate.html index ee32112d..def83d84 100644 --- a/src/templates/rowTemplate.html +++ b/src/templates/rowTemplate.html @@ -1,4 +1,4 @@ -
+
\ No newline at end of file diff --git a/workbench/main.js b/workbench/main.js index f334cff8..8d1ffef3 100644 --- a/workbench/main.js +++ b/workbench/main.js @@ -56,6 +56,9 @@ function mainViewModel() { showFilter: true, maintainColumnRatios: true, enableRowReordering: true, + enableColumnResize: false, + enableSorting: false, + canSelectRows: false, enablePaging: true, pagingOptions: self.pagingOptions, columnDefs: ko.observableArray( [{ field: 'name', displayName: 'Very Long Name Title', headerClass: 'foo', width: 'auto' },