dynamic collumns

[nextor2k]

When the number of columns is dynamically changed, the columns are not dynamically rearranged. Is there an option to order the gridster reorganize?

The code:

  // Define o tamanho da coluna na grid de widgets
    var colWidth = 400;

    // Define a quantidade de colunas na grid pelo tamanho da janela do browser
    var window = angular.element($window);
    var columns = Math.floor(window.width() / colWidth);

    // Calcula a quantidade de colunas na grid dinamicamente
    window.bind('resize', function () {
        columns = Math.floor(window.width() / colWidth);
        $scope.gridOptions.columns = columns;
        $scope.$apply();
    });

    // Configurações da grid de widgets
    $scope.gridOptions = {
        columns: columns,
        colWidth: colWidth,
        rowHeight: 360,
        margins: [50,20],
        resizable: {
            enabled: false
        },
        draggable: {
            enabled: true,
            handle: 'header'
        }
    };

[dannyhanke]

I am currently running into the same problem. Is there any way of forcing a rearrange?

[danomatic]

This is an interesting feature idea. What is the proposed logic for rearranging the widgets?

[dannyhanke]

In our case we switch between 2, 4 and 6 columns depending on the width of the grid. It would be nice if the items automatically float to a new row. Basically it is a similar behaviour like the mobile breakpoint, I guess.

[danomatic]

So if we have 6 columns and you move to 4, anything that doesn't would bump to the first column in the next row, correct? If there are already items in that column in the next row, should those push to the right, or down? This sounds like it would be a lot of logic, but maybe it's more simple than I imagine.

Do you expect a reverse logic if the user moves from 4 to 6 columns? That would be even trickier.

Alternatively, we could push all the overflowing items to the very bottom of the grid wherever there is empty space.

Any other ideas? It would be a great thing to support, but there are lots of cases to consider.

[dannyhanke]

I think every item which needs to be moved should be placed wherever there is an empty space. So you would have to iterate over all empty spaces and calculate if the grid item fits in, I guess. The same applies to the reverse case if you move from 4 to 6 columns.

[nextor2k]

What if the widgets were moved to a line below? In the same organization, but below the last row of the columns that were not removed?

[nextor2k]

[godo13405]

Why not simply trigger a refresh of the layout?

[dannyhanke]

If the refresh of the layout causes the items to update their positions according to the columns of the grid, then this sounds wonderful! :)

[dannyhanke]

Any update on this issue?

[godo13405]

I've abandoned it due to time constraints, I'm implementing Packery instead. The commercial license is paid, but it's cheap, so it's a better use of my time.

Sorry :-(

[Zerkey]

I ran into this issue as well. My solution checks element positions after a column count change, and then changes their positions to be within bounds, followed by a refresh. This would be a nice feature to have built-in.

[mchllbr]

I ran into this as well. I have two panels (one with gridster), each taking up half the width on the screen that can be expanded to be the full-width and back. It would be amazing if the change in columns triggered a refresh on the layout or if I could trigger a gridster redraw on the layout so the gridster items stay within their panel when changing from 6 to 3 columns and move up to fill the panel when changing from 3 to 6 columns. It would be great to have this built-in but in the meantime I'll look into a solution similar to what Zerkey did.

[juaniiton1]

Any update? I don't want to replace gridster by Packery for this issue... :(

[danomatic]

To me, grisdster is a tool allowing users to set a specific layout. Reflowing everything based on available space really is more of a packery use case. If someone has a good implementation that allows this to be turned off and on without impacting the typical experience, I can review and merge the PR.

[tabkram]

I don't know if the problem is resolved, but what I did to dynamically rearrange widgets according to columns number is :

$scope.$watch('columnsNumber.value', function(newVal,oldVal) {
          $scope.gridsterOpts.columns = newVal;
          // and reset all the gridster Items here (even if not changed to recalculate width and position
          // example:  $scope.customItems = [....]; 
        });

This works for me, and I'm also changing the columns number dynamically from 2 to 6 .

Otherwise, I think there is another solution here that could help (not tested): https://www.snip2code.com/Snippet/310225/gridster-dynamic-columns

[arkabide]

Maybe it's to late for you guys but it may be helpful for others. I came across the same need so I went ahead and implemented it in this branch of my fork: https://github.com/arkabide/angular-gridster/tree/dynamic-colums

Feature can be turned on/off with a new gridster property 'dynamicColumns' (boolean). I also needed a minimum width to trigger a column rearrangement so I added another property called 'minWidthToAddANewColumn' (not the best name, feel free to change it).

Live demo: https://cdn.rawgit.com/arkabide/angular-gridster/dynamic-colums/index.html

Click on "Enable Dynamic Columns" and resize the window to see the columns dynamically rearrange.

[godo13405]

Hi Arkaitz

It's too late I'm afraid, I'm not even in that job anymore. Thanks anyway :-)

On Mon, 10 Oct 2016, 9:34 am Arkaitz Carbajo, notifications@github.com wrote:

Maybe it's to late for you guys but it may be helpful for others. I came across the same need so I went ahead and implemented it in this branch of my fork: https://github.com/arkabide/angular-gridster/tree/dynamic-colums

Feature can be turned on/off with a new gridster property 'dynamicColumns' (boolean). I also needed a minimum width to trigger a column rearrangement so I added another property called 'minWidthToAddANewColumn' (not the best name, feel free to change it).

Live demo: https://cdn.rawgit.com/arkabide/angular-gridster/dynamic-colums/index.html

Click on "Enable Dynamic Columns" and resize the window to see the columns dynamically rearrange.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/ManifestWebDesign/angular-gridster/issues/123#issuecomment-252561151, or mute the thread https://github.com/notifications/unsubscribe-auth/AA6SqNm4GQhHef3fRRq0kvnMyytbgxctks5qyfipgaJpZM4CoY2m .

[nextor2k]

me too lol

[godo13405]

Ha ha. Hopefully other will find this useful

On Mon, 10 Oct 2016, 9:38 am nestorneto, notifications@github.com wrote:

me too lol

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/ManifestWebDesign/angular-gridster/issues/123#issuecomment-252561748, or mute the thread https://github.com/notifications/unsubscribe-auth/AA6SqABwcleocSgYp_L8GfPILHFDH9k6ks5qyflwgaJpZM4CoY2m .

[charliema07]

This is awesome! Thanks @godo13405 !

[shnigi]

@arkabide THANKS!

[groobybugs]

@arkabide man, never it's too late, THANKS! :) :+1: