Submitter:	Christian Hammond	Reviewers
Branch:	trunk	Groups:	reviewboard
Bugs:		People:
Change Number:	None	Repository:	Navi

Description:

We were taking the easy way out before with datagrid column customization and just pre-generating the toggle URLs up-front. When toggling the visibility of a column, we would change the URL. However, this would be problematic if you were then to rearrange columns and reload the page, as the original order would still be in the URL, causing your custom order to be wiped out.

We now smooth out the whole column customization process by making this all dynamic. Clicking a column in the menu generates the new column string based on the existing order in the grid and then saves the result to the server, requesting the new grid. We then unregister the old grid, load in the new one and register that.

The result is no more column specs in the URL, so no more wiping out of orders. The experience feels smoother, since we only reload the grid, rather than the whole page.

*UPDATE*

The latest change works in IE, but changes a bit how datagrids work, so it's worth looking at. I recommend viewing the interdiff as it's going to be a lot more clear.

IE refuses to load script tags when setting innerHTML. We were using the script tags to register the data grid and set up the columns. Now we scan for the grids and columns and set them up. This forces more requirements on what the HTML must be like when using the JavaScript, but I think that's fine.

Testing Done:

Tested that I could add and remove columns as much as I wanted and still reorder things without losing any settings at all.

Tested in Firefox and IE.

Diff revision 6 (Latest)

Jump to revision:	5 6
Changes between r6 and:	5 6

Files Changed:

/trunk/djblets/djblets/datagrid/grids.py: 4 changes [ 1 2 3 4 ]
/trunk/djblets/djblets/datagrid/templates/datagrid/listview.html: 5 changes [ 1 2 3 4 5 ]
/trunk/djblets/djblets/media/js/datagrid.js: 23 changes [ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ]

