1. #1
    Sencha User
    Join Date
    Apr 2007
    Posts
    83
    Vote Rating
    5
    bobmanc is on a distinguished road

      1  

    Default Want to be able to drag over a grid row not before or after

    Want to be able to drag over a grid row not before or after


    I am using two grids where one is the dragable and the other the dropable. This works fine but I was wondering if there was a way to alter the way it looks. When I drag a row over my dropable row the dropable row is highlighted but there is also a line with arrows on either side implying the user can drop the row between, after or before the selected row which I don't allow. They can only drop on top of a row.

    Any way to hide the arrows and line?

  2. #2
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,080
    Vote Rating
    113
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    There isn't a specific config out of the box to do this. The case we were anticipating is that people were dragging records between two places and order mattered (not the case where users were associating a particular record with another record). This would be a good feature request for Ext JS.

    Take a look at src/grid/ViewDropZone.js

    You can do this by overriding the CSS rules .x-grid-drop-indicator-left and .x-grid-drop-indicator-right. Or you could override the indicatorHtml. If you needed to get more specific like highlighting a particular row would probably take more work in src/view/DropZone.js
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  3. #3
    Sencha User
    Join Date
    Apr 2007
    Posts
    83
    Vote Rating
    5
    bobmanc is on a distinguished road

      1  

    Default


    Thanks. This did the trick where empty.png is a 1x1 transparent image.

    .x-grid-drop-indicator .x-grid-drop-indicator-left {
    background-image: url(../images/empty.png);
    }
    .x-grid-drop-indicator .x-grid-drop-indicator-right {
    background-image: url(../images/empty.png);
    }
    .x-grid-drop-indicator {
    background-color: transparent;
    }

  4. #4
    Sencha User
    Join Date
    Apr 2007
    Posts
    83
    Vote Rating
    5
    bobmanc is on a distinguished road

      0  

    Default


    It would be good to have this built in as a config. Since the drag and drop part is a plugin the only way I can style it (without globally styling them as above) is to do this

    #component-1617.x-grid-drop-indicator{
    }

    Which is not ideal.

Thread Participants: 1