I'm using ui-grid and the first column have to be pinned on the left. When the user hovers on one row, I want to highlight the entire row, which is the logical thing to do.
The problem is that ui-grid creates two distinct elements, one for the pinned column and the other on for the "regular" ones. So I don't know how to highlight the entire row at once, and solutions with CSS don't work.
.ui-grid-row:hover .ui-grid-cell {
background-color: red;
}
Plunker here: http://plnkr.co/edit/HPxrc68JNMqyp4G9xLFA?p=preview.
Do you know how to do that ? Ideally just with ui-grid settings and CSS.
Thanks!
I solved it!
I used a row template that grabs the row id, defines ng-mouseover and ng-mouseout functions that fills the background for all the cells in the row. For whatever reason I had to wrap the entire template in a div, simply adding something to the class of the template broke the entire table.
Content of the rowTemplate:
<div class="row-uid-{{row.uid}}">
<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid"
ng-mouseover="grid.appScope.onRowHover(row.uid);"
ng-mouseout="grid.appScope.onRowOut(row.uid);"
ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'"
class="ui-grid-cell"
ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader}"
role="{{col.isRowHeader ? 'rowheader' : 'gridcell'}}"
ui-grid-cell>
</div>
</div>
Added functions in the controller:
$scope.onRowHover = function (rowUid) {
_.each(angular.element('.row-uid-' + rowUid + ' .ui-grid-cell-contents'), function (row) {
angular.element(row).css('background-color', 'red');
});
};
$scope.onRowOut = function (rowUid) {
_.each(angular.element('.row-uid-' + rowUid + ' .ui-grid-cell-contents'), function (row) {
angular.element(row).css('background-color', 'white');
});
};
Related
In twitter bootstrap (and/or css), how can we ensure a table is displayed in its full form (with fixed dimensions), no matter whether or not its row are populated with data or not ?
I'm not sure to completely understand the question. But if you want to check if your table is fully displayed, I will use JavaScript/jQuery.
You could just check if the table has the size that you put in the CSS but I don't think that what you mean with your question:
if($(".table").height()==??) {
//DO WHAT YOU WANT
}
If your data are put on one line in the table, you can then check the number of row and multiply by the size of one row: https://jsfiddle.net/ugppwzsc/1/
But if your row have various size, you will have to calculate the size of every row and check if it's what you want:
var cal = 0;
$( "tr" ).each(function() {
cal += $(this).height();
});
if($("table").height()==cal) {
//DO WHAT YOU WANT
}
I'm creating a grid of elements and have a hover effect in place, using CSS transitions, for each element. I'd like to add secondary effects on adjacent x- and y-axis elements as well, creating a cloud effect. I imagine I'll be referencing those elements using jQuery's next() and prev() methods, or by $index and $parent.$index.
The grid area will be large enough to prevent row-wrapping (using negative margins and hidden overflow).
Here's a simplified example of my repeat:
<div class="activity-thumb-row" ng-repeat="i in getNumArray(20) track by $index">
<div class="activity-thumb"
ng-class="{'adjacent': adjacent}"
ng-repeat="j in getNumArray(30) track by $index"
ng-mouseenter="highlightActivities()">
</div>
</div>
And a function in the controller (which I realize may not be the best approach):
$scope.highlightActivities = function() {
$(this).next().adjacent = true;
$(this).prev().adjacent = true;
}
How can I target elements adjacent to the hovered element using ng-class (or something else) inside ng-repeat?
Here's a fiddle for fiddling.
For reference, here are some related discussions:
Change class on mouseover in directive
Angular js ng repeat with conditional ng class not applying css class
ng-mouseover and leave to toggle item using mouse in angularjs
Here's a directive that calculates all of the indices of adjacent cells and adds the adjacent class using jQuery only ... not ng-class.
Assumes that rows will wrap , would need adjusting for individual row elements
.directive('activityThumb', function() {
return {
restrict: 'C',
link: function(scope, elem) {
elem.bind('mouseenter', function(e) {
var elW = elem.width(),
$parent =elem.parent(),
parentW = $parent.width(),
$items = $parent.children(),
numItems =$items.length
itemsPerRow = Math.floor(parentW / elW),
idx = elem.index(),
rowIndex = idx % itemsPerRow;
/* object of various indices , easy to inspect*/
var adjacentIdx = {
top: idx > itemsPerRow ? idx - itemsPerRow : false,
right: rowIndex != itemsPerRow ? idx + 1 : false,
left: rowIndex > 0 ? idx - 1 : false,
bottom: (numItems - idx) > itemsPerRow ? idx + itemsPerRow : false
}
console.dir(adjacentIdx);
$items.removeClass('adjacent')
$.each(adjacentIdx, function(position, index){
if(index !== false){
$items.eq(index).addClass('adjacent');
}
});
});
}
}
});
It wouldn't take much tweaking to remove jQuery dependency either.
Also would need additional directive on parent to remove extra classes when mouse leaves the main parent from one of the edges
DEMO
First, it's not a good idea to deal with DOM elements in the controller.
Also, this problem seems to be mostly styling related, and not functionality related. I would thus try to keep the logic in the View and not in the controller.
There are 2 ways to deal with View-specific logic: 1) using custom directives or 2) View-defined scope variables
The second approach can work here and seems like the cheapest approach, but also a bit ugly. It ng-inits the rowHighlight array in the scope and sets which element is highlighted:
<div ng-repeat="i in getNumArray(20) track by $index" ng-init="rowHighlight = []">
<div class="activity-thumb"
ng-repeat="j in getNumArray(30) track by $index"
ng-class="{'adjacent': rowHighlight[$index-1] || rowHighlight[$index+1]}"
ng-mouseenter="rowHighlight[$index] = true"
ng-mouseleave="rowHighlight[$index] = false">
</div>
</div>
updated fiddle
I am trying to display some aggregate value (like total) in the last row of an ng-grid. The style and css class of the last row needs to be different than the other cells in that column. How to acheive this?
The cellTemplate in a column definition applies to all cells in that column, but in my case I need to have a different style for the last row in that column. Can anyone please suggest me a solution.
Thanks
Sudipta
I was able to add a class to the last row through a plugin:
function ngGridAddClassToLastRow(className) {
var self = this;
self.grid = null;
self.scope = null;
self.init = function (scope, grid, services) {
self.domUtilityService = services.DomUtilityService;
self.grid = grid;
self.scope = scope;
var addClass = function () {
var lastRow = self.scope.renderedRows[self.scope.renderedRows.length - 1];
lastRow.elm[0].className = lastRow.elm[0].className + ' ' + className;
};
self.scope.$watch(grid.config.data, addClass);
};
}
And with this added to the gridOptions:
...
plugins: [new ngGridAddClassToLastRow('<some class name>'),
...
And of course add some css, e.g. in my case:
.lastRow {
border-bottom: 0px;
}
That worked for me. I cannot say for certain that is the way to go since, needless to say, i'm a noob with Angular and ngGrid. I've constructed the plugin from flexible height plugin.
You can set a special property "isLast" (or however you like to name it) of the item that should be displayed in the last row. This item can be accessed through row.entity.isLast.
... somewhere in your controller ....
$scope.getRowClass = function(row) {
return row.entity.isLast === true ? 'lastRow' : '';
}
... somewhere inside the gridOptions ...
rowTemplate: '<div ng-style="{ \'cursor\': row.cursor }" ng-repeat="col in renderedColumns" ng-class="[col.colIndex(), getRowClass(row)]" class="ngCell {{col.cellClass}}">....</div>'
Based on the .lastRow class you could define a custom style for the last grid row.
I have quite annoying problem with hiding grid columns dynamically. After I hide columns (with long text in cells), the height of grid rows dramatically increases.
Before hide
and after hide operation
As You can see first row is definitely too high. Probably the reason of that behavior is the fact, that I use text wrap in grid cells.
.x-grid-cell-inner { white-space: normal; }
Is there any efficient way to make grid rows, not to change their height after hiding columns (and using textwrap ) ?
I've personally encountered this strange phenomenon before. The problem is caused by Ext JS "hiding" columns by setting the width to 0px.
My solution was to add event listeners to the grid header like this:
// me is the grid
me.headerCt.on({
columnhide: me.removeWordWrapOnHide,
columnshow: me.addWordWrapOnShow,
scope: me
});
Instead of using the existing x-grid-cell-inner class, make a new one like this:
<style type="text/css">
td.grid-cell-wordwrap > div {
white-space: normal; /* may need !important, not sure */
}
</style>
Then the implementation of these two functions did this:
removeWordWrapOnHide: function(headerCt, column){
var me = this,
wordWrapRe = /wordwrap/;
if(column.useWordWrap || wordWrapRe.test(column.tdCls)){
column.tdCls = column.tdCls.replace("grid-cell-wordwrap", "");
column.useWordWrap = true; // Flag to check on show
me.view.refresh();
}
},
addWordWrapOnShow: function(headerCt, column){
var me = this,
wordWrapRe = /wordwrap/;
if(column.useWordWrap && !wordWrapRe.test(column.tdCls)){
column.tdCls = "grid-cell-wordwrap " + column.tdCls;
me.view.refresh();
}
}
Might not be the most efficient way, but it gets the job done.
I am new to DoJo development so this could be basic.
I have created an EnhancedDatagrid and it shows the data fine.
The data comes from an JSON store in a different page.
I have a button which causes that one new entry is created in the datastore and then my datagrid is 'refreshed'. This works fine.
But now i want only as the last step to change the style of the first row in my datagrid.
(I need to make the newly added row more visible.)
But i simply can't figure out how to get a handle on the first row in a datagrid.
...
grid = new dojox.grid.EnhancedGrid({
id: strId,
store: store,
structure: layout,
}, document.createElement('div'));
dojo.byId(placeHolder).appendChild(grid.domNode);
grid.startup();
var row = grid.getItem(0); // ---get the first row. How ? And how to apply new style ?
...
Thank you in advance.
Solved the problem like this:
dojo.connect(grid, 'onStyleRow', this, function (row) {
var item = grid.getItem(row.index);
if (row.index == 0) {
row.customClasses = "highlightRow";
row.customStyles += 'background-color:#FFB93F;';
}
});
I use the 'Claro' theme and it prevented me to set the background color of the row-cells.
The solution was to set the customClasses to a style like this:
.highlightRow tr
{
background-color: #FF6A00 !important;
}
Found part of the solution here: http://dojo-toolkit.33424.n3.nabble.com/row-customStyles-was-overwrite-by-claro-theme-td3763079.html