Width options doesn't works

[Nankym]

Hi @troolee,

I am trying to use the gridstack width, changing for 3. Although, this change to 3 columns and the width of external div('.grid-stack') are correct, the width value of "item" stayed in 8,3% and not in 33%.

Is getting so:

https://cloud.githubusercontent.com/assets/3621189/5599368/3ddd6898-92ac-11e4-8a2c-acd65f9f1e32.png

When it should stay that way:

https://cloud.githubusercontent.com/assets/3621189/5599367/3dd99434-92ac-11e4-9cbd-80cc718b62e2.png

The code are:

var options = {width: 3,cell_height: 35,vertical_margin: 10,animate: true}; $('.grid-stack').gridstack(options); var grid = $('.grid-stack').data('gridstack');

// Begin For

grid.add_widget("<div class='grid-stack-item' data-gs-no-resize='true'><div class='grid-stack-item-content'><div class='grid-heading'><small>Label</small></div><div class='grid-body'><div class='text-center'> </div></div></div></div>', 0, 0, 4, 2, true);

//End For

Att
Mateus Giuliano

[troolee]

Hi,

it's because you use a default CSS sheet which is declare 12 column grid. For your case you need to change .grid-stack-item[data-gs-width="X"] and .grid-stack-item[data-gs-x="X"] classes to be:

.grid-stack-item[data-gs-width="3"]  { width: 100% }
.grid-stack-item[data-gs-width="2"]  { width: 66.66666667% }
.grid-stack-item[data-gs-width="1"]  { width: 33.33333333% }

.grid-stack-item[data-gs-x="2"]  { left: 66.66666667% }
.grid-stack-item[data-gs-x="1"]  { left: 33.33333333% }

I will update documentation.

[Nankym]

As my system requires dynamic columns, I had to implement a change in js mine. Below is developed that, if you want to implement something in your system, it may be something useful.

CSS

.grid-stack-item[data-gs-width="3"]  { width: 100% !important; }
.grid-stack-item[data-gs-width="2"]  { width: 66.66666667% !important; }
.grid-stack-item[data-gs-width="1"]  { width: 33.33333333% !important; }
.grid-stack-item[data-gs-x="2"]  { left: 66.66666667% !important; }
.grid-stack-item[data-gs-x="1"]  { left: 33.33333333% !important; }
.grid-stack-item2[data-gs-width="2"]  { width: 50% !important; }
.grid-stack-item2[data-gs-width="1"]  { width: 50% !important; }
.grid-stack-item2[data-gs-x="1"]  { left: 50% !important; }
.grid-stack-item1[data-gs-width="1"]  { width: 100% !important; }

JS

switch (colNumber) {
    case '1':
        $('.grid-stack-item').removeClass('grid-stack-item2').addClass('grid-stack-item1');
        break;
    case '2':
        $('.grid-stack-item').removeClass('grid-stack-item1').addClass('grid-stack-item2');
        break;
    default:
        $('.grid-stack-item').removeClass('grid-stack-item1 grid-stack-item2')
        break;
}

[troolee]

Hi,

What do you mean "dynamic columns"? Can you describe your use case? Maybe I can implement additional functionality to help you.

[Nankym]

Hi @troolee

Dynamic Columns mean that my "item" width can change dynamically(no reload) in page.

In my example I use your lib to set the configurations of my dashboard. So I have a option to change how many columns do you want to your dashboard. With this, the "columns" of gridstack, will change in my page.

I don't know if I got it explain, but send my printscreen to you see.

In my configurations, I can start with 3 columns:
https://cloud.githubusercontent.com/assets/3621189/5627518/478ba6e4-9580-11e4-9493-7500c996a098.png

But, I can change to 2 or 1 column(s)
https://cloud.githubusercontent.com/assets/3621189/5627517/47851a22-9580-11e4-9d58-f377f38b2680.png

If you got any questions that I can help, I am available.

Att

[dushyant]

@Nankym

I have similar requirement to switch between two and three column. How did you get it done for you?

[Nankym]

@dushyant

I use the same method described here. What problem are you having?

Maybe I can help you.

[dushyant]

@Nankym

In your example, do you have float layout and are you just modifying width of the grid item? So that move third pod to next row in two column layout. or how do you rearrange pods in different layout?

In my case, I don't have equal height pods and I need to rearrange pod without changing colspan value. I was trying to change grid.width = 2/3, but then I don't know how and what event to trigger to rearrange pods.

Please let me know if this is not clear.

[Nankym]

@dushyant

Let's put parts.

"In your example, do you have float layout and are you just modifying width of the grid item? So that move third pod to next row in two column layout. or how do you rearrange pods in different layout?"

I only put in the css the size of each "widget or pods". After this, I reload the widgets and all grid system.

"In my case, I don't have equal height pods and I need to rearrange pod without changing colspan value. I was trying to change grid.width = 2/3, but then I don't know how and what event to trigger to rearrange pods."

Unfortunately, in my case I don't used flexible height. I think that who can help you - more - is the @troolee.

Sorry.

[dushyant]

@Nankym
That's fine. Thank you.

"I only put in the css the size of each "widget or pods". After this, I reload the widgets and all grid system."

Regarding this, how do you reload all the widgets and all grid system? That is where also I am struggling. If you can share, would be great help.

Thanks again

[Nankym]

@dushyant

I created a function (unfortunately private code of company) and used destroy() to all the grid. After, I reloaded the grid again.

Att

[dushyant]

Will destroy() delete DOM elements as well?

[Nankym]

Yes, will destroy the elements and load per ajax.

[dushyant]

@Nankym Thanks

[dushyant]

@Nankym @troolee

I tried something like this:
var options = {
width: 3
};
$('.grid-stack').gridstack(options);

this.gr = $('.grid-stack').data('gridstack');

And then try to destroy it, but did not work for me.
this.gr.destroy()

Am I doing it wrong?