We are using ag-grid and I need to display the scrollbar in child window as per selected row position in ag-grid. Please find the below plunkr and click on source_id which is an edit page and I need to show the scroll bar as per selected/highlighted row on window popup screen.
In my code scroll bar is working but it is not showing exact scroll bar position as per selected/highlighted row in child window. And please provide inputs for to show the scrollbar in child window as per selected/highlighted row position using ag-grid.
Plunkr url
Note: It has to scroll automatically like selected row position in 'ag-body-viewport' div class.
Follow the below steps:
1)In plunker click on preview button.
2)Click on any source_id in ag-grid.
3)Once click the source_id popup window will be displayed.
4)In popup window another grid will be displayed with highlighted row with respective of source_id.
5)My query is like in this particular window ,how to scroll the scroll bar automatically as per highlighted/selected row postition .
If you take a look at the scrolling section of ag-grid api you'll get an idea how to get about it.
You could update your getRowStyle function to something like this:
function getRowStyle(params) {
....
if (params.data.source_id.trim() === $scope.source_id.trim()) {
colorToReturn = {
'background-color': 'orange'
};
$scope.gridOption.api.ensureIndexVisible(Number(params.data.source_id));
}
....
};
Another Approach with Angular 8 and ag-grid 20.2(enterprise)-
scrollToSelectedRow(){
this.gridApi.ensureIndexVisible(this.gridApi.getSelectedNodes()[0].rowIndex,null);}
ensureIndexVisible takes 2 parameters i.e. rowIndex(integer) and position('top','bottom',null etc).
https://www.ag-grid.com/javascript-grid-api/#scrolling
Though it is too late to reply, considering it might be helpful for someone working on Angular.
goToSelected() {
let addedNode :any []= Object.values(this.gridApi.getModel().getCopyOfNodesMap())
.filter(//logic to fetch row on which you want to scroll to)
if(addedNode !==null && addedNode !=undefined && addedNode.length >0){
let toBeFocused:number = addedNode[0].rowIndex;
this.gridApi.setFocusedCell(toBeFocused, 0);
this.gridApi.ensureIndexVisible(toBeFocused);
this.gridApi.getRowNode(toBeFocused).setSelected(true, true);
}
Here's how I select a particular agGrid row, and make sure it's visible, using Angular & agGrid v23:
let IDofRowToSelect = 123;
this.gridApi.forEachNode((node) => {
node.setSelected(node.data.id == IDofRowToSelect);
if (node.data.id == IDofRowToSelect) {
this.gridApi.ensureIndexVisible(node.rowIndex, 'middle');
}
});
Related
After a lot of search in SO without any particular solution, I am compelled to ask this question.
In Simple words - I want to collapse or hide a specific row using Javascript in ag-grid. I have tried several methods explained in ag-grid documentation and also in SO, but none has worked till now.
All the following methods have been tried and none of the codes worked.
Let rowNode = gridOptions.api.getRowNode(params.value);
Method #1. params.api.getDisplayedRowAtIndex(2).setExpanded(false);
Method #2. params.api.getRowNode(params.value).setExpanded(false);
Method #3. gridOptions.api.setRowNodeExpanded(rowNode,false);
Method #4. gridOptions.api.getRowNode(rowId).style.visibility = "collapse";
I have also tried using plain CSS, like this - Data has disappeared but the white blank row is visible
rowNode.setDataValue('class', 'hidden'); //Where “class” is a field
const gridOptions = {
//Other grid options...
getRowClass: params => {
if (params.data.class === "hidden") {
return 'hidden';
}
},
https://stackblitz.com/edit/js-nvtqhz?file=infoCellRenderer.js
setExpand / setRowNode Expanded only works on collapsible rows, i.e it will collapse an expanded row. it will not hide it.
I edited your stackblitz,
I made a couple of changes to make it work.
Selectable Rows
So, when you click a row, I'm marking it as selected. There is a property on ag-grid rowSelection: 'single' | 'multiple. If you want to hide only one row at a time, use 'single' if you can hide multiple rows use 'multiple'
External filtering
So, ag grid can filters rows if we provide a criteria.It can be a check on any of data property as well. For your problem, I have added a filter that says if any row is selected, remove it from the grid.
Following are the changes
/// method called on clicking the button
function hideRow(params) {
let rowNode = gridOptions.api.getRowNode(params.value); // get the clicked row
rowNode.setSelected(true); //mark as selected
gridOptions.api.onFilterChanged(); // trigger filter change
}
Triggering the filter change will call this method for each row
function doesExternalFilterPass(node) {
return !node.selected; // if row node is selected dont show it on grid.
}
You can access the rows hidden any time using
gridOptions.api.getSelectedRows() //Returns an array of data from the selected rows. OR
gridOptions.api.getSelectedNodes() //Returns an array of the selected nodes.
And, if you want to show a row again, just filter from this above mentioned method and do these steps
rowNode.setSelected(false); //mark as unselected
gridOptions.api.onFilterChanged(); // trigger filter change
This will automatically show the row on grid.
Hope this helps! :)
I've a datable with responsive active.
Inside a column i've a input field PRICE. When i change it, it update automatically 1 or more input fields inside others column.
Now if i've a large screen and responsive is not active. All works ok.
But if i've a small screen and responsive active itself, i've problem: input field OUTSIDE the screen are not update.
See the fiddle example trying change PRICE input: http://jsfiddle.net/ebRXw/5349/
$(document).ready(function() {
$('#example').DataTable( {
responsive: true
} );
$(".price").on("change", function(e) {
e.preventDefault();
var tr = $(this).closest("tr");
var total = $(this).val() * ( 1 + tr.find(".vat").val() / 100 );
tr.find(".txt_no_responsive_column").val(total);
tr.find(".txt_responsive_column").val(total);
});
} );
I think i've to modify this logic: var tr = $(this).closest("tr"); .Now i've disabled responsive in all my tables and activated scrollX to get it working. But i'd like to activate responsive in all my tables without pain and without doing deep update to javascript! Any solution valid for responsive triggered and responsive not triggered using unique code?
UPDATE: I tried solution provided by #Yash Shukla: jsfiddle.net/ebRXw/5361 but i get problem if I resize windows. Value inside new TR back to original value. See pic
I checked you jsfiddle in both cases if responsive is true or false the value in txt_responsive_column input is getting updated.
What is your main issue? If responsive is false then there is no x scroll bar and you are not able to see the input is this the issue?
Edited :
When you click on + sign it creates a new row with child class, so I have updated the jsfiddle with updated code. You just need to pick that new row also and update input values accordingly.
//code here
http://jsfiddle.net/ebRXw/5361/
There is a dropdown list I want to click, it has four options when expanded. With my code, I can click and expand this dropdown list, but unable to click on the option (value = '100').
This is the HTML code for the elements I want to click before the dropdown list is expanded:
This is the HTML code for the elements I want to click after the dropdown list is expanded:
Below is my code:
//#FunctionName : Display100ResultsPerPage
//#Description : A function that chooses to display 100 results per page instead of 10
//#Parameters : PageObj: page that displays items
//#Returns : None
//#Version : v1.0
function Display100ResultsPerPage ( PageObj )
{
var localPageObj = PageObj;
var display100ItemsPerPageOptionCssSelector = "div[class='per-page-section'] select option[value='100']";
var displayNItemsPerPageDropdownListCssSelector = "div[class='per-page-section'] select";
localPageObj.QuerySelector(displayNItemsPerPageDropdownListCssSelector).Click();
aqUtils.Delay(500);
localPageObj.QuerySelector(display100ItemsPerPageOptionCssSelector).Click();
}
My code manages to:
Clicks and expands the dropdown list, but unable to click on the (100) option.
If I add an additional line in my code:
Log.Message(localPageObj.QuerySelector(display100ItemsPerPageOptionCssSelector).getAttribute('value'));
I got a logging message saying "100", which means my code can successfully locate this (100) option but why can not I click on it?
Many thanks
I have tried the following approach:
localPageObj.contentDocument.Script.jQuery("div[class='per-page-section'] select").find("option").css("z-index","999", "position", "relative");
option elements have changed into:
By index, I tried to click on the last option (value = '100'), but still not working.
Inspect the element by right clicking on it, if the inspector takes you to a different element I think you need to give dropdown list a "z-index" and remember that z-index works only when you specify position to relative or absolute. that should solve the problem, I believe.
As I am using KendoUI for development of my application.I have used Multiple Grid in my application.My Problem is that i want to disable the animation for filter option that is when we click on each column for filter the menu is slide down giving us various options to filter.
I want to disable the animation when i click that column for filtration that option must not slide down. Here i am adding an Image.
I don't think there are "official" configuration options for this.
You can disable it for all popups like this:
kendo.ui.Popup.fn.options.animation.open.duration = 0;
kendo.ui.Popup.fn.options.animation.close.duration = 0;
(demo)
Note that this will affect other widgets as well (e.g. the dropdowns inside the filter menu), so you may need to explicitly set the animation config for those if you need it.
An alterative would be to set the animation for all filter menus (there is one per column), for example like this:
$(".k-grid-header").find("th").each(function () {
var menu = $(this).data("kendoFilterMenu");
var init = menu._init;
menu._init = function () {
init.apply(this, arguments);
this.popup.options.animation.open.duration = 0;
this.popup.options.animation.close.duration = 0;
};
});
(demo)
The above answer was useful to me, however for how we were using kendo grid, the grid's column menu brought up another submenu (as seen here http://demos.telerik.com/kendo-ui/grid/column-menu). It turns out that though the initial dropdown is of Kendo type "Popup", the sub-menu is of Kendo type "Menu". So if you also want the sub-menu to have no animation, you would add these lines:
kendo.ui.Menu.fn.options.animation.open.duration = 0;
kendo.ui.Menu.fn.options.animation.close.duration = 0;
Alternatively, you can disable the animation with the shorthand of animation = false, so the final result could be:
kendo.ui.Popup.fn.options.animation = false;
kendo.ui.Menu.fn.options.animation = false;
Again note that this will turn off animations for all popups and menus.
I am trying to accomplish what may be a simple task for you. I want it so everytime the user clicks one of the "patients" on the left hand bar, a drawer opens. That drawer will be loaded in a hidden div (display:none) on the page. Each div's id will be the last lastname of the patient. My included fiddle shows all of the same last name for demonstration purposes only, obviously.
But the problem is I don't know how to open a unique drawer for each patient. I guess I need to put a toggle on each patient's li somehow?
Also, if they click another patient in the listing, I would like the current open drawer to close, and open the one they just clicked. Also, if the close button is clicked, obviously close the drawer as well.
I got a single drawer to work with this:
$(".patient").toggle(function(){
$(this)
$('#drawer').slideDown("slow")
}, function(){
$(this)
$('#drawer').slideUp("slow")
});
But obviously that isn't going to work... :(
In the fiddle it is opening a standard "drawer" right now. but really I'd like the data for each named div be loaded in the same form. Please comment if you don't understand.
Here's the fiddle:
http://jsfiddle.net/3veht/1/
Add a data element to your HTML indicating an ID, let's say patient ID in this case:
<li class="patient green" data-patientId="1">Josh Doe<img src="img/next.png"><img class="imgfix" src="img/accept.png"></li>
<li class="patient red" data-patientId="2">John Adams<img src="img/next.png"><img class="imgfix" src="img/cancel.png"></li>
Then in your javascript when you load the data, you can use that ID to generate a page request. I also changed the toggle to a click and slid the previous one up before sliding the new one down. In the fiddle example:
$(".patient").click(function(){
var pat = $(this);
if ($("#drawer").is(":visible"))
$("#drawer").slideUp("fast", function () {
$('#drawer').slideDown("slow")
$("#drawer").load("/echo/js?js=" + pat.data("patientid"));
});
else
{
$('#drawer').slideDown("slow")
$("#drawer").load("/echo/js?js=" + pat.data("patientid"));
}
});
Updated fiddle: http://jsfiddle.net/3veht/6/
Check this fiddle updated....
changes made in code
var divud = $(this).text().split(' ')[1];
$('#drawer').slideDown("slow");
$('#'+divud).removeClass('hidden');
$('#'+divud).slideDown("slow");
JSFIDDLE