# R34222 - in /trunk/phpgwapi/js/egw\_action: egw\_grid\_columns.js egw\_grid\_view.js test/grid.css **URL:** \ **Category:** eGW-svn\ **Created:** [March 18, 2011, 6:04pm UTC](https://help.egroupware.org/t/r34222-in-trunk-phpgwapi-js-egw-action-egw-grid-columns-js-egw-grid-view-js-test-grid-css/46271 "2011-03-18T18:04:56Z")\ **Posts on this page:** 1\ **Page:** 1

**Author:** ![igel457](https://help.egroupware.org/letter_avatar_proxy/v4/letter/i/7cd45c/32.png) [@igel457](https://help.egroupware.org/u/igel457)\ **Post date:** [March 18, 2011, 6:04pm UTC](https://help.egroupware.org/t/r34222-in-trunk-phpgwapi-js-egw-action-egw-grid-columns-js-egw-grid-view-js-test-grid-css/46271/1 "2011-03-18T18:04:56Z")

Author: igel457 New Revision: 34222 URL: [http://www.egroupware.org/viewvc/egroupware?rev=34222&view=rev](http://www.egroupware.org/viewvc/egroupware?rev=34222&view=rev) Log: Fixed bugs in the grid component with resizing not working properly and column width being not in sync with header width. This has been done by using a dynamic stylesheet for the column properties instead of changing the properties for each element individually. Modified: trunk/phpgwapi/js/egw\_action/egw\_grid\_columns.js trunk/phpgwapi/js/egw\_action/egw\_grid\_view.js trunk/phpgwapi/js/egw\_action/test/grid.css # Modified: trunk/phpgwapi/js/egw\_action/egw\_grid\_columns.js URL: [http://www.egroupware.org/viewvc/egroupware/trunk/phpgwapi/js/egw\_action/egw\_grid\_columns.js?rev=34222&r1=34221&r2=34222&view=diff](http://www.egroupware.org/viewvc/egroupware/trunk/phpgwapi/js/egw_action/egw_grid_columns.js?rev=34222&r1=34221&r2=34222&view=diff) — trunk/phpgwapi/js/egw\_action/egw\_grid\_columns.js (original) +++ trunk/phpgwapi/js/egw\_action/egw\_grid\_columns.js Fri Mar 18 19:04:56 2011 @@ -458,22 +458,19 @@ ``` for (var i = 0; i < this.columns.length; i++) { ``` - ``` if (this.columns[i].visibility != EGW_COL_VISIBILITY_INVISIBLE) ``` - ``` { ``` - ``` result.push( ``` - ``` { ``` - ``` "id": this.columns[i].id, ``` - ``` "caption": this.columns[i].caption, ``` - ``` "sortable": this.columns[i].sortable != EGW_COL_SORTABLE_NONE, ``` - ``` "sortmode": this.columns[i].sortmode, ``` - ``` "default": this.columns[i]["default"], ``` - ``` "width": this.columnWidths[i], ``` - ``` "drawnWidth": this.columnWidths[i], ``` - ``` "type": this.columns[i].type, ``` - ``` "element": this.columns[i] ``` - ``` } ``` - ``` ); ``` - ``` } ``` - ``` result.push( ``` - ``` { ``` - ``` "id": this.columns[i].id, ``` - ``` "caption": this.columns[i].caption, ``` - ``` "sortable": this.columns[i].sortable != EGW_COL_SORTABLE_NONE, ``` - ``` "sortmode": this.columns[i].sortmode, ``` - ``` "default": this.columns[i]["default"], ``` - ``` "width": this.columnWidths[i], ``` - ``` "type": this.columns[i].type, ``` - ``` "visible": this.columns[i].visibility != EGW_COL_VISIBILITY_INVISIBLE, ``` - ``` "element": this.columns[i] ``` - ``` } ``` - ``` ); ``` } return result; # Modified: trunk/phpgwapi/js/egw\_action/egw\_grid\_view.js URL: [http://www.egroupware.org/viewvc/egroupware/trunk/phpgwapi/js/egw\_action/egw\_grid\_view.js?rev=34222&r1=34221&r2=34222&view=diff](http://www.egroupware.org/viewvc/egroupware/trunk/phpgwapi/js/egw_action/egw_grid_view.js?rev=34222&r1=34221&r2=34222&view=diff) — trunk/phpgwapi/js/egw\_action/egw\_grid\_view.js (original) +++ trunk/phpgwapi/js/egw\_action/egw\_grid\_view.js Fri Mar 18 19:04:56 2011 @@ -65,6 +65,9 @@ var EGW\_GRID\_COLUMN\_PADDING = 2; var EGW\_GRID\_SCROLLBAR\_WIDTH = false; +var EGW\_GRID\_HEADER\_BORDER\_WIDTH = false; +var EGW\_GRID\_COLUMN\_BORDER\_WIDTH = false; +var EGW\_UNIQUE\_COUNTER = 0; /\*\* - Base view class which is responsible for displaying a grid view element. @@ -77,6 +80,8 @@ { this.parentNode = $(\_parentNode); this.dataRoot = \_dataRoot; - - EGW\_UNIQUE\_COUNTER++; - this.visibleColumnCount = 0; - - this.uniqueId = ‘grid\_outer\_’ + EGW\_UNIQUE\_COUNTER; - this.headerColumns = []; this.selectColsCallback = \_selectColsCallback; this.context = \_context; - this.styleSheet = new egwDynStyleSheet(); - - // Now that the base grid has been build, we can perform a few tests, to - // determine some browser/CSS dependant width values - - // Read the th and td border width - this.headerBorderWidth = this.getHeaderBorderWidth(); - this.columnBorderWidth = this.getColumnBorderWidth(); - // Rebuild the header - var first = true; - - // Count the visible rows - var total\_cnt = 0; - for (var i = 0; i \< this.columns.length; i++) - { - ``` if (this.columns[i].visible) ``` - ``` { ``` - ``` total_cnt++; ``` - ``` } ``` - } - - var vis\_col = this.visibleColumnCount = 0; - var totalWidth = 0; - - // Set the grid column styles - for (var i = 0; i \< this.columns.length; i++) - { - ``` var col = this.columns[i]; ``` - - ``` col.tdClass = this.uniqueId + "_td_" + col.id; ``` - ``` col.divClass = this.uniqueId + "_div_" + col.id; ``` - - ``` if (col.visible) ``` - ``` { ``` - ``` vis_col++; ``` - ``` this.visibleColumnCount++; ``` - - ``` this.styleSheet.updateRule("." + col.tdClass, ``` - ``` "display: " + (col.visible ? "table-cell" : "none") + "; " + ``` - ``` ((vis_col == total_cnt) ? "border-right-width: 0 " : "border-right-width: 1px ") + ``` - ``` "!important;"); ``` - - ``` this.styleSheet.updateRule(".egwGridView_outer ." + col.divClass, ``` - ``` "width: " + (col.width - this.headerBorderWidth) + "px;"); ``` - - ``` // Ugly browser dependant code - each browser seems to treat the ``` - ``` // right (collapsed) border of the row differently ``` - ``` var addBorder = 0; ``` - ``` if ($.browser.mozilla || ($.browser.webkit && !first)) ``` - ``` { ``` - ``` addBorder = 1; ``` - ``` } ``` - ``` if (($.browser.msie || $.browser.opera) && first) ``` - ``` { ``` - ``` addBorder = -1; ``` - ``` } ``` - - ``` // Make the last columns one pixel smaller, to prevent a horizontal ``` - ``` // scrollbar from showing up ``` - ``` if (vis_col == total_cnt) ``` - ``` { ``` - ``` addBorder += 1; ``` - ``` } ``` - - ``` var width = (col.width - this.columnBorderWidth - addBorder); ``` - - ``` this.styleSheet.updateRule(".egwGridView_grid ." + col.divClass, ``` - ``` "width: " + width + "px;"); ``` - - ``` totalWidth += col.width; ``` - - ``` first = false; ``` - ``` } ``` - ``` else ``` - ``` { ``` - ``` this.styleSheet.updateRule("." + col.tdClass, ``` - ``` "display: " + (col.visible ? "table-cell" : "none") + ";"); ``` - ``` } ``` - } - - // Add the full row and spacer class - this.styleSheet.updateRule(".egwGridView\_grid ." + this.uniqueId + “\_div\_fullRow”, - ``` "width: " + (totalWidth - this.columnBorderWidth - 1) + "px; border-right-width: 0 !important;"); ``` - this.styleSheet.updateRule(".egwGridView\_outer ." + this.uniqueId + “\_spacer\_fullRow”, - ``` "width: " + (totalWidth - 1) + "px; border-right-width: 0 !important;"); ``` - - // Build the header if this hasn’t been done yet this.buildBaseHeader(); - // Set the grid width - this.grid.outerNode.attr(“colspan”, \_columns.length + 1); - - // Empty the grid - this.empty(); - // Update the grid - this.grid.updateColumns(this.columns); } egwGridViewOuter.prototype.buildBase = function() @@ -200,8 +291,30 @@ egwGridViewOuter.prototype.buildBaseHeader = function() { // Build the “option-column”, if this hasn’t been done yet - if (!this.optcol) - { - if (this.headerColumns.length == 0) - { - ``` // Create the head columns ``` - ``` this.headerColumns = []; ``` - - ``` for (var i = 0; i < this.columns.length; i++) ``` - ``` { ``` - ``` var col = this.columns[i]; ``` - - ``` // Create the column element and insert it into the DOM-Tree ``` - ``` var column = $(document.createElement("th")); ``` - ``` column.addClass(col.tdClass); ``` - - ``` var cont = $(document.createElement("div")); ``` - ``` cont.addClass("innerContainer"); ``` - ``` cont.addClass(col.divClass); ``` - ``` cont.html(col.caption); ``` - - ``` column.append(cont); ``` - ``` this.outer_head_tr.append(column); ``` - - ``` this.headerColumns.push(column); ``` - ``` } ``` - ``` // Build the "select columns" icon this.selectcols = $(document.createElement("span")); this.selectcols.addClass("selectcols"); ``` @@ -210,45 +323,26 @@ this.optcol = $(document.createElement(“th”)); this.optcol.addClass(“optcol”); this.optcol.append(this.selectcols); - } - - // Create the head columns - this.outer\_head\_tr.empty(); - this.headerColumns = []; - - for (var i = 0; i \< this.columns.length; i++) - { - ``` var col = this.columns[i]; ``` - - ``` // Create the column element and insert it into the DOM-Tree ``` - ``` var column = $(document.createElement("th")); ``` - ``` column.html(col.caption); ``` - ``` this.outer_head_tr.append(column); ``` - - ``` // Set the width of the column ``` - ``` var border = column.outerWidth() - column.width(); ``` - ``` column.css("width", (col.width - border) + "px"); ``` - ``` col.drawnWidth = column.outerWidth(); ``` - - ``` this.headerColumns.push(column); ``` - } - - // Append the option column and set its width of the last column - this.outer\_head\_tr.append(this.optcol); - - ``` // Append the option column and set its width of the last column ``` - ``` this.outer_head_tr.append(this.optcol); ``` - this.optcol.css(“width”, this.scrollbarWidth - this.optcol.outerWidth() - ``` + this.optcol.width() + 1); // The "1" is a "security pixel" which prevents a horizontal scrollbar form occuring on IE7 ``` - - var self = this; - this.selectcols.click(function() { - ``` self.selectColsCallback.call(self.context, self.selectcols); ``` - - ``` return false; ``` - }); - - this.headerHeight = this.outer\_thead.height(); -} - - ``` this.optcol.css("width", this.scrollbarWidth - this.optcol.outerWidth() ``` - ``` + this.optcol.width() + 1); ``` - ``` var self = this; ``` - ``` this.optcol.click(function() { ``` - ``` self.selectColsCallback.call(self.context, self.selectcols); ``` - - ``` return false; ``` - ``` }); ``` - - ``` this.headerHeight = this.outer_thead.height(); ``` - } +} - +/\*\* - - Calculates the width of the browser scrollbar - \*/ egwGridViewOuter.prototype.getScrollbarWidth = function() { if (EGW\_GRID\_SCROLLBAR\_WIDTH === false) @@ -278,6 +372,65 @@ } - +/\*\* - - Calculates the total width of the header column border - \*/ - egwGridViewOuter.prototype.getHeaderBorderWidth = function() +{ - if (EGW\_GRID\_HEADER\_BORDER\_WIDTH === false) - { - ``` // Create a temporary th which is appended to the outer thead row ``` - ``` var cont = $(document.createElement("div")); ``` - ``` cont.addClass("innerContainer"); ``` - - ``` var th = $(document.createElement("th")); ``` - ``` th.append(cont); ``` - - ``` // Insert the th into the document tree ``` - ``` this.outer_head_tr.append(th); ``` - - ``` // Calculate the total border width ``` - ``` EGW_GRID_HEADER_BORDER_WIDTH = th.outerWidth(true) - cont.width(); ``` - - ``` // Empty the outer head again ``` - ``` this.outer_head_tr.empty(); ``` - } - - return EGW\_GRID\_HEADER\_BORDER\_WIDTH; +} - +/\*\* - - Calculates the total width of the column border - \*/ +egwGridViewOuter.prototype.getColumnBorderWidth = function() +{ - if (EGW\_GRID\_COLUMN\_BORDER\_WIDTH === false) - { - ``` // Temporarily assign the egwGridView_grid class to this table ``` - ``` this.outer_table.addClass("egwGridView_grid"); ``` - - ``` // Create a temporary td which is appended to the outer tbody row ``` - ``` var cont = $(document.createElement("div")); ``` - ``` cont.addClass("innerContainer"); ``` - - ``` var td = $(document.createElement("td")); ``` - ``` td.append(cont); ``` - - ``` // Insert the th into the document tree ``` - ``` this.outer_tr.append(td); ``` - - ``` // Calculate the total border width ``` - ``` EGW_GRID_COLUMN_BORDER_WIDTH = td.outerWidth(true) - cont.width(); ``` - - ``` // Empty the outer head again ``` - ``` this.outer_tr.empty(); ``` - - ``` this.outer_table.removeClass("egwGridView_grid"); ``` - } - - return EGW\_GRID\_COLUMN\_BORDER\_WIDTH; } egwGridViewOuter.prototype.setHeight = function(\_h) @@ -310,6 +463,7 @@ this.viewArea = false; this.containerClass = “”; this.heightInAvg = false; - this.updated = true; - - +/\*\* - - Function which is called whenever the column count or the data inside the columns - - has probably changed - the checkViewArea function of the grid element is called - - and the variable “updated” is set to true. Grid elements should check this - - flag and set it to false if they have successfully updated themselves. - \*/ +egwGridViewContainer.prototype.updateColumns = function(\_columns) +{ - this.columns = \_columns; - - this.updated = true; - this.checkViewArea(); +} /\*\* – egwGridViewGrid Class – \*\*/ @@ -515,7 +680,6 @@ var EGW\_GRID\_MAX\_CYCLES = 10; var EGW\_GRID\_SCROLL\_TIMEOUT = 100; var EGW\_GRID\_UPDATE\_HEIGHTS\_TIMEOUT = 50; -var EGW\_GRID\_VIEW\_GRID\_CNT = 0; /\*\* - egwGridViewGrid is the container for egwGridViewContainer objects, but itself @@ -528,7 +692,7 @@ \_scrollable = false; } - EGW\_GRID\_VIEW\_GRID\_CNT++; - EGW\_UNIQUE\_COUNTER++; @@ -558,12 +722,13 @@ container.triggerUpdateAssumedHeights = egwGridViewGrid\_triggerUpdateAssumedHeights; container.addIconHeightToAvg = egwGridViewGrid\_addIconHeightToAvg; container.setIconWidth = egwGridViewGrid\_setIconWidth; - container.updateColumns = egwGridViewGrid\_updateColumns; container.children = []; container.outer = \_outer; container.containerClass = “grid”; container.avgIconHeight = 16; container.avgIconCnt = 1; - container.uniqueId = “grid\_” + EGW\_GRID\_VIEW\_GRID\_CNT; - container.uniqueId = “grid\_” + EGW\_UNIQUE\_COUNTER; container.maxIconWidth = 16; container.styleSheet = new egwDynStyleSheet(); @@ -645,6 +810,35 @@ ``` this.didUpdate = false; } ``` - } +} - +function egwGridViewGrid\_updateColumns(\_columns) +{ - try - { - ``` this.beginUpdate(); ``` - - ``` this.didUpdate = true; ``` - - ``` // Set the colspan value of the grid ``` - ``` this.outerNode.attr("colspan", this.getOuter().visibleColumnCount ``` - ``` + (this.scrollable ? 1 : 0)); ``` - - ``` // Call the update function of all children ``` - ``` for (var i = 0; i < this.children.length; i++) ``` - ``` { ``` - ``` this.children[i].updateColumns(_columns); ``` - ``` } ``` - - ``` // Call the inherited function ``` - ``` egwGridViewContainer.prototype.updateColumns.call(this, _columns); ``` - - ``` this.updated = false; ``` - } - finally - { - ``` this.endUpdate(); ``` } } @@ -1094,7 +1288,6 @@ container.isOdd = 0; container.aoiSetup = egwGridViewRow\_aoiSetup; container.getAOI = egwGridViewRow\_getAOI; - container.checkOdd = egwGridViewRow\_checkOdd; container.\_columnClick = egwGridViewRow\_\_columnClick; container.setOpen = egwGridViewRow\_setOpen; container.tdObjects = []; @@ -1174,13 +1367,16 @@ this.item.setGridViewObj(this); } - // Check whether this element is odd - this.checkOdd(); - for (var i = 0; i \< this.columns.length; i++) { var col = this.columns[i]; - ``` var td = $(document.createElement("td")); ``` - ``` td.addClass(col.tdClass); ``` - - ``` var cont = $(document.createElement("div")); ``` - ``` cont.addClass(col.divClass); ``` - ``` cont.addClass("innerContainer"); this.parentNode.append(td); ``` @@ -1191,27 +1387,12 @@ e.data.item.\_columnClick(egwGetShiftState(e), e.data.col); }); - ``` // Mark the first and last column ``` - ``` if (i == 0) ``` - ``` { ``` - ``` td.addClass("first"); ``` - ``` } ``` - ``` if (i == this.columns.length - 1) ``` - ``` { ``` - ``` td.addClass("last"); ``` - ``` } ``` - - ``` // Set the column width ``` - ``` if (EGW_GRID_VIEW_ROW_BORDER === false) ``` - ``` { ``` - ``` EGW_GRID_VIEW_ROW_BORDER = td.outerWidth() - td.width(); ``` - ``` } ``` - ``` td.css("width", col.drawnWidth - EGW_GRID_VIEW_ROW_BORDER); ``` - ``` td.append(cont); // Store the column in the td object array this.tdObjects.push({ ``` - ``` "col": col, ``` - ``` "td": td ``` - ``` "td": td, ``` - ``` "cont": cont }); ``` } @@ -1223,113 +1404,125 @@ function egwGridViewRow\_doUpdateData(\_immediate) { var ids = []; - var vis\_cnt = 0; for (var i = 0; i \< this.columns.length; i++) { - ``` ids.push(this.columns[i].id); ``` - ``` if (this.columns[i].visible) ``` - ``` { ``` - ``` ids.push(this.columns[i].id); ``` - ``` vis_cnt++; ``` - ``` } ``` } var data = this.item.getData(ids); - var vis\_idx = 0; - ``` var td = this.tdObjects[i].td; ``` - ``` var col = this.tdObjects[i].col; ``` - ``` td.empty(); ``` - ``` if (typeof data[col.id] != "undefined") ``` - ``` { ``` - ``` if (col.type == EGW_COL_TYPE_NAME_ICON_FIXED) ``` - ``` var col = this.columns[i]; ``` - - ``` if (col.visible) ``` - ``` { ``` - ``` vis_idx++; ``` - - ``` var cont = this.tdObjects[i].cont; ``` - ``` cont.empty(); ``` - ``` if (typeof data[col.id] != "undefined") { ``` - ``` // Insert the indentation spacer ``` - ``` var depth = this.item.getDepth() - 1; ``` - ``` if (depth > 0) ``` - ``` if (col.type == EGW_COL_TYPE_NAME_ICON_FIXED) { ``` - ``` // Build the indentation object ``` - ``` var indentation = $(document.createElement("span")); ``` - ``` indentation.addClass("indentation"); ``` - ``` indentation.css("width", (depth * 20) + "px"); ``` - ``` td.append(indentation); ``` - ``` // Insert the indentation spacer ``` - ``` var depth = this.item.getDepth() - 1; ``` - ``` if (depth > 0) ``` - ``` { ``` - ``` // Build the indentation object ``` - ``` var indentation = $(document.createElement("span")); ``` - ``` indentation.addClass("indentation"); ``` - ``` indentation.css("width", (depth * 20) + "px"); ``` - ``` cont.append(indentation); ``` - ``` } ``` - - ``` // Insert the open/close arrow ``` - ``` var arrow = $(document.createElement("span")); ``` - ``` arrow.addClass("arrow"); ``` - ``` if (this.item.canHaveChildren) ``` - ``` { ``` - ``` arrow.addClass(this.item.opened ? "opened" : "closed"); ``` - ``` arrow.click(this, function(e) { ``` - ``` $this = $(this); ``` - - ``` if (!e.data.opened) ``` - ``` { ``` - ``` $this.addClass("opened"); ``` - ``` $this.removeClass("closed"); ``` - ``` } ``` - ``` else ``` - ``` { ``` - ``` $this.addClass("closed"); ``` - ``` $this.removeClass("opened"); ``` - ``` } ``` - - ``` e.data.setOpen(!e.data.opened); ``` - - ``` return false; // Don't bubble this event ``` - ``` }); ``` - ``` arrow.dblclick(function() {return false;}); ``` - ``` } ``` - ``` cont.append(arrow); ``` - - ``` // Insert the icon ``` - ``` if (data[col.id].iconUrl) ``` - ``` { ``` - ``` // Build the icon container ``` - ``` var iconContainer = $(document.createElement("span")); ``` - ``` iconContainer.addClass("iconContainer " + this.grid.uniqueId); ``` - - ``` // Default the iconContainer height to the average height - this attribute ``` - ``` // is removed from the row as soon as the icon is loaded ``` - ``` iconContainer.css("min-height", this.grid.avgIconHeight + "px"); ``` - - ``` // Build the icon ``` - ``` var icon = $(document.createElement("img")); ``` - ``` if (this.item.iconSize) ``` - ``` { ``` - ``` icon.css("height", this.item.iconSize + "px"); ``` - ``` icon.css("width", this.item.iconSize + "px"); //has to be done because of IE :-( ``` - ``` } ``` - ``` icon.attr("src", data[col.id].iconUrl); ``` - - ``` icon.load({"item": this, "cntr": iconContainer}, function(e) { ``` - ``` e.data.cntr.css("min-height", ""); ``` - ``` var icon = $(this); ``` - ``` window.setTimeout(function() { ``` - ``` e.data.item.grid.setIconWidth(icon.width()); ``` - ``` e.data.item.grid.addIconHeightToAvg(icon.height()); ``` - ``` }, 100); ``` - ``` e.data.item.callHeightChangeProc(); ``` - ``` }); ``` - ``` icon.addClass("icon"); ``` - ``` iconContainer.append(icon); ``` - ``` cont.append(iconContainer); ``` - ``` } ``` - - ``` // Build the caption ``` - ``` if (data[col.id].caption) ``` - ``` { ``` - ``` var caption = $(document.createElement("span")); ``` - ``` caption.addClass("caption"); ``` - ``` caption.html(data[col.id].caption); ``` - ``` cont.append(caption); ``` - ``` } } ``` - - ``` // Insert the open/close arrow ``` - ``` var arrow = $(document.createElement("span")); ``` - ``` arrow.addClass("arrow"); ``` - ``` if (this.item.canHaveChildren) ``` - ``` else { ``` - ``` arrow.addClass(this.item.opened ? "opened" : "closed"); ``` - ``` arrow.click(this, function(e) { ``` - ``` $this = $(this); ``` - - ``` if (!e.data.opened) ``` - ``` { ``` - ``` $this.addClass("opened"); ``` - ``` $this.removeClass("closed"); ``` - ``` } ``` - ``` else ``` - ``` { ``` - ``` $this.addClass("closed"); ``` - ``` $this.removeClass("opened"); ``` - ``` } ``` - - ``` e.data.setOpen(!e.data.opened); ``` - - ``` return false; // Don't bubble this event ``` - ``` }); ``` - ``` arrow.dblclick(function() {return false;}); ``` - ``` cont.html(data[col.id]); } ``` - ``` td.append(arrow); ``` - - ``` // Insert the icon ``` - ``` if (data[col.id].iconUrl) ``` - ``` { ``` - ``` // Build the icon container ``` - ``` var iconContainer = $(document.createElement("span")); ``` - ``` iconContainer.addClass("iconContainer " + this.grid.uniqueId); ``` - - ``` // Default the iconContainer height to the average height - this attribute ``` - ``` // is removed from the row as soon as the icon is loaded ``` - ``` iconContainer.css("min-height", this.grid.avgIconHeight + "px"); ``` - - ``` // Build the icon ``` - ``` var icon = $(document.createElement("img")); ``` - ``` if (this.item.iconSize) ``` - ``` { ``` - ``` icon.css("height", this.item.iconSize + "px"); ``` - ``` icon.css("width", this.item.iconSize + "px"); //has to be done because of IE :-( ``` - ``` } ``` - ``` icon.attr("src", data[col.id].iconUrl); ``` - - ``` icon.load({"item": this, "col": td, "cntr": iconContainer}, function(e) { ``` - ``` e.data.cntr.css("min-height", ""); ``` - ``` var icon = $(this); ``` - ``` window.setTimeout(function() { ``` - ``` e.data.item.grid.setIconWidth(icon.width()); ``` - ``` e.data.item.grid.addIconHeightToAvg(icon.height()); ``` - ``` }, 100); ``` - ``` e.data.item.callHeightChangeProc(); ``` - ``` }); ``` - ``` icon.addClass("icon"); ``` - ``` iconContainer.append(icon); ``` - ``` td.append(iconContainer); ``` - ``` } ``` - - ``` // Build the caption ``` - ``` if (data[col.id].caption) ``` - ``` { ``` - ``` var caption = $(document.createElement("span")); ``` - ``` caption.addClass("caption"); ``` - ``` caption.html(data[col.id].caption); ``` - ``` td.append(caption); ``` - ``` } ``` - ``` cont.toggleClass("queued", false); } else { ``` - ``` td.html(data[col.id]); ``` - ``` cont.toggleClass("queued", true); } ``` - ``` td.toggleClass("queued", false); ``` - ``` } ``` - ``` else ``` - ``` { ``` - ``` td.toggleClass("queued", true); } ``` } @@ -1344,24 +1537,13 @@ } } -function egwGridViewRow\_checkOdd() -{ -/\* if (this.item && this.parentNode) - { - ``` // Update the "odd"-Class of the item ``` - ``` var odd = this.item.isOdd(); ``` - - ``` if (this.isOdd === 0 || this.isOdd != odd) ``` - ``` { ``` - ``` $(this.parentNode).toggleClass("odd", odd); ``` - ``` this.isOdd = odd; ``` - ``` } ``` - }\*/ -} - function egwGridViewRow\_doSetViewArea() { - this.checkOdd(); - if (this.updated) - { - ``` this.updated = false; ``` - ``` this.doUpdateData(false); ``` - } } function egwGridViewRow\_setOpen(\_open) @@ -1452,6 +1634,7 @@ { this.domNode = $(document.createElement(“td”)); this.domNode.addClass(“egwGridView\_spacer”); - this.domNode.addClass(this.grid.getOuter().uniqueId + “\_spacer\_fullRow”); this.domNode.css(“height”, (this.items.length \* this.itemHeight) + “px”); this.domNode.attr(“colspan”, this.columns.length); @@ -1534,6 +1717,7 @@ container.containerClass = “row”; container.\_columnClick = egwGridViewRow\_\_columnClick; [container.td](http://container.td) = null; - container.cont = null; - td.addClass(“first”); - td.addClass(“last”); - - - var cont = this.cont = $(document.createElement(“div”)); - cont.addClass(“innerContainer”); - cont.addClass(this.grid.getOuter().uniqueId + ‘\_div\_fullRow’); - - td.append(cont); this.parentNode.append(td); - // Set the column width - if (EGW\_GRID\_VIEW\_ROW\_BORDER === false) - { - ``` EGW_GRID_VIEW_ROW_BORDER = td.outerWidth() - td.width(); ``` - } - - var width = 0; - for (var i = 0; i \< this.columns.length; i++) - { - ``` width += this.columns[i].drawnWidth;// - EGW_GRID_VIEW_ROW_BORDER; ``` - } - - td.css(“width”, width - EGW\_GRID\_VIEW\_ROW\_BORDER); - this.doUpdateData(true); function egwGridViewFullRow\_doUpdateData(\_immediate) { - this.td.empty(); - this.cont.empty(); - ``` this.td.append(indentation); ``` - ``` this.cont.append(indentation); } // Insert the caption var caption = $(document.createElement("span")); caption.addClass("caption"); caption.html(this.item.caption); ``` - ``` this.td.append(caption); ``` - ``` this.cont.append(caption); ``` } // If the call is not from inside the doInsertIntoDOM function, we have to # Modified: trunk/phpgwapi/js/egw\_action/test/grid.css URL: [http://www.egroupware.org/viewvc/egroupware/trunk/phpgwapi/js/egw\_action/test/grid.css?rev=34222&r1=34221&r2=34222&view=diff](http://www.egroupware.org/viewvc/egroupware/trunk/phpgwapi/js/egw_action/test/grid.css?rev=34222&r1=34221&r2=34222&view=diff) — trunk/phpgwapi/js/egw\_action/test/grid.css (original) +++ trunk/phpgwapi/js/egw\_action/test/grid.css Fri Mar 18 19:04:56 2011 @@ -14,7 +14,7 @@ border-collapse: collapse; } -.egwGridView\_outer td.queued { +.egwGridView\_outer div.innerContainer.queued { background-image: url(imgs/ajax-loader.gif); background-position: center; background-repeat: no-repeat; @@ -59,13 +59,17 @@ .egwGridView\_grid td { border-right: 1px solid silver; - border-bottom: 1px solid #e0e0e0; padding: 2px 3px 2px 4px; margin: 0; - border-bottom: 1px solid #e0e0e0; -} - -.egwGridView\_grid td.last { - border-right-width: 0; +} - +.egwGridView\_outer th div.innerContainer, +.egwGridView\_grid td div.innerContainer { - margin: 0; - padding: 0; - display: block; - overflow: hidden; } .egwGridView\_grid tr.fullRow { @@ -160,6 +164,19 @@ background-repeat: repeat-x; } +.egwGridView\_outer thead th:hover { - background-color: #F0F0F0; +} - +.egwGridView\_outer thead th:active { - background-color: #D0D0D0; - border-left: 1px solid gray; - border-top: 1px solid gray; - border-right: 1px solid silver; - border-bottom: 1px solid silver; +} - - .egwGridView\_outer thead th.optcol { padding: 0; text-align: center; * * * Colocation vs. Managed Hosting A question and answer guide to determining the best fit for your organization - today and in the future. [http://p.sf.net/sfu/internap-sfd2d](http://p.sf.net/sfu/internap-sfd2d) * * * eGroupWare-cvs mailing list [eGroupWare-cvs@lists.sourceforge.net](mailto:eGroupWare-cvs@lists.sourceforge.net) [https://lists.sourceforge.net/lists/listinfo/egroupware-cvs](https://lists.sourceforge.net/lists/listinfo/egroupware-cvs)