Browse by Tags

• AJAX
• ASP.NET AJAX
• code camp
• custom parameter
• Grid
• Load on demand
• treeview
• Web.UI

• 4 Comments 1629 Views

  Grid Configuration via Web Service Since the introduction of the WebService running mode in ComponentArt Grid, and related functionality (like the client-side load method), we have seen this approach rapidly gain popularity and, naturally, produce demands for more features and more versatility. Versatility is key when it comes to UI controls, so we have been spending some time improving WebService mode in this respect. As of Web.UI 2008.2 SP2 (build 2008.2.1180) Grid has a number of new features. WebServiceConfigMethod In addition to being able to define ASP.NET AJAX web service methods for data selection, insertion, deletion, etc, it is now also possible to perform Grid configuration in a web service. Rather than defining top-level properties, GridLevels and their constituent GridColumns and all the accompanying styles on the ASPX page where the Grid instance is placed, all of these can now be loaded on the fly by defining the WebServiceConfigMethod server-side property and calling the client-side webServiceConfig method. GridWebServiceConfigResponse The web service method performing Grid configuration is expected to return an object of the type GridWebServiceConfigResponse . Such an object contains top-level property settings (contained in the Properties member), and GridLevel definitions (contained in the Levels property) which, in turn, can contain GridColumns . Configuration can be done at any time on the client, without going back to the server from which the ASPX file originated. The configuration request passes in an optional custom parameter, so that configuration can be context-dependent. GridWebServiceSelectRequest.Columns To enable such potential on-the-fly changes to the Grid’s layout and definition, GridWebServiceSelectRequest now contains a Columns property. With every web service data request, Grid now sends along the collection of columns (data fields) that it expects on the client. This allows the web service selection logic to account for on-the-fly changes in the Grid’s client-side configuration, and always provide the required data. And More In addition to the above, a number of other enhancements to web service functionality have been made which should simplify its use in many scenarios and enable altogether new ones. For example, GridWebServiceSelectResponse.Items can now contain simple arrays of objects corresponding to the rows of data requested by the Grid. Simple proxy classes no longer need to be defined, as long as the order of data in the arrays matches the fields specified in GridWebServiceSelectRequest.Columns . The select response can now also contain hierarchical data, with rows containing more rows defined on the second (or third, etc) GridLevel . To keep on topic, I will write more on this particular functionality at a later date. Cheers, and thanks for stopping by! Share this post: email it! | bookmark it! | digg it! | reddit! Posted by: Milos Posted: Friday, June 13, 2008 6:35 AM Filed under: ASP.NET AJAX, Grid, AJAX, web services 4 Comments

  
  
  

• 4 Comments 1281 Views

  TreeView and Web Services In my previous post , I talked about the web service functionality that's common to all ComponentArt navigation controls. I focused on common features that are present in many different controls, especially in this case, but this approach was unfair to one control. With its ability to load chunks of data on demand, TreeView is the odd man out, supporting everything that other navigation controls do, but adding its own unique twist. Like the other navigation controls, TreeView has control-level WebService and WebServiceMethod properties. These determine which ASP.NET AJAX registered web service will be called, and which method of that service, when nodes are retrieved. For the initial data load, the behaviour is identical to Menu, TabStrip or NavBar. What TreeView can do that others can not is to only load some nodes initially, letting user actions determine what else gets loaded and when. Essentially, TreeView is able to operate in load-on-demand mode with web services. To return load-on-demand nodes (parent nodes with no child nodes pre-loaded), simply set their UseWebService property to true. This will notify TreeView to consider these nodes to be parent nodes, and to call the web service again when they are expanded, to load their child nodes. When that happens, the same WebServiceMethod will be called, but with a twist: the TreeViewWebServiceRequest object that is passed in will have its Node property set to the node that requires data. Based on the Text, Value or ID of this node, appropriate new nodes can be created and returned, as they would normally, from the web service method. Note that these child nodes can also have their UseWebService property set to true. After a web service call completes, the client-side event also exposes the node for which the call was made, in addition to the customData property common to all navigation controls. Here's an overview of the client-side TreeViewNodeWebServiceCompleteEventArgs class: function TreeView1_webServiceComplete(sender, eventArgs) { var node = eventArgs.get_node(); if(node) { alert('Completed web service call for node ' + node.get_text()); } else { alert('Completed web service call for top level data.'); } var customData = eventArgs.get_customData(); if(customData) { alert('Web service call returned custom data: ' + customData); } } You can see an example of this functionality online with the TreeView Web Service Load-on-demand sample . Please note that this functionality is fully available only as of Web.UI 2008.1 SP1, released on April 23rd 2008. Summary To recap, since TreeView can load node-specific partial data through web services (unlike other navigation controls, which can only load all the items at once), its related API is a superset of, say, that of Menu. TreeViewWebServiceRequest includes the Node property (null for initial, top-level loading), TreeViewNode has the UseWebService boolean, and the client-side TreeViewWebServiceCompleteEventArgs class includes a node property. These extensions enable efficient load-on-demand functionality built entirely on ASP.NET AJAX web services. Share this post: email it! | bookmark it! | digg it! | reddit! Posted by: Milos Posted: Wednesday, April 23, 2008 10:49 AM Filed under: Web.UI, treeview, web services, Load on demand 4 Comments

  
  
  

