Wijmo

Migrating from Wijmo 3

This sample shows how to migrate from Wijmo 3 to Wijmo 5.

Wijmo 3 wijgrid

Selected Amount: [ select new row to fire event ]

HTML
<table id="mywijgrid" style="height:300px;"></table> <button id="btnSortWij" class="btn btn-default">Sort By Amount</button> <button id="btnHeadersWij" class="btn btn-default">Toggle Row Headers</button> <p> Selected Amount: <span id="lblWij">[ select new row to fire event ]</span> </p>
JS
// populate Array of data var rawData = data.getData(100); // create and bind Wijmo 3 wijgrid $('#mywijgrid').wijgrid({ columnsAutoGenerationMode: 'none', data: rawData, allowSorting: true, scrollMode: 'auto', selectionMode: 'singleRow', ensureColumnsPxWidth: true, columns: [ { dataKey: 'Id', dataType: 'number', dataFormatString: 'n0', width: '20%' }, { dataKey: 'Country', width: '20%' }, { dataKey: 'Date', dataType: 'datetime', width: '20%' }, { dataKey: 'Amount', dataType: 'currency', width: '20%' }, { dataKey: 'Active', dataType: 'boolean', width: '20%' } ] }); // Sort Grid when button clicked $('#btnSortWij').click(function () { $('#mywijgrid').wijgrid('columns')[3].options.sortDirection = 'ascending'; $('#mywijgrid').wijgrid('ensureControl', true); }); // Show Row Headers in Grid when button clicked $('#btnHeadersWij').click(function () { if ($('#mywijgrid').wijgrid('option', 'showRowHeader') === true) { $('#mywijgrid').wijgrid('option', 'showRowHeader', false); } else { $('#mywijgrid').wijgrid('option', 'showRowHeader', true); } }); // Bind to selectionChange in wijgrid $("#mywijgrid").bind("wijgridselectionchanged", function (e, args) { var amt = args.addedCells.item(3).value(); $('#lblWij').text(amt); // set text of span tag to Amount value });

Wijmo FlexGrid

Selected Amount: [ select new row to fire event ]

HTML
<div id="myFlexGrid" style="height:300px;"></div> <button id="btnSortFlex" class="btn btn-default">Sort By Amount</button> <button id="btnHeadersFlex" class="btn btn-default">Toggle Row Headers</button> <p> Selected Amount: <span id="lblFlex">[ select new row to fire event ]</span> </p>
JS
// create a Wijmo 5 CollectionView from the rawData Array var cv = new wijmo.collections.CollectionView(rawData); // create and bind Wijmo 5 FlexGrid var myFlexGrid = new wijmo.grid.FlexGrid('#myFlexGrid', { autoGenerateColumns: false, itemsSource: cv, isReadOnly: true, selectionMode: wijmo.grid.SelectionMode.Row, headersVisibility: wijmo.grid.HeadersVisibility.Column, columns: [ { binding: 'Id', width: '*' }, { binding: 'Country', width: '*' }, { binding: 'Date', width: '*' }, { binding: 'Amount', format: 'c0', width: '*' }, { binding: 'Active', width: '*' } ] }); // Sort Grid when button clicked document.getElementById('btnSortFlex').addEventListener('click', function () { var sdNew = new wijmo.collections.SortDescription('Amount', true); cv.sortDescriptions.splice(0, cv.sortDescriptions.length, sdNew); }); // Show Row Headers in Grid when button clicked document.getElementById('btnHeadersFlex').addEventListener('click', function () { myFlexGrid.headersVisibility = myFlexGrid.headersVisibility == wijmo.grid.HeadersVisibility.All ? 'Column' : 'All'; }); // Bind to selectionChange in FlexGrid myFlexGrid.selectionChanged.addHandler(function (e, args) { var amt = myFlexGrid.rows[args.row].dataItem.Amount; document.getElementById('lblFlex').innerHTML = amt; // set text of span tag to Amount value });

Wijmo 3 wijlinechart

HTML
<div id="mywijlinechart" style="height:300px;"></div>
JS
// populate Array of data for Chart var chartData = data.getData(12); // 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 FlexChart

HTML
<div id="myFlexChart" style="height:300px;"></div>
JS
// create and bind a Wijmo 5 FlexChart var myFlexChart = new wijmo.chart.FlexChart('#myFlexChart', { chartType: 'Line', header: 'Sales Report', legend: { position: 'None' }, axisX: { format: 'MMM' }, axisY: { format: 'c0' }, itemsSource: chartData, bindingX: 'Date', series: [ { binding: 'Amount', name: 'Sales' } ] });