Mehul Harry's DevExpress Blog

This Blog

News


Mehul Harry is the DevExpress Web Program Manager. Follow him on twitter: @Mehulharry

Subscribe (RSS, Email)

Archives

  • Easy Theme Customization for DevExpress ASP.NET Controls

    Back in 2014, I announced a new set of themes for our DevExpress ASP.NET and MVC controls. It goes without saying that these themes looked great, but, perhaps even better, they allowed you to easily customize the theme's base font and color. This was a huge improvement over our traditional 'classic' themes because you could now quickly create a version of one of the new themes to suit your business needs and design.

    The bad news was that, in order to take advantage of this feature, you had to use our 'Theme Builder' tool.

    Settings - Web.Config, API, etc.

    So now for some good news! You can now simply set that base font and color for DevExpress ASP.NET and MVC controls directly from the web.config file or by using our API! The following examples work with DevExpress ASP.NET v16.2 and above.

    Web.config

    In your web.config, specify the 'baseColor' and 'font' settings in the themes of DevExpress section:

    <configuration>
      ...
      <devExpress>
        ...
        <themes enableThemeAssembly="true"
                     styleSheetTheme=""
                     theme="Metropolis"
                     customThemeAssemblies=""
                     baseColor="Green"
                     font="30px Calibri" />
        ...
      </devExpress>
      ...
    </configuration>

    Programmatic API

    You can also set the base font and color using API calls:

    protected void Application_PreRequestHandlerExecute(object sender, EventArgs e) {
        ...
        DevExpress.Web.ASPxWebControl.GlobalThemeBaseColor = "Green";
        DevExpress.Web.ASPxWebControl.GlobalThemeFont = "30px 'Calibri'";
    }

    Or in ASP.NET MVC you use the following approach:

    protected void Application_PreRequestHandlerExecute(object sender, EventArgs e) {
        ...
        DevExpress.Web.MVC.DevExpressHelper.GlobalThemeBaseColor = "#00FF00";
        DevExpress.Web.MVC.DevExpressHelper.GlobalThemeFont = "30px 'Calibri'";
    }

    The value formats for the color work with RGB, Hexadecimal, and Color names too. Learn more here.

    Limitations

    Only the following themes support the changing both the base color and font: Mulberry, Moderno, Metropolis, Metropolis Blue, iOS, Material, and Material Compact.

    These classic themes allow you to set the base font only: Aqua, Black Glass, Glass, Office2003Blue, Office2003Olive, Office2003Silver, PlasticBlue, RedWine, SoftOrange, and Youthful.

    Documentation

    Check out this excellent help documentation topic that gives even more detail:

    Theming > Changing Theme Base Color and Font Settings

    Demos

    Try out the latest DevExpress ASP.NET demos online and experience the theme parameters change dynamically. You can use the theme options on the top right:

    Then, drop me a line below on what you think about the easy way to customize a DevExpress ASP.NET theme. Thanks!


    Your Next Great .NET App Starts Here

    Year after year, .NET developers such as yourself consistently vote DevExpress products #1.

    Experience the DevExpress difference for yourself and download a free 30-day trial of all our products today: DevExpress.com/trial (free support is included during your evaluation).

  • DevExtreme React Now Available on GitHub

    DevExtreme React Grid

    In May 2017, we announced our CTP of the DevExtreme React Grid. And since then, we've released the DevExtreme React Grid on GitHub in the DevExtreme Reactive repo:

    Your feedback helps us improve these controls. So please click the 'Star' and 'Watch' links on this repo and let us know your thoughts. You'll also get updates about other future DevExtreme React controls too. So by 'watching' the repo you'd get the latest updates like this: we're about to release new Material UI templates and demos:

    DevExtreme React Grid - Material UI

    Distribution

    The DevExtreme React Controls are only available on the NPM distribution and the development will be on this GitHub repo. They will not be included in the DevExtreme installation that you find at https://js.devexpress.com. The React framework and other supporting libraries are on GitHub and we intend to be in the same ecosystem. In fact, we've also moved DevExtreme to GitHub but DevExtreme will still have an installation available at https://js.devexpress.com.

    Webinar Recap

    Check out the recent 'New in v17.1: DevExtreme' webinar to learn about the DevExtreme React Grid:

    More controls!

    The DevExtreme React Grid was only the first of other controls that we have planned. What's next? Stay tuned to find out.

    Please try the excellent DevExtreme React Grid and then let us know what you think of it.

    Email: mharry@devexpress.com

    Twitter: @mehulharry


    Create highly responsive web apps for touch-enabled devices and traditional desktops.

    From desktops to mobile devices, DevExtreme HTML5 Data Grid delivers the flexibility you’ll need to build apps that reach the widest audience and deliver touch-first user experiences to power your next great interactive website.

    Download a free and fully-functional version of DevExtreme now: Download DevExtreme

  • ASP.NET AJAX Control Toolkit - v17.1.1 - Security Improved and Issues Fixed

    As part of our continuous effort to find and patch security issues, we recently discovered a few vulnerabilities in the ASP.NET AJAX Control Toolkit library.

    We have fixed and patched these vulnerabilities along with a few public issues in the v17.1.1 release that is now available.

    I recommend that you upgrade to the latest ASP.NET AJAX Control Toolkit release as soon as possible.

    Security Vulnerabilities

    We discovered and fixed the following three major vulnerabilities:

    • Uploading a file with an arbitrary extension
    • A DoS attack on the server where AjaxFileUpload control is located
    • It is possible to obtain info about files outside the temporary upload folder

    To protect those websites that may not have upgraded to the latest release, we have not published the details of these vulnerabilities on GitHub.

    Bug fixes

    We've also patched three issues that were reported to us on GitHub:

    AjaxFileUpload Issue

    • Item 327 - AjaxFileUpload events have an invalid sender

    HtmlEditorExtender Issues

    • Item 320 - HtmlEditorExtender generates an extra "br" tag
    • Item 324 - HtmlEditor does not show toolbar images when EnablePartialRendering=true

    Update to v17.1.1 (or higher)

    Please upgrade your ASP.NET AJAX Control Toolkit version to the latest version. You can download our useful installer here:

    Or use the Nuget libraries:

    ASP.NET AJAX Control Toolkit Nuget packages

    Then give us your feedback on GitHub.

    Try DevExpress ASP.NET

    We’d like to thank you for installing the DevExpress Edition of the AJAX Control Toolkit and look forward to your feedback as you begin using it.

    When we took over the fabulous ASP.NET AJAX Control Toolkit, our goal was to reach those web developers who want to use great web user interface controls for their web projects and DevExpress ASP.NET provides that and much more.

    Try the free DevExpress 30 day trial.

    Email: mharry@devexpress.com

    Twitter: @mehulharry


    Your Next Great .NET App Starts Here

    Year after year, .NET developers such as yourself consistently vote DevExpress products #1.

    Experience the DevExpress difference for yourself and download a free 30-day trial of all our products today: DevExpress.com/trial (free support is included during your evaluation).

  • HTML5 - New JavaScript DropDownBox Widget (DevExtreme v17.1)

    Now that the v17.1 release is available, you can try out a new client-side JavaScript UI widget that's available with DevExtreme, DropDownBox:

    The new DropDownBox widget combines a dropdown and a text field. And it let's you select items like our SelectBox widget but it allows you to extend it's functionality with templates. With the DropDownBox, you can embed a DataGrid, TreeList, TreeView, etc. And the embedded Grid or TreeList widget can filter, search, sort, and edit the data.

    DevExtreme - Drop Down Box

    Try the demo online here: DropDownBox Demo - Single Selection

    The DropDownBox widget is lightweight and still comes packet with these great features:

    • Binding to all DevExtreme dataSources, arrays, as well as binding through WebService and OData services
    • Client-side templates
    • Full keyboard support
    • Validation
    • Support for all major tablets and mobile browsers: (Chrome, Mozilla, Android’s default browser, iOS Safari, Opera)
    • Deferred rendering
    • Right-to-left support
    • WAI-ARIA Accessibility support

    Get started with the new DropDownBox widget by watching this short video:

    Then download the latest DevExtreme and try the new DropDownBox widget in your projects.


    Create highly responsive web apps for touch-enabled devices and traditional desktops.

    From desktops to mobile devices, DevExtreme HTML5 Data Grid delivers the flexibility you’ll need to build apps that reach the widest audience and deliver touch-first user experiences to power your next great interactive website.

    Download a free and fully-functional version of DevExtreme now: Download DevExtreme

  • Grids & TreeList Enhancements - DevExpress ASP.NET (v17.1)

    Check out these two new enhancements to our ASP.NET Grid controls that will help your end-users:

    Command Toolbar

    A new command toolbar has now been integrated into our DevExpress ASP.NET Grid, Card View, Vertical Grid, and TreeList Controls. The new command toolbar is great for your users because they will have access to common commands like edit buttons or search filtering in a convenient location (at the top of the GridView). By having them in the toolbar, your Grid will also save space within the control:

    DevExpress ASP.NET GridView - Command Toolbar

    The new toolbar can be enabled with default buttons or you can customize it by adding your most frequently used grid commands for quick access. You can also add or remove toolbars, change their position, and contents. Toolbar items can trigger standard grid commands (e.g. data item editing, deleting, creating, etc.) and any custom actions too.

    And because it's part of the GridView, the new command toolbar supports any of the beautiful themes that are provided by DevExpress ASP.NET Controls.

    Touch-Enabled Customization Dialog

    We've also improved the end-user experience for customizing our GridView on mobile devices. A new Customization Dialog allows you to apply column level data shaping operations with absolute ease when using touch-enabled devices. The new dialog is optimized for tablets, smartphones, and desktops/laptops with touch screen displays. This modal dialog has larger touch-targets and allows your end-users to easily customize the following grid options:

    • Column Chooser
    • Sorting
    • Filtering
    • Grouping

    DevExpress ASP.NET GridView - Touch Enabled Customization Dialog

    Both of these features are available for our ASP.NET WebForms and MVC versions of the controls mentioned above. And they are part of the v17.1 release.

    Which of the enhancements are you most excited about? Drop me a line below.

    Thanks!


    Your Next Great .NET App Starts Here

    Year after year, .NET developers such as yourself consistently vote DevExpress products #1.

    Experience the DevExpress difference for yourself and download a free 30-day trial of all our products today: DevExpress.com/trial (free support is included during your evaluation).

  • HTML5 Scheduler - Performance Enhancements (Coming soon in v17.1)

    One of our primary goals for DevExtreme in 2017 was to improve our HTML5 Scheduler's performance. I'm happy to report that the DevExtreme Scheduler's client-side rendering performance is faster than ever. Check out the difference when compared to our previous v16.2 release:

    DevExtreme Scheduler - v17.1 - Performance Improvement

    Rendering Improvements

    We've improved our HTML 5 Scheduler widget's rendering logic. Previously, any action with a single appointment always re-rendered all appointments displayed in the current view. With the improved logic in the v17.1 release, appointments are only re-rendered when one of the following occurs:

    • Dragging an appointment
    • Resizing an appointment
    • Changing an appointment using the appointment form
    • Adding an appointment
    • Deleting an appointment

    These improvements provide a better end-user experience. The changes also make the DevExtreme Scheduler as fast (and faster in some cases) than the competition. For example, here's comparison with other popular calendar/scheduler widgets when 'creating a single appointment':

    DevExtreme Scheduler - v17.1 - Performance Improvement

    What do you think about the DevExtreme Scheduler's performance improvements? Drop me a line below.

    Email: mharry@devexpress.com

    Twitter: @mehulharry


    Create highly responsive web apps for touch-enabled devices and traditional desktops.

    From desktops to mobile devices, DevExtreme HTML5 Data Grid delivers the flexibility you’ll need to build apps that reach the widest audience and deliver touch-first user experiences to power your next great interactive website.

    Download a free and fully-functional version of DevExtreme now: Download DevExtreme

  • DevExpress React Controls - New Data Grid (coming soon)

    A couple of years ago, Facebook released React, 'a JavaScript library for building user interfaces'. It's been gaining popularity since its release and many developers have asked us, "when will DevExpress support the React library?" Well, we're hyped about React too and I've got great news!

    I'm happy to announce that we've been working on a new Data Grid for the React library. We're calling it the 'DevExtreme React Grid' and it'll be available in the coming weeks as a community technology preview (CTP).

    DevExpress DevExtreme - DevExtreme React Grid

    We're starting with the Data Grid and we have plans to provide even more controls going forward. Now, let's dig into how we designed our React control(s) and how they can help you.

    Native not wrapper

    Our new DevExtreme React Grid is a native control for the React library. While time consuming, we decided to create a new Data Grid from scratch. An easier approach would have been to re-use the existing (and excellent) DevExtreme Data Grid widget and simply provided a wrapper. However, we listened to your feedback about how you prefer native controls and we agree. Native controls work better for React's architecture.

    Creating 'native' React components instead of jQuery wrappers provides benefits like:

    • Can be used in isomorphic apps (server-side + client-side);
    • Utilizing React built-in performance optimization with help of immutable state
    • Stateless (controlled) mode is available for using in Redux-based apps and state persistence.
    • Lightweight due to composable architecture and no extra dependencies (such as jQuery)
    • API is familiar to React developers
    • Leverage "Virtual DOM" - allows React to perform efficient DOM updates and get great client-side performance.

    So, to provide you the best UI experience and take advantage of React's features, we are building 'native' React components. To be fair, wrappers are great in some scenarios. For example, the DevExtreme ASP.NET MVC Controls are really the DevExtreme client-side JavaScript widgets that are wrapped as ASP.NET MVC controls. So they provide you the benefit of using client-side DevExtreme widgets as ASP.NET MVC controls in the ASP.NET MVC and .NET Core frameworks.

    Themes & other components

    Bootstrap

    For themes, we've decided to integrate the popular Bootstrap front-end framework. This allows you to use any compatible Bootstrap 3 theme that's available in the vast Bootstrap ecosystem.

    It also means that our DevExtreme React Grid works seamlessly with other Bootstrap-based components available in the popular React-Bootstrap library. Currently, we only offer the Data Grid and no 'simple' components such as editors, buttons, etc. So, you can start building your React app using 'simple' React components from open-source libraries like React-Bootstrap. Then make-it-awesome by including our rich business React components like our DevExtreme React Grid.

    Material-UI

    We're also working on supporting the popular open-source implementation of the 'Material UI' concept for React, Material-UI library. Like the Bootstrap React components, you can also use 'simple' Material UI React components from this library and then add our rich business React components (Data Grid, etc).

    Both of these technologies will allow you to apply themes easily and provide simple components that are not in our React component set. Basically, we want to complement the existing popular UI libraries for React. This saves you time when you need simple controls and powerful DevExpress React controls.

    Templates

    Our DevExtreme React Grid will also provide UI templates that allow you to modify, extend, and customize the markup that is rendered by our DevExtreme React Grid.

    Features === Plugins

    Our DevExtreme React Grid is packed with great features like:

    • Editing - Create/Update/Delete
    • Data Sorting and Grouping
    • Filter Row
    • Detail Row
    • Paging
    • Multiple Row Selection
    • Virtual Scrolling
    • Templates

    We're also looking into adding more features like: Column resizing/reordering, column chooser, fixed columns/rows, header filter, bands, and more.

    Composable & Extensible

    The Data Grid features listed above will not be part of the grid. Typically, features like editing are included in the component and you simply enable or disable them via a property. However, our DevExtreme React Grid will use a 'Composable and Extensible Plugin-based Architecture'. Therefore, the features are plugins and you enable them through the source code:

    DevExpress - DevExtreme React Grid - Plugins

    This approach has the following benefits:

    1. Our DevExtreme React Grid will be lighter because it will only load the features that you need.
    2. Plugin architecture allows you to extend our DevExtreme React Grid with custom plugins. If you want a feature that is not supported by our grid then a custom plugin can be written to extend the grid's functionality.

    Performance

    By building our grid natively in React, we've achieved outstanding performance. We researched and incorporated the performance tricks and best practices provided by the React team. In fact, it's based on a functional approach that utilizes immutability and pure functions. Our 'DevExtreme React Grid' is fast:

    DevExpress - DevExtreme React Grid - Fast Performance

    To see it in action and learn more, be sure to sign up for the webinar.

    Upcoming webinar

    Sign up for our upcoming webinar where I'll talk about our DevExtreme React Grid:

    Register for webinar

    What do you think about our new DevExtreme React Grid? Drop me a line below.

    Email: mharry@devexpress.com

    Twitter: @mehulharry


    Create highly responsive web apps for touch-enabled devices and traditional desktops.

    From desktops to mobile devices, DevExtreme HTML5 Data Grid delivers the flexibility you’ll need to build apps that reach the widest audience and deliver touch-first user experiences to power your next great interactive website.

    Download a free and fully-functional version of DevExtreme now: Download DevExtreme

  • HTML5-JavaScript DataGrid Enhancements (v17.1)

    Check out these two new features of the powerful DevExtreme DataGrid widget in the v17.1 release.

    Advanced Column Resizing

    You now have two choices of how the DataGrid will resize columns:

    • widget - modifies the width of the entire widget. In other words, the widget itself will grow or shrink when a column is resized.
    • nextColumn - the widget width stays the same when a column is resized but instead the column immediately to the right will expand or contract.

    This gif shows the two options in action:

    DevExtreme DataGrid - Column Resizing

    You can still control the minimum column size using the columnMinWidth and column.minWidth options.

    Popup Edit Form

    A new popup edit form will display a modal popup that provides your end-users an alternative way to edit the grid's data:

    DevExtreme DataGrid Popup

    By default, the Popup Edit Form is auto-generated based on column settings, but you can customize it through the options or redesign it using templates.

    And both these features are available for the new TreeList widget as well.

    What do you think about the new DevExtreme DataGrid enhancements? Drop me a line below.

    Email: mharry@devexpress.com

    Twitter: @mehulharry


    Create highly responsive web apps for touch-enabled devices and traditional desktops.

    From desktops to mobile devices, DevExtreme HTML5 Data Grid delivers the flexibility you’ll need to build apps that reach the widest audience and deliver touch-first user experiences to power your next great interactive website.

    Download a free and fully-functional version of DevExtreme now: Download DevExtreme

  • New TreeList Widget - HTML 5 Client-Side JavaScript - DevExtreme (v17.1)

    In the v17.1 DevExtreme release, we're introducing a new HTML 5 client-side TreeList widget!

    The TreeList is a widget that displays data from a local or remote source in the form of a multi-column tree view. Basically, the TreeList has almost all the features and functionality of the excellent DevExtreme DataGrid but in a tree-style (i.e. hierarchical) layout:

    DevExtreme TreeList

    We also offer the TreeView widget, which is great for navigation purposes, but a TreeList is richer and provides more powerful features like data editing.

    Features

    The TreeList is packed with the following features:

    • Powerful databinding – the TreeList supports binding to data sources containing hierarchical or plain data.
    • Virtual mode and virtual scrolling – the TreeList can show large amount of data with good performance
    • Data Editing and Input Validation
    • Data Filtering and Search
    • Data Sorting
    • Single and Multiple Row Selection
    • Fixed and Band columns
    • Column Chooser
    • Column Resizing and Reordering
    • Keyboard Navigation, Right-To-Left and WAI-ARIA support
    • Adaptability
    • And more...

    Get Started

    Watch this five and half minute video that shows you how to get started with the new DevExtreme TreeList widget:

    Angular, ASP.NET MVC, .NET Core, & More

    DevExtreme widgets integrate well with frameworks and libraries like Angular, jQuery, ASP.NET MVC, and more.

    DevExtreme Integration

    What do you think about the new DevExtreme TreeList widget? Drop me a line below.

    Email: mharry@devexpress.com

    Twitter: @mehulharry


    Create highly responsive web apps for touch-enabled devices and traditional desktops.

    From desktops to mobile devices, DevExtreme HTML5 Data Grid delivers the flexibility you’ll need to build apps that reach the widest audience and deliver touch-first user experiences to power your next great interactive website.

    Download a free and fully-functional version of DevExtreme now: Download DevExtreme

  • Announcing the DevExtreme MVC Controls for ASP.NET MVC and .NET Core - Available in v17.1

    I'm happy to announce that the official release of our DevExtreme MVC Controls for ASP.NET MVC (v3 and higher) and .NET Core (v1.0 and v1.1) is available in the v17.1 release. We started this journey to bring the versatile client-side functionality of our DevExtreme JavaScript widgets to ASP.NET MVC almost a year ago. Some developers prefer this approach over the other excellent ASP.NET MVC Controls that we offer. If you want to catch up on some of the past news about these controls then please take a look here: 'DevExtreme MVC Controls Blog Posts Archive'.

    By using the 'DevExtreme MVC Controls' you get:

    • Every Feature of DevExtreme in Your MVC App
    • DevExtreme Widgets with Razor Code Syntax
    • Seamless Data Binding
    • Client-Side Data Validation
    • 200+ Demos
    • Visual Studio Integration

    Part of ASP.NET Subscription

    The DevExtreme MVC controls are available as part of the ASP.NET Subscription (v17.1) installation. Learn more about our subscriptions here.

    Controls not wrappers

    We've been referring to our new MVC offering as 'wrappers' because they are client-side JavaScript widgets that are encapsulated in a server-side ASP.NET MVC control. 'Wrappers' was an internal codename. At DevExpress, a user interface (UI) control is something that has properties, features, functionality, UI, etc. And that's what these controls offer your ASP.NET MVC projects. So, henceforth, we'll officially call them the 'DevExtreme MVC Controls'.

    v17.1 release:

    It takes a lot to bring a suite of controls to release state and you'll be happy to know that we've got the important bits for you covered:

    • Documentation
    • Technical Demos that cover 200+ use-case scenarios.
    • Integrated Project Tools allow you to add DevExtreme controls to existing ASP.NET MVC and .NET Core projects.
    • Visual Studio® 2017 Support
    • C# and Visual Basic Support
    • Strongly-Typed 'EditorFor' Helpers for DevExtreme Editors

    EditorFor Helpers

    This was a necessary piece of functionality that we wanted to make sure was there before release. 'EditorFor' helpers simplify the data binding of DevExtreme editors to model properties. 'EditorFor' helpers auto populate widget properties (e.g. name, value, placeholder, validation settings, etc.).

    More to come

    What's great about these controls is that any time we add or improve the core DevExtreme JavaScript widgets, then these DevExtreme MVC Controls get the benefits too. For example, we're introducing a TreeList widget which will be part of these MVC controls too.

    What do you think about the DevExtreme MVC Controls? Drop me a line below.

    Email: mharry@devexpress.com

    Twitter: @mehulharry


    Create highly responsive web apps for touch-enabled devices and traditional desktops.

    From desktops to mobile devices, DevExtreme HTML5 Data Grid delivers the flexibility you’ll need to build apps that reach the widest audience and deliver touch-first user experiences to power your next great interactive website.

    Download a free and fully-functional version of DevExtreme now: Download DevExtreme

1
2 3 4 5 6 7 8 9 10
LIVE CHAT

Chat is one of the many ways you can contact members of the DevExpress Team.
We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.

If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

FOLLOW US

DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, ASP.NET, WinForms, HTML5 or Windows 10, DevExpress tools help you build and deliver your best in the shortest time possible.

Copyright © 1998-2017 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners