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
Related
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.
I'm working on a project where I'm using Angular-Gridster to have moveable widgets.
One of these widgets contains a smart table. What I want to accomplish is to have the table snap to the widget size when I resize it, and on the initial load of the page.
I also want to dynamically determine the number of rows to shown on a page based on the bounds of the widget box. This one I have an idea of how to accomplish. It is the previous stuff I'm having difficulty with.
For charts and other things for widgets I've used something like
var el = element.closest('.gridster-item');
Which gets me the gridster container my table is in. I also know the gridster-item-resized event to use.
But how do I use these to dynamically resize my table. Unlike a chart library like Highcharts, there's no watch applied on properties.
Any ideas on how to tackle this?
Hi fellow Javascripters,
I am using both Angular and D3 in my project (no jQuery, which I intend to keep this way). One thing that I want to support is to enable users to play with 'raw' tabular data. So, data from a CSV is loaded into my app and displayed in a plain old fashioned table (currently with Angulars ng-repeat). However, I now want to be able to animate that columns of the table get reshuffled. So, as a simple example, I would programmatically want to switch column 2 with column 4 and this transition must be D3-like. Furthermore, easily dragging whole columns to other positions should be possible.
Since I am not really experienced with working with jqLite inside Angular directives, my preference would go out to a solution based on D3. I can then see two possible solutions:
Render all of the data in a regular table using the D3 append functionality. Whenever column order changes, somehow reconstruct the table and create a smooth transition.
Simulate a table with div's and css (not looking forward to that though), to enable easy repositioning of data.
Since both solutions are far from trivial (I would say), I would really like to have some opinions. Do you see any other solutions for me? And if one of these two solutions seems right for you, how would you go about implementing them?
Thanks in advance!
We are porting our application from GWT to angular. In our application , we uses editable grid.
One way to make grid editable is to use separate editor each cell. Doing this a simple page with 4 columns and 100 rows takes 2000 ms to render.
http://plnkr.co/edit/FTaQBPOoaBtbHqgltF7r?p=preview
Another way to do this is to use only single editor in a absolute div and position this div on the selected td. But doing do may required dom calculation which is prohibited in angular. But it tooks only 500 ms to render
http://plnkr.co/edit/S0ivQ5yJSwx26M0tt2GX?p=preview
As I am new to angular, which approach should we follow.
The attribute enableCellEdit: true is missing in the plunkr.
Try this -> http://plnkr.co/edit/EzCZcM?p=preview
You can also try this:
http://vitalets.github.io/angular-xeditable
there are demos with editable row / column and whole grid.
Okay so I am making a website to display the last eight entres from a database and display them in a grid format, but the grids aren't displaying correctly they are displaying like so:
1 :
But I am wanting them to display similar to this:
I ment to draw an extra column on the drawing sorry. And no mater what stay in the same column and row as it should be but also be underneath the one above it. The code is on my jsfiddle here: http://jsfiddle.net/PGdMd/
Also The css needs to be responsive because the content text for each div will change depending on the data entered in the mySQL database.
<h1>Sorry it made me put this here</h1>
Reading from related questions, it would seem you want jQuery's masonary. Either that, or Isotope.
Have a look at Masonry. This is a jQuery plugin that will do what you want and a lot more.
http://osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout
Have you considered some of the css frameworks that can be used to easily implement layouts? Blueprint, 960 Grid, Twitter Bootstrap, foundation, etc. There are a lot of 3 column implementations available that would not only make this easy, but would simplify your project in general.