SOA.UI with DataGrid for AJAX

Posted Tue Nov 24, 2009 @ 1:04 PM

 

A bit of time has passed since we introduced the SOA.UI framework for writing web services that drive the UI. Integration with this elegant framework has become an important part of Web.UI for Silverlight, but our AJAX controls also contain quite a bit of functionality for seamlessly plugging into the SOA.UI way of doing things. The AJAX DataGrid control, in particular, has the ability to work directly with SOA.UI to perform all required data shaping automatically, and it's about time someone wrote up an overview of that functionality. I hope to address part of that information gap with this long-overdue post.

Setting up a SOA.UI DataGrid Service

The first step we need to make, before we can use any SOA.UI functionality on the client, is setting up a WCF SoaDataGridService to service requests from the UI. If we forget about editing for a moment, we only need to implement a single method in this service: Select.

Since we want to use this service with an AJAX control which speaks JSON, we will need to define a service entry in web.config which will use JSON serialization:

<system.serviceModel>
  <behaviors>
    <endpointBehaviors>
      <behavior name="jsonBehavior">
        <enableWebScript />
      </behavior>
    </endpointBehaviors>  
    <serviceBehaviors>
      <behavior name="soaBehavior">
        <serviceMetadata httpGetEnabled="true"/>
        <serviceDebug httpHelpPageEnabled="true" includeExceptionDetailInFaults="true"/>
      </behavior>
    </serviceBehaviors>
  </behaviors>

  <serviceHostingEnvironment aspNetCompatibilityEnabled="true"/>
    
  <services>
    <service behaviorConfiguration="soaBehavior" name="SoaDataGridMessageService">
      <endpoint address="" binding="basicHttpBinding" 
	    contract="ComponentArt.SOA.UI.ISoaDataGridService" />
      <endpoint address="json" behaviorConfiguration="jsonBehavior"
        binding="webHttpBinding" contract="ComponentArt.SOA.UI.ISoaDataGridService" />
      <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange" />
    </service>	
    ...

 

When the service is set up on the server, we can bring it into our AJAX application by adding a service reference to the ASP.NET AJAX ScriptManager, using its JSON address:

<asp:ScriptManager ID="ScriptManager1" runat="server">
  <Services>
    <asp:ServiceReference path="~/SoaDataGridMessageService.svc/json" />
    ...

 

At this point, the service is exposed to client-side code (named after the contract) and ready to be used by the DataGrid.

Automatic SOA.UI mode (paging or deferred scrolling, sorting)

For basic data-shaping functionality, we need only to point the DataGrid control to the service we have set up, and tell it to run in WebService mode, by setting RunningMode to WebService and SoaService to "ComponentArt.SOA.UI.ISoaDataGridService". With these settings in place, the control will automatically load its initial page of data by calling the service (and its Select method) and will perform subsequent paging (or scrolling) and sorting operations using the service. The only code we needed was the UI-agnostic implementation of the SoaDataGridService.Select method, which could also be used by DataGrid controls for Silverlight or WPF.

Note that the specification of the SoaDataGridSelectRequest doesn't specify whether paging or deferred scrolling is used for chopping up the record set, so both are supported in exactly the same way.

Grouping with SOA.UI

With the data selection functioning, basic grouping can also be performed out-of-the-box with no additional code. Set AllowGrouping to true and GroupingMode to ConstantRecords and the control will continue to fetch a constant number of data records per page (specified by PageSize), but will group them appropriately when requested.

If you'd like to display a constant total number of rendered row elements (group headings and records, combined), you will want to use the ConstantRows grouping mode, which can work with SOA.UI if the groups are pre-expanded by also setting PreExpandGroups to true. This functionality can be seen in the live DataGrid Core Features demo.

For the ConstantGroups mode, in which a constant total number of top-level groups (specified by GroupingPageSize) is displayed per page, some additional code is required. Since the DataGrid control needs to access information about groups without fetching the entire record set, the SOA.UI service needs to implement the Group method which solves the simple task of returning a list of unique values under the specified column, taking into account provided filters. A sample implementation can be seen in the example SoaDataGridMessageService provided in the distribution - the code can be found under \live_demos\aspnetajax\app_code.

Editing with SOA.UI

To support editing functionality, namely insert, update and delete operations, we need to implement the three operations as SoaDataGridService methods: Insert, Update and Delete. The methods are called automatically when the analogous operations are performed using DataGrid's standard client-side API, and all the required information about affected rows is provided in the passed-in request parameter. The response parameter allows the service to notify the client of any problems or cancelations which may have occured during the server-side processing. A sample of this functionality can be seen in the live DataGrid SOA.UI Editing demo.

No additional code is required on the client, and no settings need to be changed, on top of what is required for standard editing. If you do wish to use the client-side API to perform SOA.UI editing, you can do so using the standard webServiceInsert, webServiceUpdate and webServiceDelete methods.

Filtering with SOA.UI

Though filtering is supported by the SOA.UI layer and out-of-the-box UI integration is implemented by ComponentArt DataGrid for Silverlight, this feature is not yet available with DataGrid for AJAX. For the time being, the SOA.UI filtering functionality can be accessed using DataGrid's client-side API:

// filter by LastName = 'Glisic' AND Age = 30
DataGrid1.set_soaFilters([
 {"DataFieldName": "LastName", "DataFieldValue": "Glisic"},
 {"DataFieldName": "Age", "DataFieldValue": 30}
 ]);
 
// refresh
DataGrid1.webServiceSelect();

 

We plan to bring to AJAX those filtering and searching features we recently brought to our Silverlight DataGrid, so improvements are coming.

Conclusion

The elegant SOA.UI framework helps your application support powerful data-shaping functionality for DataGrid controls, whether they are AJAX, Silverlight or WPF (coming soon!). ComponentArt DataGrid for AJAX can talk directly to a SoaDataGridService to leverage most of its functionality seamlessly and codelessly. We hope you find this functionality useful. Do let us know what you think!

 

Comments

Posted on Tue Nov 24, 2009 @ 1:04 PM

Hi,

We are using  CA Grid ,I am not getting current row column index.

function Grid1_onItemSelect(sender, eventArgs) {

           var item = eventArgs.get_item();

           var gridItem = Grid1.get_table().getRow(item.Index)

var ColumnIndex=Grid1.get_table().getColumn(item.Index)

}

If you  getting this solution please send the answer.

Click here to log in or create an account.