Displaying List Items In Grid

Mar 27, 2013 at 12:15 PM
Hi.

I am using SPServices to display a list in a page viewer web part in SharePoint. This works fine and the list items are displayed row by row.

I have added an icon to the list in SharePoint which has a URL also. An end-user will be able to tap this like an app icon.

The problem I am facing is how to loop through my list using SPServices but to display in a grid layout instead of row by row. e.g. a Width x Height grid (10 icons by 10 icons grid or 10 x 20 items vertically). The grid should never exceed the max number of items (10) in width but can expand vertically.

Is this possible to show list rows in a block/grid layout?

Here is the code I using so far but this only displays row after row:
<script type="text/javascript" language="javascript"> $(document).ready(function() { $().SPServices({ operation: "GetListItems", async: false, listName: "SubSites", CAMLViewFields: "<ViewFields><FieldRef Name='SubSiteName' /><FieldRef Name='SubSiteIcon' />", completefunc: function (xData, Status) { $(xData.responseXML).SPFilterNode("z:row").each(function() { var tdHtml = "<tr class=''>"; tdHtml = tdHtml + "<td id='icon'>" + $(this).attr("ows_SubSiteIcon") + $(this).attr("ows_SubSiteName") + "</td></tr>; $(".tablebodysites").append(tdHtml); }); } }); var siteTable = $('#sitepool').dataTable( { "bJQueryUI": true, "sPaginationType": "full_numbers", "bPaginate": true, "bLengthChange": true, "bFilter": true, "bSort": true, "bInfo": true, "bAutoWidth": true } ); </script>
Coordinator
Mar 27, 2013 at 1:37 PM
Edited Mar 27, 2013 at 1:37 PM
I had to reformat hyour script to see that you hare missing the closing }); (Maybe you can post things a little more clearly in the future.)
  $(document).ready(function() {
    $().SPServices({
      operation: "GetListItems",
      async: false,
      listName: "SubSites",
      CAMLViewFields: "<ViewFields><FieldRef Name='SubSiteName' /><FieldRef Name='SubSiteIcon' />",
      completefunc: function (xData, Status) {
        $(xData.responseXML).SPFilterNode("z:row").each(function() {
          var tdHtml = "<tr class=''>";
          tdHtml = tdHtml + "<td id='icon'>" + $(this).attr("ows_SubSiteIcon") + $(this).attr("ows_SubSiteName") + "</td></tr>;
          $(".tablebodysites").append(tdHtml);
        });
      }
    });
    var siteTable = $('#sitepool').dataTable( { "bJQueryUI": true, "sPaginationType": "full_numbers", "bPaginate": true, "bLengthChange": true, "bFilter": true, "bSort": true, "bInfo": true, "bAutoWidth": true } );
  });
You can emit whatever markup you want, so I'm not sure exactly what your questions is.

M.
Mar 27, 2013 at 2:16 PM
Hi Marc,

I actually formated the script as you have done but when I posted it it displayed it all in a mess. :) Sorry about that. The script works so leaving out the closing brackets was a copy n' paste error.

My list contains a list of sub sites for the current site collection. Currently, with the above code, the list items are returned but they display row after row as my HTML is laying them out that way in a table.

I am using SPServices to try to create a launch pad that will display every sub site in the list as an icon (the icon is stored within a column in the list). This is to make navigation easier for the user. The launch pad also has a search box that can be used to filter the list of icons.

My question is how do I display the list items like a grid of icons (similar to the iPad launch screen) with each list item displayed as an icon with the site name below it. i.e.

In the code posted I almost have it but I cannot get it to create the layout correctly. My goal is to layout the list items icon in a 10(width) x 10(height) grid that adjusts. The width is maximum of 10 icons wide if there are 100 items in the list the grid height will adjust accordingly.

I have a mockup image below with 4 icons across.

http://dl.dropbox.com/u/2324067/public/custom_list_grid.png
Coordinator
Mar 27, 2013 at 2:40 PM
Edited Mar 27, 2013 at 2:40 PM
I usually just emith the markup I want manually - the more conmplex frameworks like dataTables seem like unnecessary overhead to me.

Here's a snippet of code from the SPArrangeChoices function that shows you how I emit the choices in multiple rows based on the value provided in perRow. It's so easy to do this way that I'm not sure a framework adds much value.
out = "<TR>";
for (i = 0; i < columnOptions.length; i++) {
  out += columnOptions[i];
  // If we've already got perRow columnOptions in the row, close off the row
  if ((i + 1) % opt.perRow === 0) {
    out += "</TR><TR>";
  }
}
out += "</TR>";
M.
Mar 27, 2013 at 4:40 PM
Marc,

Not sure I see the connection here in your example with the structure I'm trying to create.

Are you just looping through list items and outputting them without a table structure?
Coordinator
Mar 27, 2013 at 4:52 PM
Edited Mar 27, 2013 at 4:53 PM
What you see above is just a part of the code; if you take a look in SPServices you can see what surrounds it. (Of course the TRs from the above code end up in a table.)

My point was that it's not that hard to emit markup to do what you need. Just decide what that markup ought to be based on your requirements and emit it.

M.