Create/Update Grid List Dynamically #312

Closed
tneil opened this Issue Aug 30, 2012 · 12 comments

Comments

Projects
None yet
6 participants
Member

tneil commented Aug 30, 2012

Ability to create and dynamically change the properties of a grid list dynamically after the DOM for a screen has been loaded.

Need to add the following JS functions to the grid list:

Grid Interface

  • show(); [Completed]
  • hide(); [Completed]
  • remove(); [Completed]
  • clear(); // Removes all groups from the grid
  • getGroups(); // Returns array of all the groups in the grid
  • appendGroup(group) // Appends a group DOM element to the end of the grid
  • insertGroupBefore(newGroup, existingGroup) // Inserts a group DOM element before the specified existing group
  • refresh([groups]) // Refreshes the list with an array of groups
  • bb.group.style(element);

Grid Group Interface

  • getTitle()
  • setTitle(value)
  • clear() // Removes all the rows from the group
  • remove() // Removes itself from the grid
  • getRows() // Returns array of all the rows in the group
  • appendRow(row) // Appends a row DOM element to the end of the group
  • insertRowBefore(newRow, existingRow) // Inserts a row DOM element before the specified existing row
  • refresh([row]) // Refreshes the group with an array of rows

Grid Row Interface

  • getNumColumns()
  • setNumColumns(value)
  • clear() // Removes all the items from the row
  • appendItem(item) // Appends a item DOM element to the end of the row
  • insertItemBefore(newItem, existingItem) // Inserts an item DOM element before the specified existing item
  • remove() // Removes itself from the group
  • getItems() // Returns array of all the items in the row
  • refresh([items]) // Refreshes the row with an array of items

NOTE: When dynamically creating a list and styling it, we need to ensure that the placeholder images are working correctly as well as the fade effects. These are currently only triggered by the bbuidomready event

Example of What creating a grid list dynamically should look like

// Create grid list
var grid = document.createElement('div');
grid.setAttribute('data-bb-type','grid-layout');

// Create group
var group = document.createElement('div');
group.setAttribute('data-bb-type','group');
grid.appendChild(group);

// Create row
var row = document.createElement('div');
row.setAttribute('data-bb-type','row');
group.appendChild(row);

// Create Item
var item = document.createElement('div');
item.setAttribute('data-bb-type', 'item');
item.setAttribute('data-bb-img', 'foo.png');
item.setAttribute('data-bb-title', 'Hello');
item.innerHTML = 'World';
row.appendChild(item);

grid = bb.grid.style(grid);

document.getElementById('gridContainer').appendChild(grid);
Member

tneil commented Oct 25, 2012

We'll want to make sure we finish issue #418 first before implementing these interfaces.

@tneil tneil referenced this issue Oct 25, 2012

Closed

Grid List #418

Member

tneil commented Nov 6, 2012

Justin's pull request implements show(), hide(), remove()

I think to give a high priority to ...

appendGroup(group)
appendRow(row)
appendItem(item)

... will calm the fury of the followers :o)

Added getTitle(), setTitle(titleText) functions for group interface a549b2c

added getNumColumns(), setNumColumns(value) for grid row interface
pull request #703

I am trying to create a grid list dynamically, but i have a problem. Here is my code:

  config.ondomready = function (element, id, params) {
      if (id == 'item') {
          // Create grid list
           var grid = document.createElement('div');
           grid.setAttribute('data-bb-type','grid-layout');
           grid.setAttribute('data-bb-style','square');
           grid.setAttribute('data-bb-header-style','solid');
           grid.setAttribute('data-bb-header-justify','left');
         // Create group
           var group = document.createElement('div');
           group.setAttribute('data-bb-type','group');
           group.setAttribute('data-bb-title','Uniwersytet Śląski w Katowicach');
           grid.appendChild(group);

         // Create row
           var row = document.createElement('div');
           row.setAttribute('data-bb-type','row');
           row.setAttribute('data-bb-columns','1');
           row.setAttribute('id','artykul');
           group.appendChild(row);

         // Create Item
           var item2 = document.createElement('div');
           item2.setAttribute('data-bb-type', 'item');
           item2.setAttribute('id', "obrazItem");
           item2.innerHTML = params.tresc2;
           if (params.img) item2.setAttribute('data-bb-img', params.img);
           if (!params.img) item2.setAttribute('data-bb-img', 'images/uslogo2.png');
           row.appendChild(item2);

           grid = bb.grid.style(grid);
           document.getElementById('gridContainer').appendChild(grid);
                    } 

  };

The problem is that i recieve an error: "Uncaught TypeError: Object # has no method 'style'". When i remove line with
bb.grid.style(grid);
then my grid list has no styling and there is no image. What's wrong?

Member

tneil commented Mar 24, 2013

That is currently the expected behaviour. This issue covers adding the new style() function to insert a grid once the DOM is ready. The function isn't available yet and has not been marked [Completed]

Currently the only way for the grid to apply styling is to perform this code in the onscreenready event so that the styling code can then style the grid.

nathanpc commented Apr 6, 2013

I agree with @gcsantiago. I want to use this component in a project, but I can't since I need to dynamically append images to the grid.

@ghost

ghost commented Apr 29, 2013

I also need it for my project like @nathanpc
Would be great to get this feature soon

@ghost ghost assigned glasspear Jun 27, 2013

Member

tneil commented Jun 27, 2013

Assigned Rory who's going to take a look at this one :)

Awesome! :)

Member

tneil commented Jul 5, 2013

Closing this issue in favor of the new v1.0 markup and associated JavaScript interfaces based on issue #933

@tneil tneil closed this Jul 5, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment