Develop Reference

Most efficient way to hide table column with angularjs

I would like to know if anybody knows a more efficient way to show / hide columns in a table powered by angularjs:
I have a large table (20+ columns, 1000000+ rows) and implemented a feature to show / hide columns based on user preferences. I do this via ng-if on every table cell. This triggers a large watcher count on initial load of the table and the angular digest cycle is going crazy with more then 4000 watchers on a single page.
My main idea to solve the performance problems was to reduce the watcher count. For this purpose I use this library that does nothing else then disabling watchers that are not in the viewport. So far so good, performance got better, but what if I would add more and more features to the table? It looks like this show / hide columns feature will be my performance bottleneck forever (and according to chromes angularJS digest timing analyses it is).
Conclusion: ng-if doesn't look like a good approach to show / hide columns because of the high watcher count and bad performance. Does anybody know a smarter solution to show / hide columns?
Edit: I already have pagination of 200 rows per page, however the problem still persists and of course I aim for a scalable solution.

You can try with CSS classes applied to the all table cells and respective header cells with different class names.
EG: column-1, column-2 ect
Define the class definitions in the angular string and place in between style tag as expression
EG:
In controllers js
$scope.columnStyleDefs = '.column-1{display:none},.column-1{display:table-cell},...';
You can chnage "columnStyleDefs" as necessary when user change their preferences
In html template
<style>
{{columnStyleDefs}}
</style>
I home this may help you for the above assignment.

Is there a way to disable Angular Grid virtualization, i.e. Angular creating div's for grid based on height/width position?

I have a Angular grid (ag-grid) that will, based on scrolling/view, create div in the DOM to display data. I am writing a Selenium WebDriver test that would read the data from the grid and compare it to the data returned from the API.
Since some of the div's are not yet created (hidden behind Angular virtualization) WebDriver is not able to effectively capture the data.
Is there a way to force the grid to display all data?

there is a setting, gridOptions.rowBuffer, that tells the grid how many extra rows to render above / below the viewport. set this to a number greater than the number of rows you have and then all rows will be rendered. or if unsure, set it to 9999999.
ps you mention 'Angular Grid' and 'Angular Virtualisation'. to be correct, it is called 'Agnostic Grid' - the ag stands for AGnostic - and also the virtualisation is not Angular, grid grid has it's own implementation of row virtualisation.

Try explicitly clicking the scrollbar or panning the scrolled area in order to bring the desired div(s) into view to force Angular to instantiate the divs. You could try scroll-into-view on a known instantiated object on the edge of the instantiated div set, which would, I imagine, kick Angular into instantiating the ones just outside the view, in anticipation of continued scrolling. Wash, rinse, repeat if desired.
Here's a possibly helpful page about scroll to element in Selenium: Scroll Element into View with Selenium

Try setting domLayout to domLayout = 'autoHeight'

React create Bootstrap grid of unknown size

I'm building an app in which I need to use React to render a Bootstrap grid. I'm a React newb so please bear with me.
Frontend will receive N objects that need to be displayed in Boostrap columns, each in his own column. The problem is, I don't know how large is N so I don't know how many rows do I need.
Any ideas how to approach this?
Should I have just one component? Or three (Container, Row, Column)? Or something else?

First of all, consider if you even need custom components for Container, Row and Column. You can just use a div with the appropriate css class, I don't see that much value in wrapping this into a custom component. If you do decide to use a custom component, you may want to look at react-bootstrap, they already implemented these.
As for the layout, I believe you can place as many columns as you want in a row in Bootstrap layout and they will wrap as necessary (if there's more than 12), so it might be easiest to just have one row and put all the columns inside it (see Bootstrap docs).

There are different ways to approach this problem depending on the type of content that you are trying to insert into the grid.
First off, as far as columns go, Bootstrap uses a 12 column grid system. This will make your life a bit easier because you can divide 12 by the number of elements in each row. If your html is set up correctly you can use:
var numOfElements = document.getElementById('objectsWrapper').children.length;
If you're using images you may want to set a strict max-height and max-width (percentages) to restrict the images generated from messing up the grid.
Next, when the column exceeds 12 elements, you'll want to start a new .row if necessary. Create a new div, append it to your current container and set it as the currentDiv you want to add your children to.This step is important because your code needs to know which 'objectsWrapper' it's querying for children.
Wash. Rinse. Repeat.
Hope this helps.

how to draw squares (with different sizes) using jquery / bootstrap

I'm trying to draw something that looks like the following, using jQuery / bootstrap (for spanning) and some sort of binding using angular (but angular is not really important here).
Questions:
Does anyone knows how to render something that looks like that?
I target 10 squares per row (span between 1 to 3 cubes), but I'm not sure how do I know how many rows can I fit in it. Does anyone have any idea? How can I match it to a given resolution?

How about just dynamically creating elements with percentage based dimensions using JQuery?
I would add the search box using z-index to layer it on top of the grid
Another option is to use some template based framework like Knockout to bind the grid from some data source

get data from main grid to populate subgrid

I need to populate my subgrid which shows some of the columns from main grid without actually going and getting data again using URL? Example:Main Grid is getting data from server (10 columns) using jsonReader. Out of which I want to show 7 columns in the parent row and 3 columns in the subgrid row . Can I do this? (Or some other way to achieve this expand concept?)

One possible workaround to use the sub-grid as 1-1 with main grid, instead of as parent-child : query all the columns as normal in the parent grid, but set the ones you don't want in main row as hidden. Then in sub-grid load event, access those fields using the "parent" row id and create them as custom fields or simply emit custom html.
This does cause duplication of the fields though, since the original main grid fields are still present, even if hidden. The html ids will get duplicated and may cause conflicts if you don't handle them.
Perhaps there is a cleaner way to do it than this (which I'm sure #Oleg will show us any minute now!)
But I wish jqgrid had a documented feature to more easily handle this kind of thing. It is very useful because you get the benefit of full inline editing in the subgrid, so you can design a much nicer edit form (eg. multiline textareas) than when confined to one straight line.
Note the presence of this feature in other grids.
Jquery EasyUI Datagrid demo
Telerik Grid Editing Demo