ASP.NET

jQuery Table Drag and Drop with condition RSS

1 reply

Last post Feb 06, 2013 01:42 PM by Talal Tayyab

‹ Previous Thread|Next Thread ›

nganesha

Member

46 Points

51 Posts

jQuery Table Drag and Drop with condition

Feb 05, 2013 07:24 PM|LINK

Hi,

Back with another question on query table drag and drop.

I am using the table drag and drop functionality in gridview and this works perfectly (got it from one of the samples). However, i need to add a drop down (ddl) and requirement is, only if selected value is not equal to "%", users should be able to drag and drop rows in the gridview. Below is the working code:

HTML (User control):

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="DefaultUC.ascx.vb" Inherits="TestProjects.DefaultUC" %>

<style type="text/css">
    body
    {
        font-family: Arial;
        font-size : 10pt;
    }
    .myDragClass
    {
        font-family: Arial;
        font-size : 18pt;
        color : Red !important;
        background-color : yellow !important;
    }
    </style>
<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.tablednd.0.6.min.js" type="text/javascript"></script>

    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            
                
            
            $("#<%=gdRows.ClientID%>").tableDnD({
                onDragClass: "myDragClass"
            });
        });
    </script>

    <div>
        <b>Click on the column to remove the column.</b>
        <br />
        <asp:DropDownList ID="ddl1" runat="server" AutoPostBack="true">
            <asp:ListItem Value="%" Text="All"></asp:ListItem>
            <asp:ListItem Value="Mouse" Text="Mouse"></asp:ListItem>
            <asp:ListItem Value="Speaker" Text="Speaker"></asp:ListItem>
            <asp:ListItem Value="Hard Drive" Text="Hard Drive"></asp:ListItem>
            <asp:ListItem Value="RAM" Text="RAM"></asp:ListItem>
            <asp:ListItem Value="Keyboard" Text="Keyboard"></asp:ListItem>
        </asp:DropDownList>
        <br />
        <asp:GridView ID="gdRows" runat="server" BackColor="White" BorderColor="#CC9966" BorderStyle="Solid" BorderWidth="1px" CellPadding="4" Font-Names="Arial" Font-Size="Small">
            <RowStyle BackColor="White" ForeColor="#330099" />
            <FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
            <PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />
            <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />
        </asp:GridView>
        <br /><br />


        <asp:HiddenField ID="hnd" runat="server" />


        <asp:Button ID="btnReset" Text="Reset" runat="server" OnClick="btnReset_Click" />
    </div>

VB Code:

Imports System
Imports System.Data
Imports System.Configuration
Imports System.Web
Imports System.Web.Security
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.WebParts
Imports System.Web.UI.HtmlControls

Public Class DefaultUC
    Inherits System.Web.UI.UserControl

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            Me.hnd.Value = "%"
            BindGrid()
        End If
    End Sub

    Private Sub BindGrid()
        Dim dt As New DataTable()
        Dim dc As DataColumn
        dc = New DataColumn()
        dc.ColumnName = "ID"
        dc.DataType = System.Type.[GetType]("System.Int32")
        dt.Columns.Add(dc)

        dc = New DataColumn()
        dc.ColumnName = "ProductName"
        dt.Columns.Add(dc)

        dc = New DataColumn()
        dc.ColumnName = "Quantity"
        dc.DataType = System.Type.[GetType]("System.Int32")
        dt.Columns.Add(dc)

        dc = New DataColumn()
        dc.ColumnName = "Price"
        dc.DataType = System.Type.[GetType]("System.Int32")
        dt.Columns.Add(dc)


        Dim dr As DataRow
        dr = dt.NewRow()
        dr("ID") = 1
        dr("ProductName") = "Mouse"
        dr("Quantity") = 10
        dr("Price") = 100
        dt.Rows.Add(dr)

        dr = dt.NewRow()
        dr("ID") = 2
        dr("ProductName") = "Speaker"
        dr("Quantity") = 15
        dr("Price") = 990
        dt.Rows.Add(dr)

        dr = dt.NewRow()
        dr("ID") = 3
        dr("ProductName") = "Hard Drive"
        dr("Quantity") = 35
        dr("Price") = 3990
        dt.Rows.Add(dr)

        dr = dt.NewRow()
        dr("ID") = 4
        dr("ProductName") = "Ram"
        dr("Quantity") = 22
        dr("Price") = 399
        dt.Rows.Add(dr)

        dr = dt.NewRow()
        dr("ID") = 5
        dr("ProductName") = "Keyboard"
        dr("Quantity") = 20
        dr("Price") = 350
        dt.Rows.Add(dr)

        dr = dt.NewRow()
        dr("ID") = 6
        dr("ProductName") = "Router"
        dr("Quantity") = 1
        dr("Price") = 3990
        dt.Rows.Add(dr)

        dr = dt.NewRow()
        dr("ID") = 7
        dr("ProductName") = "LCD"
        dr("Quantity") = 62
        dr("Price") = 3000
        dt.Rows.Add(dr)

        dr = dt.NewRow()
        dr("ID") = 8
        dr("ProductName") = "Processor"
        dr("Quantity") = 5
        dr("Price") = 7000
        dt.Rows.Add(dr)

        dr = dt.NewRow()
        dr("ID") = 9
        dr("ProductName") = "Processor"
        dr("Quantity") = 5
        dr("Price") = 2000
        dt.Rows.Add(dr)

        dr = dt.NewRow()
        dr("ID") = 10
        dr("ProductName") = "Processor"
        dr("Quantity") = 2
        dr("Price") = 3000
        dt.Rows.Add(dr)

        dr = dt.NewRow()
        dr("ID") = 11
        dr("ProductName") = "RAM"
        dr("Quantity") = 5
        dr("Price") = 7000
        dt.Rows.Add(dr)

        dr = dt.NewRow()
        dr("ID") = 12
        dr("ProductName") = "Keyboard"
        dr("Quantity") = 1
        dr("Price") = 4000
        dt.Rows.Add(dr)

        gdRows.DataSource = dt
        gdRows.DataBind()

    End Sub

    Protected Sub btnReset_Click(ByVal sender As Object, ByVal e As EventArgs)
        BindGrid()
    End Sub

    Private Sub ddl1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles ddl1.SelectedIndexChanged
        Me.hnd.Value = Me.ddl1.SelectedIndex
    End Sub
End Class

- Reply
Talal Tayyab

Participant

902 Points

132 Posts
Re: jQuery Table Drag and Drop with condition

Feb 06, 2013 01:42 PM|LINK
What you need to do is to add the nodrop nodrag class. In your code do the following:

In document ready event add the following code after the tableDnD:
```
changeDragDrop();
    
    $("#ddl1").change(function () {
       changeDragDrop();
       
    });
```
Add the changeDragDrop function
```
function changeDragDrop()
{
    if ($("#ddl1").val() == "%")
        $("#<%=gdRows.ClientID%> tr").addClass("nodrop nodrag");
    else
        $("#<%=gdRows.ClientID%> tr").removeClass("nodrop nodrag");
}
```
Please remember to mark as Answer if the post helps you out.
- Edited by Talal Tayyab on Feb 06, 2013 01:43 PM
- Marked as answer by Yanping Wang - MSFT on Feb 11, 2013 03:08 AM

‹ Previous Thread|Next Thread ›

jQuery Table Drag and Drop with condition RSS

1 reply

nganesha

jQuery Table Drag and Drop with condition

Talal Tayyab

Re: jQuery Table Drag and Drop with condition

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft