Now that we got 2007.1 out the door, we can finally take some time to reflect on what we’ve done, and talk to you guys and gals out there about what’s new and notable in the release. It certainly feels good to be writing in a natural language for a change. Since one blog post would hardly suffice for discussing all the new controls and cool new features, for now I’ll focus on only one particular new feature that I think a lot of you will be excited about: client-side binding to JSON objects with Grid. One of the great features of ASP.NET AJAX is its ability to expose web services and their WebMethods to client-side code quickly and easily. Return values from WebMethods are automatically serialized to JSON and returned as such on the client. Since ComponentArt controls are fully functional on the client, there is nothing stopping them from being able to load data returned from such web service calls right on the client. Being able to programmatically populate our controls on the client is nothing new, but now, for the first time, there is a way to bind a control to a JSON data set on the client with a single line of code. This is what Grid’s new client-side load method is for. There is a sample in our new demo package which showcases this functionality ( here ) but I will explain the key points. First of all, we need a web service, with a WebMethod which will return a data set. This particular example uses a simple service we wrote called MessageService, which has a method called GetRecords that returns a List of Message objects. This list is populated by querying a table of forum posts and instantiating a rudimentary Message object for each one. After the list is built in the GetRecords method, it is simply returned. Next, we expose this web service to the client using the ASP.NET AJAX ScriptManager: <asp:ScriptManager ID="ScriptManager1" runat="server"> <Services> <asp:ServiceReference path="MessageService.asmx" /> </Services> </asp:ScriptManager> At this point, we can call our GetRecords method with a single line of JS: MessageService.GetRecords(OnSucceeded); The parameter we pass in is the handle of a client-side method to call when the method returns its result: function OnSucceeded(result) { Grid1.load(result); Grid1.render(); } The call to Grid’s load method with the returned JSON data set is all that is needed to bind the Grid with the new data on the client. The call to render then simply redraws the Grid. I know, that’s pretty cool, right? Note that in order for the Grid to know which properties of those JSON objects to load for the various columns, its column DataField definitions must match the property names of the objects, in this case the Message object. Note also that such objects need not necessarily be loaded from a web service. Any array of client-side objects can be loaded using the load method. Hopefully we’ll get a chance to implement similar functionality for some other controls fairly soon, like TreeView, ComboBox, Menu, and others. Bye for now! Share this post: email it! | bookmark it! | digg it! | reddit!
