Using Selected Rows in an Editable Grid in a Server-Side C# Action in Infor CRM Web

In my previous article I discussed using the ClientContextService to pass values from client-side code to a server-side C# action. We will use that idea here to allow a server-side C# action to know which rows are selected in an Editable Grid.

The Editable Grid control in Infor CRM isn’t an ASP.NET control. Instead, it adds Javascript to create a completely client-side Dojo grid that uses SData. It’s a 100% client-side control. This means, if you want to use it from a server-side action you’re out of luck. However, using the ClientContextService you can pass information from client-side code to your server-side action, allowing the C# code to work with the Editable Grid.

In this scenario, we have an Editable Grid, with standard buttons next to it to perform actions on the rows selected by the user. The buttons have C# actions to perform updates and other actions on the selected rows in the grid. The user can select one, or many, rows and click one of the buttons to trigger a postback and perform some actions. The tricky part is, we need to let our server-side C# action know which grid rows the user has selected.

The first step is, we need to wire up some Javascript to the OnClientClick of the buttons. The OnClientClick Javascript code executes prior to the postback. We can return true or false to allow, or prevent, the postback from occurring. In the code below we get the selected rows from the Editable Grid and then set it in the ClientContextService. If no rows are selected, we alert the user and return false and everything stops (the C# action will not execute).

The following code is in a LoadAction to wire up the Javascript to the OnClientClick of our button.

// first we need to determine the client-side name of our Editable Grid
var gridId = string.Empty;
foreach (Control ctrl in Controls)
{
    var resCtrl = ctrl as ScriptResourceProvider;
    if (resCtrl != null)
    {
        gridId = resCtrl.ID.Replace("_Strings","");
        break;
    }
}

// this is the client-side script. In this code, we get a reference to the grid
// and then get the selected rows. We set the selected rows in the client context
// service. If no rows are selected we alert the user.
var script = @"var grid = dijit.byId('{0}'), 
				   selectedIds = grid.selection.getSelected().map( function(row) { return row.$key; }).join(); 

			   if (selectedIds != '') { 
				   var context = Sage.Services.getService('ClientContextService'); 
				   context.remove('SelectedGridRows'); 
				   context.add('SelectedGridRows', selectedIds); 
				   return true; 
			   } 
			   else { 
				   alert('There are no selected rows.'); 
				   return false; 
			   } ";

// now wire up the OnClientClick of our button 
button1.OnClientClick = string.Format(script, gridId); 

Now, when our button is selected, the Javascript we wired up to the button will execute and the ID’s of the selected rows will be added to the client context service. Now, in the code for the button, we can use the client context service to get the IDs of the selected rows. The code for the button will look like this:

var contextService = PageWorkItem.Services.Get<Sage.Platform.WebPortal.Services.ClientContextService>();
if (contextService.CurrentContext.ContainsKey("SelectedGridRows"))
{
	var selectedIds = contextService.CurrentContext["SelectedGridRows"].Split(',');
	// now the selectedIds variable is an array of the ID values of the selected rows
	// we can loop through them and do whatever is needed
	
	// for example:
	foreach (var id in selectedIds)
	{
		// this is just an example...
		var contact = Sage.Platform.EntityFactory.GetById<Sage.Entity.Interfaces.IContact>(id);
		contact.Status = "Something";
		contact.Save();
	}
}

Not too bad. It gets the context of the selected Editable Grid rows back to C# so you can do anything you’d like at that point.