Saturday, 16 August 2014

Browse: Home jQueryUI Draggable GridView Using jQuery in Asp.Net

Draggable GridView Using jQuery in Asp.Net

8/16/2014 - By Pranav Singh 0

This article will show you how you can create a new draggable gridview using jQuery and bind by using accessdatasource in asp.net. By this article you will be able to move your gridview in anywhere in browser.

Some of my previous articles are as follows: GridView With Fixed Headers in Asp.Net Using C# and jQuery, Highlight GridView Row on Mouseover Using CSS in Asp.Net C#.Net, Drag Drop Cells in GridView Control Using Asp.net C# and jQuery, Gridview Selected Row Value Pass to JavaScript Function On Hyperlink Click in Asp.net Using C#.Net, GridView Validation Of TextBox Using RequiredFieldValidator Control Asp.Net Using C#.Net, Code to Select All Checkbox in GridView in Asp.Net Using jQuery.

So for this article first we will create a new asp.net application and add the below code into your page.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridViewByDataSource.aspx.cs"

Inherits="ProjectDemo_Asp.et.GridViewByDataSource" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Draggable GridView Using jQuery and Bind By Using AccessDataSource in Asp.Net | Movable GridView Using jQuery in Asp.net</titvle>

<style>

#divdraggable

{

width: 250px;

height: 150px;

padding: 0.5em;

}

</style>

$(function () {

$("#divdraggable").draggable();

});

</script>

</head>

<body>

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="AccessDataSource1"

EmptyDataText="There are no data records to display." Width="250px">

<asp:BoundField DataField="Id" HeaderText="Id" SortExpression="Id" />

<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />

<asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" />

<asp:BoundField DataField="Marks" HeaderText="Marks" SortExpression="Marks" />

</Columns>

</asp:GridView>

<asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="App_Data\bookstore.mdb"

SelectCommand="SELECT `Id`, `Name`, `Address`, `Marks` FROM `Student`"></asp:AccessDataSource>

</div>

</form>

</body>

</html>

In this article I have used the AccessDataSource to bind the gridview. In this please check the below code to perform dragable operation.

Now we have done run the page to check the output.

DOWNLOAD

About the Author

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Saturday, 16 August 2014

Draggable GridView Using jQuery in Asp.Net

0 comments:

Free Ebooks

Popular Posts

Labels

Categories

Free Projects

About Us

Contact Us

Bugs and Suggestions

Partners