1

I am working on a SharePoint solution using the SharePoint JS Grid control to display data. What I'd like to do is to change the default style (mainly background color) of specific rows in the grid to make them stand out to the user.

My question: is this even possible using JS Grid's own API?

Edit: Using an "outside/hack" solution like JQuery to manipulate the grid does not seem viable because testing its correctness on each and every possible user interaction use case the grid offers (manipulating colums, select-deselect, editing cells, etc.) would be too time-consuming. Too many things could simply "break" without knowing at first glance :-(.

If it is possible to use the grid's API, then how do I do this and what part of the API should I use (server side .NET or JavaScript client side)? The documentation on MSDN on this topic is really lacking in my opinion.

1
  • If no other answers besides mine and James are added in the next 30 days, then I'm going to mark this question as answered. Commented Jun 1, 2012 at 21:09

3 Answers 3

3

My research was fruitful. It is possible to use JS Grid's server side API, but parts of the client side API are needed as well. Here's how:

On the server, when building the data table containing the grid's data, there needs to be one special column that contains the so called 'row style ID'.

// Create and initialize the data table.
DataTable data = new DataTable();

// Add the normal data columns.
// ...

// Add the column for the row style ID.
data.Columns.Add(new DataColumn(
    GridSerializer.DefaultGridRowStyleIdColumnName,
    typeof(String)));

// ...

After the data table is created, it needs to be filled with data. The row style ID column (which is referenced by its default name (see DefaultGridRowStyleIdColumnName)) is where you put in your own row style IDs that you want for specific rows.

// Declare dataRow variable.
DataRow dataRow;

// Create new instnace of DataRow.
dataRow = data.NewRow();

// Add regular data to the row.
// ...

// Add the row style ID to the row.
dataRow[GridSerializer.DefaultGridRowStyleIdColumnName] = "MyStyleID";

// Add the current row with data to the data table object.
data.Rows.Add(dataRow);

// Repeat as loop if needed
// ...

The last part is to define the actual row styles you want to use to change the visual appearance of different rows. This part needs to be done in JavaScript on the client side, specifically in the script section where the grid's parameters are defined (in the GridManager's Init method). The StyleManager's RegisterCellStyle method is used to associate a row style ID with an actual row style:

// ...

// Define a row style for MyStyleID.
jsGridParams.styleManager.RegisterCellStyle('MyStyleID', SP.JsGrid.Style.CreateStyle(SP.JsGrid.Style.Type.Cell, { backgroundColor : '#EA3030' }));

// ...

With these parts in place the default visual style of a row can be changed. By defining different row styles and by associating different rows with those styles through their row style ID, you can individually set the style for each row.

Important Note: For the sake of simplicity this answer's code parts are in close context of the MSDN JS Grid example How to: Create a Basic JS Grid Control

Example screen shot with colored rows: enter image description here

0

Since it is already a Javascript control, and SharePoint 2010 allows the use of jQuery, I would suggest using jQuery to adjust the display of certain rows in the JS Grid. Depending on what "specific rows" means, the difficulty can be low to high.

2
  • 1
    I'm looking for a solution from within the JS Grid API. Running an additional script from "outside", like JQuery, does not meet my need for stability and performance when the grid has 100 x 100 cells and the grid's DOM is dynamically updated by user interaction. I don't want to risk "breaking" the grid in certain states by non-standard manipulation without clearly understanding its display mechanics first. Commented May 20, 2012 at 15:18
  • 1
    This isn't really an answer.
    – theMayer
    Commented Mar 23, 2015 at 15:36
0

For changing visual style, combining CSS and the :nth-child selector is likely to be the way to go. This isn't in JSGrid, but it also isn't javascript and won't break any scripts.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.