diff --git a/main/webapp/modules/core/scripts/views/data-table/data-table-view.js b/main/webapp/modules/core/scripts/views/data-table/data-table-view.js
index 5cc929f68..a7e16dca9 100644
--- a/main/webapp/modules/core/scripts/views/data-table/data-table-view.js
+++ b/main/webapp/modules/core/scripts/views/data-table/data-table-view.js
@@ -35,10 +35,7 @@ DataTableView.prototype.render = function() {
     var html = $(
         '<div id="viewPanel-header">' +
             '<div bind="rowRecordControls">Show as ' +
-                '<span bind="modeSelectors" class="viewPanel-browsingmodes">' + 
-                    '<input type="radio" id="viewPanel-browsingMode-row-based" name="viewPanel-browsingMode" value="row-based" /><label for="viewPanel-browsingMode-row-based">rows</label>' +
-                    '<input type="radio" id="viewPanel-browsingMode-record-based" name="viewPanel-browsingMode" value="record-based" /><label for="viewPanel-browsingMode-record-based">records</label>' +
-                '</span>' +
+                '<span bind="modeSelectors" class="viewPanel-browsingmodes"></span>' + 
             '</div>' +
             '<div bind="pageSizeControls"></div>' +
             '<div bind="sortingControls" align="center"></div>' +
@@ -50,26 +47,35 @@ DataTableView.prototype.render = function() {
     
     ui.summaryWidget.updateResultCount();
     
+    var renderBrowsingModeLink = function(label, value) {
+        var a = $('<a href="javascript:{}"></a>')
+            .addClass("viewPanel-browsingModes-mode")
+            .text(label)
+            .appendTo(elmts.modeSelectors);
+            
+        if (value == ui.browsingEngine.getMode()) {
+            a.addClass("inaction");
+        } else {
+            a.addClass("action").click(function(evt) {
+                ui.browsingEngine.setMode(value);
+            });
+        }
+    };
+    renderBrowsingModeLink("rows", "row-based");
+    renderBrowsingModeLink("records", "record-based");
+    
     this._renderPagingControls(elmts.pageSizeControls, elmts.pagingControls);
-    this._renderDataTable(elmts.table[0]);
     
     if (this._sorting.criteria.length > 0) {
         this._renderSortingControls(elmts.sortingControls);
     }
     
-    this._div.empty().append(html);
+    this._renderDataTable(elmts.table[0]);
     
+    this._div.empty().append(html);
     this.resize();
         
     elmts.dataTableContainer[0].scrollLeft = scrollLeft;
-    
-    $("#viewPanel-browsingMode-" + 
-        (theProject.recordModel.hasRecords ? 'record-based' : 'row-based')).attr("checked", "checked");
-    
-    elmts.modeSelectors.buttonset();
-    elmts.modeSelectors.find("input").change(function() {
-        ui.browsingEngine.setMode(this.value);
-    });
 };
 
 DataTableView.prototype._renderSortingControls = function(sortingControls) {
diff --git a/main/webapp/modules/core/styles/views/data-table-view.less b/main/webapp/modules/core/styles/views/data-table-view.less
index 4bc1091dd..ee3e3fda8 100644
--- a/main/webapp/modules/core/styles/views/data-table-view.less
+++ b/main/webapp/modules/core/styles/views/data-table-view.less
@@ -6,24 +6,16 @@
   padding: @padding_normal;
 }
 
-.viewPanel-browsingModes .ui-button .ui-button-text {
-    line-height: 1.0;
-    text-decoration: line-through;
-}
-.viewPanel-browsingModes .ui-button.ui-state-active .ui-button-text {
-    text-decoration: none;
-}
-
 .viewPanel-pagingControls-currentPageInfo {
     font-size: 150%;
 }
 
-a.viewPanel-pagingControls-page {
+a.viewPanel-pagingControls-page, a.viewPanel-browsingModes-mode {
     margin: 0 2px;
     padding: 2px 4px 3px 4px;
     font-weight: bold;
 }
-a.viewPanel-pagingControls-page.inaction {
+a.viewPanel-pagingControls-page.inaction, a.viewPanel-browsingModes-mode.inaction {
     background: #f8f8f8;
     color: #777;
     border: 1px solid #ff6a00;