A while back, I wrote a post called Building an editable grid for CRM 2011.   The goal of the post was to give you the necessary knowledge to know how to write the code to build an editable grid.  Since then, someone introduced me to jqGrid.  This is quite a powerful JavaScript grid control.  Have a look at the site to see all the things you can do with it.

I’ve built a little sample for a customer using jqGrid.  I wanted to spend some time cleaning the code up and making it more reusable before I blogged about it.  My lofty goal was for it to be a fully reusable editable grid control for CRM.  My thinking was that all you would have to do is drop a web resource on the form, pass the web resource a set of parameters (child entity, columns to display, etc.), and the web resource would render a custom grid based on what you passed it.  Well, as most of my lofty goals for side projects go, I haven’t found the time to get it where I want it to be.  Since then I’ve promised a number of folks to at least share what I have until I can get around to turning this into what I want it to be. 

To get started, download the sample from here.  Unzip the contents somewhere.  If you want to open the Visual Studio solution, you will need the Developer Toolkit for Microsoft Dynamics CRM installed.   Make sure you read the README.txt file in the root of the CrmEditableGrid project.  As I say in the readme:

THIS IS NOT A FULLY REUSABLE EDITABLE GRID CONTROL.  IT IS A SAMPLE DEMONSTRATING HOW
TO USE THE FACILITIES OF THE CRM 2011 SDK COMBINED WITH A POPULAR JAVASCRIPT GRID CONTROL (jqGrid).
WITH THIS AS YOUR STARTING POINT, YOU SHOULD BE ABLE TO USE THE CRM 2011 SDK AND THE jqGrid
DOCUMENTATION TO ADD ADDITIONAL CAPABILITIES TO THE GRID SUCH AS: ADD/DELETE ROW, OPTION SETS, ETC.

To get the sample working, import the dkdteditablegrid.zip file into your CRM organization.  It’s an unmanaged solution.  Make sure you publish all customizations at the end of the import.  I didn’t export the sitemap so you will need to find the Parent entity and add it to the Workplace area to see it:

Make sure you publish and refresh the browser so the updates show up.  Ok, I warned you that this sample was incomplete.  To get the editable grid into a useable state, you need to create a Parent record and a couple related Child records.  Navigate to Workplace->Extensions->Parents and create a new parent.  Make sure you Save (not Save & Close).

Now navigate to Related->Common->Children and add a couple children.

Once you’ve added a couple children.  Close the form and open it again.  Like I said, work in progress.  What you’ll see is a grid on the form that looks something like this:

If you click the “e” button, then you’ll put the record in edit mode.  The “c” button cancels and the “s” button saves the record.  The way this works is as follows:

• The grid is an html web resource that is passed the record id from the parent form
• When the web resource loads, it makes an OData query for the children
• Upon query completion, it wires up the data to the jqGrid
• When “s” button is clicked, the code updates the child record through the OData service

The goal of this sample, for now, is to have enough of the core plumbing in place for you to take and elaborate to your specific scenario.  Once you realize how capable jqGrid is, then you’ll understand that it’s not that big of a leap forward to get to where you want to be.  I still plan to transform this from a code sample to something people can just pickup and use on many forms by passing a few parameters to the web resource.  Of course, time needs to be on my side…yes it does.  Let me know if you beat me to it! 

@devkeydet