The Ilusive jsGrid (V)

And now something long due: how to display comboboxes/dropdowlists on the jsGrid.

So at a given point in your code you'll have - i hope - something similar to this:

GridSerializer gds = new GridSerializer(SerializeMode.Full,
dataTable,
"key",
new FieldOrderCollection(),
GetGridFields(),
GetGridColumns());

Your GetGridFields() function should resemble this:

protected IList GetGridFields()
{
   List row = new List();
   foreach (DataColumn iterator in dataTable.Columns)
   {
      GridField field = new GridField();
      field = FormatGridField(field, iterator);
      row.Add(field);
   }
   return row;
}

Now let's focus on FormatGridField(gridField, dataColumn). Let's say the column that should display the comboboxes is named "brands". This is what should be included in your FormatGridFields(...) function:
(...)
if (dc.ColumnName == "brands") //our combobox column
{
   gf.PropertyTypeId = "myLookupTable"; //Use whatever name you want here; just be aware that it will be used on the js file where the GridManager is instatiated
   gf.Localizer = (ValueLocalizer)delegate(DataRow row, object toConvert)
   {
      string brandName = (string)row["brandName"];
      return toConvert == null ? "" : brandName;
   };
   gf.SerializeDataValue = true;
   gf.SerializeLocalizedValue = true;
}
(...)

That's all on the server side.

As for the js file where the GridManager is instatiated, you'll have something similar to this:
GridManager = function () {
   this._jsGridControl = null;
   this.Init = function (jsGridControl, initialData, props) {
(...)

Add this inside that same function:
SP.JsGrid.PropertyType.RegisterNewLookupPropType('myLookupTable', brandsArray, SP.JsGrid.DisplayControl.Type.Text, false); //Remember "myLookupTable" from before; it's up to you to get the brandsArray filled with the possible values; i use an hiddenfield, then move the contents into the array.

(a couple of lines below)

jsGridParams.tableViewParams.columns.GetColumnByKey('brands').fnGetEditControlName = function () { return SP.JsGrid.EditControl.Type.ComboBox; } //"brands" is the name of the column
jsGridControl.Init(jsGridParams);

That's all there is to it - (from top to bottom) tell the grid that the EditControl for the column is a ComboBox; also, register the lookup table that contains all the possible values; change the server side code so that the combobox displays previously saved values.

I hope this is useful.

Soundtrack for this finding:
Haven't heard much music lately, but "Bandoliers" by Them Crooked Vultures certainly played a part.

The Ilusive jsGrid (IV)

Here we are again! So, let's say we want to mess around with rows availability: disable this one, enable that one depending on some other cell value...

First stop (not exactly, just sort of): (on GridManager.Init()) jsGridControl.SetDelegate(SP.JsGrid.DelegateType.GetRecordEditMode, myGetRecordEditMode);

This is what myGetRecordEditMode should look like

function myGetRecordEditMode (record) { ... }

Now, let's say our table has a column named 'status', containing integers (that represent different statuses), and that for some statuses (like '0' or 'Draft') the corresponding row should be editable, and for others it should be read-only (like '5' or 'Closed'). It's easy:

function myGetRecordEditMode(record) {
if (record.properties['status'].dataValue == 0) //Draft
return SP.JsGrid.EditMode.ReadWrite;
if (record.properties['status'].dataValue == 5) //Closed
return SP.JsGrid.EditMode.ReadOnly;
return SP.JsGrid.EditMode.ReadOnlyDefer; //All other status
}

The star of the show here is the «SP.JsGrid.EditMode» enum - this is its definition: SP.JsGrid.EditMode={ ReadOnly: 0, ReadWrite: 1, ReadOnlyDefer: 2, ReadWriteDefer: 3, Defer: 4 }; more details here microsoft.sharepoint.jsgrid.editmode (warning: this is the server-side counterpart, but it fits the purpose). It helps making row enabling/disabling quite simple; the real trick - and this is why in the previous code example all other status get the SP.JsGrid.EditMode.ReadOnlyDefer value, and not just SP.JsGrid.EditMode.ReadWrite - is mixing row editability with column editability. I'll provide more details in a future post.

The Ilusive jsGrid (III)

How to enable/disable editing of the jsGrid's content? For a change, something simple:

jsGridCtrl.EnableEditing() and jsGridCtrl.DisableEditing()

Soundtrack for this finding:
Megadeth - Pray For Blood

The Ilusive jsGrid (II)

You've set up your jsGrid "correctly", there's no compilation/deployment/script errors but still it won't render - the only visible element is the "Loading" gif where rows and columns should be...

Check your GridManager (script) object; something must be wrong with the tableViewParams. I found this when i made changes to my (server-side) DataTable structure - removed columns - and failed to reflect those changes in the client script, as i had defined some delegates involving the removed columns. And as i said before, no visible error ...

Soundtrack for this finding:
Prince - Purple Rain (i know, not heavy metal ...)

The Ilusive jsGrid

Go figure: the SharePoint team has created a fantastic control, the jsGrid, and for some reason felt it shouldn't provide the developers with something worth calling "documentation". (Really, what's the point? There are always some chumps who'll do it for them anyway - and for free!)

So, for starters, how to set up a column to contain an image/icon with a tooltip?

First, in the GridManager.Init() method there will be (by default) something like
(...)
var jsGridParams = dataSource.InitJsGridParams();
(...)
Once this is done, the grid's columns can be accessed like this:
jsGridParams.tableViewParams.columns.GetColumnByKey('#columnName#')

Obviously, there has to be a DataColumn named #columnName# in the DataTable used as a source for the jsGrid. It can be a simple string/text column - note: this GridField = String - filled with data in the format "#image url#;#image tooltip#".

Back to the jsGridParams.tableViewParams.columns.GetColumnByKey ...
Two delegates must be defined, like in the example below, in order that the cells display the image and its tooltip.

jsGridParams.tableViewParams.columns.GetColumnByKey('#columnName#').fnGetDisplayControlName = GetImageDisplayControlName;
jsGridParams.tableViewParams.columns.GetColumnByKey('#columnName#').fnGetSingleValueTooltip = GetImageTooltip;

These are the methods signatures
function GetImageDisplayControlName(column, record, fieldKey)
function GetImageTooltip(record, colName, dataValue, localizedValue)

and these are possible implementations

function GetImageDisplayControlName(column, record, fieldKey) {
record.properties[fieldKey].propType.GetImageSource = function (rcrd, p2) {
var valueInDataTable = rcrd.properties[fieldKey].localizedValue;
if (valueInDataTable != null && valueInDataTable.length > 0) {
return #pathToImage#;
}
return '#pathTo#/blank.gif';
};
return 'DISP_IMAGE';
}

The most important point here is the "return 'DISP_IMAGE'"; this is what this delegate is all about: telling the jsGrid how to render a particular cell. But before that, the GetImageSource method must be set up in order for it to return the path of the image to display. Because the cell contains data in the "#image url#;#image tooltip#" form, this is where the split (by ';') is made.

function GetImageTooltip(record, colName, dataValue, localizedValue) {
var valueInDataTable = record.properties[colName].localizedValue;
if (valueInDataTable != null && valueInDataTable.length > 0) {
if (valueInDataTable.indexOf(';') == -1)
return val;
return valueInDataTable.split(';')[1];
}
return '';
}

As for GetImageTooltip, the process is pretty clear and self-explanatory.

Hope this helps.

Soundtrack for these precious findings:
Pantera - Revolution is my name
Megadeth - Rust in peace ... Polaris