Share This Point

Using the SharePoint v3 Data Grid Control (SPGridView)

UPDATE: This article was written when WSS v3 was still in beta. Although all these methods still work I have written a newer article on how to do paging and sorting with the SPGridView ajax style using the ASP.net ajax UpdatePanel

In SharePoint v3 there is a new class called SPGridView. Its pretty similar to the existing grid view control in the .net framework. The main difference is that it automatically formats the display to look nice on  a SharePoint page.  Here is an example of what it looks like in action…

Using the SPGridView is pretty similar to using any other control. Below Ive included some sample code for a simple web part that uses the SPGridView…

[System.Xml.Serialization.XmlRoot(Namespace = "http://test.4qtrs.net/")]

    public class GridTest : WebPart

    {

        private SPGridView oGrid;

        protected override void Render(System.Web.UI.HtmlTextWriter writer)

        {

            SPWeb site = Microsoft.SharePoint.WebControls.SPControl.GetContextWeb(Context);

            SPList taskList = site.Lists["Tasks"];

            SPDataSource mySPDS = new SPDataSource();

            mySPDS.List = taskList;

            //You could also just create a datatable here and populate it from some other source like so...

            //DataTable dt = new DataTable();

            //dt.Columns.Add("Title");

            //DataRow dr = dt.NewRow();

            //dr["Title"] = "My Test Item";

            //dt.Rows.Add(dr);

            this.oGrid.DataSource = mySPDS;

            //Use the line below if you are binding to the datatable...

            //this.oGrid.DataSource = dt;

            this.oGrid.DataBind();

            base.Render(writer);

        }

        protected override void CreateChildControls()

        {

            this.oGrid = new SPGridView();

            this.oGrid.AutoGenerateColumns = false;

            BoundField colTitle = new BoundField();

            colTitle.DataField = "Title";

            colTitle.HeaderText = "Title";

            this.oGrid.Columns.Add(colTitle);

            this.Controls.Add(this.oGrid);

            base.CreateChildControls();

        }

    }

In example provided I am declaring the data grid (oGrid) at the top of the class. Then creating a new instance in the CreateChildControls Method. Finally in the render method we are using an SPDataSource object to get the items from a list and databinding our oGrid to that SPDataSource.

Both the SPGridView and SPDataSource objects are way more usefull than described here but this should give you a decent start on implementing them.

-Mark

posted @ Friday, September 08, 2006 6:36 AM