How to use grid widget in Drupalgap?

Question

I cannot reproduce the grid widget. The page shows nothing except the title. Here is my code:

/**
 * Implements hook_menu()
 */
function test_grid_menu() {
  var items = {};
  items['test_grid'] = {
    title:'test grid',
    page_callback: 'test_grid_page',
  };
  return items;
}


function test_grid_page() {

var content = {};
content['my_grid'] = {
  theme: 'jqm_grid',
  columns: 2,
  items: [
    bl('Foo', 'foo'),
    bl('Bar', 'bar'),
    bl('Baz', 'baz'),
    bl('Chop', 'chop')
  ]
};
return content;
}

I also tried to put the theme('jqm_grid', ...) in the page_callback, but it does not work.

function test_grid_page() {

var content = {};
content['my_grid'] = {
  theme: 'jqm_grid',
  columns: 2,
  items: [
    bl('Foo', 'foo'),
    bl('Bar', 'bar'),
    bl('Baz', 'baz'),
    bl('Chop', 'chop')
  ]
};
return content;

var html = theme('jqm_grid', {
  columns: 2,
  items: [
    bl('Foo', 'foo'),
    bl('Bar', 'bar'),
    bl('Baz', 'baz'),
    bl('Chop', 'chop')
  ]
});
return html;

}

I place the jQuery Block code in the page_callback. The page display is fine as expect, but the linking is a problem.(cannot reach the localhost node) It seems this can only give good display but without the function. (in my following code, search and the linking have no function).

function test_grid2_page() {

var  html = '<div><form><label for="search-1">Search:</label>';
     html += '<input type="search" name="search-1" id="search-1" value=""></form></div>';
     html += '<div class="ui-grid-b">';
     html += ' <div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:90px"><a href="javascript:drupalgap_goto("node/966");">Foo</a></div></div>';
     html += ' <div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:90px">Bar</div></div>';
     html += ' <div class="ui-block-c"><div class="ui-bar ui-bar-a" style="height:90px">Baz</div></div>';
     html += ' <div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:90px">Chop</div></div>';
     html += ' <div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:90px">Computer</div></div>';
     html += ' <div class="ui-block-c"><div class="ui-bar ui-bar-a" style="height:90px">Wine</div></div>';
     html += '</div>';
return html;
}

I have fixed the linking using l(...) and bl(...), but I would like my buttons fill all the grid. The name of the button also out of the range, so it just show partially. Here is the code and result:

var  html = '<div><form><label for="search-1">Search:</label>';
     html += '<input type="search" name="search-1" id="search-1" value=""></form></div>';
     html += '<div class="ui-grid-b">';
     html += ' <div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:90px">';
     html += bl('Foo', 'node/966', {attributes:{'data-icon':'action'}});
     html += '</div></div>';
     html += ' <div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:90px">';
     html += bl('Bar', 'node/1028', {attributes:{'data-icon':'action'}});
     html += '</div></div>';
     html += ' <div class="ui-block-c"><div class="ui-bar ui-bar-a" style="height:90px">';
     html += bl('Baz', 'node/1021', {attributes:{'data-icon':'action'}});
     html += '</div></div>';
     html += ' <div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:90px">';
     html += bl('Chop', 'node/1027', {attributes:{'data-icon':'action'}});
     html += '</div></div>';
     html += ' <div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:90px">';
     html += bl('Computer', 'node/1021', {attributes:{'data-icon':'action'}});
     html += '</div></div>';
     html += ' <div class="ui-block-c"><div class="ui-bar ui-bar-a" style="height:90px">';
     html += bl('Wine', 'node/1025', {attributes:{'data-icon':'action'}});
     html += '</div></div>';
     html += '</div>';
return html;

Answer 1

@Clive, thank you for confirming, and for your efforts. @artphys, try the latest dev snapshot, jqm_grid is definitely supported: https://raw.githubusercontent.com/signalpoint/DrupalGap/7.x-1.x/bin/drupalgap.min.js

Answer 2

Thanks to Tyler. I am giving more detail of the solution.

First download the new drupalgap.min.js from https://raw.githubusercontent.com/signalpoint/DrupalGap/7.x-1.x/bin/drupalgap.min.js and place it in the bin directory.

Modified the index.html where originally <!-- DrupalGap --> <script type="text/javascript" charset="utf-8" src="bin/drupalgap-7.0.2.min.js"></script> to the new drupalgap.min.js.

Then the grid widget from the drupalgap document http://docs.drupalgap.org/7/Widgets/Grid_Widget starts to work! Both Render Array and theme('jqm_grid', ...) can successfully do it. Just pick one. The code below is using render array.

/**
 * Implements hook_menu()
 */
function test_grid2_menu() {
  var items = {};
  items['test_grid2'] = {
    title:'test grid2',
    page_callback: 'test_grid2_page',
  };
  return items;
}


function test_grid2_page() {

var content = {};
content['my_grid'] = {
  theme: 'jqm_grid',
  columns: 2,
  items: [
    bl('Foo', 'foo'),
    bl('Bar', 'bar'),
    bl('Bar', 'bar'),
    bl('Baz', 'baz'),
    bl('Chop', 'chop')
  ]
};
return content;
}