alump / gridstack Goto Github PK

Removing a component (not iterating through stack but giving component explicitly) from gridstack works as expected, but afterwards a new component can't be added. Testing with the "-" and "+" buttons in the demo app shows the following results: the first remove/add component works ok, clicking "-" again still is ok, but adding components doesn't work anymore.

using the chrome debug tools and tracing network activity I'm seeing the gridstack .js files being loaded twice:

The source code is:
`

package com.example.gridstack;

import javax.servlet.annotation.WebServlet;

import org.vaadin.alump.gridstack.GridStackLayout;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Grid;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@SuppressWarnings("serial")
@theme("gridstack")
public class GridstackUI extends UI {

@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui = GridstackUI.class, widgetset = "com.example.gridstack.widgetset.GridstackWidgetset")
public static class Servlet extends VaadinServlet {
}

@Override
protected void init(VaadinRequest request) {
    final VerticalLayout layout = new VerticalLayout();
    layout.setMargin(true);
    setContent(layout);


    // Creates new GridStack with 3 columns
    GridStackLayout gridStack = new GridStackLayout(3);

    // Adds label to top left corner, reserving 1 slot
    gridStack.addComponent(new Label("Hello World"), 0, 0);

    // Adds second label next to earlier, now reserving 2 slots in horizontal
    gridStack.addComponent(new Label("Lorem ipsum"), 1, 0, 2, 1);

    // Finally add label, and let client side to find location for it (will go to next row, as first is full)
    gridStack.addComponent(new Label("Find me space!"));


    layout.addComponent(gridStack);
}

}

The network activity is:

dstack.GridstackUI$Servlet
vaadinBootstrap.js?v=7.6.5
styles.css?v=7.6.5
com.example.gridstack.widgetset.GridstackWidgetset.nocache.js?1461927154428
com.example.gridstack.GridstackUI$Servlet?v-1461927154428
09AA8E09526721723A02877391845ADF.cache.js
spinner.gif
jquery-1.11.3.min.js
OpenSans-Light-webfont.woff
jquery-ui.min.js
lodash.min.js
gridstack.js
jquery-ui.min.js
lodash.min.js
gridstack.js

`

Is it possible to automatically resize the component attached to GridStack in order to show content without vertical scrollbar ?

I'd like to add http://ianlunn.github.io/Hover/ effects to grid-stack-item. Is it possible to do it via GridStack or do I need to change the sources of this addon ?

Hi,

if I have only one component on GridStackLayout, I can't vertical resize this component. You can check this issue on the demo site: http://app.siika.fi/GridStackDemo/
Remove all components, except the Form, then try to resize it...

Have you got any idea?

Thanks.

GridStackLayout#getComponent did not find correct component for given coordinate. „width“ is added to x and y both, but „height“ is meant for y-dimension.

I'm trying to reorder my components in GridStack(vertical 1 column layout) to a certain position.

I have implemented following logic for this purpose:

    iterator().forEachRemaining(child -> {
        //move away temporary
        moveComponent(child, 100, 100);
    });

    /*      
     componentIds represents list of some bussiness ids associated with a GridStack components      and these ids represent the new order for these GridStack components
    */
    for (int i = 0; i < componentIds.size(); i++) {

        component = //some logic here by getting component by componentIds.get(i)

        moveComponent(component, 0, i);
    }

As a result I have a pretty much the same order as desired but for a some reason some components(not all but some of them) are on the wrong places - not on the places defined by componentIds list.

What am I doing wrong and how to reorder components in order to match the desired order for 100%?

Hi,

first of all, thanks for this gread addon!

Maybe I'm missing something, but when integrating the demo app (1:1 copy of the original demo code) into my existing webapplication (View class), there are some issues:

• The overlay-icons for component resize and move are not shown at all
• There is just one column (?) visible on screen

Of course I integrated the css from the demo app.

Can you hint me to the right direction?

Cheers, Aydin

PS: Ivy download (with information from vaadin addons page) did also not work, had to download and put jar to build-path manually.

In my application I want to use GridStack layout in order to implement visual sorting effect.

Right now I can't vertically align elements(panels) inside my GridStack .

With a following code:

        GridStackLayout decisionPanel = new GridStackLayout(1);
        decisionPanel.setSizeFull();
        decisionPanel.setAnimate(true);
        decisionPanel.setCellHeight(100);

        for (int i = 0; i < 10; i++) {          
            decisionPanel.addComponent(tooltips("" + i));
        }


        sp.setSecondComponent(decisionPanel);

I have a following visualization:

but I need to show my panels inside GridStack as displayed at the following image(implemented with a VerticalLayout only for demo purpose):

What am I doing wrong and how to fix it ? Thanks

Resolve why items can not be dragged.

Clicking on a button within a widget, the listener gets called, but also dragging of the widget is activated. The click listener seems to filter the mouse up event, so the widget sticks at the mouse pointer. This effect can be reproduced with the demo app.

GridStack when loaded automatically loads it's versions of JQuery and JQuery-UI.

This would be fine except that my project already uses JQuery outside of the scope of Vaadin, and when GridStack loads JQuery it is a different version (not such a big problem) and removes my plugins which I've added to JQuery which leaves me referencing non-existant plugins (JQuery.myPlugin.myMethod())

