Wijmo 3

//create and bind a Wijmo 3 Line Chart  
$('#mywijlinechart').wijlinechart({  
    dataSource: chartData,  
    showChartLabels: false,  
    header: {  
        text: 'Sales Report'  
    },  
    legend: {  
        visible: false  
    },  
    axis: {  
        x: {  
            annoFormatString: 'MMM'  
        },  
        y: {  
            annoFormatString: 'c0'  
        }  
    },  
    seriesList: [  
        {  
            label: 'Sales',  
            data: {  
                x: {  
                    bind: 'Date'  
                },  
                y: {  
                    bind: 'Amount'  
                }  
            }  
        }  
    ]  
});

Wijmo 5

//create and bind a Wijmo 5 FlexChart  
var myFlexChart = new wijmo.chart.FlexChart('#myFlexChart');  
myFlexChart.initialize({  
    chartType: wijmo.chart.ChartType.Line,  
    header: 'Sales Report',  
    legend: {  
        position: wijmo.chart.Position.None  
    },  
    axisX: {  
        format: 'MMM'  
    },  
    axisY: {  
        format: 'c0'  
    },  
    itemsSource: chartcv,  
    bindingX: 'Date',  
    series: [  
        {  
            binding: 'Amount',  
            name: 'Sales'  
        }  
    ]  
});

Important things to note:

• In Wijmo 5, we create a new instance of a FlexChart against a DOM element. Then we call an initialize method on the new control. In Wijmo 3, we do both at once (using the jQuery UI Widget Factory pattern).
• In the Wijmo 5 FlexChart (similar to the FlexGrid) we data bind the itemSource property to a CollectionView instead of the raw array of data.
• In Wijmo 5, properties with multiple options have Enums to help make setting the value easier and less error prone. Notice, in the Wijmo 5 FlexGrid, we set chartType: wijmo.chart.ChartType.Line which is an Enum and even provides auto-completion in certain code editors.
• In the Wijmo 5 FlexChart, setting the format for the axis applies the format everywhere it is applicable, like the tooltip. In Wijmo 3, you have to apply formatting in each place that you want it.
• In Wijmo 5, we have a single chart control (with the exception of the pie chart) that supports multiple types. In Wijmo 3, we have separate widgets for each type. The reasons for combining all of the Cartesian chart types are that they share almost all of the same properties, and that it is easier to change the chart type dynamically in Wijmo 5.
• In Wijmo 5, many of the properties have been simplified and can be set at the root control level. In Wijmo 3, many properties require nested objects to configure properly. For example, setting the header text in the Wijmo 5 FlexChart is a single line of code like header: 'Sales Report' while the Wijmo 3 line chart requires an object with a sub property like header: { text: 'Sales Report' }
• In the Wijmo 5 FlexChart, you always bind the X axis at the control level. Then you add Y axis series objects to the series collection. In the Wijmo 3 line chart, you add X and Y bindings to the seriesList collection.
• The default series colors are different for Wijmo 3 and Wijmo 5. They could be made to match, but were left to defaults for this application. Wijmo 5 offers built-in palettes to choose from for series colors as well.

And here is our result. Two charts, bound to the same data and displaying a similar configuration.

Modifying Controls

Now that we have created the controls, we can begin to modify them. In this application, we have a button that modifies the grid’s sort. When the button is clicked, we sort the grid by the Amount column.

Wijmo 3

//Sort Grid when button clicked  
$('#btnSortWij').click(function () {  
    $('#mywijgrid').wijgrid('columns')[3].options.sortDirection = 'ascending';  
    $('#mywijgrid').wijgrid('ensureControl', true);  
});

Wijmo 5

//Sort Grid when button clicked  
document.getElementById('btnSortFlex').addEventListener('click', function () {  
    var sdNew = new wijmo.collections.SortDescription('Amount', true);  

    // remove any old sort descriptors and add the new one  
    cv.sortDescriptions.splice(0, cv.sortDescriptions.length, sdNew);  
});

Important things to note:

• In Wijmo 5, we always work with the data, specifically the CollectionView. So in this example, unlike in Wijmo 3, we do not even access the FlexGrid in code. Instead we sort the CollectionView that the FlexGrid is bound to.
• In Wijmo 5, we specify the property name we want to sort by. In Wijmo 3, we find the column by index and set its sortDirection.
• In Wijmo 3, we must call the ensureControl method to tell the grid that it needs to redraw the table. If we do not call it, the grid does not display the new sort direction.
• The Wijmo 5 FlexGrid automatically redraws when its data source changes.
• This sample code uses jQuery for the Wijmo 3 sample code, but plain JavaScript for the Wijmo 5 sample code. Wijmo 5 has no dependencies so you can use plain JS when working with it.

Getting and Setting Properties

