Develop a custom format display for a sharepoint list

Question

Is there a possibility to develop a custom format display for a sharepoint list.

What I mean, can I develop a custom datagrid for the list webpart ?

Answer 1

While agreeing with the other answer suggesting the Data View Web Part, if you really want to get into code, then yes, you can develop a custom GridView to display your list data. There is even a class SPGridView which renders a 'SharePoint Looking' grid.

However, you'd be looking at having to add these to your own web part that you'd need to write. The Data View Web Part might be a better choice.

Answer 2

You should first try to look at the Data View Web Part and see if it fulfils your needs. With some XLST/JavaScript you can create some creative views/displays for your list.

Otherwise, you can always develop a Custom Web part to display list data. Here is an example

Answer 3

Be sure to see how far you can get using SharePoint Designer. People knock it, but, it's easy to misjudge. I've done some very very complex XSLT work by starting there. Depending on my needs, I export the XSL generated by SPD into my Visual Studio and bake it into a permanant fixture as part of my list definition / Schema.xml .. but, sometimes I find I can do everything I need in SPD ad-hoc without the need to really open up Visual Studio

It really speeds up tasks like custom row coloring based on list item value conditions.. but, even for more complex HTML rendering, if you learn how to carefully select the TD cell or the value-of node and then give things a nudge by doing an 'Insert HTML' command, SPD will then pull into the code view the long-lost template guts of whatever underlying XSL snippet from vwstyles that it was referencing.

Here's an example where I expose the comments field on a list. Comments can get long and 'blobby' and disrupt the grid-like flow of a list. I was able to incorporate the following snippet to cause comment strings longer than 60 chars to truncate into a 'More...' link.

    <?xml version="1.0" encoding="utf-8"?>
    <xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal" xmlns:o="urn:schemas-microsoft-com:office:office">
      <xsl:include href="/_layouts/xsl/main.xsl"/>
      <xsl:include href="/_layouts/xsl/internal.xsl"/>
      <xsl:param name="AllRows" select="/dsQueryResponse/Rows/Row[$EntityName = '' or (position() &gt;= $FirstRow and position() &lt;= $LastRow)]"/>
      <xsl:param name="dvt_apos">'</xsl:param>
      <xsl:param name="isPresEnabled"/>


      <!-- TRUNCATE LENGTH OF COMMENTS -->
      <xsl:template name="FieldRef_Note_body._Comments" ddwrt:dvt_mode="body" match="FieldRef[@Name='_Comments']" mode="Note_body" ddwrt:ghost="" xmlns:ddwrt2="urn:frontpage:internal">
        <xsl:param name="thisNode" select="."/>
        <div dir="{@Direction}" class="ms-rtestate-field">
          <xsl:if test='string-length($thisNode/@*[name()=current()/@Name]) &lt; 60'>
            <xsl:value-of select="$thisNode/@*[name()=current()/@Name]" disable-output-escaping="yes" />
          </xsl:if>
          <xsl:if test='not(string-length($thisNode/@*[name()=current()/@Name]) &lt; 60)'>
            <xsl:value-of select='substring($thisNode/@*[name()=current()/@Name], 0, 60)' disable-output-escaping="yes"/>
            <xsl:text> </xsl:text>
            <a href="javascript:;" onclick="javascript:SP.UI.ModalDialog.ShowPopupDialog('http://url/subsite/Lists/MyCoolList/DispForm.aspx?IsDlg=1&amp;ID={$thisNode/@ID}')" target="_self">
              <span style='color:red'>More...</span>
            </a>
          </xsl:if>
        </div>
      </xsl:template>

      <!-- MAKE CERTAIN CELLS HAVE COLORED BACKGROUNDS -->
      <xsl:template name="FieldRef_printTableCell_EcbAllowed.Class" match="FieldRef[@Name='Class' or @Name='Incin' or @Name='Store']" mode="printTableCellEcbAllowed" ddwrt:dvt_mode="body" ddwrt:ghost="" xmlns:ddwrt2="urn:frontpage:internal">
        <xsl:param name="thisNode" select="."/>
        <xsl:param name="class" />
        <td style="background-color: #C0C0C0">
          <xsl:if test="@ClassInfo='Menu' or @ListItemMenu='TRUE'">
            <xsl:attribute name="height">100%</xsl:attribute>
            <xsl:attribute name="onmouseover">OnChildItem(this)</xsl:attribute>
          </xsl:if>
          <xsl:attribute name="class">
            <xsl:call-template name="getTDClassValue">
              <xsl:with-param name="class" select="$class" />
              <xsl:with-param name="Type" select="@Type"/>
              <xsl:with-param name="ClassInfo" select="@ClassInfo"/>
            </xsl:call-template>
          </xsl:attribute>
          <xsl:apply-templates select="." mode="PrintFieldWithECB">
            <xsl:with-param name="thisNode" select="$thisNode"/>
          </xsl:apply-templates>
        </td>
      </xsl:template>


    </xsl:stylesheet>

You can see that the above is now formatted in a proper standalone .xsl file that I can use in Visual Studio, but, the good stuff was all created directly in SPD, FWIW.