Also the my project uses a customized JQuery-UI, when GridStack replaces JQuery-UI the various extensions to JQuery-UI I rely on get removed.

I have found that GridStack will operate with the versions of JQuery and JQuery-UI I already have in my project.

I will create a pull-request with a fix for this, allowing control over the loading of JQuery and JQuery-UI

Can this be made responsive to adjust to screen sizes and re-align components?

I was successfully able to add top padding to GridStack container by providing a following styles:

[class*=' grid-stack-instance'] {
       .grid-stack-item[data-gs-y="0"]{
         top: 10px;
     }
}

I also need to add the same padding to the bottom of GridStack container.

The following style unfortunately doesn't work:

[class*=' grid-stack-instance'] {
.grid-stack-item:last-child{
bottom: 10px;
}
}

How it can be implemented ?

Create a functionality which prevents user to drag. resize or move a child of the grid stack layout

I need to programmatically resize a certain component in GridStack (new GridStackLayout(1).setCellHeight(140).setAnimate(true);).

I'm using a following method for this purpose:

gridStack.resizeComponent(component, null, 2);

right after that the resized component is moving to the bottom of GridStack container. How to prevent the component from moving down and leave it at its position ?

Recently, I have observed strange behaviors in the auto positioning feature. It could be a possible bug.

First, when the x and y coordinates are set to -1, after they are positioning into grid their coordinates still remain -1 until they are moved or re-sized. Then, they get their correct positions. Wouldn't be nice if they are set to their correct positions as soon as they are added to the grid?

Second, adding an auto positioning child to the grid causes a change in coordinates of other components (both axes and sizes). The effect is not observed in the UI (JS coordinates remain correct), however server side coordinates become completely different from the UI. I have produced this with the following steps and changes in the DemoUI.

1. Initially, grid contains one "console" component added as [-1,-1 4,2].
   

2)Add one "Hep" component again as [-1,-1, 1,1] and console component changes as [4,0 1,1].

3)Resize (vertically) "Hep" component and all coordinates get corrected as [0,0 4,2] and [4,0 1,2].

4)Add another auto positioning "Hep" component and all coordinates changes again as [4,0 1,2], [5,0 1,2] and [-1,-1 1,1].

Could you reproduce the issue? If so, do you have any suggestion what might be wrong? I am also looking into this.

Thanks,
-K

Hello,

I have a really wired behavior using Chrome (Version 52.0.2743.82) with Win10 and Win7.

If I try your Demo in a fullscreen browser window and resize the "Event Console" it wants to move one row up.

I just have to grap the resize handle and then this happens:

If I resize the whole browser window, reload the demo and try the same. The "Event console" does not move up and it works as expected.

I tested with Edge and Firefox and they work fine.

Thanks,
Michael

Create an option to disable the resize functionality

Hi, I cloned the project and run the demo as it is. However, the locations, the sizes are all wrong and no drag and resize icons appear when the mouse gets on the components. Looks like a CSS related problem but like I said I run as it is. Do you have any idea about what I am missing?

One more thing, "gridStack.getOptions()" parts are showing "deprecated" in the demo. Are they replaced with a new API or will be?

Cheers,
-K

Hi,
Thank you for making this very nice add-on!

I've noticed a behaviour that if a component is added with useDragHandle false, it works as expected -- until the page is refreshed/cache cleared.
The component then reverts to dragHandle true (with the popup top-left move icon).

It would be good if the draghandle child option would remember its state after page refresh.

If you can point me in the direction of where in the code/client code such a fix could be made, I'm happy to fix it and submit.

Many thanks,
Peter

Hi,

I have posted a next question at StackOverflow http://stackoverflow.com/questions/38677582/vaadin-7-component-lazy-loading-for-performance-improvement?noredirect=1#comment64769065_38677582 about my Vaadin view rendering speed.

In case of ~10 elements in my main GridStack container the rendering time is pretty close to normal but I need to handle ~80 nested elements in this GridStack container.. and in this case my page renders ~15-20 sec

Is any solution I can use in order to improve page rendering speed in this case ?

Thanks.

Fantastic addon so far!

I've encountered a strange rendering issue when removing components from the GridStack.

After removing something, the grey box that usually appears when moving the component gets left behind (see image below).

I'm more or less using the sample code from the demo project:

Button btRemove = new Button("Remove");
btRemove.addStyleNames(ValoTheme.BUTTON_TINY, ValoTheme.BUTTON_BORDERLESS_COLORED);
btRemove.addClickListener(re -> gridStack.removeComponent(wrapper));
wrapper.addComponent(btRemove);

@alump have you seen this type of behaviour before? Any tips on how to get rid of it?

First of all, thank you very much for making a great components for Vaadin framework.

I have a question regarding GridStack component.

I need to implement a vertical list of Vaadin components.. lets say Panels. These panels will be ordered from top to bottom according to some math in my backend business logic.

User can change some data on the page and immediately thereafter these panels(the same set) should be reordered. I want to visualy show this reordering process with a nice transition effect.. something like we have in Isotope JavaScript component(Sort functionality).

So, ideally for example I would provide some list of IDs to GridStack component and based on this list GridStack will reorder an attached components with a cool transition effect.

Is it possible with a GridStack ?

Thanks,
Alex

Could you please add in your awesome example http://app.siika.fi/GridStackDemo/#!split - top and bottom paddings the same like we have from the left and right ?