making enableSorting and resize meaningful

also fixed pointers
fixed Knockout-Contrib#164 and Knockout-Contrib#167

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;

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);

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);

src/classes/row.js

@@ -5,8 +5,9 @@
 /// <reference path="../navigation.js"/>
 /// <reference path="../utils.js"/>
 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;

src/templates/headerCellTemplate.html

@@ -1,5 +1,5 @@
 <!--kg.defaultHeaderCellTemplate-->
-<div data-bind="click: sort, css: {'kgSorted': !noSortVisible }, attr: {'class': 'kgHeaderSortColumn ' + headerClass()}">
+<div data-bind="style: { cursor : sortable() ? 'pointer' : 'default' }, click: sort, css: {'kgSorted': !noSortVisible }, attr: {'class': 'kgHeaderSortColumn ' + headerClass()}">
     <div data-bind="attr: { 'class': 'colt' + $index() + ' kgHeaderText' }, html: displayName"></div>
     <div class="kgSortButtonDown" data-bind="visible: showSortButtonDown"></div>
     <div class="kgSortButtonUp" data-bind="visible: showSortButtonUp"></div>

src/templates/rowTemplate.html

@@ -1,4 +1,4 @@
 <!--kg.defaultRowTemplate-->
-<div data-bind="foreach: $grid.visibleColumns, css: { 'ui-widget-content': $grid.jqueryUITheme }">
+<div data-bind="style: { cursor : canSelectRows ? 'pointer' : 'default' }, foreach: $grid.visibleColumns, css: { 'ui-widget-content': $grid.jqueryUITheme }">
     <div data-bind="attr: { 'class': cellClass() + ' kgCell col' + $index() }, kgCell: $data"></div>
 </div>

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' },