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:
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 ClassTalal 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"); }