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

April 2018 - Posts

  • 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

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