GridView Drag and Drop Grab Area

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?

Answer 1

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.

Answer 2

User839733648 posted

Hi mmieher,

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

mmieher

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,

Jenifer

Answer 3

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" />
                    <Columns>

                        <asp:TemplateField>
                            <ItemTemplate>
                                <input type="hidden" name="SortID" value='<%# Eval("idItem") %>' />
                            </ItemTemplate>
                        </asp:TemplateField>

                        <asp:TemplateField>
                            <ItemTemplate>
                                <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") %>'  />
                                </asp:Panel>
                            </ItemTemplate>
                        </asp:TemplateField>
						
                    </Columns>
                    <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" />
                </asp:GridView>

            </div>

        </asp:TableCell>
    </asp:TableRow>
  
   <script src="../Scripts/jquery.tablednd.js" type="text/javascript"></script>

   <script type="text/javascript">
        var strorder;
        $(document).ready(function () {
            //alert("READY");
            var i = 0;
            $("#<%= CatGrid.ClientID %>").find('tr').each(function () {
                $(this).attr('id', i++);
            });

            $("#<%= CatGrid.ClientID %>").tableDnD(
                {
                    onDrop: function (table, row) {
                        reorder();
                        //   alert($('#CatGrid').tableDnDSerialize());
                    }
                }
            );
        });

        function reorder() {
            //alert("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") + "|";
            }
        }

    </script>

</asp:Content>

Answer 4

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,

Jenifer

Answer 5

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. 

Answer 6

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,

Jenifer