I have a button outside the grid, on clicking of this button i am iterating the row nodes and doing a check whether the data is empty or not. If it is empty i want to highlight that row. Did not found anything which can give me any option to highlight the row in ag grid on button click.
Kindly help
I found the answer for above:
In Component: may be in constructor
this.rowClassRules = {
'invalid-row': (params) => {
if (this.inValidRowNode && this.inValidRowNode.data.name === params.data.name) {
return true;
}
}
};
On button click (in validation method), while iterating the node we need to set the data. I am setting in this way.
node.setDataValue('name', ' ');
In Html:
<ag-grid-angular #agGrid rowSelection="multiple" [gridOptions]="gridOptions" [columnDefs]="gridColumnDefs" (gridReady)="onGridReady($event)"
[rowClassRules]="rowClassRules">
Related
I have a grid, with a menu and items.
If I hide all the items using the inbuilt menu, I would like to refresh the pagination so that it display 0-100 items.
The only way I found i looping over all the column, and if all are hidden, then I just hide the pagination, but it's a shitty solution.
http://next.plnkr.co/edit/I3fdjfJDCfoZ8MCH
(hide all the item using the grid menu on the right)
Right now I do this :
let allHidden = true;
lodash.forEach(column.grid.columns, function (col) {
if (col.visible) {
allHidden = false;
return;
}
});
if(allHidden)
$scope.gridOptions1.enablePaginationControls= false;
else
$scope.gridOptions1.enablePaginationControls= true;
but there is still the scrollbar, and actually I don7t like that solution
You could disable both scrollbars, and change the loop a bit.
Still a shitty construction (in your words :), because things will be messy when you decide to unhide any column... You would explicitly have to enable both scollbars again.
gridApi.core.on.columnVisibilityChanged($scope, column => {
if(!column.grid.columns.some(function(col) {return col.visible}))
{
column.grid.options.enablePaginationControls = false;
column.grid.options.enableHorizontalScrollbar = uiGridConstants.scrollbars.NEVER;
column.grid.options.enableVerticalScrollbar = uiGridConstants.scrollbars.NEVER;
}
});
BTW, you would have to inject uiGridConstants to use uiGridConstants.scrollbars.NEVER.
Maybe there is a better solution to your problem, only it is not clear to me what you're trying to achieve here.
I tried to apply PasswordRenderer to a specific row and column based on the value of that row.
So my custom renderer looked like this -
function firstRowRenderer(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.PasswordRenderer.apply(this, arguments); }
However the problem I face is, while editing the cells, the field is no longer masked. Here is an example - http://jsfiddle.net/whxbv6xh/
If you try and edit the first row of that table, the values are not masked. Any ideas?
This "unmasking" of the field is what the PasswordRenderer is essentially all about. If you want to not be able to see the original values at all you have at least two options:
1.Convert the header row's values beforehand:
function renderAsPassword(password) {
return new Array(password.length + 1).join('*');
}
alert(['', 'Kia', 'Nissan', 'Toyota', 'Honda'].map(renderAsPassword));
2.Create a custom editor, extending the built-in PasswordEditor:
var PasswordEditor = Handsontable.editors.PasswordEditor.prototype.extend();
PasswordEditor.prototype.getValue = function() {
return renderAsPassword(this.TEXTAREA.value);
};
PasswordEditor.prototype.setValue = function(newValue){
this.TEXTAREA.value = renderAsPassword(newValue);
};
I'm using the angularjs ui-grid and I have a "total" row that I want to pin to the top of the grid no matter what is the current sorting.
How can I accomplish that?
I think this is what you are looking for : Row Pinning
Essentially add another hidden column, something like this:
{
field: 'pinned',
visible: false,
sort: {direction: uiGridConstants.ASC, priority: 0}, //use uiGridConstants.DESC for pinning to the bottom
suppressRemoveSort: true,
sortDirectionCycle: [uiGridConstants.ASC] //use uiGridConstants.DESC for pinning to the bottom
}
Row entities which have pinned = true rise to the top, even when other sorting are applied.
DISCLAIMER: I know it's not exactly answers the question, but this is how I solved it for now until I'll have a better solution:
Create an other grid above the main grid :
<div style="height:30px" ui-grid="totalGridOptions"></div>
<div ui-grid="gridOptions" class="grid"></div>
with definitions:
$scope.totalGridOptions = {showHeader:false,enableHorizontalScrollbar:false};
and then bind the columns of the main grid to the total grid (for width and other adjustments):
$scope.$watch('gridOptions', function (newVal) {
$scope.totalGridOptions.columnDefs = newVal.columnDefs;
}, true);
I think you should use something like this
$scope.gridOptions.data.unshift({label:value});
unshift adds it to the top
Edit 2 / Actual Solution: The way I finally settled this issue was by using custom header cell templates. I essentially create a second header row by adding a div at the bottom of what was previously my header. Here's a simple version:
<div class="super-special-header>
<div class="header-display-name">{{col.displayName}}</div>
<div class="totals-row">{{grid.appScope.totals[col.field]}}</div>
</div>
I store my totals on the controller's $scope and can access them in that div with grid.appScope.totals[whateverThisColumnIs]. This way I can still update them dynamically, but they don't get mixed into a sort function like my previous 'solution' was aiming for.
Edit 1 / Dead-end 'solution': Just ran into a problem with my solution, if your table is long (you have to scroll to get to bottom rows), the totals row will scroll out of view. Going to leave this 'solution' here so no one else makes the same mistake!
I had this same issue but with a twist. Since I was going to need to change the default sorting algorithms for many of the columns anyway, I set my algorithm up to skip the first element in the sort. You can use the sortingAlgorithm property on any columndef that would be part of a sortable column. This is really only a solution if you have only a few sortable columns though. It becomes unmaintainable for huge tables.
I couldn't find any built-in feature for ui-grid to keep a specific row at the top of the grid when sorting is applied. But this could be done using sortingAlgorithm parameter in the columnDefs( please refer to http://ui-grid.info/docs/#!/tutorial/Tutorial:%20102%20Sorting).
I have written an algorithm which keeps the row('total' is the particular cell value in the row) at the top of the grid without applying a sorting.
var sortingAlgorithm = function (a, b, rowA, rowB, direction) {
if (direction == 'total') {
if (a == 'total') {
return 0;
}
return (a < b) ? -1 : 1;
} else {
if (a == 'total') {
return 0;
}
if (b == 'total') {
return 1;
}
}
}
What I have currently is a very simple div that has a flexcroll scroll bar. This simple div contains some draggable itmes inside of it. My goal is to be able to drag one of the items and and move it about without the flexcroll scroll bar moving.
As it stands right now if I were to drag one of the items below the viewable area the simple div will scroll down. I would like to prevent this.
I'm using jQuery UI for the draggable items. I've already tried using the option "scroll:false" but this does not work for flexcroll.
I'm sorry I don't have any example code, I'm currently away from my work computer.
flexcroll: http://www.hesido.com/web.php?page=customscrollbar
I don't know if you have already resolved this problem. This morning, I have the same problem and I found your post. After that, I have googled a lot to find a solution without any lucky. So finally, I decided to do someting myself, I hope my idea will help you.
After read the Programming Guid, I found that in this version (2.0) of flexcroll, we could register a function for onfleXcroll whose description could be found by searching the keyword "Pseudo-event: onfleXcroll". This is to say that the method will be executed after a scroll is done. So here, what I restore the "top" style with the value before you drag an element.
Here are the code
var $assetswrapper; // This variable indicates the contentwrapper of you div.
var $assetsscrollbar; // This variable indicates the vscroller of you div.
window.onfleXcrollRun = function () { // This method will be executed as soon as the div has been rendered with the help of flexcroll
// You could find these two divs by using firebug, because the top value of these two divs will be changed when we scroll the div which use the class .flexcroll.
$assetswrapper = $('#contentwrapper');
$assetsscrollbar = $('#vscrollerbar');
}
var wrapperTopPosition = 0; // This is used to stock the top value of the wrapperContent before dragging.
var scrollbarTopPosition = 0; // This is used to stock the top value of the scrollbar before dragging.
var dragged; // This is a boolean variable which is used for indicating whether the draggable element has been dragged.
var dropped = false; // This is a boolean variable which used to say whether the draggable element has been dropped.
$('.draggable').draggable({ // you could change .draggable with any element.
start: function (event, ui) {
// Your code here.
wrapperTopPosition = $assetswrapper.position().top;
scrollbarTopPosition = $assetsscrollbar.position().top
dragged = true;
},
stop: function (event, ui) {
// Your code here.
dragged = false;
dropped = true;
}
});
$('your drag div')[0].onfleXcroll = function () { // This method will be called each time when a scroll has been done.
if (dragged) {
$assetswrapper.css('top', wrapperTopPosition);
$assetsscrollbar.css('top', scrollbarTopPosition);
} else {
// Code here is used for keeping the top position as before even though you have dragged an element out of this div for a long time.
// You could test the scrollbar without this piece of code, if you drag an element out of the div for a long time, the scrollbar will keep its position,
// but after you dropped this element and try to scroll the div, then the scrollbar will reach the end of the div. To solve this problem,
// I have introduced the method setScrollPos with the old top position plus 72. 72 here is to set the scroll increment for this scroll, I know
// this value is not fit for any size of windows, but I don't know how to get the scroll-increment automatically.
if (dropped) {
dropped = false;
$('your drag div')[0].fleXcroll.setScrollPos(false, Math.abs(wrapperTopPosition) + 72);
$('your drag div')[0].fleXcroll.setScrollPos(false, Math.abs(wrapperTopPosition) + 72);
}
}
};
I hope this could give you a help if you haven't found any solution yet.
i've got the following code taken and slightly modified by the original example page:
http://jsfiddle.net/zK3Wc/21/
somehow, if you use the arrow down button to go through the list, it shows the values (digits) in the search field, instead of the label, but the code says, that on the select event, the label should be set as the value.
what i would need is to display the label in the searchfield instead of the digits, but if i click on an item, it has the digit value in the url, the same when using the arrow down button.
Ramo
Add a focus event:
focus: function( event, ui ) {
$( ".project" ).val( ui.item.label );
return false;
},
http://jsfiddle.net/zK3Wc/26/
For me, I forgot to put return false; in the select: callback function