title: MVC Grid with dynamic column addition, removal and rearrangement features
body: <p>My MVC 4 (Razor) project needs to have a grid with the following features:</p>
  
  <p><strong>1. Dynamically adding columns to the grid by dragging and dropping DIV elements to the grid:</strong>
  Initially it will be an empty grid (column-less table). I should be able to drag and drop an external DIV element to the table and a column will be added to the grid with the text of the DIV element. For example, I should be able to drag and drop a DIV with text 'Item Number' from another part of the page to the grid and the grid will show a new column with header 'Item Number' added to it. Next when I drag and drop another external DIV with text 'Item Description' to the grid, a new grid column 'Item Description' will be added right to the previous column. </p>
  
  <p><strong>2. Removing the grid columns:</strong>
  I should be able to remove the grid columns from the grid (e.g.by clicking the X icon at the column header, or by some other means)</p>
  
  <p><strong>3. Rearranging the grid columns:</strong>
  I should be able to rearrange the grid columns by dragging and dropping the column headers to a new location.</p>
  
  <p>I explored some third-party grid controls as follows:</p>
  
  <p><a href="http://www.syncfusion.com/products/aspnet-mvc/grid" rel="nofollow">SyncFusion Essential Grid</a>:
  I could not find any in-built ability to add and remove columns (feature 1 and 2) but it does provide column rearrangment (feature 3)</p>
  
  <p><a href="http://www.devexpress.com/Products/NET/Controls/ASP/Grid/" rel="nofollow">DevExpress Grid</a>:
  Does not seem to provide any of the features, but allows simple drag and drop to/from the column customization (Field Chooser), just as they would in Microsoft Outlook.</p>
  
  <p>Infragistics Data Grid:
  Does not seem to provide any of the 3 features out of the box</p>
  
  <p>My question is does anybody know of a third-party grid control which can provide the above functionalities with mimimum code (if not out of the box)? Or do you think it is better to use plain HTML table with your own jQuery to achieve this? I have already tried the later approach and was able to implement feature 2 and 3 and but I am kind of struggling with the feature 1 where I need the ability to add a column at the right side of the last column as soon as user drops a DIV anywhere in the table. </p>
  
  <p>Any suggestions?</p>