Infragistics is proud to announce the release of NetAdvantage® for Web Developers CTP, our first ever suite of light weight, high performance jQuery Client Controls that enable developers to create better website experiences in browsers across platforms & devices backed by any server data end-point. NetAdvantage for Web Developers is the most robust and forward thinking product based on most bleeding edge Web technologies including CSS 3 and HTML5. NetAdvantage for Web Developers uses the industries best practices, frameworks and standards so developers can be sure their applications user interfaces are built upon a solid and proven foundation. In addition, the controls are native to any modern browsers, meaning no plug-ins or extensions required to run your applications. This release includes a Data Grid, Data Source, 6 Editors controls with Spin Buttons, Prompt Text and Validation, a Date Picker, Rating Control, Video Player and a File Upload control.
Download the NetAdvantage for Web Developers CTP to try these jQuery client controls for yourself.
NetAdvantage for Web Developers
With the release of NetAdvantage of Web Developers, Infragistics is really excited about the new Web technologies like jQuery, HTML5 & CSS3. With UI toolset available for numerous Web frameworks like ASP.NET, ASP.NET AJAX and JSF in the past and with a known leader of UI controls in the Microsoft .NET space, this time around Infragistics took a different approach and built a toolset based on the top of the most popular JavaScript framework, jQuery. This now allows any Web developer, not just ASP.NET, ASP.NET AJAX or JSF, to take advantage of these tools and built applications for the next generation of the Web. We anticipate that using jQuery controls along with HTML 5 & CSS 3 animations is going to put Infragistics at the fore front of the Web and developer using our component will be able to build better Web experiences. In order to make it easier for ASP.NET MVC developers, Infragistics is also shipping MVC helpers for all the jQuery client controls that will make developing much with ASP.NET MVC much easier.
At Infragistics we make sure that performance is part of the core design of control, and so this time around we are introducing a DOM virtualization engine within our grid, which will take the data display limits within an HTML table to new heights. It’s makes the grid very light with only the view port created for the entire DOM and as the user scrolls the elements are re-used to display data. This helps to keep the application client foot print to a minimum and faster response times.
Styling can easily be done with any of the jQuery theming library from Theme Roller. All the UI elements within the controls comply with the style classes from Theme Roller so that application can light up very easily just by using the default jQuery styles.
jQuery Grid
The grid is the center piece of the NetAdvantage for Web Developers. igGrid™ simply takes the standard HTML table beyond it standard boundaries in many ways and raises the bar for amount of data that can be displayed without hindering user experience. Check out some of the exciting features that the grid supports.
Figure: jQuery grid showing oData feed of Netflix catalog data.
To check out all the controls in action and download the product click here.
jQuery Grid - Filtering
End users can apply their own filter criteria to a igGrid column, hiding the records that do not match the filter from display so that the user can work with only the data that they need. Filtering applies to basic text (equals, does not equal, begins with, ends with, contains, does not contain), dates (equals, between, before, after, this/next/last time period such as week or quarter) and numeric data (equals, does not equal, conditions such as greater-than or less-than-or-equal-to, and between) in columns. Users can change the filter on their own through a filter row allowing them to specify different filters on different columns in the data grid.
Figure: jQuery grid displaying the filter drop down conditions for a numeric column
To check out all the controls in action and download the product click here.
The filter row is equipped with special editor capabilities, making it easier for the end-user to work with a type of editor that is best suited for the data type of the column when entering filter values.
Figure: jQuery grid with date picker as the editor for the filter row.
To check out all the controls in action and download the product click here.
jQuery Grid - Paging
igGrid can divide up the records in your large data sets so that end users only have to page through them, one page at a time. This enables your user interface to avoid scrolling, and to only present users with a digestible amount of information at any one time. You can either choose one from one of default pager templates or create your own allows user to navigate between pages.
Figure: jQuery grid with paging turned on with an option to choose page from a drop down list of use buttons to move to the previous, next, first or last pages directly.
To check out all the controls in action and download the product click here.
jQuery Grid - Sorting
Users can control the sorting of the columns in the igGrid by clicking on the column header. A sort directional indicator appears indicating whether the column is sorted in ascending or descending order. Users can sort on multiple columns by holding down the Control or Shift keys as they click the column headers.
Figure: jQuery grid with sorting enabled and sorted on the product name column.
To check out all the controls in action and download the product click here.
jQuery Grid - Virtualization
Virtualization is what makes the igGrid a key differentiator among the other HTML implementation of grid controls based on jQuery. DOM virtualization enables the grid to bind to data that is visible only within its viewport. As the user scrolls the grid, there is no delay, and the grid immediately recycles the elements and creates the new ones showing data that is being fetch real-time on the client using the igDataSource™.
Figure: jQuery grid bound to 10,000 rows of data with DOM virtualization enabled.
To check out all the controls in action and download the product click here.
jQuery Editors
igEditors™ include special editors based on jQuery for the different types of data user entry that an application expects. These editors employ some of the commonly asked functionality and are very easily integrated into the overall application framework. The different types of editors included are:
- igMaskEditor™ - Features an input mask displayed during editing for guiding users to enter data that complies with your format constraints
- igDateEditor™ - Features localization and DateTime input/display formatting
- igNumericEditor™ - Features general-purpose data entry of numbers with spin buttons
- igCurrencyEditor™ - Features support for entering amounts of currency
- igPercentEditor™ - Features support for entering percentages
- igTextEditor™ - Features multi-line and password (typed characters appear as asterisks) modes
Figure: Suite of jQuery editors with prompt text, mask input, spin button display along with localization and validation support.
To check out all the controls in action and download the product click here.
In addition editors have features like spin buttons, prompt text, jQuery validation support and much more to make them a perfect fit for all the data entry needs of a modern Web application.
jQuery DatePicker
Initially displayed to users like a date-editing field, but one which can dropdown a month calendar so that users can opt to pick a date from a calendar, igDatePicker™ is an ideal editor for inclusion in your grids and Web application for date entry where you might want to use a date entry with a drop down calendar.
Figure: jQuery calendar control used with the jQuery date time editor to make it a drop down date picker control.
To check out all the controls in action and download the product click here.
By combining all of the abilities of the jQuery DatePicker with all of the enhanced date editing functionality of the new igDateEditor into a dropdown date picker that is fully stylable and works across browsers, you can deliver this dual functionality anywhere in your Web applications to improve your user’s experience. It uses the default jQuery animation framework, you can use it to change the animation effects on how the drop down calendar opens and closes.
jQuery Rating
By using the new igRating™ control you can collect feedback from your users on products, services, and other points of interest which can be assigned a qualitative rating (e.g., how expensive was the food at this restaurant?) Harvest crowd opinion to separate the good from the bad with igRating.
You can choose different orientation types provided by igRating and pick the one that is best fitted for your application user interface. It also comes in different selection modes for precision and continuous/non-continuous selection.
Figure: jQuery rating control used with the movie rating scenario in a list control
To check out all the controls in action and download the product click here.
jQuery Video Player
Using the power of new HTML5 video tag as it’s video playing mechanism, igVideoPlayer™ completes the video playing facility for end-users by providing all the controls needed to interact with online streaming video content. All the standard video playing options like play, pause, mute, volume control facilities are all built-in to the control. The slider in the control bar reflects key information about the video, the thumb location represents how far along the video is the user, the filled area before the thumb is the content already watched and the bar fill area after the thumb is how much video is buffered on the client. You can also add description and title to videos that can provide more information about the video, which will disappear automatically when the user clicks play.
Figure: jQuery and HTML 5 based video player control with video control bar display w/ different player options.
To check out all the controls in action and download the product click here.
Developers can set up the video player such that the viewer gets the maximum display area without any unwanted elements blocking the video. The control bar will auto hide if the user is not interacting with the video and as soon as the video player detects mouse movement, the control bar will show up and the user can then interact with the video player. In addition, features like bookmarking and full-screen mode are a breeze to setup and completes the overall experience of a video player that one would expect.
Figure: jQuery and HTML 5 based video player control with full screen mode and bookmarking enabled.
To check out all the controls in action and download the product click here.
jQuery File Upload
Upload file contents to your server with the igFileUpload™ component. You can upload single or multiple files at the same time. It comes with a progress indicator letting the user know about the progress of file that is being uploaded including detail like the uploaded bytes and total file size. The file upload component uses the AJAX to upload files so that the user work is not interupted while file uploading is in progress.
igFileUpload can be customized to specify the number of files user is allowed to upload, and how many files can uploaded simultaneously at any given time, giving the developer to customize file uploading based upon the application usage. igFileUpload also gives the user and developer an option to cancel file uploading if he/she wants to do so.
Figure: jQuery based file upload controls with an ASP.NET MVC helper showing multiple files being asynchronously uploading to the server.
To check out all the controls in action and download the product click here.
Wrap Up
With Web standards becoming more solidified and widely accepted among the community, it is getting easier for a Web developer to build an application for one browser and get the same result across different browsers. jQuery with its 40% market share in the public Web site space and growing, has become the first-class JavaScript library of choice today among Web developers. Technologies like HTML5 and CSS 3 can be seen on the horizon, it makes the future of the Web even more optimistic. Infragistics with its core investment in these technologies is looking forward to continue to move along with the next wave of the Web and provides tools and controls to support Web developers building applications against these cutting edge technologies.
So, download the NetAdvantage for Web Developers CTP to try out these great jQuery client controls. Please take some time to explore our other products and services, and get in touch with us on our forums if you have any questions.
Copyright © 2010-2011 Infragistics, Inc. All Rights Reserved. Infragistics and NetAdvantage are registered trademarks of Infragistics, Inc. igGrid, igDataSource, igEditors, igMaskEditor, igDateEditor, igCurrencyEditor, igNumericEditor, igPercentEditor, igTextEditor, igRating, igFileUpload, and igVideoPlayer are trademarks of Infragistics, Inc. All other trademarks or registered trademarks are the property of their respective owner(s).
My name is Murtaza Abdeali, also known as Taz, I am the Product Manager for Web Clients at Infragistics. I manage our ASP.NET product line.
I started at Infragistics in 2004 as a Developer Support Engineer, where I enjoyed being at the fore front of all the product lines, talking directly to customers, answering questions, solving simple and complex problems.
Then I joined our Evangelism department as a Technical Evangelist, where I travelled all over the world visiting customers, speaking with them face to face, talking about the product and technologies around. During the same period, I also did some consulting and training gigs. This was the time where I got to see Infragistics customers actually using the product within their applications and being able to help with their problems in real time.
In my current role as a Product Manager, I still do all of the above, but I am also responsible for setting the direction for our ASP.NET product. So, if you want to discuss anything regarding the ASP.NET toolset, please feel free to contact me: murtazaa@infragistics.com
Submit an article or tip
