GridView da Drag Drop İşlemleri

Merhaba arkadaşlar bu makalemizde GridView nesnesinde seçili satırın yerini sürükle bırak metodu ile değiştireceğiz. Bunun için javascript kodlarından yararlanacağız.  jquery-1.9.1.min dosyasını buradan ,  jquery.tablednd.js dosyasını da buradan indirebilirsiniz.

Screenshot


Şekil 1

Default.aspx.cs

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Bind();
        }
    }

    protected void Bind()
    {
        SqlConnection baglan = new SqlConnection("Data Source=(LocalDB)\\v11.0;AttachDbFilename=|DataDirectory|\\data.mdf;Integrated Security=True;Connect Timeout=30");
        SqlCommand komut = new SqlCommand();
        SqlDataAdapter da = new SqlDataAdapter(komut);
        DataSet ds = new DataSet();

        komut.CommandText = "Select * From [dbo].[Personel]";

        komut.Connection = baglan;
        baglan.Open();

        komut.ExecuteNonQuery();

        da.Fill(ds);

        baglan.Close();

        GridView1.DataSource = ds;

        GridView1.DataBind();

    }
}

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <style type="text/css">
    body
    {
        font-family: Arial;
        font-size : 10pt;
    }
    .surukle
    {
        font-family: Arial;
        font-size : 14pt;
        color : white !important;
        background-color : red !important;
    }
    </style>
    <script type="text/javascript" src="jquery-1.9.1.min.js" ></script>
    <script type="text/javascript" src="jquery.tablednd.js" ></script>
    
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $("#<%=GridView1.ClientID%>").tableDnD({
                onDragClass: "surukle"
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
   
        <asp:GridView ID="GridView1" AutoGenerateColumns="False" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None">

            <AlternatingRowStyle BackColor="White" />

            <Columns>
                 <asp:BoundField HeaderText="Id" DataField="Id" />
                <asp:BoundField HeaderText="Ad" DataField="Ad" />
                <asp:BoundField HeaderText="Soyad" DataField="Soyad" />
                <asp:BoundField HeaderText="Departman" DataField="Kısım" />
                <asp:BoundField HeaderText="Mail" DataField="Mail" />

            </Columns>
            <EditRowStyle BackColor="#2461BF" />
            <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
            <RowStyle BackColor="#EFF3FB" />
            <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
            <SortedAscendingCellStyle BackColor="#F5F7FB" />
            <SortedAscendingHeaderStyle BackColor="#6D95E1" />
            <SortedDescendingCellStyle BackColor="#E9EBEF" />
            <SortedDescendingHeaderStyle BackColor="#4870BE" />
        </asp:GridView>
   
    </div>
    </form>
</body>
</html>

Bir makalenin daha sonuna geldik. Bir sonraki makalede görüşmek üzere. Bahadır ŞAHİN

About Bahadır Şahin

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.

0 comments:

Öne Çıkan Yayın

GridView da Seçili Satırı DetailsView da Göstermek

Merhaba arkadaşlar bu makalemizde GridView nesnesi ile birlikte DetailsView nesanesini birlikte kullanacağız. GridView da seçili satırın de...