Fun with the CRM Grid Object

I’ve posted before on some snippets for working with grids in CRM. I’ve done a ton of grid work since then and have come up with some more goodies for your enjoyment.

We know that the following code will let you get an array containing the guid of the selected records in a grid:

//    get array of selected records
var a = document.all['crmGrid'].InnerGrid.SelectedRecords;
var selectedItems = new Array(a.length);
for (var i=0; i < a.length; i++)
{
    selectedItems[i] = a[i][0];
}
alert(selectedItems);

In the above code, the variable a stores the SelectedRecords, but notice that a is a nested array and we are only grabbing the first element of each array (ie. a[i][0]). If you’re the inquisitive type, you may wonder what all of the available elements in the a[i] array are. Well, here they are:

• a[i][0] = returns the guid of the record.
• a[i][1] = returns the object type code of the record. Although you can also get the object type code from the grid object, it’s useful here for when the grid contains activities – you can use this one to distinguish between tasks, emails, etc.
• a[i][2] = returns the zero-based index of the record. if you selected the first record, then this returns a “0”. if you select the second record, then it returns a “1”, and so on.
• a[i][3] = returns the actual row element of the grid table. This is pretty neat because we can use this to grab values from the different columns in the grid.

We’ll do some fun things with the row element after the jump…

Working with the Row Object

Say we want to grab data from the selected rows(s) in the grid. Let’s start with the following standard Associated Contacts grid:

Let’s assume I want to grab the value of the Full Name column for the selected row(s). First, we’ll need to get the row object(s):

//    get array of selected rows
var a = document.all['crmGrid'].InnerGrid.SelectedRecords;
var rows= new Array(a.length);
for (var i=0; i < a.length; i++)
{ 
    rows[i] = a[i][3];
}

This is pretty similar to the snippet at the beginning of this article, but we’re getting a[i][3] instead of a[i][0]. Now we have an array of rows that we can work with. What we’ll do now is iterate through each row in the array and display the alert dialog:

//    iterate through selected rows
for (var i=0; i < rows.length; i++)
{ 
    var nameCell = rows[i].cells[2];
    alert(nameCell.childNodes[0].title);
}

Notice how I’m getting the Full Name – it’s the third column in the grid (the first 2 columns will always be the selector/image columns). In our example, I’m working with the 3rd cell in the row as an object called nameCell. We can take a peek at the innerHTML of nameCell and find the following:

<NOBR title=”Agnes Verebelyi”>Agnes Verebelyi</NOBR>

The title attribute of the NOBR element is the same as the inner text that is displayed in the column. So, to get our value we can do one of two things (I prefer the first method):

nameCell.childNodes[0].title

or

nameCell.childNodes[0].innerText

I should mention that the innerHTML (and thusly, the child nodes) of the cells in a row are different depending on the type of data in the cell. Other columns, like a Lookup are different in how the data is formatted in the cell’s innerHTML – you may have to navigate through some additional childNodes to get what you want:

//    get guid/otc of lookup column!
var lookupCol= rows[i].cells[3].childNodes[0].childNodes[0];
var id = lookupCol.oid;
var otc = lookupCol.otype;

The above snippet will get you the guid of the lookup column along with the object type code of the lookup. There are a few more attributes that will give you the display name, etc., but I’ll let you figure them out.

I hope this has given you enough to get your brain juices going and you are able to play around with the grid object to see what you can do. Stay tuned for some more fun grid stuff…

Cheers!

 

Technorati Tags: CRM,CRM javascript,CRM grid

Comments

[Ed]

Hi Will,

Thanks for this post!

I've been looking for a way to access grid values for a week and I stumbled upon your post - it was just what I was looking!

Note: For some reason, using 'nameCell.childNodes[0].title' didn't always return a value, but changing to 'nameCell.childNodes[0].innerText' seemed to work for me.

Regards

[jodi.cannon@mhctruck.com]

Will,

Thanks very much for the post. It explains a lot about working with the row. But, I'm still a little confused. I need to pass the guid of the entity of the selected row to reporting services. My embedded grid is in an iframe. So, I have gotten this far:

var frameDoc = document.getElementById("IFRAME_Saw").contentWindow.document;
var a = frameDoc.all['crmGrid'].InnerGrid.SelectedRecords;
var selectedItems = new Array(a.length);
for (var i=0; i < a.length; i++)
{
selectedItems[i] = a[i][0];
alert("guid view" + a[i][0]);
alert("object type " + a[i][1]);
}

But, this guid is not the guid of the entity that I need for my SSRS query. How can I get the guid that will pull the entity?

thanks
jodi

[Rob]

Hi,

I am having a problem where the the view is showing properly in the IFRAME and the following work fine

var frameDoc = document.getElementById(IFRAME_TEST).contentWindow.document;
var a = frameDoc.all['crmGrid']

The problem I am having is that

var a = frameDoc.all['crmGrid'].InnerGrid is returning as undefined

I have tried this with both 1:N and N:N related entities with no difference. Anyone able to help me with this

Thanks very much
Rob

[Adezeregap]

I've attached a function to trigger when you click on a row, using the following statement:
framdeDoc.all['crmGrid'].InnerGrid.attachEvent("onselectionchange", gridclickfunction);

so that we can handle the selected records with that function.

However, when I sort the view, or change pages, the click function stops working (maybe it is reset somehow). Any ideas how to solve this?

Thanks

Alejandro

[Mizuki]

Alejandro: whole crmGrid HTML structure - including bound event actions etc. - is replaced during sorting/paging AJAX postback, you have to reinitialize all your custom scripts in client pageLoad /or Sys.Application.add_load()/