To me, the most exciting feature of AngularJS is the ability to write custom directives. Custom directives allow you to extend HTML with new tags and attributes. Directives can be reused within and across projects, and are roughly equivalent to custom controls in platforms like .NET.
-Bernardo Castilho

Code Project Article

Article: Extending HTML with AngularJS Directives
Article Samples:

• Download demo project – 91.5 KB
• Download article examples – 11.8 KB

Online AngularJS Samples

Angular Explorer

Sales Dashboard

GeoDashboard

Investment Explorer

Shopping Cart

sheet.getCells(1,1,1,3).vAlign($.wijmo.wijspread.VerticalAlign.top);
sheet.getCells(2,1,2,3).vAlign($.wijmo.wijspread.VerticalAlign.center);
sheet.getCells(3,1,3,3).vAlign($.wijmo.wijspread.VerticalAlign.bottom);
sheet.getCells(1,1,3,1).hAlign($.wijmo.wijspread.HorizontalAlign.left);
sheet.getCells(1,2,3,2).hAlign($.wijmo.wijspread.HorizontalAlign.center);
sheet.getCells(1,3,3,3).hAlign($.wijmo.wijspread.HorizontalAlign.right);
sheet.getCells(1,1,3,3).value("text");
sheet.getRows(1,3).height(60);

You can try all of the above code in a web page which has initialized SpreadJS, to learn more about getting started with SpreadJS in a web page, please read Quick Start Guide to Using SpreadJS.

For more information about how to use SpreadJS, includes its data model and API, please read our online documentation or try online demos.

We’re going to focus on the ‘multirow‘ selectionMode for this article. This selectionMode allows users to select multiple rows using the mouse and the Ctrl/Shift keys. However, once multiple rows have been selected, how do you deselect them? We’re going to look at how to do that through this blog.

Let’s set up the wijgrid with its selectionMode set to multirow.

$("#gridview").wijgrid({
   selectionMode: 'multirow',
   showSelectionOnRender: false
});

Here’s how the wijgrid looks when multiple rows are selected :

Now, what if the user selects a row(s) by mistake or what if he/she changes his/her mind. Well, it’ll be a painful task to clear the selection and then select the rows again leaving out the one selected by mistake.

Instead of making the user go through this rather tedious process, we can let the user deselect rows using Ctrl+click and save them some time. To accomplish this, we’ll handle the CellClicked event of wijgrid and check if the clicked row is selected or not. If it is, we’ll remove it from the selection object.

cellClicked: function (e, args) {
   selection = $(this).wijgrid("selection");
   //get previously selected rows
   selectedRows = document.getElementById("hiddenField1").value;
   if (selectedRows != "") {
      var rows = selectedRows.split(',');
      //check if ctrl key is pressed
      if (event.ctrlKey) {
         var i;
         for (i = 0; i < rows.length; i++) {
            //check if the current row is already selected
            if (parseInt(rows) === args.cell.rowIndex()) {
               //remove the row from selection
               selection.removeRows(args.cell.rowIndex());
            }
         }
      }
   }
   //store selected rows' indices in hidden field
   document.getElementById("hiddenField1").value = $("#gridview").wijgrid("selection").selectedCells()._getSelectedRowsIndicies();
}

This way we can deselect rows using Ctrl+click. You may take a look at the demo given below.

Demo

Hot Topics

This year the hot topics were AngularJS and Web Components. I think everyone that came by our booth was interested in our Angular + Wijmo demo. We have been working hard on Angular support and have some great features for it in coming releases. We are also really excited to see developments in Web Components. Looking forward to Polymer and what it brings to our industry!

Video

Photos

1. Radio buttons are used when there is a list of two or more options that are mutually exclusive and the user must select exactly one option. In other words, clicking a non-selected radio button will de-select whatever other button was previously selected in the list.
2. Checkboxes are used when there are lists of options and the user may select any number of choices, including zero, one, or several. In other words, each checkbox is independent of all other checkboxes in the list, so checking one box doesn’t uncheck the others.

However, if you are displaying an image along with WijRadio and WijCheckbox widgets then the “vertical-align” property does not work. This is a limitation of these widgets.

In this blog, we would see how we can overcome this limitation and render WijRadio/WijCheckbox vertically aligned to the top/middle of an image.

There are two way to achieving the desired requirement:
1. We can set the css of WijRadio and WijCheckbox widgets like below:

/*Css modification for WijRadio*/

/* For top vertical align, we just need set the top position to zero. */
  #topVertical .wijmo-wijradio .wijmo-wijradio-box {
        top: 0px;
  }

