A Deep dive into Angular 2 basics and difference between the versions tutorial

In this post we are going to see the new features present in the Angular 2, and the differences between the version 1.x and 2.0

First of all, i don't knew who is the person recommends the Angular 2 with, this kind of major changes, now currently angular 1.x versions are have a good popularity among the developers which is very easy to develop a single page applications. angular 1.x versions have many major advantages which makes that popular among the industry.

Features:
1. Two way binding
2. Routing
3. Change Detection
4. Directives
5. Services.
6. Controllers and the Scope concept.

Mainly the Two way binding makes the good feedback among the developers to develop the UI far better than any other framework. But recently google decide to soon release the angular 2 which have some major break changes in the framework.  Google and Microsoft are jointly working in the angular 2 framework,  angular 2 uses Typescript. 

Changes or features present in Angular 2

1 .No more Two way binding
      The major change is there is no more two way binding present in angular , all are uni directional, actually the thing which makes the angular popular among the industry in Two way binding ng-model, i.e is no more present in the up coming release. Angular team clearly indicates that unidirectional flow of data will be present in the angular 2., Here after there is no more $digest loop every time when ever a two way binding occurs.

2. New Router:
      The new release consists of a new router concepts.

3. No $scope
       Hereafter there is no concept called $scope , for a newbie to learn the concept of $scope is difficult, so to avoid the difficulties in learning they removed that concept

4. No Controller
       Angular 2 remove the concepts of controller , rather they uses the concept called web components where every component consists of View, component and class implementation.


@Component({
  selector: 'emp-view',
  componentServices: [
    emplist
  ]
})
@Template({
  url: './templates/emp-view.html',
  directives: [Foreach]
})
class EmpView{
  constructor() {
    this.employees = emplist.get();
  }
  addEmp(newemp) {
    this.employees.push(newemp);
  }

}

5. Fast change detection:
     Angular team changed the change detection mechanism for the newer version, new version refers many libraries implementation about change detection so angular team decided to give a optimized change detection.

6.Written in Typescript
   Angular 2 is written in Typescript , Typescript is statically typed language, so we can get the type errors in compile time itself , typescript is a superscript of ES6, ES6 is a superset of ES5. which are being transpiled to javascript

7 Virtual Dom concept 

8. Improved Dependency Injection

9. supporting mobile

But angular 2 doesnt have a backward compatibility support, so  many applications which are developed in version 1.x can use that if there is no performance issue, because if they want to change or migrate to version 2.0 then it is a huge cost for them, it is better to have a library which have more features than compact small performance increase.

from my concern google destroying the growth of  angular by giving a major change especially in removing of two way binding.

From this post you can see some of the changes takes place in the angular 2 version.

Create a select all checkbox column Header in DataGridView Winforms

In this post we are going to see how to create a checkbox header column in the datagridview to get a feature like select all option in Datagridview.

First we have to understand some few basics things, normally gridviewcolumn header seems like empty, if we want something display in header then we have to customize it.Here we take a simple example like showing a employee details where we want to select all employee records in single click.

To Achieve this we have to do following steps.
1. Drag and Drop a DataGridView from Toolbox.
2. Create a First column as CheckBox 
3. Then bind the data with the DataGridView.

            DataGridViewCheckBoxColumn col1 = new DataGridViewCheckBoxColumn();           

            dataGridView1.Columns.Add(col1);

            dataGridView1.Rows.Add(4);

            dataGridView1.DataSource = new List<Employee>() {

            new Employee(){ FirstName = "Rajesh",LastName = "G",Id=1},

            new Employee(){ FirstName = "Suresh",LastName="G",Id=2}

            };

            

After this step if we run the application, it looks like following one.

Now actually we need to have an Header of a First column should be checkbox, and when select the checkbox it should trigger an event is the requirement.

We have to add a template for HeaderCell for the first column.So create a class which is derived from the DataGridViewColumnHeaderCell, now we can start implement our logic