Another way to modify controls is to change properties after initialization. In Wijmo 5, we have created true JavaScript controls that offer real property getters and setters. We were able to accomplish this by utilizing ECMAScript 5’s Object.defineProperty. In contrast, with Wijmo 3, we used the jQuery UI pattern of calling methods to set properties. Wijmo 5 is unique in this way. We have revamped the way you work with our UI controls in JavaScript, and we think you will like it. It is a familiar control pattern used in .NET and other platforms.

Wijmo 3

//Show Row Headers in Grid when button clicked  
$('#btnHeadersWij').click(function () {  
    //Check if row headers are shown or not and show/hide them accordingly  
    if ($('#mywijgrid').wijgrid('option', 'showRowHeader') === true) {  
        $('#mywijgrid').wijgrid('option', 'showRowHeader', false);  
    }  
    else {  
        $('#mywijgrid').wijgrid('option', 'showRowHeader', true);  

    }  
});

Wijmo 5

//Show Row Headers in Grid when button clicked  
document.getElementById('btnHeadersFlex').addEventListener('click', function () {  
    //Check if row headers are shown or not and show/hide them accordingly  
    if (myFlexGrid.headersVisibility === wijmo.grid.HeadersVisibility.All) {  
        myFlexGrid.headersVisibility = wijmo.grid.HeadersVisibility.Column;  
    }  
    else {  
        myFlexGrid.headersVisibility = wijmo.grid.HeadersVisibility.All;  
    }  
});

Important things to note:

• In Wijmo 5, we work with controls as classes with true properties. This lets us get and set property values directly and the control can react to those changes.
• In Wijmo 3, we must call the widget method and pass in ‘option’ in order to get or set an option. We then pass in the option name as a string. And then if we want to set a value, we pass the value in as the third parameter. This is awkward syntax and is also error prone due to the case-sensitivity of the strings.
• With Wijmo 5, we can set property values to Enum values to avoid typos. Some text editors even provide auto-completion for these values.
• In Wijmo 5, both the row headers and column headers are configured using a single property. For example, setting the value to Column shows only column headers. Setting the value to All shows both row and column headers. In Wijmo 3, this is done with separate options.
• Working with properties in Wijmo 5 is one of the biggest benefits of our new control architecture compared with the classic widget pattern.
• This sample code uses jQuery for the Wijmo 3 sample code, but plain JavaScript for the Wijmo 5 sample code. Wijmo 5 has no dependencies, so you can use plain JS when working with it.
• The code for this can be much more concise, but I wrote it out like this to clearly convey the getter and setter patterns for each.

Event Handling

Lastly, we add an event handler to our grid. For this sample, we are adding a handler for the selectionChanged event in the grid. When the event occurs, we update a span tag with the Amount value in the selected row.

Wijmo 3

//Bind to selectionChange in wijgrid  
$("#mywijgrid").bind("wijgridselectionchanged", function (e, args) {  
    var amt = args.addedCells.item(3).value();  

    //set text of span tag to Amount value  
    $('#lblWij').text(amt);  
});

Wijmo 5

//Bind to selectionChange in FlexGrid  
myFlexGrid.selectionChanged.addHandler(function (e, args) {  
    var amt = myFlexGrid.rows[args.row].dataItem.Amount;  

    //set text of span tag to Amount value  
    document.getElementById('lblFlex').innerHTML = amt;  
});

Important things to note:

• In Wijmo 3, we use the jQuery bind method for event handling along with a naming convention. The convention is widget name + event name, all in lowercase. This approach is error prone since we are using strings with a specific convention to specify the event name.
• In Wijmo 5, we add a handler to the actual event object. So we access the selectionChanged event object and call the addHandler method. This approach is much less error prone than the Wijmo 3 approach.
• In Wijmo 5 we find the value by property name. In Wijmo 3, we find the data by column index.
• Working with event data is similar between Wijmo 3 and Wijmo 5.
• This sample code uses jQuery for the Wijmo 3 sample code, but plain JavaScript for the Wijmo 5 sample code. Wijmo 5 has no dependencies, so you can use plain JS when working with it.

Conclusion

As you can see, there are definitely some differences between the Wijmo 3 widgets and Wijmo 5 controls. Some differences are small and subtle; some are more significant. Hopefully this example helps to show you the default values in Wijmo 5 that are different from those in Wijmo 3. As for finding similar features, the Wijmo 5 documentation is very helpful for looking up property names, etc. Another important thing to note is the difference in philosophies behind the controls. The Wijmo 5 FlexGrid is not a full-featured grid, but the Wijmo 3 grid is. The Wijmo 5 FlexGrid is meant to be a fast and lightweight control that offers extensibility for easily adding features you want. For example, we do not build filtering or paging into the FlexGrid, but they are easily achieved through the CollectionView API. Good luck in migrating your applications to Wijmo 5 and please feel free to send us any questions you have during the process.