WebGrid 10 is a major release that sports a completely redesigned user interface based on the new Unified Theming framework introduced in the WebUI Studio 2016 release. Building on its advanced functionalities, WebGrid 10 leverages the latest web technologies and front-end trends optimized for modern browsers like Chrome, Safari, and Edge. The new WebGrid lets you rapidly add powerful data presentation to your ASP.NET web project with simple drag-drop, while delivering beautiful design that naturally suitable to modern web applications today.
At the core, WebGrid undergoes fundamental architectural changes by minimizing server-side dependencies and strongly focusing on client-side capabilities, allowing it to rapidly evolve with the advancement of web technologies. This release adds full support for external CSS frameworks such as Bootstrap and Foundation. Unlike the previous versions, every WebGrid element is now style-able through CSS, including static, dynamic and interactive elements.
More importantly, this release adds a new modern theme that you can apply with the simplicity of xcopy. Beyond just basic styling, the modern theme includes comprehensive styling for more than hundreds of UI elements available in WebGrid. In addition, this release provides full support for latest major browsers including Internet Explorer 11, Edge, Safari for Mac, Chrome 47 and Firefox 42.
This page guides you through the new features and enhancements available in WebGrid 10. Click the links below to jump to the section of your interest.
Unified Theming Support
In this release, WebGrid has been significantly enhanced to fully support unified theming capability introduced in WebUI Framework 4. In general, these are the key area of improvements to support unified theming:
- Inline styles are now removed in favor to CSS styles which reduce markup and page output in overall.
- Instance-level styles and default stylesheets are no longer rendered, enabling the page to load much faster.
- Provide attribute-based states for streamlined styling through CSS3 selectors.
- Enhanced both server-side and client-side rendering to support modern HTML5 and CSS3 markup/syntax.
For more information, see Unified Theming.
New Unified Modern Theme
One of the biggest updates in this release is the introduction of brand-new modern theme for WebGrid. Building on the new unified theming framework, WebGrid's new theme leverages the most popular CSS framework, Bootstrap. Unlike previous versions, WebGrid automatically uses shared/common styles when the unified theming feature is enabled. When the common styles are modified, WebGrid and the other WebUI components that present similar semantic will be automatically updated.
At a glance, the WebGrid modern theme key highlights are:
- Based on Bootstrap 3.3
- Written in SCSS language
- Redesigned with clean and modern styles
- Meticulously designed, pixel-perfect styling on over 100+ elements and editors
- Control resources now use scalable vector graphic (SVG) in favor to low-res images
- Includes 150+ SVG icons designed exclusively for WebUI Studio
The following screenshot shows a basic WebGrid in action with the new modern theme.
70% less footprint when using hierarchical Grid. WebGrid now renders a super lightweight markup for expand and collapse indicator, as well as to the entire hierarchy indicators.
For more information about the theme features and how to apply the theme in your web projects, see WebGrid Theming Overview. To see the complete style reference available in the Modern Theme, see WebGrid Modern Theme Style Reference.
ColumnSet Designer
WebGrid 10 improved the web development experience further by bringing ColumnSet Designer to the WebGrid component editor for Visual Studio 2012 or higher. The designer also works perfectly when used in hi-dpi resolution display, including all interactivity such as drag-to-resize and ColumnSet automatic width calculation.
For more information about ColumnSet feature, see WebGrid ColumnSet.
Improved Data Editing Reliability
Data editing is one of the most fundamental functions in WebGrid. In this release, the data editing experience such as inline editing and keyboard navigation has been further perfected, allowing users to work with data in more natural and productive way.
In general, many improvements have been around these particular areas:
- Editing mode, particularly the inline editing experience.
- More accurate editors positioning optimized for modern browsers.
- Keyboard navigation when using arrow keys, Tab and Shift+Tab.
- Synchronized cell focus and scrolling state.
To learn more about data editing in WebGrid, see Editing Data.
Improved Data Filtering Experience
In addition to many runtime enhancements, WebGrid 10 also includes a redesigned filter bar that is more responsive and works identically across major modern browsers.
To learn more about data filtering in WebGrid, see Filtering Data.
Improved Interaction Performance
In previous versions, when the page containing WebGrid has a lot of stylesheet classes, interaction such as row selection will become slower as more stylesheets are included. This release includes major re-engineering to the interaction core, resulting in real-time interaction regardless of the stylesheet size. This improvement is instrumental in creating responsive user experience for large-scale WebUI application.
Latest Browser Support
WebGrid 10 has been significantly improved to support the following browsers:
- Internet Explorer 11
- Edge
- Safari Mac 9.0
- Chrome 48
- Firefox 44
Updates and fixes in this release
This release includes the following updates and bug fixes:
Loading …
