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/
Related
I have created a table in React Table. I want to add both drag and drop functionality on columns and rows. How can I do this?
Here is my CodeSandbox Sample - https://codesandbox.io/s/2wp7jk23kr
Here I have got a Code Sandbox for drag and drop rows - https://codesandbox.io/s/1844xzjvp7
Here I have got a Code Sandbox for drag and drop columns - https://codesandbox.io/s/5vxlnjrw1n
Being a beginner In React, I'm not able to integrate this three sandboxes. Can someone fork a good example on CodeSandbox on how to add both drag and drop functionality on columns and rows?
Please use my React Table data columns - https://codesandbox.io/s/2wp7jk23kr
It's not that hard to make it, but still no convenient way yet, I had a try and let's see the result in sandbox: https://codesandbox.io/s/quizzical-leakey-o5h8z
Then let's see what's going on in Table.js
1.When you start dragging, you do not know which direction it is going, so I just hide the snippet (by setting it to empty div)
2.When you first drag it into another cell I got to know the direction, and then lock the direction inside dragState.direction
3.When you drag it into an cell (including first time in step 2), you need to show the changed data, like rows = offsetIndex(dragState.row, dragState.dropIndex, rows), notice it is different depends on dragState.direction
4.We highlight the row/column we are dragging, with opacity: ....
5.Finally on dragEnd we notify parent component what have changed
It's not good enough yet, specially when the drag is cancled. So don't rely on these code too much, find your own way based on this idea
I was hoping to somehow implement a 10x10 table onto my webpage where you select a cell and then store the X and Y value of the cell clicked but I'm really not sure on how to store the values, or to make the cell interactive.
My end goal is pretty much something like this: http://materdeimath.pbworks.com/f/GraphPaper20x20AxesUnits.bmp
Where I can store the X/Y values of the clicked cell, is this possible?
If any of you guys have any idea how I would accomplish this I would really appreciate the help, Thanks!
For me I would start with this way but there are other ways to get you started. Here are my steps:
Bootstrap responsive grid system here. Make each grid an individual id and class e.g. id="x1y1","x2y1","x3y1",class="col-interactive" something like chess grid if you familiar with that. The reason for a separate class is to identify from the common class used by plugins.
Using jQuery to get the class/name/id of the grid clicked. You may find reference here.
Finally using ajax to call your server side (e.g. PHP) and database (e.g. MySQL) validation. Reference here.
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 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?