Yazı Font Küçült Yazı Font Büyült

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


Resim1

Ş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