/* For middle vertical align, we should adjust the top position to a proper value.
   And this value depends on the actual height of the wijradio control. */
   #middleVerticalSmall .wijmo-wijradio .wijmo-wijradio-box {
        top: 1px;
    }

   #middleVerticalBig .wijmo-wijradio .wijmo-wijradio-box {
        top: 31px;
    }

/*Css modification for WijCheckbox*/

/* For top vertical align, we just need set the top position to zero. */
   #topVerticalCheckbox .wijmo-checkbox .wijmo-checkbox-box {
        top: 0px;
    }

/* For middle vertical align, we should adjust the top position to a proper value.
   And this value depends on the actual height of the wijcheckbox control. */
   #middleVerticalSmallCheckbox .wijmo-checkbox .wijmo-checkbox-box {
        top: 1px;
    }

   #middleVerticalBigCheckbox .wijmo-checkbox .wijmo-checkbox-box {
        top: 31px;
   }

2. We can create a method that calculates the accurate top position of the wijradio and wijcheckbox control for the middle alignment. Here is the code for same:

 // This method calculates the accurate top position of the wijradio and wijcheckbox control for the middle alignment.
  function setMiddleAlignPosition() {
    $('.wijmo-wijradio').each(function () {
       var controlHeight, radionElement, radionElementHeight, topPos;
        controlHeight = $(this).outerHeight();
        radionElement = $(this).children('.wijmo-wijradio-box');
        radionElementHeight = $(radionElement).outerHeight();
        topPos = (controlHeight - radionElementHeight) / 2;
        radionElement.attr('style', 'top:' + topPos + 'px');
     });

    $('.wijmo-checkbox').each(function () {
      var controlHeight, radionElement, radionElementHeight, topPos;
      controlHeight = $(this).outerHeight();
      radionElement = $(this).children('.wijmo-checkbox-box');
      radionElementHeight = $(radionElement).outerHeight();
      topPos = (controlHeight - radionElementHeight) / 2;
      radionElement.attr('style', 'top:' + topPos + 'px');
    });
  }

You may also refer to this sample for implementation.

var ns = $.wijmo.wijspread;
var style = sheet.getDefaultStyle();
style.backColor = "lightgray";
style.foreColor = "purple";
style.borderLeft = new ns.LineBorder("red", ns.LineStyle.hair);
style.borderTop = new ns.LineBorder("red", ns.LineStyle.hair);
style.borderRight = new ns.LineBorder("red", ns.LineStyle.hair);
style.borderBottom = new ns.LineBorder("red", ns.LineStyle.hair);

var cell = sheet.getCells(3, 3, 7, 7);
cell.value(10);
cell.formatter("0.0%");
cell.backColor("lightgreen");
cell.borderLeft(new ns.LineBorder("gray", ns.LineStyle.double));
cell.borderTop(new ns.LineBorder("gray", ns.LineStyle.double));
cell.borderRight(new ns.LineBorder("gray", ns.LineStyle.double));
cell.borderBottom(new ns.LineBorder("gray", ns.LineStyle.double));

var row = sheet.getRows(2, 8);
row.backColor("lightblue");
row.borderLeft(new ns.LineBorder("green", ns.LineStyle.dashed));
row.borderRight(new ns.LineBorder("green", ns.LineStyle.dashed));

var col = sheet.getColumns(2, 8);
col.backColor("pink");
col.borderTop(new ns.LineBorder("blue", ns.LineStyle.dashed));
col.borderBottom(new ns.LineBorder("blue", ns.LineStyle.dashed));

You can try all of the above code in a web page which has initialized SpreadJS, to learn more about getting started with SpreadJS in a web page, please read Quick Start Guide to Using SpreadJS.

For more information about how to use SpreadJS, includes its data model and API, please read our online documentation or try online demos.

Japanese Wijmo Site: http://wijmo.c1.grapecity.com
Japanese Wijmo Press Release: http://www.grapecity.com/tools/aboutus/newsreleasedetail/168
English Press Release: http://wijmo.com/wijmo-officially-expands-its-html5-controls-into-the-japanese-market/

Congratulations to our team in GrapeCity Japan on this monumental release!

“The product and materials have been localized for the Japanese market, including our recently expanded collection of over 40 widgets which include first-class mobile support,” said Chris Bannon, product manager at ComponentOne.