1. Our header must have a default value with uncheck.
2. It should be present in the center
3. We have to create a checkbox in header.
4. Create a custom event.
4. Create a Event for mouse click.
5. check whether is click above the checkbox, if so trigger the event

    public class CheckBoxHeaderCellEventArgs:EventArgs

    {

        private bool _isChecked;

        public bool IsChecked {

            get { return _isChecked; }

        }

        public CheckBoxHeaderCellEventArgs(bool _checked)

        {

            _isChecked = _checked;

        }

    }

  public delegate void CheckBoxHeaderClickHandler(CheckBoxHeaderCellEventArgs e);

    class CheckBoxHeaderCell:DataGridViewColumnHeaderCell

    {

        Size checkboxsize;

        bool ischecked;

        Point location;

        Point cellboundsLocation;

        CheckBoxState state = CheckBoxState.UncheckedNormal;

        public event CheckBoxHeaderClickHandler OnCheckBoxHeaderClick;

        public CheckBoxHeaderCell()

        {

            location = new Point();

            cellboundsLocation = new Point();

            ischecked = false;

        }

      

        protected override void OnMouseClick(DataGridViewCellMouseEventArgs e)

        {

         /* Make a condition to check whether the click is fired inside a checkbox region */

            Point clickpoint = new Point(e.X + cellboundsLocation.X, e.Y +                                                  cellboundsLocation.Y);

            if ( (clickpoint.X > location.X && clickpoint.X < (location.X +                                       checkboxsize.Width)) && (clickpoint.Y > location.Y && clickpoint.Y <                         (location.Y+checkboxsize.Height)))

            {

                ischecked = !ischecked;

                if (OnCheckBoxHeaderClick != null)

                {

                    OnCheckBoxHeaderClick(new CheckBoxHeaderCellEventArgs(ischecked));

                    this.DataGridView.InvalidateCell(this);

                }

            }

            base.OnMouseClick(e);

        }

        protected override void Paint(Graphics graphics, Rectangle clipBounds, 

             Rectangle cellBounds, int rowIndex, DataGridViewElementStates                                 dataGridViewElementState,object value, object formattedValue, string errorText, 

            DataGridViewCellStyle cellStyle,DataGridViewAdvancedBorderStyle     

            advancedBorderStyle, DataGridViewPaintParts paintParts)

        {

           

            base.Paint(graphics, clipBounds, cellBounds, rowIndex, dataGridViewElementState, 

           value, formattedValue, errorText, cellStyle, advancedBorderStyle, paintParts);

            checkboxsize = CheckBoxRenderer.GetGlyphSize(graphics,                                                               CheckBoxState.UncheckedNormal);

            location.X = cellBounds.X + (cellBounds.Width/2 - checkboxsize.Width/2);

            location.Y = cellBounds.Y + (cellBounds.Height/2 - checkboxsize.Height/2);

            cellboundsLocation = cellBounds.Location;

          

            if (ischecked)

                state = CheckBoxState.CheckedNormal;

            else

                state = CheckBoxState.UncheckedNormal;

            CheckBoxRenderer.DrawCheckBox(graphics, location, state);

        }

    } 

After that  assign the cell template to the gridview column like this.

            DataGridViewCheckBoxColumn col1 = new DataGridViewCheckBoxColumn();

            var checkheader = new CheckBoxHeaderCell();

            checkheader.OnCheckBoxHeaderClick += checkheader_OnCheckBoxHeaderClick;

            col1.HeaderCell = checkheader;

           

            dataGridView1.Columns.Add(col1);

            dataGridView1.Rows.Add(4);

            dataGridView1.DataSource = new List<Employee>() {

            new Employee(){ FirstName = "Rajesh",LastName = "G",Id=1},

            new Employee(){ FirstName = "Suresh",LastName="G",Id=2}

            };

             

When ever click the header check box it will trigger an event , we already hooked an handler for that

        void checkheader_OnCheckBoxHeaderClick(CheckBoxHeaderCellEventArgs e)

        {

            dataGridView1.BeginEdit(true);

            foreach (DataGridViewRow item in dataGridView1.Rows)

            {

                item.Cells[0].Value = e.IsChecked;               

            }

            dataGridView1.EndEdit();

        } 

We can see the exact output what we required.
Output:

From this we can learn how to create a column with checkbox as a header in DataGridView winforms.