Databases
StackOverflow2013
Postsdbo
POMVC Grid with dynamic column addition, removal and rearrangement features
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMVC Grid with dynamic column addition, removal and rearrangement features
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USfuzzygeek
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload