Posted 12 September 2017, 2:46 am EST
Could a sample be provided where instead of dragging rows to change the order of the items in the flex grid, we could drag the row from the flex grid and drop it into an
element? Please let me know.Flexgrid Drag Row to another element
Posted by: matth on 12 September 2017, 2:46 am EST
-
matth
-
nilay.vishwakarma
Posted 13 September 2017, 12:22 am EST
Hi,
This is not supported by C1FlexGrid. There is a workaround though. You can add an element in every Row’s header and implement Html5 Drag-Drop. This code can get you started:
<script> var rowdata = {}; function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { rowdata = wijmo.Control.getControl("#gsFlexGrid").itemsSource.items(parseInt(ev.target.id)); } function drop(ev) { ev.preventDefault(); // access rowdata object and add to your DOM } function csFlexGrid_DragDropItemFormatter(panel, r, c, cell) { if (wijmo.grid.CellType.RowHeader == panel.cellType) { cell.innerHTML = "<button id='"+r+"' style='width:100%;height:100%' ondragstart=\"drag(event)\" draggable='true'></button>"; } } </script> @(Html.C1().FlexGrid<Sale>().Id("gsFlexGrid") .IsReadOnly(true) .AllowSorting(true) .Bind(Model.CountryData) .AutoGenerateColumns(true) .ItemFormatter("csFlexGrid_DragDropItemFormatter") ) <div ondrop="drop(event)" ondragover="allowDrop(event)"> </div>~nilay
-
matth
Posted 13 September 2017, 6:22 am EST
Nilay,
Thank you very much for the workaround! I am working on implementation and am running into this error:
Uncaught TypeError: wijmo.Control.getControl(…).itemsSource.items is not a function
Do you know what I can do differently?
-
matth
Posted 13 September 2017, 7:42 am EST
I figured it out! key words ‘is not a function’, it is a collection!
rowdata = wijmo.Control.getControl("#gsFlexGrid").itemsSource.items[parseInt(ev.target.id)];changing parenthesis to brackets did the trick.
-
nilay.vishwakarma
Posted 25 September 2017, 4:10 pm EST
Good catch, items is a collection.
-
matth
Posted 12 October 2017, 11:51 am EST
Could we do the same from a custom column instead of the row header? Could you show a quick sample of how we could create a button to attach the handler to that is inside of a custom column? One where we can still get the row data?
