JSGrid

Inleiding

In dit Wikibook zal de essentiële code voor een JSGrid te ontwikkelen gedocumenteerd worden. Deze grid kan dan als webpart gebruikt worden op een pagina in SharePoint 2010.

Initialiseren JSGrid Control

Nadat je een webpart aan je solution hebt toegevoegd kan je de JSGrid usercontrol initialiseren a.d.h.v. volgende code.

<SharePoint:JSGrid ID="_grid" runat="server" /> 
<script type="text/javascript">
   Type.registerNamespace("GridManager");
   GridManager = function () 
// GridManager dient hier als een functie die de gewenste JSGrid control met de gewenste data zal initialiseren.
          {this.Init = function (jsGridControl, initialData, props) {
           var dataSource = new SP.JsGrid.StaticDataSource(initialData);
           var jsGridParams = dataSource.InitJsGridParams();
           jsGridControl.Init(jsGridParams);
           jsGridParams.styleManager.RegisterCellStyle('TextRightAlign', 
           SP.JsGrid.Style.CreateStyle 
           (SP.JsGrid.Style.Type.Cell, { textAlign: 'right' }));
           jsGridControl.Init(jsGridParams);
       }
   };
</script>

Grid opvullen met gegevens

Data aanmaken die in de grid zou moeten te zien zijn kan je met een DataTable object, dit kan je dus op basis van gegevens uit een database of andere. Schrijf dus de nodige code om dit object aan te maken en terug te geven. Dit doe je dus best in een apart codefile (.cs)

Creëer dus een DataTable object en voeg er eerst de nodige kolommen met hun type aan toe a.d.h.v.:

DataTable data = new DataTable();
data.Columns.Add(new DataColumn("Sleutel", typeof(Guid)));

// Guid staat voor global unique identifier, dit dient dus als sleutel van een rij in de tabel

data.Columns.Add(new DataColumn("NaamVanKolom", typeof(String)));

Als alle kolommen zijn toegevoegd, voeg dan de rijen toe met waarden voor iedere kolom en geef uiteindelijk het DataTable object terug:

DataRow dr;
dr = data.newRow();
dr["NaamVanKolom"] = waarde;
data.Rows.Add(dr);
return data;

Nu het DataTable de gewenste data inhoudt dien je deze nog te koppelen aan je JSGrid control. Hiervoor dien je de data eerst om te zetten in GridColumns en GridRows. Je doorloopt dus eerst alle kolommen van de DataTable en zet ze in een IList van GridColumn:

           List<GridColumn> r = new List<GridColumn>();
           foreach (DataColumn iterator in table.Columns)
           {
           GridColumn col = new GridColumn();
                   // geef de kolom een fieldkey waarde.
                   col.FieldKey = iterator.ColumnName;
                   // Geef de header van de Kolom
                   col.Name = iterator.ColumnName;
                   // geef eventueel de breedte
                   col.Width = 210;
                   // Definieer eventueel andere settings zoals zichtbaar en sorteerbaar bijv:
                   if (iterator.ColumnName == "Department")
                   {
                       col.IsHidable = false;
                   }
                   if (iterator.ColumnName == "Yearly Estimate")
                   {
                       col.IsSortable = true;
                   }
                   // Voeg de kolom toe aan de lijst
                   r.Add(col);
               }
           }
           return r;
       }

Doorloop nu alle kolommen van de DataTable en voeg de velden toe aan een IList van GridField. Gebruik een methode die het datatype van de kolom gelijkstelt aan het propertytype van het GridField:

           List<GridField> r = new List<GridField>();
           foreach (DataColumn iterator in table.Columns)
           {
               GridField field = new GridField();
               field = formatGridField(field, iterator);
               r.Add(field);
           }
           return r;

De formatfield methode:

