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?
Related
I'm working on go js. I have two div and I need to connect the contents of them with links. Therefore I just saw a Scrolling-Table concept in Gojs by which we can connect each row of left table with the rows of right table.
Now I need to pass an html div into rows for both left and right tables.
This html div contains a switch button together with a asp dropdown.
It is possible to pass such html content in each row of Scrolling Table?
Because GoJS wants to be able to render to canvas and to SVG and to other targets, one cannot embed any HTML in a diagram. You'll need to implement it yourself using GoJS GraphObjects. Read http://gojs.net/intro about the basic Shapes and Panels. For examples of how the various kinds of predefined buttons are implemented, see http://gojs.net/latest/extensions/Buttons.js.
I'm having trouble with where to start on this problem. I have a Rails app and I want to build a dynamic grid within it. What I mean by this is that I want to be able to input a row of data (i.e., from one of my tables) within one cell of the grid. Then I want to be able to move the cell around to a different location of the grid. Ultimately having many of these cells that are freely able to be moved on a grid. Any assistance would be awesome. Thanks.
You should check out jQueryUI draggable https://jqueryui.com/draggable/
I am using DataTables for jQuery (https://datatables.net/) to create a table. I am using JavaScript to populate the table. When it is initially created, the columnn with has some adjustment (some columns are wider than others), but it is not perfect, for example there is a two line row as in the first picture below. After resizing and maximizing again, the table is readjusted to the optimal state, with plenty of room for the row with a long name. How to I get this adjustment directly after I load the table?
Try columns.adjust() here you can see how.
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!
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