• 4 Comments 1907 Views

  Web.UI Navigation Controls and Web Services It's been some time now since we first started introducing client-side integration with ASP.NET AJAX web services into our controls. The first foray was the ability of Grid to bind directly to JavaScript object arrays, allowing it to directly load JSON data returned from a web service, and continue running in client mode ( see demo ). The interest that this generated prompted the next big wave: Grid’s WebService running mode ( see demo ) and web service functionality in all the major navigation controls: TreeView, Menu, TabStrip, NavBar and ToolBar ( see demo ). In the latest iteration of Web.UI (2008.1) we standardized client-side events relating to web service calls across this group of controls, and added the ability to pass custom data to and from the web services. Each *WebServiceRequest and *WebServiceResponse class now has a CustomParameter property. In this blog post, I want to illustrate how this custom data can be bounced around using standard client-side and server-side properties and client events. Take as an example a Menu control, pointed at an ASP.NET Web Service: <ComponentArt:Menu runat="server" ID="Menu1" WebService="MyService" WebServiceMethod="GetItems" WebServiceCustomParameter="Blue" ... /> In the above example, we are telling Menu to call the WebMethod GetItems of the service MyService , and to set the initial value of its WebServiceCustomParameter to "Blue". When the Menu loads on the client, it will do just that. Let’s see how we can access the custom parameter in the web service: [System.Web.Script.Services.ScriptService] [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class MyService : System.Web.Services.WebService { [WebMethod] public MenuWebServiceResponse GetItems(MenuWebServiceRequest request) { // Create a response object. MenuWebServiceResponse response = new MenuWebServiceResponse(); // For this example, we will only return one item, // with the Text matching the custom parameter given to us. MenuItem newItem = new MenuItem(); newItem.Text = request.CustomParameter; response.AddItem(newItem); // We will also return some custom data from the server. // Let’s make it the current time. response.CustomParameter = DateTime.Now.ToString(); // Send the data back. return response; } } When this Menu loads on the client, it will load up the web service data, which will result in a single menu item entitled "Blue". We can always re-load data from the client by calling Menu’s client-side loadFromWebService method. We can also change the WebServiceCustomParameter on the client before doing so. For example, the following JavaScript would result in the Menu reloading its data and ending up with a single item entitled "Red": Menu1.set_webServiceCustomParameter('Red'); Menu1.loadFromWebService(); This mechanism should enable unlimited reloading of data for any navigation control based on custom data passed from the client. One last thing remains to be answered: how do we access that custom data (the server time) we sent back to the client from the web service? This is where client events come in. If we want access to this custom data, we’ll have to hook the WebServiceComplete client event: <ComponentArt:Menu runat="server" ID="Menu1" ... > <ClientEvents> <WebServiceComplete EventHandler="Menu1_WebServiceComplete" /> </ClientEvents> </ComponentArt:Menu> In the event handler, we can access the custom data through the event arguments parameter: function Menu1_WebServiceComplete(sender, eventArgs) { alert('Loaded items from web service, along with this custom data: ' + eventArgs.get_customData()); } I hope that explains this exciting new functionality and that you find it as neat and useful as we do. Do let us know what you think and how we can build on this in the future. Share this post: email it! | bookmark it! | digg it! | reddit! Posted by: Milos Posted: Tuesday, April 01, 2008 10:45 AM Filed under: Web.UI, web services, custom parameter 4 Comments

  
  
  

• 0 Comments 979 Views

  Toronto Code Camp 2008 Two days ago, on Saturday, I attended Toronto Code Camp 2008 , the third such event organized in our fair city. It was my first time at a Code Camp and I had a good time and learned a lot. In addition to attending some very interesting presentations and chatting with people from the ASP.NET community, I got to speak as well! My talk was about how ASP.NET AJAX exposes web services on the client, and how that can be connected with "client-centric" controls, such as those in Web.UI. After some introductory examples of accessing web services from client-side code, I demonstrated how ComponentArt TreeView and Grid can load data directly from web services using the ASP.NET AJAX. Those interested can download the (simple, introductory) code samples here . P.S. After the talk, Joel Tulloch pointed out to me that it isn’t necessary to mirror the server-side classes on the client by hand. We can use the GenerateScriptType attribute for this, as he describes on his blog . Very neat stuff. Share this post: email it! | bookmark it! | digg it! | reddit! Posted by: Milos Posted: Monday, March 03, 2008 11:07 AM Filed under: ASP.NET AJAX, code camp, web services 0 Comments