gridstack.js | Build interactive dashboards in minutes | Dashboard library

For our openUI5 application I have developed two custom controls. One utilizing the gridstack.js library and another using the HighCharts library. The former has the latter as aggregation 'charts' (1...n). When I update the property in the model(deleting, adding a chart), the wrapper control re renders the charts (default behavior).

Is there a way to prevent re-rendering of the aggregation, because it causes both libraries to reload some stuff and this behavior we must avoid.

I thought about calling validate() on the charts aggregation as well as overwriting the setAggregation in the wrapper control.

Any help would be appreciated.

Is there any option to use gridstack.js with each grid-stack-item height based on inner content like image.

In my scenario each images having different height so it's not showing correctly on card.

It gives scrollbar inside grid-stack-item to view image, that is wrong.

Any option or workaround or other JS plugin/library that will restrict fixed height based on any factor.

Current behavior

Expected behavior

Height will be 100% based on width so image aspect ratio preserves.

I am trying to create this behavior and not sure whether Gridstack supports it or not. I have 3 Gridstack grids: Grid1, Grid2, and Grid3. Grid1 is a standalone grid and Grid3 is nested inside Grid2. I need to be able to drag widgets from Grid1 both into Grid2 (outer grid) and into Grid3 (nested grid). Following samples I was able to drag widgets between 2 top level grids and create a nested grid, but not combining these 2 together. If this is supported - any pointers are appreciated.

NB: Expand the snippet to full screen

I'm using Gridstack for draggable div's. How do I get the new value of data-gs-y (so to which y-axis the div was dropped). Actually I tried this:

Running into a problem with my attempt to build a gridstack dash

I get "Uncaught TypeError: Cannot read property 'addWidget' of undefined" when trying to load the page.. (the code is based on the basic gridstack serialized demo https://github.com/gridstack/gridstack.js/blob/develop/demo/serialization.html)

my changed script section is

I am creating a empty grid with gridstack.js and them adding new elements thougth its API. The new items are visualized correctly. They and are re-sizable, but I can not drag them around the grid. I tried to use enable() and also enableMove(true, true) but it seem have no effect.

This example only contains one elements, but i pretend to add more when it works.

This is the page:

I am creating example application with Ractive.js and gridstack.js, but can't figure out how to add gridstack as a decorator. I think this is the proper way to add jQuery elements to ractive.js, please advise if it's not.

After I created a decorator and assigned it to the Dashboard component it actually doesn't work and events from gridstackDecorator aren't cached in the Dashboard component.

I created this Fiddle with the code that doesn't work and the source is below:

Ractive.js component tree will look like:

We are undergoing an project in Angular 5/6 where we get prebuilt HTML pages, that use jQuery, gridstack.js and CSS for UI, that we'll implement as components. Assuming it's not possible to rewrite all the jQuery and JS code in Angular, is there any way to run the jQuery code provided in the tag directly in Angular?

I have already tried importing jQuery as:

I have a dashboard with some widgets grouped into tabs that the user can click through. The widgets have default starting positions including height and width, but if the user moves or resizes them (using gridstack.js) I save the new widget data to local storage.

If the user clicks between tabs the new widget positions are maintained.

When the user refreshes the page, the default widget positions are loaded instead of the data in local storage. I tried to set the new positions using getWidgetData() but no luck.

I have checked local storage for my grid-layout data and the new positions are present.

Here is Codepen since I think SO requires allow-same-origin, thus breaking the snippet.