ASP.NET Team Blog

This Blog

News


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

Subscribe (RSS, Email)

Archives

  • DevExpress ASP.NET - Adaptive FormLayout v18.1

    With all the varying sizes of screens that your ASP.NET websites may run on these days, we've added a great new feature to help you display your forms on multiple devices.

    In the next major release, v18.1, the DevExpress ASP.NET and MVC FormLayout control ships with a new mode that allows you to create adaptive layouts with different column counts. So once you enable it, the FormLayout will automatically reflow its layout based on its own size. This allows you to create, for example, a two-column layout for narrow screens and a three-column layout for wider screens:

    Custom Layouts

    You will be able to customize your grid layout depending on the FormLayout size. Attached is an example that demonstrates three layouts, but the number of possible variants is not limited. You can create different layouts for each of your devices, if necessary. Column and row spans are also fully supported.

    Our R&D team worked hard to make this more powerful, fast and flexible. Let me describe how to create a layout required for your application, and show how this mode works.

    1. Create General Layouts

    Let's say that I want to create three different layouts that would allow me to display all form editors in different columns based on the screen width:

    1. 0px to 700px width - two columns
    2. 701px to 1100px width - three columns
    3. 1101px to 3000px width - four columns

    First, encapsulate all the editors in one LayoutGroup and populate the LayoutGroup.GridSettings.Breakpoints collection with LayoutBreakpoint items:

    [ASPx]
    <dx:ASPxFormLayout runat="server" id="MyFormLayout" width="100%">
    <Items>
        <dx:LayoutGroup Width="100%" Caption="Registration form">
             <GridSettings StretchLastItem="false">
                <Breakpoints>
                    <dx:LayoutBreakpoint MaxWidth="700" ColumnCount="2" Name="XS" />
                    <dx:LayoutBreakpoint MaxWidth="1100" ColumnCount="3" Name="M" />
                    <dx:LayoutBreakpoint MaxWidth="3000" ColumnCount="4" Name="XL" />
                </Breakpoints>
            </GridSettings>
    ...

    The LayoutBreakpoint.ColumnCount property sets how many columns the LayoutGroup should display until the FormLayout reaches the LayoutBreakpoint.MaxWidth property value. The Name property is a unique Breakpoint identifier. It will be used later.

    2. Customize Column/Row Spans

    Now we can customize the column and row spans for every LayoutItem. For the 'First name' item, I want it to occupy two cells in a row when the LayoutGroup aligns items in two columns. Then, I want the item to occupy three cells in a row when the LayoutGroup aligns items in three columns. And finally, I want the item to occupy two cells in a row again when the LayoutGroup aligns items in four columns.

    No row span is required: the item is placed only within its own row. Here's the resulting SpanRules:

    [ASPx]
     <dx:LayoutItem Caption="First name" VerticalAlign="Middle">
        <SpanRules>
            <dx:SpanRule ColumnSpan="2" RowSpan="1" BreakpointName="XL"></dx:SpanRule>
            <dx:SpanRule ColumnSpan="3" RowSpan="1" BreakpointName="M"></dx:SpanRule>
            <dx:SpanRule ColumnSpan="2" RowSpan="1" BreakpointName="XS"></dx:SpanRule>
        </SpanRules>
     ...

    Note that I used the SpanRule.BreakpointName property to bind each SpanRule to a corresponding group layout (use the values that are set in LayoutBreakpoint.Name properties). For brevity, I skipped several items, because they are customized in a similar way. However, you can find the details in the attached project below.

    The next one is an item with a RatingControl. I want the item to occupy one cell in a row, but two cells in a column when the LayoutGroup has three or four columns. Then I want the item to occupy one cell in a row and one cell in a column when the LayoutGroup has two columns. Here's the resulting SpanRules:

    [ASPx]
     <dx:LayoutItem Caption=" " VerticalAlign="Middle">
         <SpanRules>
             <dx:SpanRule ColumnSpan="1" RowSpan="2" BreakpointName="XL"></dx:SpanRule>
             <dx:SpanRule ColumnSpan="1" RowSpan="2" BreakpointName="M"></dx:SpanRule>
             <dx:SpanRule ColumnSpan="1" RowSpan="1" BreakpointName="XS"></dx:SpanRule>
         </SpanRules>
    ...

    Finally, an item with a Button. I want the Button to occupy one cell when the FormLayout is wide:

    [ASPx]
    <dx:SpanRule ColumnSpan="1" RowSpan="1" BreakpointName="XL"></dx:SpanRule>
    <dx:SpanRule ColumnSpan="1" RowSpan="1" BreakpointName="M"></dx:SpanRule>

    However, when the FormLayout becomes narrow, the Button should occupy the entire row. Since the LayoutGroup has only two columns when the FormLayout width is less than 700px:

    [ASPx]
    <dx:LayoutBreakpoint MaxWidth="700" ColumnCount="2" Name="XS" />

    I add the following SpanRule to the LayoutItem settings:

    [ASPx]
     <dx:SpanRule ColumnSpan="2" RowSpan="1" BreakpointName="XS"></dx:SpanRule>

    The default value of ColumnSpan and RowSpan properties is 1. I explicitly added them to markup to illustrate this.

    Now take a look at the GridSettings.StretchLastItem setting. If GridSettings.StretchLastItem is enabled and there is some free space after the last item in a row, the last item will be stretched to the row's end.

    IMPORTANT NOTE: If you add custom content inside a LayoutItem then please make sure that it is responsive. Unresponsive content prevents an item from collapsing and the adaptive grid layout may appear to be broken.

    3. Wrap Captions

    You can also have the caption location wrap around the control when there is not enough space to display it next to the control. You can see this behavior in the top gif animation above. Initially, the captions are located to the left of the control when there is enough space. However, once we resize and reach our breakpoints, the caption move above the control.

    The GridSettings.WrapCaptionAtWidth property allows you control this behavior.

    4. Default Breakpoint

    One last piece of info you should be aware of is the default breakpoint. For example, let's say we have the following breakpoints setup:

    [ASPx]
     <Breakpoints>
        <dx:LayoutBreakpoint MaxWidth="500" ColumnCount="1" Name="S" />
        <dx:LayoutBreakpoint MaxWidth="800" ColumnCount="2" Name="M" />
    </Breakpoints>

    We have an S breakpoint for the 0px - 500px FormLayout width and the M breakpoint for the 501px - 800px width. But if your FormLayout has the width is larger than 800px, the default breakpoint will work. It's possible to set the ColumnCount property for this breakpoint at the LayoutGroup level (or at the FormLayout level):

    [ASPx]
     <dx:LayoutGroup Width="100%" Caption="Registration Form" ColumnCount="3">

    And specify the ColumnSpan/RowSpan properties at the LayoutItem level:

    [ASPx]
     <dx:LayoutItem Caption="City" VerticalAlign="Middle" ColumnSpan="2">

    Download Sample

    Download and run the attached sample project to evaluate this new responsive mode on your local development machine.

    Over the last few years, we've steadily provided many responsive and adaptive features to keep our ASP.NET controls modern and up with latest trends. In fact, in the last release (v17.2), we added adaptive support to our Popup control.

    We'd love to hear your feedback about the FormLayout control's new Adaptive features and API. Please leave a comment below or contacting our support team if you've got some longer feedback.

    Thanks!


    Email: mharry@devexpress.com

    Twitter: @mehulharry

  • DevExtreme Charts - Client-side Data Aggregation (v18.1)

    Data aggregation in charts in an important feature and in the v18.1 release, we've significantly improved it. Let me explain.

    These days with big data, data aggregation is important to organizations in many areas such as statistics, data analytics, planning, business strategies, etc. Data aggregation's main goal is to visualize large amounts of data in a more readable form.

    The DevExtreme Chart widget has been providing data aggregation for several releases. However, the feature wasn't very flexibile because you could not:

    • choose the aggregate function because only the median filter was available;
    • change the aggreagtion intervals or configure aggregation differently for each series. In fact, all you could do is turn the feature on/off for the entire chart.

    Here's what it looked like prior to v18.1:

     $("#chart").dxChart({ 
        dataSource: dataSource, 
        useAggregation: true, 
        ...     
        series: [{}] 
    });

    Improved Data Aggregation

    In v18.1, we completely reworked the data aggregation feature to address these issues and expand its capabilities.

    Now you can:

    Here's how easy it to set a custom aggregation method with DevExtreme charts in v18.1:

    $("#chart").dxChart({
       dataSource: dataSource,
       ...
       series: {
          valueField: "carCount",
          aggregation: {
          enabled: true,
          method: "max"
          },
       ...
       }
    }); 
    • specify different aggregation methods for different series:

    $("#chart").dxChart({
        dataSource: dataSource,
        ...
        series: [{
            valueField: "dailyIndex",
            aggregation: {
                enabled: true,
                method: "avg"
            },
            ...
        }, {
            valueField: "monthlyIndex",
            ...
        }]
    }); 

    Use Synthetic Data Objects

    Using a custom aggregate function, you can generate synthetic data objects for a series based on real data objects from the data source, as it is done in the following example for the range area series:

    $("#chart").dxChart({
        dataSource: dataSource,
        ...
        series: [{
            type: "rangeArea",
            rangeValue1Field: "minTemp",
            rangeValue2Field: "maxTemp",
            aggregation: {
                enabled: true,
                method: "custom",
                calculate: function (aggregationInfo, series) {
                    if (!aggregationInfo.data.length) {
                        return;
                    }
                    var temp = aggregationInfo.data.map(function (item) { return item.temp; }),
                        maxTemp = Math.max.apply(null, temp),
                        minTemp = Math.min.apply(null, temp);
                    return {
                        date: aggregationInfo.intervalStart,
                        maxTemp: maxTemp,
                        minTemp: minTemp
                    };
                }
            },
            ...
        },
        ...
        ]
    });

    Manage Interval Length

    We also provided the capability to manage the length of aggregation intervals. You can specify the length in pixels using the aggregationGroupWidth option or in axis units using the aggregationInterval option.

    $("#chart").dxChart({
        dataSource: dataSource,
        argumentAxis: {
            argumentType: "datetime",
            aggregationInterval: "month"
        },
        ...
        series: {
            valueField: "carCount",
            aggregation: {
                enabled: true,
                method: "avg"
            },
            ...
        }
    });

    Are you looking forward to the improved data aggregation capabilities of the DevExtreme Charts? Drop me a line below.

    Thanks!


    Email: mharry@devexpress.com

    Twitter: @mehulharry

  • ASP.NET & MVC Spreadsheet - New Client-side API and Reading View (v18.1)

    Customers of the DevExpress ASP.NET Spreadsheet control have given us some great feedback about their particular use case scenarios. We've taken this feedback and enhanced the DevExpress ASP.NET Spreadsheet control in the next major release, v18.1. It'll be available for both the DevExpress ASP.NET WebForms and ASP.NET MVC versions of the Spreadsheet control.

    Client-side API

    Many of the customer use cases that we investigated involved issues with editing the Spreadsheet's cells. To address these scenarios, we've added several client side methods and events to the ASPxClientSpreadsheet object:

    • CellBeginEdit Event - Occurs before the cell editor is opened.
    • CellEndEdit Event - Occurs before the cell editor is closed and the entered value is committed.
    • CellCancelEdit Event - Occurs before the active cell's editor is closed and the entered value is rolled back.

    These three help you to manage when the cell begin, end, or cancel cell editing events are invoked. There are also event parameters that allow you to identify a cell element (column and row position), its value, entered formula (if any) and the name of the sheet on which the editing cell is located.

    We've also added client side methods that allow you to process the data input programmatically:

    • ApplyCellEditing Method - Applies a value stored within the editor to the active cell.
    • CancelCellEditing Method - Cancels editing of the active cell.
    • SetCellEditorText Method - Specifies an editor's value of the edited cell.

    These methods can be used for implementing scenarios like custom client side validation, update external controls, or implement a complex scenario such as a "Custom in-place editor".

    Custom In-Place Editor

    Previously, you were limited to only a couple of editors that we provided but with these enhancements to the DevExpress ASP.NET Spreadsheet, you can use any control for editing the cell value:

    We've also added several client side methods that allow you to get the Spreadsheet's properties such as the current sheet name and rendered cell coordinates. For a full list of the client-side methods, properties, and events please take a look our documentation on the ASPxClientSpreadsheet's members.

    Reading View Mode

    Before v18.1, the Spreadsheet control had only one mode/view: Editing. By default, all the editing features were enabled for the document loaded into the control. Editing could be restricted using the document protection feature or the Spreadsheet ReadOnly property.

    I'm happy to say that we're introducing a new mode for the Spreadsheet: Reading View.

    When this mode is on, the document opened inside the control cannot be modified by the end user. The built in ribbon is transformed into a special toolbar that has a lightweight render compared to the “classic” ribbon. This mode is handy for mobile devices or in the scenarios when the Spreadsheet is used mainly for viewing data instead of editing.

    The Reading View can be turned on using the built-in ribbon button or using the new client and server side API (SetViewMode Method). We've also added the ViewModeChanged event to give you even more control of the Spreadsheet when the view mode changes.

    If you need more room for the Reading View then you can customize the toolbar or even hide it to provide more space for document content on small screens.

    Are you looking forward to any of these ASP.NET Spreadsheet enhancements? Drop me a line below.

    Thanks!


    Email: mharry@devexpress.com

    Twitter: @mehulharry

  • ASP.NET MVC - Query Builder (v18.1)

    Use the powerful DevExpress Query Builder with your DevExpress ASP.NET MVC controls, starting with the v18.1 release!

    The Query Builder component allows an end-user to visually build queries using our UI controls. This saves the end-user from learning and writing SQL statements. Once the queries are built, you can then apply those queries on existing DevExpress controls like the ASP.NET MVC GridView. This puts the power of ad-hoc querying in your end-users control.

    Here's a screenshot of the MVC Query Builder control, click on the image for a larger version:

    The Query Builder was first introduced as part of our XtraReports' Web Report Designer and then was released as a separate control for ASP.NET Web Forms. Many of you have requested this as an independent control for ASP.NET MVC and now it's available in v18.1 release.

    Features

    We've packed a ton of great features in the DevExpress ASP.NET MVC Query Builder:

    • The database schema is automatically obtained and displayed within the QueryBuilder's UI. You can also customize the database schema at runtime by implementing a custom schema provider to reduce the list of tables and views available for an end-user
    • Relationships between tables are automatically resolved based on foreign keys
    • An enhanced filter editor features the Advanced Mode allowing you to specify a filter string manually instead of using a visual editor. The code completion is available
    • Ability to visually shape retrieved data (sort, group and filter), which automatically edits 'ORDER BY', 'GROUP BY' and 'WHERE' query clauses
    • Ability to use the 'SELECT DISTINCT' clause
    • Aggregation of columns’ data
    • Preview entire SELECT statement
    • Preview the Query execution results

    How do you plan to use the Query Builder in your ASP.NET MVC projects? Drop me a line below.

    Thanks!


    Email: mharry@devexpress.com

    Twitter: @mehulharry

  • New Client-Side API - DevExpress Bootstrap ASP.NET Core Controls (coming soon v18.1)

    In the next major release, v18.1, we've updated the client-side API format for all DevExpress Bootstrap ASP.NET Core controls. The changes in the API make it more intuitive and will improve your development experience.

    Let's see what is changed.

    camelCase Methods

    Camel case (stylized as camelCase ...) is the practice of writing compound words or phrases such that each word or abbreviation in the middle of the phrase begins with a capital letter, with no intervening spaces or punctuation. -Wikipedia

    In JavaScript, it's common to use lower camel case for method names where the first letter is lowercase. Therefore, all methods that were previously written like this:

    GetItem()
    GetEnabled() / SetEnabled()
    GetIconCssClass() / SetIconCssClass()
    GetText() / SetText()
    GetVisible() / SetVisible()

    Starting with v18.1, they'll now use camelCase:

    getItem()
    setEnabled() / getEnabled()
    setIconCssClass() / getIconCssClass()
    setText() / getText()
    setVisible() / getVisible()

    Event Handling

    There's big changes in event handling because with the v18.1 release, we're making it easier to work with event handlers.

    For example, let's say that you want to handle the client-side Init and Click events of the DevExpress Bootstrap ASP.NET Core Button control. Then you would use the following JavaScript functions as handlers for the respective events:

    function onButton1Init(s, e) {
       // ...
    }
    function onButton1Click(s, e) {
       // ...
    }

    This improves on the old way of declaring functions and then attaching the handlers for events:

    button1.Init.AddHandler(onButton1Init);
    button1.Click.AddHandler(function(s, e) {
       // s - sender = button1;
       // ...
    });
    button1.Click.AddHandler(onButton1Click);

    New Functions: 'on', 'off', & 'once'

    New for the v18.1 release, is the ability for every control to provide the on function. The on function accepts an event name and a handler function:

    on = function (eventName, handler){
    ...
       return this;
    }

    These new functions return the object they're called on, and so calls to them can be chained. This allows you to write fluent syntax to assign event handlers:

    button1
       .on('init', onButton1Init)
       .on('click', function(args) {
           // this - sender = args.sender = button1
           // ...
       })
       .on('click', args => { // es6 or TS
           // this - external context;
           // args.sender = button1
           // ...
       })
       .on('click', onButton1Click);

    Detach with 'off'

    There's also a corresponding off function that allows you to detach handlers:

    button1
       .off('init', onButton1Init)
       .off('click', onButton1Click);
    button1
       .off('init', onButton1Init)
       .off('click'); // remove all handlers for the click event
    button1
       .off() // remove all event handlers

    'once' Function

    We also added the once function that is identical to the on function above, except that the handler will be removed after its first invocation.

    JavaScript Promises

    Also with the v18.1 release, we will provide overload functions that return JavaScript Promises for callback methods, e.g. BootstrapGridView.performCallback(). So without promises, we would use this approach:

    grid.performCallback('myParameter', function (result) {
        // This callback function will be executed when the result comes from the server
        // The 'result' argument is a value received from the server
        console.log(result);
    });

    By using JavaScript Promises then we can write fluent code instead:

    grid.performCallback('myParameter')
        .then(function (result) {
           // The 'result' argument is a value received from the server
           console.log(result);
        } );

    If you use async/await syntax (supported in ECMAScript 2016+), then the code can be simplified:

    // The `result` argument is a value received from the server
    let result = await grid.performCallback('myParameter');
    console.log(result);

    VS IntelliSense

    Last, but not least, with the official 18.1 release, we will provide type definitions for the new client-side API so that you get IntelliSense in Visual Studio.

    Old API Still Available

    The old client-side API has been marked as deprecated in the v18.1 release (and beyond). However, it has not been removed from v18.1. I recommend using the new API in your projects, but there is no need to change the current applications immediately.

    Rest assured that you'll be able to upgrade to v18.1 and get all these great changes without your previous client-side code breaking.

    Try v18.1 CTP Today

    You can access the v18.1 CTP of the DevExpress Bootstrap for ASP.NET Core via NuGet:

    Use the https://nuget.devexpress.com/early-access/api NuGet feed to install the DevExpress.AspNetCore.Bootstrap package.

    Or use the following dotnet CLI command to install the controls:

    dotnet add package DevExpress.AspNetCore.Bootstrap -s https://nuget.devexpress.com/early-access/api -v 18.1.2-pre-18082

    Learn more about the limited time v18.1 CTP here.

    Feedback

    Your feedback is valuable to us. For these new changes to the Client-Side API, we've created a support ticket where I'd love for you to give us your input: T620627

    Thanks!


    Email: mharry@devexpress.com

    Twitter: @mehulharry

  • Access v18.1 of DevExpress ASP.NET Web Controls Today - v18.1 CTP Available

    The official v18.1 release of the DevExpress ASP.NET tools is only weeks away. And our developers will continue to work hard until we reach the 'code freeze' date. However, they want to get your feedback on features and controls that they've developed so far.

    Today, we're making available a special v18.1 CTP (community technology preview) that includes new controls and features. This release includes all the DevExpress ASP.NET line of controls for ASP.NET WebForms, MVC, Bootstrap WebForms, and Bootstrap Core.

    However, it does not include all of the features and controls that will be part of the official v18.1 release. Hey, we have until code freeze date to finish those features.

    Note: This is pre-release software, so please, consider yourself warned.

    What's Included

    There's a ton of new features and some new controls too. Each item below is either linked to an online demo or a corresponding support ticket that describes the feature.

    Here's what's included in this v18.1 CTP:

    DevExpress ASP.NET WebForms and MVC

    Let's start with the classic ASP.NET WebForms and MVC controls:

    RichEdit

    The DevExpress ASP.NET RichEdit control for ASP.NET WebForms and MVC is getting these excellent new features:

    Spreadsheet

    The DevExpress ASP.NET Spreadsheet control for ASP.NET WebForms and MVC is adding:

    ListBox, ComboBox, TokenBox

    FormLayout

    TabControl/PageControl

    DevExpress ASP.NET Bootstrap for ASP.NET Core

    The DevExpress Bootstrap ASP.NET Core GridView controls gets the following enhancements:

    We're also adding these new controls and a new way to work with our client-side API:

    DevExpress Bootstrap ASP.NET WebForms

    The DevExpress ASP.NET Bootstrap controls for ASP.NET WebForms is enhancing the three controls and adding a new one:

    GridView

    FormLayout

    ListBox

    New control

    Download

    Download the v18.1 CTP here: v18.1 DevExpress ASP.NET CTP - Installer

    Please note that the v18.1 CTP installer can only be installed in trial mode. This CTP will not be necessary (or available) after the official release.

    The DevExpress ASP.NET Bootstrap controls for ASP.NET Core are only available via NuGet packages and you can download those here: NuGet - v18.1 DevExpress ASP.NET Core CTP

    Try the latest DevExpress ASP.NET v18.1 CTP and please give us your feedback, thanks!


    Email: mharry@devexpress.com

    Twitter: @mehulharry

  • DevExtreme ASP.NET Core Templates Deprecation for VS2015 - v18.1

    Starting with the v18.1 release, the DevExtreme ASP.NET Core project templates will not be available in instances of Visual Studio 2015. You'll need to have Visual Studio 2017 or higher to use these templates.

    Here's why:

    1. In Visual Studio 2015, only the .NET Core projects based on project.json are supported. However, these projects have been replaced with the MSBuild/csproj (see announcement).

    2. The .NET Core Tooling for Visual Studio 2015 is still in the 'preview' stage and will not be developed further.

    Therefore, you will not be able to create new DevExtreme ASP.NET Core projects in Visual Studio 2015. You can still open and work with existing projects. However, for creating new projects, you will need Visual Studio 2017 (or higher).

    Workaround

    If you don't have Visual Studio 2017 installed then you can use the following workaround:

    1. Create a new standard ASP.NET Core application
    2. Then manually add DevExtreme resources

    However, I don't recommend using project.json for new projects.

    There is also a free community edition of Visual Studio 2017 available too.

    Please leave me a comment below if you doing any ASP.NET Core development in Visual Studio 2015. Thanks!


    Email: mharry@devexpress.com

    Twitter: @mehulharry

  • DevExtreme - Access v18.1 Features Today for Early Testing

    While the DevExtreme team is working hard on new features for the v18.1 final release, they've been publishing several pre-releases on GitHub.

    We'd love to get your feedback, so please get involved by downloading, testing, and letting us know your experience.

    DevExtreme v18.1 Pre-releases

    Note: This is pre-release software, so please, consider yourself warned.

    Early Testing

    Many of the v18.1 upcoming features are inspired by existing/reported customer issues. By providing early build access, we'd like to know if our solution will address the problem or if the scope of the problem is bigger than we originally thought.

    Your testing and feedback can help us to change and deliver the final implementation. As you know, the best time to fix or improve source code is before the final RTM release. This way, we can avoid future unexpected breaking changes that may creep in.

    So please get involved because taking part in early testing results provides several benefits such as:

    • Confidence that feature implementation fits your application specifics;
    • Fewer breaking changes after the final release (because we'll include fixes before the next major release);
    • Increase overall product quality;
    • Align team efforts with customer needs;

    How to test?

    If you'd like to test out the features in your application then follow the installation instructions from that release description.

    Look through the releases page (pre-releases are marked with a special red label). The release will have a short "what's new" section.

    Alternatively, you can use the feature list available for alpha testing. Feel free to leave comments, report GitHub issues, or create tickets in our Support Center.

    The DevExtreme pre-release documentation is also available here: https://js.devexpress.com/Documentation/18_1/

    Note: Some parts of DevExtreme (ASP.NET MVC Controls, Visual Studio Tools, etc.) are not developed in the DevExtreme GitHub repo. However, you'll be able to download our pre-release installations. We'll notify you once we have something to show for these other pieces that are not available via GitHub.

    DevExtreme Roadmap

    To provide transparency with our DevExtreme customers, we've published a DevExtreme 2018 roadmap on https://js.devexpress.com/Roadmap/. Because the client-side web world is notorious for changing drastically in a short period of time, we plan to update this new roadmap as needed.

    A public roadmap helps you to understand our vision for certain solutions.

    DevExtreme targets several platforms such as jQuery, Angular, React, Vue, ASP.NET MVC, and likely more in the future. DevExtreme is no longer one single repository but several that are developed simultaneously in many public and private repos. Therefore, the roadmap will include links to feature discussion pages (mostly on GitHub) where you can leave your feedback and discuss your questions directly with the DevExtreme developer team.

    To see what's coming out in 2018, then vote on your favorite features, and finally to get updates on our progress, here's what I recommend:

    1. Go to the recently published DevExtreme 2018 Roadmap. This is a styled as a survey to allow you to vote on our proposed upcoming features. Your votes are important to us so please go to the link above and give us your feedback.
    2. Then, check back regularly on the roadmap on the DevExtreme website for updates: https://js.devexpress.com/Roadmap/

    Subscribe and Get Notified

    The best way to stay current with DevExtreme is to get notifications. There are lots of options that you can choose from too:

    • Subscribe to DevExtreme social networks accounts (we'll announce each pre-release)
    • Subscribe to GitHub Releases RSS feed
    • Use specialized notification services

    Try the latest DevExtreme pre-release version and please give us your feedback, thanks!


    Email: mharry@devexpress.com

    Twitter: @mehulharry

  • Now available - The DevExpress NuGet Package Portal: nuget.devexpress.com!

    Check out our new portal for everything related to DevExpress NuGet packages:

    nuget.devexpress.com

    This new DevExpress NuGet portal will give you helpful information like getting started, resolving issues, using NuGet without an IDE, etc.

    Get Your Personal NuGet URL

    We're providing a personal NuGet URL for every registered DevExpress customer login. So if you haven't generated your personal URL yet then click on the 'Obtain Your NuGet Feed URL' button on the this homepage:

    More Platforms Supported

    In 2017, DevExpress provided several NuGet packages (mostly for our Web platforms). Today, we're expanding this offering to include in even more platforms:

    .NET Core & Free Trial

    I'm happy to announce that we're also offering our .NET Core controls via NuGet. Now you can try our .NET Core products on any platform: Windows, Mac OS, or Linux. You can also use an IDE of your choice: Visual Studio, Visual Studio Code, Visual Studio for Mac, or JetBrains Rider:

    The following support .NET Core:

    If you have a DXperience Universal license then you'll see these .NET Core packages in your NuGet feed. If not, then we have a free 30 day trial available for you, whether you are a customer or not. That means you get access to all the NuGet packages we make available, as a trial for 30 days.

    Note, that if you are a customer without DXperience Universal license then you can try NuGet packages that are not included in your DevExpress subscription currently with this free 30 day trial. And during your trial, you'll have access to our excellent support team.

    Getting started

    I recommend reading this blog post to learn how get your NuGet key.

    FAQ

    We've gathered the most popular issues that our customers have reported and created a helpful FAQ:

    These topics can help you to get started, solve possible problems, and get additional information about DevExpress NuGet.

    Are you using the DevExpress NuGet packages? Please leave a comment below (or email me) and your feedback will help us plan for future releases.

    Thanks!


    Email: mharry@devexpress.com

    Twitter: @mehulharry

  • DevExtreme Hybrid Mobile Tools Deprecation in v18.1

    Starting with the upcoming major release, v18.1, the DevExtreme hybrid mobile-related tools will be deprecated and placed in to maintenance mode. However, we plan to support creating mobile apps through popular hybrid frameworks, more on this later.

    Our hybrid mobile-related tools includes our SPA Framework and Visual Studio Mobile Tools. [Note, that the Knockout integration will not be deprecated and you can continue to use DevExtreme knockout bindings in your apps.]

    Maintenance mode means that we'll only fix critical bugs and not introduce any new features. Therefore, we do not recommend starting new projects with the hybrid mobile-related tools.

    Why deprecate the hybrid mobile tools?

    Here's four main reasons on why we plan to put our hybrid mobile tools in to maintenance mode:

    1. The DevExtreme hybrid mobile tools were great when we first introduced them, however, today there are other popular frameworks that provide similar benefits
    2. It's costly for us to support our hybrid mobile tools due to changes in dependent external tools and vendors
    3. This will free up the team to provide you the tools that you've been asking for
    4. You can replace some of our hybrid mobile tools with modern equivalents that are available today

    Rest assured that the DevExtreme brand and tools are doing great and will keep growing. We are only deprecating the hybrid mobile tools.

    History

    Back in 2011, there was a lack of good hybrid mobile app frameworks that allowed you to build hybrid mobile apps with native looking UI and behavior. To address this market need for mobile, we launched DevExtreme. However, we designed DevExtreme as a product for both mobile (Cordova/ PhoneGap) and desktop web development.

    We loved that a client-side framework, based on JavaScript, is flexible and can be used in multiple scenarios. So, we decided to create DevExtreme using several aspects of hybrid web development:

    • UI controls and mobile themes (DevExtreme UI Widgets)
    • App layouts and navigation (DevExtreme SPA Framework)
    • Project seeding (DevExtreme Visual Studio Multi-Channel App Wizard)
    • Debugging and deployment (DevExtreme Visual Studio Mobile Tools)
    • Support the popular jQuery library
    • Support the promising KnockoutJS library

    That was many years ago and the landscape for hybrid mobile apps and client-side frameworks has changed.

    Current Landscape

    Today, there are three dominant client-side UI frameworks that developers are considering when starting a new web app: Angular, React, or VueJS. Yes, there are other frameworks too but they don't have a large userbase.

    Let's take a look at some client-side libraries and how they shaped our decision to deprecate our hybrid mobile tools:

    1. PhoneGap

    Adobe's PhoneGap has been around a long time and it continues to grow with new features and tools. Unfortunately, changes in PhoneGap causes headaches for our DevExtreme customers and the DevExtreme team too because DevExtreme hybrid mobile tools rely on PhoneGap.

    Another source of breaking changes affecting DevExtreme is Apple. Randomly, they may change the mobile app acceptance rules, deployment package requirements, or other hybrid mobile app requirement.

    Essentially, this causes the DevExtreme team to spend resources fixing external issues rather than providing more value to our customers.

    2. Angular

    Today, Angular is the most popular framework. It targets Angular developers, has thousands of contributors, and is quite mature now. In short, Angular provides a great framework for desktop web development. However, Angular has made tremendous progress in providing hybrid mobile development too by using tools like the Ionic Framework.

    It's also accompanied with a number of useful services for UI design, push notifications, DevOps, and other aspects of hybrid mobile development.

    3. React

    Facebook's React framework has been gaining popularity for the past few years. They also have a great mobile development framework called React Native. React Native allows you to build mobile apps with a native UI using JavaScript. Developers' experiences with React Native has drastically improved too with the introduction of the Expo toolchain. In fact, the React community is bringing new tools and improvements as it grows.

    4. VueJS

    VueJS is a young framework but with a rapidly growing community. It's difficult to predict the mobile future of VueJS, but some products such as Quasar or Weex might become mainstream for hybrid or native VueJS mobile development in the future.

    5. KnockoutJS

    DevExtreme provides deep integration with our controls and KnockoutJS. Unfortunately, there are fewer developers who use KnockoutJS each year.

    We'll continue to support KnockoutJS because our integration is mature and it doesn't take many development resources. However, we do not plan to base our tools on KnockoutJS in the future. Instead, we are looking forward to Angular, React, and VueJS tooling.

    Mobile Future of DevExtreme

    The future looks bright for DevExtreme because in addition to growing our support for more client-side frameworks, we have plans to provide you support to create hybrid mobile apps using other hybrid frameworks and without the deprecated DevExtreme hybrid mobile tools. In a future major release, we're planning to bring you things like Visual Studio wizards, app layouts, and modified mobile themes.

    However, you can create mobile solutions today with DevExtreme and a hybrid mobile app framework. For example, you can use the Ionic Framework and integrate the DevExtreme charts or other DevExtreme controls.

    Are you developing a progressive web app (PWA) for both desktop and mobile devices? Then you can seamlessly use rich DevExtreme UI controls in it as well.

    Alternative Recommendations

    Since our DevExtreme hybrid mobile tools are going in maintenance mode, we've come up with a few possible replacements that are available today. Let's take a look:

    • DevExtreme SPA Framework provides client-side application capabilities such as routing, navigation between views, app layouts, and view rendering and management. The modern frameworks we mentioned above like Angular, React, Vue, Iconic, etc. have these same capabilities out-of-the-box or as a separate npm packages that you can add. In a future major release, we plan to provide you new responsive app layouts that based on these modern frameworks and they will use DevExtreme controls in them. In essence, you'll have a File->New type of project template using Angular, React, etc and it will provide you a way for you to create new responsive web apps with DevExtreme controls.

    • DevExtreme Visual Studio Multi-Channel App Wizard is very useful because it allows you to get started quickly by building you a mobile solution based on your data. This wizard creates an OData web service, then scaffolds a DevExtreme SPA Framework application, and also generates the views based on the new OData service. I'm happy to say that we'll replace this wizard with similar tools that can generate an ASP.NET MVC/Core API back-end and Angular views that will be bound to it.

    • DevExtreme Visual Studio Mobile Simulator represents an in-browser HTML container for modeling real devices using screen size, orientation, and user agent. Google Chrome has a similar built-in feature. Moreover, it also simulates touch events. We recommend switching to Chrome's built-in tool.

    • DevExtreme Visual Studio Mobile View Designer is a tool for visually creating mobile views with DevExtreme controls using drag-n-drop operations. This tool isn't used much according to it our usage statistics and user feedback. Creating views via markup is a common task these days for web developers. We don't have any plans to replace this tool, but if you need, you can find free or commercial tools for mobile app prototyping.

    • DevExtreme Visual Studio Native Packer can create a native app package locally for uploading to Apple App Store, Google Play, and Windows Store. This functionality is available today from the PhoneGap Build service and we recommend using it instead.

    • DevExtreme Visual Studio Courier App is used for remote debugging of DevExtreme hybrid mobile apps by accessing a local web-server from the Internet using your mobile device via an HTTP proxy. These days, you can find several different tools to perform remote debugging of your mobile apps. For instance, if you target React Native, you can use the Expo Client app. If you target Angular then Ionic View is your choice. You can also use the ngrok service to access your localhost remotely. We recommend using one of these other remote debugging tools going forward.

    • DevExtreme iOS and Android Themes mimic native mobile apps appearance and behavior. We are going to replace the Android mobile theme with a modern Material Design one. The iOS mobile theme is going to be substituted with the improved Generic theme that will look very similar.

    Wrapping up

    So to recap, we are placing the DevExtreme hybrid mobile tools into maintenance mode because:

    • There are many great client-side hybrid mobile app frameworks available today
    • To avoid costly breaking changes and issues with mobile frameworks and vendors
    • DevExtreme will shift focus on providing great UI controls for existing popular client-side and hybrid frameworks

    As noted above, we have plans to replace some of these tools so that you can continue to build great UI in your apps that are client-side, hybrid mobile, PWA, etc.

    Help us by sharing your mobile strategy with us. Do you plan to develop mobile using one of the following?

    • Responsive website with PWA features
    • Hybrid Ionic
    • React Native app
    • Xamarin
    • Native mobile app
    • Or something else?

    Please leave a comment below or email me and your feedback will help us plan for future releases.

    Thanks!


    Email: mharry@devexpress.com

    Twitter: @mehulharry

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, Delphi, HTML5 or iOS & Android development. 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-2018 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners