Loading...

RE: Web Part to display a list across columns

RE: Web Part to display a list across columns

#5349
Anonymous
Anonymous
Participant

Hi Keith

This might be possible with Custom Display settings in qListView. The custom display properties lets the page designer customize the display of the data using HTML and JavaScript. The custom display appears after the default display (if the Display Fields property is defined). Please refer to the help file for more details.

There are 3 parts to control the output and format of the qListView grid layout. Typically you will use a table layout. I used a Web Parts Gallery list to show in this case and only displayed the Web Part name. It will be a long narrow list if I do not use Custom Display and Pagination. So here is what you can do:

  1. In the Results Header section, initiate the script variable, such as <table><th><td>Web Part</td></th><script type='text/javascript'>var index =0;</script>. You may not need table header part <th><td>Web Part</td></th>
  2. In the Results Body section, output the field and orgainze new row only when specific count is reached (the count will be the number to shown per row), suc as show below
  3. In the Result Footer section, close out the table with </table>


<script type='text/javascript'>
if (index == 0) {
index++;
document.write("<tr>");
} else if (index < 6) { // if you want 6 items in a row
document.write("<td>");
document.write("<%Name%>");
document.write("</td>");
index++;
} else {
index = 0;
document.write("</tr>");
}
</script>

The end result could be something like below screen shot. Note I have left “Display Fields” property blank so to not render anything by default and only use Custom Display result. You can further check into SharePoint CSS style to apply to the table we used here to give it some nice display.

Hope this helps.