Expand changes

 from django.core.exceptions import ObjectDoesNotExist
 from django.core.paginator import InvalidPage, ObjectPaginator
 from django.http import Http404, HttpResponse
 from django.shortcuts import render_to_response
 from django.template.context import RequestContext
 from django.template.defaultfilters import date, timesince
 from django.template.loader import render_to_string
 from django.utils.safestring import mark_safe
 from django.utils.translation import ugettext as _
 from django.views.decorators.cache import cache_control
 class Column(object):
     """
     A column in a data grid.
             if self.profile_sort_field and sort_str != profile_sort_list:
                 setattr(profile, self.profile_sort_field, sort_str)
                 profile_dirty = True
             print "Saving profile if... %s" % profile_dirty
             if profile_dirty:
                 profile.save()
         self.state_loaded = True
                 'pages': self.paginator.pages,
                 'hits': self.paginator.hits,
                 'page_range': self.paginator.page_range,
             })))
     @cache_control(no_cache=True, no_store=True, max_age=0,
                    must_revalidate=True)
     def render_listview_to_response(self):
         """
         Renders the listview to a response, preventing caching in the
         process.
         """
         return HttpResponse(unicode(self.render_listview()))
     def render_to_response(self, template_name, extra_context={}):
         """
         Renders a template containing this datagrid as a context variable.
         """
         self.load_state()
         # If the caller is requesting just this particular grid, return it.
         if self.request.GET.get('gridonly', False) and \
            self.request.GET.get('datagrid-id', None) == self.id:
-            return HttpResponse(unicode(self.render_listview()))
+            return self.render_listview_to_response()
         context = {
             'datagrid': self
+        }
         context.update(extra_context)

 {% load datagrid %}
 <div class="datagrid-wrapper" id="{{datagrid.id}}">
  <div class="datagrid-titlebox">
 {% block datagrid_title %}
    <h1 class="datagrid-title">{{datagrid.title}}</h1>
 {% endblock %}
  </div>
  <div class="datagrid-main">
   <table class="datagrid">
    <colgroup>
 {% for column in datagrid.columns %}
-    <col class="{{column.field_name}}"{% ifnotequal column.width 0 %} width="{{column.width}}%"{% endifnotequal %} />
+    <col class="{{column.id}}"{% ifnotequal column.width 0 %} width="{{column.width}}%"{% endifnotequal %} />
 {% endfor %}
     <col class="datagrid-customize" />
    </colgroup>
    <thead>
     <tr class="datagrid-headers">
   </table>
 {% if is_paginated %}
 {%  paginator %}
 {% endif %}
  </div>
-</div>
-<table class="datagrid-menu" id="{{datagrid.id}}-menu" style="visibility:hidden;position:absolute;top:0px;left:-1000px;">
+ <table class="datagrid-menu" id="{{datagrid.id}}-menu" style="visibility:hidden;position:absolute;top:0px;left:-1000px;">
 {% for column in datagrid.all_columns %}
 {%  with column.toggle_url as toggle_url %}
- <tr>
+  <tr>
-  <td><div class="datagrid-menu-checkbox" onclick="javascript:window.location='{{toggle_url}}';">{% if column.active %}<img src="{{MEDIA_URL}}images/djblets/datagrid/checkmark.png" width="8" height="8" border="0" alt="X" />{% endif %}</div></td>
+   <td><div class="datagrid-menu-checkbox" onclick="DJBLETS.datagrids.toggleColumn('{{datagrid.id}}', '{{column.id}}');">{% if column.active %}<img src="{{MEDIA_URL}}images/djblets/datagrid/checkmark.png" width="8" height="8" border="0" alt="X" />{% endif %}</div></td>
-  <td class="datagrid-menu-label"><a href=".{{toggle_url}}">
+   <td class="datagrid-menu-label"><a href="#" onclick="DJBLETS.datagrids.toggleColumn('{{datagrid.id}}', '{{column.id}}');">
 {%   if column.image_url %}
-   <img src="{{column.image_url}}" width="{{column.image_width}}" height="{{column.image_height}}" alt="{{column.image_alt}}" />
+    <img src="{{column.image_url}}" width="{{column.image_width}}" height="{{column.image_height}}" alt="{{column.image_alt}}" />
 {%   endif %}
-   {{column.detailed_label|default_if_none:""}}</a>
+    {{column.detailed_label|default_if_none:""}}</a>
 {%  endwith %}
 {% endfor %}
-</table>
+ </table>
-<script type="text/javascript">
+</div>
-DJBLETS.datagrids.registerDataGrid("{{datagrid.id}}", [
-{% for column in datagrid.columns %}"{{column.id}}"{% if not forloop.last %}, {%endif %}{% endfor %}
-]);
-</script>

 /* Create the DJBLETS namespace if it doesn't exist. */
 if (!DJBLETS) {
-	var DJBLETS = {};
+    var DJBLETS = {};
+}
 DJBLETS.datagrids = {
-	activeMenu: null,
+    activeMenu: null,
-	registeredGrids: [],
-	activeColumns: {},
+    activeColumns: {},
-	/*
+    /*
-	 * Registers a datagrid. This will cause drag and drop and column
+     * Registers a datagrid. This will cause drag and drop and column
-	 * customization to be enabled.
+     * customization to be enabled.
+     *
-	 * @param {string} datagrid_id    The ID of the datagrid.
+     * @param {HTMLElement} grid  The datagrid element.
-	 * @param {array}  activeColumns  The list of active columns in order.
-	 */
+     */
-	registerDataGrid: function(datagrid_id, activeColumns) {
+    registerDataGrid: function(grid) {
-		this.registeredGrids.push(datagrid_id);
+        this.activeColumns[grid] = [];
 		this.activeColumns[datagrid_id] = activeColumns;
         var cols = grid.getElementsByTagName("col");
         for (var j = 0; j < cols.length; j++) {
             if (cols[j].className != "datagrid-customize") {
                 this.activeColumns[grid].push(cols[j].className);
+            }
+        }
         var headers = grid.getElementsByTagName("th");
         for (var j = 0; j < headers.length; j++) {
             var header = getEl(headers[j]);
             header.unselectable();
             if (!header.hasClass("edit-columns")) {
                 new DJBLETS.datagrids.DDColumn(header, grid);
+            }
+        }
     },
     /*
      * Unregisters a datagrid. This is used when we're getting ready to
      * reload a grid.
+     *
      * @param {HTMLElement} grid  The datagrid.
      */
     unregisterDataGrid: function(grid) {
         this.activeColumns[grid] = [];
-	},
+    },
-	/*
+    /*
-	 * Hides the currently open columns menu.
+     * Hides the currently open columns menu.
-	 */
+     */
-	hideColumnsMenu: function() {
+    hideColumnsMenu: function() {
         if (this.activeMenu != null) {
-		this.activeMenu.hide();
+            this.activeMenu.hide();
-		this.activeMenu = null;
+            this.activeMenu = null;
+        }
-	},
+    },
-	/*
+    /*
-	 * Toggles the visibility of the specified columns menu.
+     * Toggles the visibility of the specified columns menu.
+     *
-			YAHOO.util.Event.stopEvent(evt);
+            YAHOO.util.Event.stopEvent(evt);
+        }
-	},
+    },
-	/*
+    /*
-	 * Callback handler for when the page finishes loading. Enables
+     * Callback handler for when the page finishes loading. Registers
-	 * drag and drop for the datagrids.
+     * the grids and enables drag and drop for the datagrids.
-	 */
+     */
-	onPageLoad: function() {
+    onPageLoad: function() {
-		for (var i = 0; i < this.registeredGrids.length; i++) {
+        var grids = YAHOO.util.Dom.getElementsByClassName("datagrid-wrapper",
-			var grid = getEl(this.registeredGrids[i]);
+                                                          "div");
-			var headers = grid.getChildrenByTagName("th");
+        for (var i = 0; i < grids.length; i++) {
             this.registerDataGrid(grids[i]);
+        }
     },
-			for (var j = 0; j < headers.length; j++) {
+    /*
-				headers[j].unselectable();
+     * Saves the new columns list on the server.
+     *
      * @param {{string}}   gridId      The ID of the datagrid.
      * @param {{string}}   columnsStr  The columns to display.
      * @param {{function}} onSuccess   Optional callback on successful save.
      */
     saveColumns: function(gridId, columnsStr, onSuccess) {
         var url = window.location.pathname +
                   "?gridonly=1&datagrid-id=" + gridId +
                   "&columns=" + columnsStr;
         YAHOO.util.Connect.asyncRequest("GET", url, {
             success: onSuccess
         });
     },
-				if (!headers[j].hasClass("edit-columns")) {
+    /*
-					new DJBLETS.datagrids.DDColumn(headers[j], grid);
+     * Toggles the visibility of a column. This will build the resulting
      * columns string and request a save of the columns, followed by a
      * reload of the page.
+     *
      * @param {{string}}  gridId    The ID of the datagrid.
      * @param {{string}}  columnId  The ID of the column to toggle.
      */
     toggleColumn: function(gridId, columnId) {
         var addingColumn = true;
         var grid = document.getElementById(gridId);
         var curColumns = this.activeColumns[grid];
         var newColumnsStr = "";
         for (var i = 0; i < curColumns.length; i++) {
             if (curColumns[i] == columnId) {
                 /* We're removing this column. */
                 addingColumn = false;
             } else {
                 newColumnsStr += curColumns[i];
                 if (i < curColumns.length - 1) {
                     newColumnsStr += ",";
+                }
+            }
+        }
         if (addingColumn) {
             newColumnsStr += "," + columnId;
+        }
         this.saveColumns(gridId, newColumnsStr, function(res) {
             this.hideColumnsMenu();
             this.unregisterDataGrid(gridId);
             /* The resulting text *should* be datagrid HTML. */
             var oldEl = getEl(gridId);
             oldEl.dom.id = "";
             YAHOO.ext.DomHelper.insertHtml("beforeBegin", oldEl.dom,
                                            res.responseText);
             oldEl.remove();
             this.registerDataGrid(document.getElementById(gridId));
         }.createDelegate(this));
+    }
+}
 /*
-	 * Sets up the movement constraints for this column. This locks the
+     * Sets up the movement constraints for this column. This locks the
-	 * column into the column header region. It has the effect of only
+     * column into the column header region. It has the effect of only
-	 * allowing the column to slide left and right.
+     * allowing the column to slide left and right.
-	 */
+     */
-	initConstraints: function() {
+    initConstraints: function() {
-		var thead = this.grid.getChildrenByTagName("thead")[0];
+        var thead = getEl(this.grid.getElementsByTagName("thead")[0]);
-		var headerRegion = thead.getRegion();
+        var headerRegion = thead.getRegion();
-		var colRegion = this.el.getRegion();
+        var colRegion = this.el.getRegion();
-		this.setXConstraint(colRegion.left - headerRegion.left,
+        this.setXConstraint(colRegion.left - headerRegion.left,
-		                    headerRegion.right - colRegion.right);
+                            headerRegion.right - colRegion.right);
-		dragEl.hide();
+        dragEl.hide();
-		this.el.show();
+        this.el.show();
-		this.columnMidpoints = [];
+        this.columnMidpoints = [];
-		this.saveColumns();
+        /* Build the new columns list. */
         var columns = DJBLETS.datagrids.activeColumns[this.grid];
         var columnsStr = "";
         for (var i = 0; i < columns.length; i++) {
             columnsStr += columns[i];
             if (i != columns.length - 1) {
                 columnsStr += ",";
+            }
+        }
         DJBLETS.datagrids.saveColumns(this.grid.id, columnsStr);
-	},
+    },
-	/*
+    /*
-	 * Handles movement while in drag mode.
+     * Handles movement while in drag mode.
+     *
-	 * of the currently dragged column.
+     * of the currently dragged column.
-	 */
+     */
-	buildColumnInfo: function() {
+    buildColumnInfo: function() {
-		/* Grab the list of midpoints for each column. */
+        /* Grab the list of midpoints for each column. */
-		this.columnMidpoints = [];
+        this.columnMidpoints = [];
-		var columns = this.grid.getChildrenByTagName("th");
+        var columns = getEl(this.grid).getChildrenByTagName("th");
-		for (var i = 0; i < columns.length; i++) {
+        for (var i = 0; i < columns.length; i++) {
-			if (!columns[i].hasClass("edit-columns")) {
+            if (!columns[i].hasClass("edit-columns")) {
-				this.columnMidpoints.push(columns[i].getX() +
+                this.columnMidpoints.push(columns[i].getX() +
-				                          columns[i].getWidth() / 2);
+                                          columns[i].getWidth() / 2);
-	 * @param {int} beforeIndex The index of the column to place the first
+     * @param {int} beforeIndex The index of the column to place the first
-	 *                          before.
+     *                          before.
-	 */
+     */
-	swapColumnBefore: function(index, beforeIndex) {
+    swapColumnBefore: function(index, beforeIndex) {
-		/* Swap the column info. */
+        /* Swap the column info. */
-		var colTags = this.grid.getChildrenByTagName("col");
+        var colTags = getEl(this.grid).getChildrenByTagName("col");
-		colTags[index].insertBefore(colTags[beforeIndex]);
+        colTags[index].insertBefore(colTags[beforeIndex]);
-		/* Swap the list of active columns */
+        /* Swap the list of active columns */
-		var tempName = DJBLETS.datagrids.activeColumns[this.grid.id][index];
+        var tempName = DJBLETS.datagrids.activeColumns[this.grid][index];
-		DJBLETS.datagrids.activeColumns[this.grid.id][index] =
+        DJBLETS.datagrids.activeColumns[this.grid][index] =
-			DJBLETS.datagrids.activeColumns[this.grid.id][beforeIndex];
+            DJBLETS.datagrids.activeColumns[this.grid][beforeIndex];
-		DJBLETS.datagrids.activeColumns[this.grid.id][beforeIndex] = tempName;
+        DJBLETS.datagrids.activeColumns[this.grid][beforeIndex] = tempName;
-		/* Swap the cells. This will include the headers. */
+        /* Swap the cells. This will include the headers. */
-		var table = this.grid.getChildrenByTagName("table")[0].dom;
+        var table = getEl(this.grid).getChildrenByTagName("table")[0].dom;
-		for (var i = 0; i < table.rows.length; i++) {
+        for (var i = 0; i < table.rows.length; i++) {
-			var row = table.rows[i];
+            var row = table.rows[i];
-			var cell = row.cells[index];
+            var cell = row.cells[index];
-			var beforeCell = row.cells[beforeIndex];
+            var beforeCell = row.cells[beforeIndex];
-			beforeCell.colSpan = tempColSpan;
+            beforeCell.colSpan = tempColSpan;
+        }
-		/* Everything has changed, so rebuild our view of things. */
+        /* Everything has changed, so rebuild our view of things. */
-		this.buildColumnInfo();
+        this.buildColumnInfo();
-	},
-	/*
-	 * Saves the new columns list on the server.
-	 */
-	saveColumns: function() {
-		var columns = "";
-		var grid_id = this.grid.id;
-		var len = DJBLETS.datagrids.activeColumns[grid_id].length;
-		for (var i = 0; i < len; i++) {
-			columns += DJBLETS.datagrids.activeColumns[grid_id][i];
-			if (i != len - 1) {
-				columns += ",";
-		var url = window.location.pathname +
-		          "?gridonly=1&datagrid-id=" + grid_id + "&columns=" + columns;
-		YAHOO.util.Connect.asyncRequest("GET", url);
+    }
 });
 YAHOO.util.Event.on(window, "load",
                     DJBLETS.datagrids.onPageLoad.createDelegate(DJBLETS.datagrids));
 YAHOO.util.Event.on(document, "click", function(e) {
 	if (DJBLETS.<

Review Board

beta

This change has been marked as submitted.

Intelligently toggle column visibility and reload only the datagrids

Diff revision 6 (Latest)