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

  • Try the new DevExpress ASP.NET Bootstrap Controls Demos (Preview)

    I'm happy to announce that you can now experience the upcoming DevExpress Bootstrap Controls with the new online demo preview!

    The DevExpress ASP.NET developers have been working hard on a new set of ASP.NET WebForms controls that are Bootstrap compatible. To learn more about these controls, read the initial announcement post.

    Experience the demos online now:

    Demo Details

    These slick new demos let you try out the upcoming Bootstrap Grid, Editors, and Navigation controls. You'll see some of the major features we've added like sorting, filtering, editing, summaries, templates, and more.

    Use the buttons at the top right to change the theme. We've incorporated several popular Bootstrap themes:

    Then change the layout and test the responsive behavior:

    You can also scan the QR Code and load these demos on your mobile device and experience the demos from your smart phone or tablet device.

    Bootstrap Controls Overview

    The DevExpress Bootstrap Controls are AJAX controls for ASP.NET WebForms that are rendered using Bootstrap components. These controls extend the classic DevExpress ASP.NET WebForms controls and target the ASP.NET WebForms platform while using Bootstrap as a front-end framework. The DevExpress Bootstrap Controls are highly configurable and support numerous customization scenarios.

    The fundamental feature of DevExpress Bootstrap controls is their native rendering to Bootstrap CSS classes. When a DevExpress Bootstrap control renders its markup, the control does not strictly define its client-side presentation. Instead, the control’s presentation is supplied by the Bootstrap framework and Bootstrap themes.

    This approach provides these advantages:

    • Out-of-the box integration with Bootstrap themes supplied by Bootsrap contributors and third-party developers
    • Application-level adaptivity
    • Out-of-the-box accessibility
    • Consistent look-and-feel across browsers and devices

    The inherent advantage of using Bootstrap for constructing web user interfaces is that it allows for developing responsive layouts and provides your web application production-quality visual design from the start.

    The markup to which the controls are rendered is based on standard Bootstrap classes and is intended to be integrated into Bootstrap-powered page layouts. As the result, the controls behave as an integral part of the layout – they scale to the display size, use the look-and-feel settings from the current Bootstrap theme and visually merge with the page.

    For example, the Popup control is rendered as a Bootstrap modal dialog:

    https://community.devexpress.com/blogs/aspnet/16.2Release/BootstrapPopupRenderModalDialog.png

    What's next?

    Right now we're looking for your feedback on these demos. Let us know if you spot an error in a browser or if something is not rendering or behaving correctly. Please report your feedback to our support center with a heading that looks like "Bootstrap demo preview error: [abc]".

    Our next step is to provide a preview install that you can test in your Visual Studio environment.

    The new Bootstrap controls are not tied to any specific DXperience version (yet) so we'll likely release them in a future minor version. Most of our ASP.NET developers are still hard at work on the next major DXperience ASP.NET release of v16.2 too.

    If you'd like to get updates on the DevExpress Bootstrap Controls, then please sign up here:

    Register Now and Be the First to Get the Preview Build

    What do you think of the new DevExpress Bootstrap Controls demo? 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).

  • ASP.NET Spreadsheet - Performance Enhancement (coming soon in v16.2)

    Performance improvements are coming to the DevExpress ASP.NET Spreadsheet control in the v16.2 release.

    1. Page Rendering Improved

    We have improved the performance of the DevExpress ASP.NET Spreadsheet control. In particular, we moved the rendering of the drop-down ASPxRibbon menu’s items from the server-side to client-side. This has reduced the control’s rendering size by more than 50 percent and decreased the page load time:

    https://community.devexpress.com/blogs/aspnet/16.2Release/spePageRenderTimes.png

    2. Package Size Improved

    We have significantly reduced the size of the JSON synchronization package by transferring default styles to the client-side. This allows us to reduce the synchronization package size by more than 50% in a complex document:

    https://community.devexpress.com/blogs/aspnet/16.2Release/spePackageSize.png

    3. Command Execution Time Improved

    These page rendering and package size improvements will reduce the document loading time between the server and client by approximately 15% to 25%. Command execution time will be improved by 10% to 15%.

    https://community.devexpress.com/blogs/aspnet/16.2Release/speCommandExecTime.png

    4. Disable unused UI for further improvements

    We have expanded the user interface customization for the DevExpress ASP.NET Spreadsheet control. This allows your end-user better control over what UI elements and functionality is displayed.

    To further increase performance of the DevExpress ASP.NET Spreadsheet control, you can disable unused or unnecessary UI functionality. For example, in the images below, the 'Ribbon', Formula Bar', and 'Sheet Tabs' functionality is disabled. As you can see, the core Spreadsheet functionality still remains and those missing UI elements can be enabled with a click.

    https://community.devexpress.com/blogs/aspnet/16.2Release/ASPxSpreadsheet1.jpg

    https://community.devexpress.com/blogs/aspnet/16.2Release/ASPxSpreadsheet2.jpg

    What do you think of these improvements to the DevExpress ASP.NET Spreadsheet control? 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).

  • US Election Results - Angular 2 and DevExtreme Data Visualization Demo

    To help illustrate some of the data visualization capabilities of DevExtreme, we’ve just published the source for our Presidential Election Results Demo App on GitHub. As you can see in the screenshots below, the app leverages our HTML 5 JavaScript Map widget and a Bar Chart widget:

    Click image for larger size

    Online demo: DevExpress Election Results Demo

    The demo is built using the Angular 2 framework and DevExtreme widgets. Last week, we released the WinForms Election Results Demo that uses our WinForms Map and Grid controls. We designed this new web demo with DevExtreme Data Visualization widgets to show you that DevExpress helps you to create stunning apps across different platforms.

    How it's made?

    The full source code and data for this demo is available on Github. To run the demo on your local machine, execute these steps:

    1. Download or git clone the respository
    2. npm install
    3. npm start
    4. navigate to http://localhost:4200/ (if your browser is not launched automatically)

    Let's dive into how this demo is built.

    Shared Data

    The data for this demo is the same data that we used in the WinForms Election Demo. The state and county map data comes from the U.S. Census Bureau. The election data from the Federal Election Commission and The Guardian. Election data was normalized and stored in JSON format.

    Step 1 - Create the App

    The best way to create new Angular 2 application is to use Angular CLI. Install it globally using the npm install -g angular-cli console command. Then execute the ng new dx-election to create an application. You only need to do this command once.

    Step 2 - Generate Components and Services

    Each UI part of the demo's user interface is a component in the Angular 2 app model. Therefore the 'year switcher' or the bar chart with vote totals are Angular 2 components using DevExtreme Data Visualization.

    To create a new component, we use the ng generate component console command. For example, ng generate component map generates the ".html", ".ts", and ".css" files in '/src/app/map' directory. Then three services were generated using command ng generate service. Each service provides the following data: states, counties, and votes.

    Step 3 - Add DevExtreme to the App

    Using DevExtreme widgets with Angular 2 requires that the appropriate npm package are installed. The npm install devextreme-angular --save command adds all necessary files and includes the devextreme-angular package in the package.json file.

    Theme stylesheet files should be included in the 'angular-cli.json' file. The widgets used in the app should be imported in the 'src/app/app.module.ts' file. Then all imported widgets can be used as application components.

    Step 4 - Work with Binary Data in DevExtreme VectorMap

    DevExtreme provides Vector Map utilities that can be used to work with binary data. We transformed the binary map data to a JavaScript object (see 'src/app/maputils.ts') using a single method: DevExpress.viz.vectormaputils.parse. Next we added election data to the object to colorize the map according to vote results.

    Then the '<dx-vector-map>' tag is added to the component markup file. The [layers] attribute describes states and counties layers and binds the resulting data source with map and election data to the vector map widget. This provides the Vector Map to drill down by state and counties:

    Step 5 - Use DevExtreme Charts

    A DevExtreme Bar Chart is used to show vote percentages by state (or county). A DevExtreme Full Stacked Bar Chart shows national results of electoral and total votes. Both app components get the data from the VotesService. Component markup contains tag with widget options and data bindings.

    Try it today

    Try the demo online. Then download the full source code and drop me a line below. What do you think of this slick new demo?

    Candidate photos courtesy of Gage Skidmore.


    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

  • Watch the webinar for TypeScript and DevExpress ASP.NET and MVC

    Check out the webinar video on how to use TypeScript with DevExpress ASP.NET and MVC controls:

    In the video, you'll learn:

    1. A short introduction to TypeScript by our evangelist, Paul Usher.
    2. Then I demonstrate how to get started using TypeScript with DevExpress ASP.NET controls.

    I'd love for you to watch the video, try the new DevExpress TypeScript definitions with your DevExpress ASP.NET projects, and then give us your feedback. You can email me, drop me a comment below, or even tweet me.

    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).

  • TestCafe now available in Free/Open Source & Commercial Studio Versions

    TestCafe

    Today, I am excited to announce two new TestCafe projects:

    1. TestCafe - An open-source project that is now hosted on GitHub with an MIT license. It's a free and lite version of TestCafe that exposes the core functionality of TestCafe!
    2. TestCafe Studio - Our commercial product that includes the open-source (core) TestCafe framework with the added benefits such as a powerful user interface, a visual test recorder, and full DevExpress support.

    Therefore, starting today, we have split TestCafe into a lite (and free) open-source version and the new TestCafe Studio. The current commercial version will officially become TestCafe Studio in early 2017 when we introduce a new desktop-based IDE (more on this below).

    And this move has benefits for both the open-source developers and the paid TestCafe customers. Read on to learn more.

    Open-source, Free, MIT, FTW!

    By open-sourcing TestCafe, it allows more developers and testers to use the excellent functional testing framework in their projects. A free framework with an MIT license will encourage an active open-source community. And an active open-source community of TestCafe users will help contribute code, share and discuss ideas.

    TestCafe Studio, which uses the open-source TestCafe framework internally, will be developed faster, be more robust, and gain the features users need the most. TestCafe Studio also comes with full support from DevExpress support engineers.

    We will monitor TestCafe on GitHub and our developers will interact with the community. Of course, we'll provide framework updates, take pull requests, and address issues. However, if you need full guaranteed support within a business day, then you will need a TestCafe Studio license.

    Node.js

    The new open-source TestCafe framework is a native node.js solution. This is great for Nodejs based web applications because you can simply npm install testcafe and get a complete functional testing framework.

    And it allows you to run tests from the command line or via the JavaScript API. And you can output Reports to the console or directly to a file.

    The framework also has a new test API and syntax, which is compatible with current tests.

    TestCafe Studio UI vs Test Cafe CLI

    The key difference between the TestCafe Studio and TestCafe open-source framework is the Visual tools. Only TestCafe Studio includes:

    • Visual test recording
    • UI for
      • Launching tests
      • Analyzing test results
      • Managing test base
      • Controlling the remote browsers
      • Settings and configurations
    • Full Support

    The free open-source TestCafe framework includes a great CLI (command line interface). Therefore, you can still write the same powerful tests and get the resulting reports. However, they will be through the CLI.

    Get started now!

    Try the open-source TestCafe:

    If you'd like to try the current visual-based TestCafe, then download a free 30 day trial. This TestCafe will soon be renamed as TestCafe Studio and existing customers will be upgraded automatically.

    Cross-platform (Desktop) Studio

    We're working on a new Commercial version of TestCafe! We expect to release it in the first quarter of 2017.

    While the current TestCafe UI is cross-platform, it only runs in the browser. We're working on a new cross-platform desktop application! Yes, a native desktop application for multiple operating systems. And it will have some major features, including:

    • Newly designed IDE-style interface where you can:
      • record
      • write
      • edit and run tests
      • analyze test results
      • manage the test base
      • access all the settings
      • and do everything you can do in the current version and more

    Feedback

    I would love to hear your feedback about this big TestCafe announcement. Leave me a comment below or email me directly: mharry@devexpress.com

    Thanks!


    Get Started Today

    And experience the TestCafe difference for yourself. Download a free 30-day trial today: testcafe.devexpress.com (free support is included during your evaluation).

  • How to add a Chart to your Client-Side PivotGrid (DevExtreme v16.1)

    A chart is a great way to visualize data. Did you know that you can easily add a chart to the DevExtreme PivotGrid widget? And the chart will update instantly with the PivotGrid:

    DevExtreme Pivot and Chart Integration

    In previous versions of DevExtreme (15.2 and earlier), you could display PivotGrid data with a chart but it was very complex and you had to write custom code.

    Starting with the v16.1 release, we introduced a new method for chart integration - bindChart.

    How does it work?

    To integrate the two widgets, first create new instances of PivotGrid and Chart, then call the bindChart method:

    var pivotGrid = $("#pivotContainer").dxPivotGrid(...),
          chart = $("#chartContainer").dxChart(...),
          integrationOptions = {...}
    pivotGrid.bindChart(chart, integrationOptions);

    The bindChart method accepts two arguments: a Chart instance and an object containing integration options. This allows you to adjust data fields, series, value formatting, panes and axes, and many others options.

    Try the online demo.

    Learn more in the DevExtreme documentation.

    This feature is a part of the DevExtreme v16.1 release. Thanks!


    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

  • How to Open a Microsoft Office Document with DevExpress ASP.NET Office Controls

    Getting started with the DevExpress ASP.NET Office Controls is easy. In a few of the upcoming blogs, I'll highlight some of the common getting started tasks with DevExpress ASP.NET RichEdit and Spreadsheet controls.

    One of the first things you'll likely want to do after adding a DevExpress ASP.NET Office control to your web project is to open a document.

    File System or Database

    There are two ways to load a document into a DevExpress ASP.NET office control. You can use the file system or load it from document storage (database).

    Note, the code example below reference the DevExpress ASP.NET Spreadsheet control, however, the same code applies to the DevExpress ASP.NET RichEdit control.

    Load from File System

    The DevExpress Office controls support various formats including docx, csv, pdf, xlsx, and more.

    To load or open a document (docx, pdf, xlsx, etc.) using the Server-side API, call the Open method:

    void ASPxSpreadsheet.Open(string pathToDocument)

    The pathToDocument) parameter represents the full the document path and filename in the File System. The pathToDocument also plays role of the document identifier - the DocumentID.

    The Open method also provides several overloads:

    DevExpress ASP.NET Spreadsheet - Open method

    Because these are server-side ASP.NET controls, the file system mentioned above is the one on your web server. End-users can upload a file to the working directory that you specify for the control to use. Then, call the open method and load the corresponding file into the DevExpress ASP.NET Office control.

    Take a look at this 'Custom Document Management' demo which has integrated the versatile DevExpress ASP.NET File Manager control. The File Manager control gives your end-users a visual layout of the server-side file system and allows them to upload files too.

    Load from Document Storage (Database)

    To load a document from the database, the DevExpress Office Controls provide stream and byte array parameters in the Open method:

    void ASPxSpreadsheet.Open(string documentId, DocumentFormat format, Func<Stream> contentAccessor)
    
    void ASPxSpreadsheet.Open(string documentId, DocumentFormat format, Func<byte[]> contentAccessor)
    

    Let's take a look at the parameters needed to retrieve a file (aka binary object) from your database.

    DocumentID

    The DocumentID parameter is simply a unique string and is used to load and save documents. The DocumentID is necessary when dealing with ASP.NET documents programmatically.

    If you've previously saved your DocumentID parameter to the database then you can use this ID for the open method.

    Or you can also generate a new unique ID using the following approach:

    private void CustomDocumentOpening() {
        var newUniqueDocumentId = Guid.NewGuid().ToString();

    DocumentFormat

    The DocumentFormat specifies the file format you want to open (xlsx, docx, etc.).

    Load Blob from Database

    After getting your DocumentID, you'll need to write some custom code that extracts the document (binary object) from your database.

    For example, here is how to retrieve it via a stream:

        // Open document from content in stream
        using(var stream = GetStreamFromCustomDocumentStorage()) {
            ASPxSpreadsheet1.Open(newUniqueDocumentId, DocumentFormat.Xlsx, () => stream);
        }
    }
    
    private FileStream GetStreamFromCustomDocumentStorage() {
        throw new NotImplementedException();
    }
    

    And here is how to retrieve it via a byte array:

        // Or, open document from content in byte array
        byte[] documentContentAsByteArray = GetByteArrayFromCustomDocumentStorage();
        ASPxSpreadsheet1.Open(newUniqueDocumentId, DocumentFormat.Xlsx, () => documentContentAsByteArray);
    
        // TODO save somewhere the newUniqueDocumentId if needed
    }
    
    private byte[] GetByteArrayFromCustomDocumentStorage() {
        throw new NotImplementedException();
    }
    

    Once the document is retrieved from the database, it can be passed to one of the open method overloads as a Stream or array of bytes (along with the DocumentID and DocumentFormat).

    Feedback

    I would love to hear your feedback on the DevExpress ASP.NET Office Controls.

    Leave me a comment below or email me directly: mharry@devexpress.com

    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).

  • Known Issues in .NET Core Tools (preview 2) for Visual Studio and Workarounds

    Since releasing the DevExtreme ASP.NET MVC Wrappers for ASP.NET Core, we've seen some issues with the Visual Studio 2015 Tooling Preview 2 (for .NET Core 1.0).

    Below are three issues with workarounds that could help you. Please keep in mind that many of the issues are likely related to the tooling software being in 'preview' mode. Microsoft is aware of most of these issues and they will likely address them in a future release.

    Three known issues and workarounds

    The following issues relate to ASP.NET Core projects (both .NET Framework and .NET Core):

    1. Bower search dialog cannot find packages

    This issue occurs when bower in Visual Studio can find a package but not install it. Take a look at the details here: aspnet/Tooling#506. This is a known issue which means it may be addressed in a future build.

    Workaround

    Edit the bower.json file manually. If bower.json is missing, enable 'Show All Files' in the Solution Explorer toolbar.

    DevExtreme ASP.NET MVC Wrappers - ASP.NET Core - Project Template

    Then add your packages directly to bower.json and run the 'Restore Packages' command.

    2. Bower may install wrong versions of packages

    If git.exe is not available in your local PATH, then Bower may install the wrong versions of packages.

    Yes, this is an unpleasant issue where the symptoms may include:

    • missing JavaScript files
    • various JavaScript runtime errors
    • messages about using incompatible libraries

    Luckily, Microsoft is aware of the issue which you can also track here: aspnet/Tooling#575. And there is a StackOverflow discussion too: http://stackoverflow.com/a/38460014

    Solution:

    1. Install Git for Windows
    2. Delete your local bower directory: %USERPROFILE%\AppData\Local\bower
    3. Restart Visual Studio
    4. Delete wwwroot/lib
    5. Restore bower packages

    3. DevExtreme ASP.NET Core project templates fail to restore packages

    This issue appears as the yellow error bar at the top of Solution Explorer:

    DevExtreme ASP.NET MVC Wrappers - ASP.NET Core - Restore Packages Error

    Workaround

    We've found a workaround for this issue and fixed it in the DevExtreme v16.1.6 release.

    If you don't have v16.1.6 yet, then you can use this simple workaround: invoke package restore manually ("Restore Packages" item in the context menu of project node in Solution Explorer)

    Also, this issue will likely be solved in Visual Studio tooling when the .NET Core projects are switched from project.json to csproj/MSBuild. Microsoft is aware of this issue as well.

    Try DevExtreme Components for ASP.NET Core today!

    Download DevExtreme v16.1.6 and let me know your thoughts about ASP.NET Core in the comments below. Thanks!

    Keep in mind that the Visual Studio tooling (for .NET Core) is still in preview. We are sure that Microsoft will address the issues and provide the best environment to build .NET Core apps.

    Leave me a comment below or email me: 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).

  • ASP.NET Identity - Login with Microsoft Account, Facebook, Twitter, and Google - v16.1

    Good news! We've added support for Microsoft's ASP.NET Identity membership system. What is ASP.NET Identity? Pranav, the Microsoft PM, describes it best here:

    ASP.NET Identity allows you to add login features to your application and makes it easy to customize data about the logged in user. - Pranav Rastogi

    ASP.NET Identity membership system replaces and improves on several of the older ASP.NET membership systems. And this new system brings with it several benefits:

    • One ASP.NET Identity System
    • Ease of plugging in profile data
    • Role provider
    • Claims based
    • Social login providers
    • Azure Active Directory
    • and more!

    I recommend reading the "Introduction to ASP.NET Identity" blog post.

    In all fairness, ASP.NET Identity has been around for a couple of years now. So I'm happy that we're providing support for it from DevExpress Project templates too.

    DevExpress ASP.NET Project Wizard Integration

    When you use the DevExpress ASP.NET Project Wizard with v16.1 or above, under the 'Site Configuration' tab, you'll see a dropdown that allows you to choose the authentication model.

    The default will be the new 'ASP.NET Identity' model because most of the Microsoft project templates default to this improved authentication model. You can change it and select one of the older ones or none.

    However, one of the key benefits of providing Microsoft ASP.NET Identity support through the DevExpress Project templates is that your web project can also use the excellent DevExpress ASP.NET controls for login purposes. This allows you to use any one of the excellent DevExpress ASP.NET themes and maintain a beautiful site.

    Therefore, after the project is created, the DevExpress project wizard will have created all the necessary pages for you for login purposes. And these pages will use the necessary DevExpress ASP.NET controls:

    Learn more about ASP.NET Identity

    The DevExpress project templates are exposing the Microsoft ASP.NET Identity system for you. Therefore, to learn more about ASP.NET Identity's customization, implementation, etc.; I recommend you watch this video:

    Or watch these other helpful Channel 9 videos.

    Do you use the ASP.NET Identity system with DevExpress ASP.NET controls?

    Leave me a comment below or email me: 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).

  • ASP.NET: New Bootstrap Template Wizard - v16.1

    In the v16.1 release, we included a new project template for DevExpress ASP.NET controls: Bootstrapped Web Application.

    Bootstrapped Web Application
    (click an image to see larger version)

    Bootstrap is one of the most popular responsive web frameworks. Our new project template allows you to now create a new web application that uses the Bootstrap framework elements (CSS templates and UI components) with DevExpress ASP.NET controls.

    Clarification

    The Bootstrap project template that I'm discussing in this blog post relates to the current set of (100+) DevExpress ASP.NET and MVC controls. We're also working on a new of ASP.NET controls that will better support Bootstrap themes. Please read this blog post for more information on that project.

    The benefit of this new Bootstrap project template is that you get a responsive layout using Bootstrap is very useful. However, there is one caveat, the themes from DevExpress controls and Bootstrap are not compatible. That is why this Bootstrap template can help you because it uses the DevExpress ASP.NET Moderno theme which works well with Bootstrap.

    Project template

    The Bootstrap project template wizard provides a complete (sample) web application. The project includes all the necessary files for Bootstrap and DevExpress controls to work together:

    Blog sample

    The new Bootstrap project template creates a sample Blog website. The website use the default layout of a typical Bootstrap website with a banner image and menu on the front page. The DevExpress ASP.NET Menu and Image Slider controls are used here and work well within Bootstrap:

    When the browser width is reduced, the menu and image adapt to the new layout:

    There's also a blog page that uses the DevExpress ASP.NET GridView:

    This page also adapts when the browser width changes:

    What do you think about the new DevExpress ASP.NET Bootstrap project template?

    Leave me a comment below or email me: 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).

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