public static GridField formatGridField(GridField gf, DataColumn dc)

       {
            gf.FieldKey = dc.ColumnName;
           // serialiseer de data bij twijfel
           gf.SerializeDataValue = true;
           if (dc.ColumnName != "Key" ) //niet voor sleutelkolom
           {
               // voeg eigenschappen toe, gebaseerd op het type bijv. voor String:
               if (dc.DataType == typeof(String))
               {
                   gf.PropertyTypeId = "String";
                   //Localizer bepaalt hoe de onderliggende data op het scherm wordt geplaatst
                   gf.Localizer = (ValueLocalizer)delegate(DataRow row, object toConvert)
                   {
                       return toConvert == null ? "" : toConvert.ToString();
                   };
                   // serialisatie is verplicht voor String
                   gf.SerializeLocalizedValue = true;
                   gf.SerializeDataValue = false;
               }

Nu dien je enkel nog deze data effectief te koppelen met de JSGrid control. Voeg in de usercontrol klasse volgende code toe:

   public partial class JSGridWebPartUserControl : UserControl
   {
       //globaal maken van de grid om zo vanuit elke namespace deze te kunnen benaderen
       protected global::Microsoft.SharePoint.WebControls.JSGrid _grid;
       protected void Page_Load(object sender, EventArgs e)
       {
           //Roep het DataTable object aan voor de data te verkrijgen
           DataTable data = new DataKlasse().getData();
           //Gebruike een GridSerializer om met de data te connecteren
           GridSerializer gds = new GridSerializer(SerializeMode.Full,
           data, "Sleutel", new FieldOrderCollection(new String[] { "Department" }),
               GridUtilities.GetGridFields(data), GridUtilities.GetGridColumns(data));
           //koppel de net gecreëerde GridSerializer 
           //aan de GridDataSerializer van de control 
           _grid.GridDataSerializer = gds;
           //Laat de grid naar de GridManager controller luisteren
           _grid.JSControllerClassName = "GridManager";
       }
   }

JSGrid opvullen met SPList

Een SPList of volluit SharePoint List bestaat uit items of rijen, en kolommen of velden die data bevatten. Enkele properties van SPList:

Items : geeft collection van Items terug
Fields : geeft collection van Fields terug

Gebruik GetItem* methodes om een meer gespecifieerde en gefilterde collection terug te krijgen om de performantie te verbeteren.

Voorbeeld met task list

Maak een task list in sharepoint:

Site Actions, More options
Tasks
Geef naam in
Voeg records toe

Pas de volgende code aan:

GridData zodat de mapping van de data klopt (wijzigen kolommen).
waardetoekenning voor de velden van de grid:

using (SPSite mySite = new SPSite("https://server/site")) Pas URL aan!
{
   using (SPWeb myWeb = mySite.OpenWeb())
   {
       SPList taskList = myWeb.Lists["TaskList"];
       DataRow dr;
       foreach (SPListItem task in taskList.Items)
       { 
           dr = data.NewRow();
           dr["Key"] = task.UniqueId;
           dr["Title"] = task["Title"].ToString(); 
           dr["Start Date"] = task["Start Date"]; 
           dr["Due Date"] = task["Due Date"];
           dr["Complete Through"] = task["% Complete"]; 
           data.Rows.Add(dr);
       }
   }

JSGrid aanpasbaar maken

Volg de volgende stappen om het grid aanpasbaar te maken:

Voeg in de usercontrol van de webpart VOOR de contol wordt geïnitialiseerd volgende lijn toe:

jsGridParams.tableViewParams.bEditingEnabled = true;

In de code voor de omzetting van de data naar GridFields (methode formatGridField in dit voorbeeld), zet de property EditMode op ReadOnlyDefer voor ieder veld:

gf.EditMode = EditMode.ReadOnlyDefer;

Dit zorgt ervoor dat alle velden default read-only zijn maar specifieke editmodes voor rijen, cellen of velden deze property kunnen overschrijven.

Zo kan je nu kiezen welke gegevens er gewijzigd mogen worden. Kies bijvoorbeeld elke Int32:

else if (dc.DataType == typeof(Int32))
   {
       gf.EditMode = EditMode.ReadWrite;
   }

Bronnen

https://msdn.microsoft.com