Drag and drop location marker in flexgrid

Posted by: susanne.clark on 7 February 2018, 9:46 pm EST

    • Post Options:
    • Link

    Posted 7 February 2018, 9:46 pm EST

    Hi, this has been raised before, but i cannot see an answer has ever been given.

    We are using drag and drop in a flexgrid to reorder rows, but would like to have some sort of marker to show where the row being dragged will drop. Ideally we would like a line to appear, showing the exact placement of the drop.

    Is this something that can now be done, or something you are working on?

    Many thanks

    Original posted

  • Posted 8 February 2018, 4:44 pm EST

    Hi Sussane,

    We are sorry for the inconvenience.

    You need to set width for wj-marker explicitly to show marker between target rows. Please refer to the following fiddle for the same:

    http://jsfiddle.net/kve6a8zn/2/ , please look for CSS.

    ~Manish

  • Posted 17 April 2018, 12:24 am EST

    Hi,

    I have tried this solution but in wijmo flex-grid its not apply with row header

    there is any different solution for that?

  • Posted 17 April 2018, 10:44 pm EST

    Hi,

    We are unable to replicate the issue at our end, would you please tell us more about your use case including JS framework you are using.

    Also if you are using Angular, try to add following CSS in main styles file rather than individual component style file.

    .wj-flexgrid .wj-rowheaders .wj-marker {
      width: 1000px !important;
    }
    
    .wj-flexgrid [wj-part="rh"] {
      overflow: visible !important;
    }
    

    ~Manish

  • Posted 18 April 2018, 6:43 pm EST

    Thanks ,

    We are using angular but the marker is shows only on row header and column header

    can we add marker on all cell of the grid ,so i will show a marker on any of the place and drag and drop easily

  • Posted 19 April 2018, 6:19 pm EST

    Hi Priya,

    Would you like marker as default?

    Could you please elaborate it with pictures if possible?

    ~Manish

  • Posted 19 April 2018, 8:43 pm EST - Updated 3 October 2022, 11:29 am EST

    No, i want when i will drag and drop

    I have attach images ,so you can get better idea

    As you show, in below image the marker is perfectly working with (cell type=row header)



    In this image,when i will drag and drop in center of cell(cell type= cell) its not showing marker


    I want marker with in this also

    It is feasible or not for wijmo grid??

    Thanks

  • Posted 24 April 2018, 1:50 am EST

    Hi,

    Please refer to the following fiddle:- http://jsfiddle.net/kkyLnkfh/

    ~nilay

  • Posted 24 April 2018, 4:36 pm EST - Updated 3 October 2022, 11:29 am EST

    Hi nilay ,

    The fiddle is not working as for cell (as i mention)

  • Posted 26 April 2018, 8:02 pm EST

    Hi Priya,

    We are sorry, we are unable to replicate the issue at our end. Please refer to the following screencast:

    https://www.screencast.com/t/1RlYgbqkEp

    If we are correct, you would like to allow drag & drop from Cell along with RowHeader. Please confirm…

    ~Manish

  • Posted 29 April 2018, 6:42 pm EST

    Thanks Manish,

    The screen-cast is perfect for RowHeader

    I have attached video with my issue for cell type=cell

    (Note:this video open with windows media player)

    drag and drop issue - Copy.zip

  • Posted 30 April 2018, 7:40 pm EST

    Hi Priya,

    As per screencast, it seems that you have modified the FlexGrid drag and drop behavior. Hence, while you are allowing drag and drop behavior for cells, you need to create the marker and set its position on dragging over the cells.

    Please refer to the following demo fiddle for the same:

    http://jsfiddle.net/7kcepLL2/

    ~Manish

  • Posted 17 May 2018, 5:39 pm EST

    Hi Manish,

    Its working for me

    Thank you so much

    ~Priya

  • Posted 30 May 2018, 9:23 pm EST

    Hi,

    Can we disabled dragdrop in cell edit mode?

    Thanks,

    Priya

  • Posted 1 June 2018, 12:37 am EST

    Hi Priya,

    Please check if there is no cell in edit mode by checking editRange to null.

    Please find the updated sample for the same:

    http://jsfiddle.net/mkgupta911/7kcepLL2/1/

    ~Manish

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels