hootsuite / grid

Drag and drop library for two-dimensional, resizable and responsive lists
http://hootsuite.github.io/grid/
Apache License 2.0
3.57k stars 279 forks source link

resizeGrid() and data-x data-y attr location update #69

Closed matpulis closed 9 years ago

matpulis commented 9 years ago

Well done with the update the plugin is better then ever man!

I just have one question. I am building a dashboard with dynamically generated

  • the li will not contain data-x and data-y I am trying to use the resizeGrid() function specified within the README but i cannot get it to work it says function not defined. $('#grid').GridList.resizeGrid('5'); I am using that to call the function.

    I also need to save layout I am calling $("#myGrid").data('_gridList').gridList and it renders the array. is there a way to assign data-x and data-y to the dynamilcally inserted li's so these can be saved ? or how can I assign the $("#myGrid").data('_gridList').gridList OBJECT to my

  • Thanks in advance.

  • matpulis commented 9 years ago

    Figured out how to fetch the saved layout object I used.

     function saveLayout(){
    
    var widgetLayout = $("#grid").data('_gridList').gridList;
    
    // Put the object into storage
    localStorage.setItem('widgetLayout', JSON.stringify(widgetLayout));
    
    }
    
    var savedLayout;
    function getLayout(){
    
    // Retrieve the object from storage
    var retrievedObject = localStorage.getItem('widgetLayout');
    savedLayout = JSON.parse(retrievedObject);
    
    console.log('retrievedObject: ', JSON.parse(retrievedObject));
    }
    '''
    andrei-picus-hs commented 9 years ago

    The jQuery plugin has a resize method that you can use like this:

    $("#grid").gridList("resize", 4);

    Check out the demo page for more details.

    matpulis commented 9 years ago

    Thank you very much for your answer andrei. Might I ask you last 1 questions please?

    When I retrieve the stored layout object it returns Object {_options: Object, items: Array[9], grid: Array[8]}

    _options - are the grid options items - I am getting X and Y positions and I am assigning it to my items. grid - This I do not know how to use the grid array

    When I set the X and Y positions on my items the grid is not build successfully.

    I save this layout: screen shot 2015-09-02 at 09 34 42

    but when I get it from local storage and use the X and Y positions stored in the items array and assign them to my items my page displays like this: screen shot 2015-09-02 at 09 34 55

    I am using data-id to identify my items. I am not using _options object as settings of the grid are not being changed and I am not using the grid array. Maybe this is the problem ?

    Thanks in advance

    matpulis commented 9 years ago

    Hi guys I managed to fix my layout bug and I am adding functionality for dynamically adding and removing items to the grid. I will be uploading the code after I have finished it. I am making a grid controller sort of. Simple and it works!

    RonakKhandelwal commented 7 years ago

    @matpulis any update???