Log in to like this post! NetAdvantage for jQuery 2012 Volume 1 : Sneak Peek [Infragistics] Murtaza Abdeali / Tuesday, March 13, 2012 I can almost see the light at the end of the tunnel, it has been yet another aggressive and feature rich cycle for the jQuery product and I can’t be more excited to give you guys a sneak peek of what’s coming out in 2012 Volume 1 release of the product. The next release of NetAdvantage for jQuery will be the third major release of the product. In a post couple weeks back by Jason Beres on 12.1, he shared the news on what’s coming out in terms of control and features we are shipping in all the different product lines. In this post, I am going to drill deep into the control feature specifics of NetAdvantage for jQuery with some visuals. Touch support across controls Todays web applications needs to be omnipresent, consumers are browsing web applications on their desktop machines, tablets and mobile devices. According to Forrester and IDC predictions, by 2015, more US consumers will access the web from mobile devices than from PCs or other wired products. Adding touch support across all the controls enables your applications to function via touch, keyboard and mouse without you having to write any extra code. If your goal is to build one interface for all devices, then this addition to the toolset is going to save you a lot of time and energy. This feature brings the best of both world to the controls, not just touch enablement via device detection, but also improved form factors so interfaces are natural to all users regardless of the devices they are using to browse an application. Here is an example of touch enabled feature chooser dialog you’ll see in 2012 Volume 1. Data Visualization with jQuery based HTML5 Charts and Maps If you have been on the fence deciding between going HTML5 or Silverlight for you next web application, this release we’ve made your decision even harder by bringing in our Silverlight Data Visualization controls over to HTML5. There is still lack of tooling support and less maturity around the platform within the client side development space, but when it comes to control offering from Infragistics, we want to make sure we have them available for you in both the platforms. Our Silverlight to HTML5 port that we started April of last year has been extremely successful, and we have ported over many of the Silverlight data charts over to HTML5 and jQuery. This release we will also preview an HTML5 Geospatial Map component, also coming from out Silverlight control stack. In the up coming releases, this effort is just going accelerate and you’ll see a lot more of HTML5 Data Visualization components in the jQuery package. Few key html5 chart features include: Panning and Zooming Multiple series Trend lines Legend OPD (Overview Plus Detail) panel Few key html5 map features include: Panning and Zooming Tile sources include OpenStreetMap, Bing Maps and CloudMade Maps Binding chart to Esri Shapefiles, ITF format and View Models with location based data. OPD (Overview Plus Detail) panel jQuery Controls for the Mobile Web This release, for the first time ever Infragistics is going to ship controls that is geared towards mobile web development. Included in NetAdvantage for jQuery, we will ship mobile controls that takes advantage of jQuery Mobile under the cover and ship a Mobile List View control and a Rating control. Both controls will look and run natively within the browser on mobile devices with full touch interactions, enhanced for mobile scrolling with inertia and support all modern mobile browsers. The controls can be used within pure client environment with jQuery and HTML. It will also have accompanying ASP.NET MVC wrappers for MVC developers wanting to bind controls directly to their models using razor helpers. jQuery HTML Editor We previewed the jQuery HTML Editor in 2011 Volume 1, this release cycle we were able to complete the V1 feature set, test out the core functionalities and add touch support to the editor control. Few of the key feature of the controls include: WYSIWYG Editing Experience Text formatting options like font family, font size, bold, italic and underline Align content that is being edited Cut, copy and paste options Inserting hyperlinks, tables, images jQuery Grid Enhancements The grid remains the epicenter of all of our product lines, and so it is true for the jQuery product as well. We continued to enhance the grid this release and added the following features to it. Column Templates: The column templates adds a lot of flexibility to the grid. By giving you the ability to customize any column in the grid specifying a cell template for it, you can very easily create layouts to satisfy some of the more intense UI requests within the jQuery Grid. Cell Merging: Enabling the cell merging feature in the jQuery Grid, data can be visually grouped within the columns and all the cell with same value would look as one merged entity within the grid. Virtualization in Outlook GroupBy and Hierarchical Modes: I call this one of the most innovative features our development team added to the product, and it is called virtualization. This release we are bringing the virtualization capability to Outlook GroupBy and Hierarchical grid as well. If you haven’t seen it already, I would suggest you take a look at this virtualization sample. It has 10,000 rows of data, but if you closely inspect the DOM, you will only see a few tens of the <tr>s created by the grid. When scrolled, the grid uses the same DOM structure to let the user cycle through the client data, giving them the feel that they are scrolling, but behind the scenes the grid has virtualized everything. This features makes the grid with high volume of data render fast and have a light client foot print. Hierarchical Grid (Outlook GroupBy, Selection, Row Selectors) RTM: A few of the features we shipped last release like Outlook GroupBy, selection and row selectors in the hierarchical grid as a CTP are now going to be RTM this release. MVVM Support with Knockoutjs Client-side development is totally hot these days, writing code in JavaScript that runs natively in the browser have never been this much fun. But there is a down-side to it as well, tooling and the platform maturity is not up to the mark yet. All the good JavaScript frameworks emerging out there are no more than 2 years old. One of which is knockoutjs, it brings the MVVM pattern development style to client side apps built with jQuery, JavaScript and HTML5. It is getting a lot of community support and Microsoft is even going to ship it with Visual Studio Web template in Dev11. This release, we’ve build bindings around knockoutjs for the jQuery grid, both flat and hierarchical grid. Now, you can use MVVM pattern with the grid using knockout within your client applications. The feature will be shipped as CTP, do give us your feedback so we get this feature right ,before we RTM in the next release. jQuery Dialog Window This release we also plan to ship a jQuery dialog window control within the toolset. It is going to add a bunch of additional feature that you normally see in the dialog window from jQuery UI. It will have features like resizing, open and close buttons, maximize and minimize states. You will be able to use it as a modal or non-modal window and put any HTML content inside of it’s view area with drag and drop capabilities within the browser window. New jQuery Templating Engine The official jQuery templating engine is going to remain in beta forever. It is a great innovation to the client-side technology and adds a lot of flexibility to what you can do with data bound controls using JavaScript templates. This project which was initially a contribution from Microsoft to the jQuery library and was even credited as an official plug-in, is no longer going to be enhanced or RTMed, at least that is what it looks like at the moment. We had to separate our code base so we don’t get dependent on this templating engine whose future is not known. Our team used the same concepts and developed a more robust templating engine that not only gets us away from being dependent on the jQuery templating plug-in, it also adds speed to the controls. You just need to reference our templating engine (which will be done by default), no code changes necessary, and the data bound controls like grid, combobox and tree will render faster than it did before. jQuery Combo box load on demand This release we’ve added load on demand capabilities to the combox box. You can load the combo box with nothing in it during initial load, speeding your initial load time. When the user clicks on the dropdown button, that is when the first call to server is made to get drop down items. In addition, you can now use scroll on demand, setting up the items you would like the combo to fetch from the server as the user continue to scroll the drop down. and much more.. There is going to be more features packed into the release, a checkbox editor for the grid, a way to get NET transactions for any updates on the grid by the user and full MVC validation support in the editor controls. Conclusion For the past 5 months our teams have been tirelessly designing, building, testing, creating guidance and localizing the product to take it to a whole new level. 2012 Volume 1 of NetAdvantage for jQuery is going to be a feature rich, jQuery convention based and standards compliant set of jQuery web controls. The current plans is to ship the product close to end of April, keep on the look for more release blogs in the upcoming days and weeks. We’ve already begun our 2012 Volume 2 planning, and I would like to hear your feedback in these specific areas. What controls and features you’d like us to deliver in the future? Which Silverlight Data Visualization controls would you like to see us port first? Which JavaScript frameworks you use other than jQuery? node, knockout, backbone etc. Drop me an email at murtaza@infragistics, I would like to hear from you. You can also follow me on twitter @mabdeali.