I'm using the Angular ui-grid and Angular (v1.4). I can display a simple table fine but when it comes to nested tables
To see an example of the code - go to http://ui-grid.info/docs/#/tutorial/216_expandable_grid, then click on the "Edit in Plunkr" link on the right about halfway down. In this example, when you click on a row you'll see the subgrid. That's fine but for this subgrid I'd like to remove the whitespace to the left subgrid's ID column and also ensure the subgrid's columns line up the the parent columns.
Does anyone know how I can do this ?
Any thoughts/guidance would be great.
Thanks - Ro
Related
I have column #1 thats on the left side of the page that is housing my Names and i have a second column that is housing all of its descriptions under that name. The left column is not scrollable, but as you scroll down the middle column, i want the Name on the left side of the column to be highlighted once the majority of the descriptions of that particular name are visible in the second column.
I tried to use react-use-scrollspy but the problem im seeing is that the Name only changes in its highlighting once i scroll OUTSIDE of the middle column, and does not update the highlighting as i scroll WITHIN the second column. I feel like I am missing something regarding how React rerenders the page to see where the reference window location is
I have a 2 columns page and I want that on small screens the first column to be replaced by a small column with just a button on it. When you click the button the original first column appears again (like it is on Wordpress for example).
Thank you.
You cannot reduce a column into a button on a breakpoint (not without adding a lot of code), but you can:
Add a new column with class="column small-12 hide-for-medium", and put the button there... this will keep the column hidden from medium up.
The collapsible column (the first one) will have the class hide-for-small-only, so this will be hidden on small breakpoint; please add an id to this column.
Using jQuery, on the button click, hide/show the first column (the one with the ID, you sould use slideToggle() from jQuery), and that's it.
Hope this helps.
I have standard angular Grid which has around 45+ columns. AT a time only 10 are visible on GRID.
to fetch data for remaining 35 columns, you need to scroll right and then only you can fetch data for the same.
Is there a way in protractor where we can extract data via auto scrolling.
Even we faced the same problem when tried to automate angular ui-grid tables. The solution is to use Jquery scrollLeft() and scrollRight() methods to automatically scroll the table.
var uiGridViewPort = $('.ui-grid-header-viewport');
var scrollLeftPixel = 500;
browser.executeScript("$(arguments[0]).scrollLeft( arguments[0].scrollLeft + "+scrollLeftPixel+")", uiGridViewPort.getWebElement());
The above piece of code will scroll the ui-grid table by 500px towards left and column will be automatically added to the right side. But the caveat here is, Columns on the left side will be removed when the table is scrolled.
I have an issue let me put it simple in my plunker example I want to know why is my $scope.revertSelection() function not working.
http://plnkr.co/edit/3KXrUuCsSACuhefmyzxN?p=info
Steps:
Sort right hand grid by Name(descending order)
Select 3-4 rows randomly
Click 'Copy' button all selected rows are copied into $scope.retainSelection
Sort right hand grid by Name(Ascending order)
Click 'Revert' button (this is not working)
I am expecting all the rows previously selected in step 2) to be selected back which is not happening :-( please help me with the issue.
I googled but could not find any docs of gridApi.selection to look for other methods to fulfill my requirement.
Note: I am using Ui.grid not ng-grid
I should use...
$scope.gridApi.grid.modifyRows($scope.gridOptions.data);
$scope.gridApi.selection.selectRow($scope.gridOptions.data[i]);
...instead of...
$scope.gridApi.selection.selectRow(i);
My friend gave link to docs.
Folks,
I am trying to display EXT JS with Row Expander plugin in a Visual Force page.
Check this link http://mikhailstadnik.com/ext/examples/nested-grid.htm
As per the link, I am successful in displaying Accounts in first grid and respective Contacts in child grid.
Problem is: When I click on first row, it is expanded and shows the respective contacts.
When I click on second row and first row is not closed, the data which I can see for second row (Contacts) are visible at first row contacts also.
So, I think when second row is clicked, I need to close the first row.
Please suggest me how to do this..
The plugin you are talking about features collapseRow(row) method.
Each time you are trying to expand a row (use beforeexpand event for that) you need to loop through all the rows and collapse expanded ones.
Here is how you check if the row is expanded:
Ext.fly(row).hasClass(this.rowCollapsedClass) // this is referring to plugin instance