Initially released as a Beta version in February of 2013 and since moved into RTW (release to web),  Wijmo, referred to as Wijmo Professional 2013J in the Japanese market,  now models the company’s other products with a subscription-based plan. Bannon shared that, “Wijmo will feature three releases per year and any customer with a current subscription will be eligible for free upgrades.”

Resources

Japanese Press Release: http://www.grapecity.com/tools/aboutus/newsreleasedetail/168

Japanese Wijmo Site: http://wijmo.c1.grapecity.com
Wijmo 2013 v1 webcast: http://wijmo.com/wijmo-2013-v1-webcast/

About Wijmo
Wijmo provides a set of jQuery widgets for creating interactive websites and apps. Built on jQuery UI and jQuery Mobile guidelines and frameworks, each widget is fully themed and theme-able using Themeroller. Wijmo has everything you need including grids, charts, interactive widgets, and more. Visit http://wijmo.com. Follow @wijmo at http://twitter.com/wijmo and “Like” Wijmo on Facebook at http://www.facebook.com/Wijmo.

Released last month, the 2013 v1 release of Wijmo Enterprise is a kit of user interface (UI) widgets for HTML5 development.  As an exhibitor at booth #15, Wijmo will debut to the audience their new addition to the kit, a high performance spreadsheet component for enterprise web application development.

“We have expanded our collection of over 40 widgets to include first-class mobile support,” said Chris Bannon, product manager at ComponentOne.  “All of our widgets will automatically adapt to jQuery Mobile or jQuery UI environments given we have created the first and only Adaptive Widget Framework on the market with this release” said Bannon.

BreezeJS is quickly becoming the industry standard plug-in for providing data services to JavaScript applications and the 2013 v1 release of Wijmo integrates with these standards. This integration with BreezeJS keeps Wijmo lightweight and gives developers the flexibility to choose the frameworks they want to work in.

Building off the company’s 20 years’ experience with spreadsheet controls, ComponentOne has introduced SpreadJS, the new spreadsheet control which is now part of Wijmo Enterprise. This JavaScript-based widget uses HTML5 Canvas to render Excel-like spreadsheets. “SpreadJS brings additional data visualization and calculation features into your web applications,” said Bannon. “Now you can create calculators, dynamic interactive dashboards, rich colorful reports, and much more using SpreadJS.”

Availability

The Company offers download and purchase options online at https://wijmo.com/purchase/  or by email at sales@wijmo.com.

Resources

Wijmo 2013 v1 webcast: http://wijmo.com/wijmo-2013-v1-webcast/

About Wijmo

Wijmo provides a set of jQuery widgets for creating interactive websites and apps. Built on jQuery UI and jQuery Mobile guidelines and frameworks, each widget is fully themed and theme-able using Themeroller. Wijmo has everything you need including grids, charts, interactive widgets, and more. Visit http://wijmo.com. Follow @wijmo at http://twitter.com/wijmo and “Like” Wijmo on Facebook at http://www.facebook.com/Wijmo.

Give your text a specific color and font style by using the font method of the Cell object. SpreadJS uses syntax of css font, same as the way to set font for other DOM elements.

sheet.addSpan(1, 1, 1, 5);
sheet.setValue(1, 1, "Sale Data Analysis");
sheet.getCell(1, 1).font("bold 16px arial");
sheet.getCell(1, 1).foreColor("white");
sheet.getCell(1, 1).backColor("Purple");.

Plus, give different color or line style borders to a range of cells by using the setBorder method of the Sheet object. It provides many options to easily determine which part of the cell range to set.

sheet.setBorder(new $.wijmo.wijspread.Range(1, 1, 6, 5), new $.wijmo.wijspread.LineBorder("Black", $.wijmo.wijspread.LineStyle.thin), { outline: true });
sheet.setBorder(new $.wijmo.wijspread.Range(1, 1, 6, 5), new $.wijmo.wijspread.LineBorder("Blue", $.wijmo.wijspread.LineStyle.dotted), { inside: true });
sheet.setBorder(new $.wijmo.wijspread.Range(5, 1, 1, 5), new $.wijmo.wijspread.LineBorder("Black", $.wijmo.wijspread.LineStyle.double), { bottom: true });

And you also can change the color of the gridline, even hide the gridline to make your data stand out on the sheet.

sheet.setGridlineOptions({showVerticalGridline: false, showHorizontalGridline: false});

You can try all of the above code in a web page which has initialized SpreadJS, to learn more about getting started with SpreadJS in a web page, please read Quick Start Guide to Using SpreadJS.

For more information about how to use SpreadJS, includes its data model and API, please read our online documentation or try online demos.