I have a requirement to open/close additional row details.
Has anyone implemented or have ideas on how to go about implementing expand/collapse feature for each row?
There's a template of sorts for this sort of thing (demo, source) The important bit is that you'll need to tell your List/Grid/whatever when an open/close has changed (aka when size might have changed), eg:
this._listRef.recomputeRowHeights(indexOfChangedRow) // Clear cached size
this._listRef.forceUpdateGrid() // Rerender list with new size
For what it's worth ... :-)
CodeSandbox sample
I was looking for the same feature, but I did not find some useful results as I searched, maybe this sandbox helps others looking for a similar feature in their apps:
The example is using Table from react-virtualized beside react hooks.
Example
Related
I have a table and I filled it with REST API with KeySet-based pagination. I have used pagination contains 5 buttons for representative of pages.
I want to use all the available space to display the maximum number of rows in the table, but at the same time, making the page smaller and larger does not lead to scrolling inside the table. So, I do not mean usual responsive.
I tried a solution that caused some sequential problems. I think it would be better to go back and look for a better idea from the beginning. Do you have any solutions based on your experience?
I am sorry, but I do not understand your problem, but maybe this could help you.
There is a WEB API called "Intersection Observer API". With this observer, you can reach out to the elements in the view of your device. Maybe this can help you, bro.
Anyone know what is the problem? Each post is a component on its own. When I click the comment button of the second post, the comment box on the first post appear instead.
You code showing that you have written code for like and unlike a post in you Post component. The code is common for all posts. Try to create a separate component for like section.
See this SO for a similar example: React toggle like button
For those who might come across this thread later, I haven't found any valid solution by now. Thus, how I solve this is kinda a bit hacky and might cost a lot of time if your app is quite complex. I added id(not HTML id) to each post and loop through each post and check the id with the id of the element that emits the action to show comment box. If they match simply set the display of the comment box to block.
In myNavigator at present there are three pages: bottom.html, middle.html, and top.html. I want to get the bottom.html above the top.html and for that I am calling pushPage.
But there are two issues here:
The stack looks like this bottom.html, middle.html, top.html, bottom.html.
The new bottom.html is fully reconstructed, so it is wasting lots of
resources in rebuilding the same content.
I tried resetToPage function but the issue is still same.
Since you have tagged Onsen UI 2 then you can use the bringPageTop method which seems to be doing exactly what you want. ^_^
So you can do either of
myNavigator.bringPageTop(0)
myNavigator.bringPageTop('bottom.html')
Good luck with your app!
Our team is starting with Angular JS development and for testing we are using Jasmine-Karma-Protractor. The debate is whether we should use IDs for accessing DOM elements or use XPATH/CSS/Binding to access the elements since Angular doesn't really enforce use of IDs.
It is a question of best practice and I want to know what is recommended by the community. Please share what strategy is followed in your team.
Thanks.
Update
After going through all your answers and comments I realize that there is no specifically right or wrong way to do this. (Personally I am leaning towards using IDs!) We will have a meeting to discuss the approach we want and decide whether to use IDs or not. Thank you all very much for your help.
Of course you should use IDs. That will make your tests much easier to write and read, faster, and most importantly, more robust: the test won't have to change every time the markup on the page changes for whatever reason (style, new layout, etc.).
It's much clearer to say "find the menu item 'customers'" than to say "find the 4th li contained in the third ul contained in the second div of the page".
As i have worked on Protractor for 2 years and designed good POM testing framework from the scratch, i can suggest you below order for Angularjs application:
Order:
by.model()
by.repeater()
by.css()
by.id()
by.name()
by.xpath() - least preference
I can also add 2 more options to the existing answers. :
by.className();
by.tagName();
by.cssSelector();
in case there is no fix id in your html code!
When I started working on my current project I was given quite an arduous task - to build something that in essence suppose to replace big spreadsheet people use internally in my company.
That's why we I thought a paginated table would never work, and quite honestly I think pagination is stupid. Displaying dynamically changing data on a paginated table is lame. Say an item on page #2 with next data update can land on page whatever.
So we needed to build a grid with nice infinite scroll. Don't get me wrong, I've tried many different solutions. First, I built vanilla ng-repeat thing and tried using ng-infinite-scroll, and then ng-scroll from UI.Utils. That quickly get me to the point where scrolling became painfully slow, and I haven't even had used any crazy stuff like complicated cell templates, ng-ifs or filters. Very soon performance became my biggest pain. When I started adding stuff like resizable columns and custom cell templates, no browser could handle all those bindings anymore.
Then I tried ng-grid, and at first I kinda liked it - easy to use, it has a few nice features I needed, but soon I realized - ng-grid is awful. Current version stuffed with bugs, all contributors stopped fixing those and switched to work on a next version. And only God knows when that will be ready to use. ng-grid turned out to be pretty much worse than even vanilla ng-repeat.
I kept trying to find something better. trNgGrid looked good, but way too simplistic and doesn't offer features I was looking for out of the box.
ng-table didn't look much different from ng-grid, probably it would've caused me same performance issues.
And of course I needed to find a way to optimize bindings. Tried bind-once - wasn't satisfied, grid was still laggy. (upd: angular 1.3 offers {{::foo}} syntax for one-time binding)
Then I tried React. Initial experiment looked promising, but in order to build something more complicated I need to learn React specifics, besides that thing feels kinda non-anguleresque and who knows how to test directives built with angular+react. All my efforts to build nice automated testing failed - I couldn't find a way to make React and PhanthomJS to like each other (which is probably more Phantom's problem. is there better headless browser) Also React doesn't solve "appending to DOM" problem - when you push new elements into the data array, for a few milliseconds browser blocks the UI thread. That of course is completely different type of problem.
My colleague (who's working on server-side of things) after seeing my struggles, grumbled to me that I already spent too much, trying to solve performance problems. He made me to try SlickGrid, telling me stories how this is freakin zee best grid widget. I honestly tried it, and quickly wanted to burn my computer. That thing completely depends on jQuery and bunch of jQueryUI plugins and I refuse to suddenly drop to medieval times of web-development and lose all angular goodness. No, thank you.
Then I came by ux-angularjs-datagrid, and I really, really, really liked it. It uses some smart bad-ass algorithm to keep things very responsive. Project is young, yet looks very promising. I was able to build some basic grid with lots of rows (I mean huge number of rows) without straying too much from the way of angular zen and scrolling still smooth. Unfortunately it's not a complete grid widget solution - you won't have resizable columns and other things out of the box, documentation is somewhat lacking, etc.
Also I found this article, and had mixed feelings about it, these guys applied a few non-documented hacks to angular and most probably those would breaks with feature versions of angular.
Of course there are at least couple of paid options like Wijmo and Kendo UI. Those are compatible with angular, however examples shown are quite simple paginated tables and I'm not sure if it is worth even trying them. I might end-up having same performance issues. Also you can't selectively pay just for the grid widget, you have to buy entire suite - full of shit I probably never use.
So, finally to my question - is there good, guaranteed, less painful way to have nice grid with infinite scrolling? Can someone point to good examples, projects or web-pages? Is it safe to use ux-angularjs-datagrid or better to build my own thing using angular and react? Anybody ever tried Kendo or Wijmo grids?
Please! Don't vote for closing this question, I know there are a lot of similar questions on stackoverflow, and I read through almost every single one of them, yet the question remains open.
Maybe the problem is not with the existing widgets but more with the way you use it.
You have to understand that over 2000 bindings angular digest cycles can take too long for the UI to render smoothly. In the same idea the more html nodes you have on your page, the more memory you will use and you might reach the browser capacity to render so many nodes in a smooth way. This is one of the reason why people use this "lame" pagination.
At the end what you need to achieve to get something "smooth" is to limit the amount of displayed data on the page. To make it transparent you can do pagination on scroll.
This plunker shows you the idea, with smart-table. When scrolling down, the next page is loaded (you will have to implement the previous page when scrolling up). And at any time the maximum amount of rows is 40.
function getData(tableState) {
//here you could create a query string from tableState
//fake ajax call
$scope.isLoading = true;
$timeout(function () {
//if we reset (like after a search or an order)
if (tableState.pagination.start === 0) {
$scope.rowCollection = getAPage();
} else {
//we load more
$scope.rowCollection = $scope.rowCollection.concat(getAPage());
//remove first nodes if needed
if (lastStart < tableState.pagination.start && $scope.rowCollection.length > maxNodes) {
//remove the first nodes
$scope.rowCollection.splice(0, 20);
}
}
lastStart = tableState.pagination.start;
$scope.isLoading = false;
}, 1000);
}
This function is called whenever the user scroll down and reach a threshold (with throttle of course for performance reason)
but the important part is where you remove the first entries in the model if you have loaded more than a given amount of data.
I'd like to bring your attention towards Angular Grid. I had the exactly same problems as you said, so ended up writing (and sharing) my own grid widget. It can handle very large datasets and it has excellent scrolling.