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

Adding a new Team Member to an existing Project through PSI 2010

Nothing new here except...

ProjectTeamDataSet.ProjectTeamRow newTeamMember = projectTeamDSet.ProjectTeam.NewProjectTeamRow();
newTeamMember.RES_UID = resourceID;
newTeamMember.NEW_RES_UID = resourceID;
newTeamMember.RES_NAME = SPContext.Current.Web.CurrentUser.Name;
newTeamMember.PROJ_UID = projectID;
projectTeamDSet.ProjectTeam.AddProjectTeamRow(newTeamMember);

If you don't set newTeamMember.NEW_RES_UID, before calling projectSrvClient.QueueUpdateProjectTeam(), you're dead ... (ProjectResourceNotFound)

Soundtrack for this finding:
Mustallica - Jump In The Fire

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