GridView Drag and Drop Grab Area RRS feed

  • Question

  • User-1485433867 posted

    I am sure I am using the wrong terminology.  I don't know what it is called.

    My problem is that when dragging and dropping a gridview row, I can only "grab" the row at the very top edge of it.  How to define the "grab" area to be anywhere in the row?

    Monday, February 18, 2019 4:18 PM

All replies

  • User409696431 posted

    You first have to tell us and show us how you made it grabable.   A standard GridView does not have any "drag and drop" feature.

    Tuesday, February 19, 2019 2:40 AM
  • User839733648 posted

    Hi mmieher,

    According to your previous thread, I think that you're asking about  Drag and Drop Grab Area using TableDnd plugin.


    I can only "grab" the row at the very top edge of it

    I'm confused about this description. Do you mean that you could only move the top row?

    I think that you could move any of the row you want.

    If my understanding is wrong, could you please describe your issue in detail with screenshot or codes?

    This may be eaiser for us to help with you.

    PS. For more about TableDnd, you could refer to the examples in this link: http://jsfiddle.net/DenisHo/dxpLrcd9/embedded/result/ 

    Best Regards,


    Tuesday, February 19, 2019 7:06 AM
  • User-1485433867 posted

    Sorry I did not give enough info.  Using the code you provided me in a previous post, I can drag and drop any row.  However, I can only "grab" the row on the very top edge of it.  I want the user to be able to click anywhere in the row and drag it.

    Here is my aspx:

    <%@ Page Title="" Language="vb" AutoEventWireup="true" MasterPageFile="~/DS_Modules/DS_AdminMaster.Master" CodeBehind="DS_CatAdmin.aspx.vb"
        Inherits="ShopperMenu.com.DS_CatAdmin" EnableEventValidation="false" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <asp:TableRow runat="server" Width="100%" VerticalAlign="Top">
            <asp:TableCell runat="server" Style="; left: 20px; top: 130px">
                 <div id = "ScrollList" style="height: 420px; overflow-y: auto; overflow-x: hidden;; top: 25px; left: 0px;">
                    <asp:GridView id = "CatGrid" runat="server" AutoGenerateColumns="False" CellPadding="4" ShowHeader="false"
                        ForeColor = "#333333" GridLines="None" Font-Name="Verdana" Font-Names="Verdana" Width="900px" Height="50px">
                        <AlternatingRowStyle BackColor = "White" ForeColor="#333333" Height="50px" />
                                    <input type="hidden" name="SortID" value='<%# Eval("idItem") %>' />
                                    <asp:Panel ID="CatPanel" runat="server" Width="100%" Height="25px" Visible="true">
                                        <asp:ImageButton runat="server" ID="EditItem" ImageUrl="~/images/Icons/edit.png" Width="25px" CommandName="EditItem"/>
                                        <asp:Label ID="mDesc" runat="server" Width="400px" Text='<%#Bind("mDesc") %>' Style="vertical-align: top"
                                            ForeColor="#F9A11B" Font-Bold="True" />
                                        <asp:Label ID="idParent" runat="server" Width="340px" Text='<%#Bind("idParent") %>' Style="vertical-align: top" />
                                        <asp:Label ID="nItems" runat="server" Width="70px" Text='<%#Bind("nItems") %>' Style="vertical-align: top" />
                                        <asp:ImageButton runat="server" ID="ViewItems" ImageUrl="~/images/Icons/view.png" Width="25px" CommandName="ViewItems" />
                                        <asp:Label ID="idItem" runat="server" visible="false" Text='<%#Bind("idItem") %>'  />
                        <EditRowStyle BackColor="#999999" />
                        <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                        <HeaderStyle BackColor="#f9a11b" Font-Bold="True" ForeColor="White" Font-Size="Small" Height="25px" />
                        <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" VerticalAlign="Middle" />
                        <RowStyle BackColor="#F7F6F3" ForeColor="#333333" Height="25px" />
                        <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                        <SortedAscendingCellStyle BackColor="#E9E7E2" />
                        <SortedAscendingHeaderStyle BackColor="#506C8C" />
                        <SortedDescendingCellStyle BackColor="#FFFDF8" />
                        <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
       <script src="../Scripts/jquery.tablednd.js" type="text/javascript"></script>
       <script type="text/javascript">
            var strorder;
            $(document).ready(function () {
                var i = 0;
                $("#<%= CatGrid.ClientID %>").find('tr').each(function () {
                    $(this).attr('id', i++);
                $("#<%= CatGrid.ClientID %>").tableDnD(
                        onDrop: function (table, row) {
                            //   alert($('#CatGrid').tableDnDSerialize());
            function reorder() {
                strorder = "";
                var totalid = $('#CatGrid tr td input').length;
                for (var i = 0; i < totalid; i++) {
                   // alert(strorder);
                    strorder = strorder + $('#CatGrid tr td input')[i].getAttribute("value") + "|";

    Tuesday, February 19, 2019 1:23 PM
  • User839733648 posted

    Hi mmieher,

    I've used your code to test and find that perhaps the key point is the Panel.

    You could try to delete the asp:Panel to check if the grab could be work any where.

    I think the panel may have some conflicts with the plugin.

    This is the testing image of mine.

    Best Regards,


    Wednesday, February 20, 2019 6:50 AM
  • User-1485433867 posted

    Thank you, Jenifer.  I suspected the panel.  I do that in grid view rows in case I want a "two-line" row.  Anyway, I removed the panel and it made no difference.  Still can only drag from the very top edge.  I suspect that I have something in my Master Page that is messing this up. 

    Wednesday, February 20, 2019 4:29 PM
  • User839733648 posted

    Hi mmieher,

    From my testing I guess that the plugin could just identify the td when grabing the rows.

    If there is a block container like div in the td, the plugin could not identify.

    So I suggest that you could use F12 developer tools to check if there is any block container there. 

    Then find the container and delete it.

    Or you could provide your master page related code for us to help you.

    Best Regards,


    Friday, February 22, 2019 3:00 AM