I'm a designer who uses JavaScript / jQuery mainly for prototyping. I'm currently evaluating the Shield UI library for a project, and am mainly interested in exploring the grid capabilities. I've only been exploring the library for the last several hours, but have hit a stumbling block with enabling draggable grouping. I followed the example on the product website (http://demos.shieldui.com/web/grid-grouping/grouping), and it works perfectly ONLY if I define a group in my data source. I can then delete this initial group, and drag any of the column headers to the drop region to create groups. However, if I don't have an initial group defined as part of my data source, the grouping drop region is present, but doesn't create a group when a column is dropped.
I tried adding an ungroup event after initially creating the grid, but that didn't solve the problem. Is it possible to drag-and-drop group creation without defining an initial group?
You can try using the ungroup() method to remove the groups right after the Grid has been rendered and data loaded.
Related
I am looking to implement a sortable (ordering) drag and drop between columns as well as in column. I looked all over internet to find any example that does not use a library for it. I'd love to implement it in VueJS, however, any examples are welcome.
It should basically function like JIRA, where you have TODO and IN PROGRESS columns for example, you can order them by priority in the column itself, or move it to another column.
The reason, why I do not want to use any library is because I want to build my own complex functionalities. I also do not wanna fork existing github libraries to modify them. I'd love any suggestions!
Doing a simple search with the following keywords: creating drag and drop feature "without" library javascript pure I was able to find this links:
Building drag and drop feature in react for react applications
Building drag and drop feature with pure javascript
Useful tip
If you don't know surrounding some keyword in a google search with quotes forces google to only show results with that word in specific
I'm creating an application that will have an editable table. I've used Ag-Grid before and have found it to be very useful. I've been searching and reading the documentation for a couple of hours now and haven't found any such example of the below image. Is it possible to do something like this in Ag-Grid?
The only thing I've found for grouping hides rows in a tree-like structure. If it's not possible, is there another angular table library that might work?
Did you try? - https://www.ag-grid.com/javascript-grid-row-spanning/
Or another one thing:
groupRowRenderer, groupRowRendererParams -If grouping, allows custom rendering of the group cell. Use this if you are not happy with the default presentation of the group.
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/
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!
This is not related to the grouping function where you can drag things to the header and it groups the grid.
I am trying to present grid columns in categories for organization in a large grid showing complex financial data for my project. I have created a very very simplified mockup of what I am trying to accomplish in google docs at this link
https://docs.google.com/spreadsheets/d/11BZGrV5IE2zvh3Ya38jgCN1lgOqMFXegdwAOmv-bLZg/edit?usp=sharing
The solution would need top play nice with column resizing. We would disable the ability to re-order columns for this display so that shouldn't be an issue.
Regarding a multi-row header w/ colspan
From the official forum:
Multirow headers will be available in the Pivot Grid, which we are currently developing with the idea of releasing it for Q2 2014. We may port the implementation for the standard Grid for subsequent releases, but I am afraid I can't provide official information about the timing and probability at this point.
http://www.telerik.com/forums/multiple-header-rows
http://www.telerik.com/support/whats-new/kendo-ui/road
If anyone cares this is how we overcame the problem using slick grid. We are updating to kendo so we will just carry this forward until we have a grid that has these capabilties. We used a legend and then applied a CSS to each header