บทความ – How to add TextBox to ListView Control


By Nano November 28, 2007

MS Visual Studio 2005
Windows Application (VB.Net)

เป็นบทความที่ผมเขียนไว้บน Greatfriends.biz สามารถศึกษาเพิ่มเติมที่นี่: greatfriends.biz:=>บทความ – How to add TextBox to ListView Control 

ใกล้สิ้นปีงานเริ่มชุม เป็นธรรมดาที่ต้องเร่งงานให้เสร็จก่อนปีใหม่ แฮะๆ…ไม่ใช่กลัวไม่ได้เที่ยวปีใหม่เมากับเพื่อนๆ หรอกครับ กลัวไม่เข้าตากรรมการ โบนัสิ้นปีอาจได้น้อยประมาณนั้น…

มีคำถามจากเพื่อน Greatfriends ท่านหนึ่งถามถึงการใช้งาน ListView Control ประมาณว่าถ้าต้องการ แก้ไขข้อมูลใน ListView ต้องทำอย่างไร ???…

วันนี้จึงแว๊บงาน(อู้งาน) มาปั่บทความนี้เพื่อเป็นการตอบคำถามเพื่อนๆ Greatfriends ครับ…

ListView Control

ไดอะล็อกบ็อกซ์ต่างๆ บนWindows ที่เราใช้งานกันกันอยู่ทุกวันเกือบทั้งหมดเป็น ListView Control เช่น ไดอะล็อกบ็อกซ์เมื่อเราลิสต์ดูชื่อไฟล์ หรือ โฟล์เดอร์ เป็นต้น ลักษณะของ ListView Control จะแสดงข้อมูลเป็นคอลัมน์และแถวเหมือนกับ DataGridView

ดังรูปที่1

clip_image002

รูปที่ 1

ไดอะล็อกบ็อกซ์ลิสต์ชื่อโฟล์เดอร์ และชื่อไฟล์ เราสามารถแก้ไข คอลัมน์แรก(Label) ส่วน subitem ไม่สามารรแก้ไขได้ดังรูปที่2

clip_image004

รูปที่ 2

เรามาทำความรู้จัก ListView Control เบื้องต้น และประยุกต์ใช้งานกันครับ ถ้าเราต้องการ ให้เจ้า ListView Control มันทำได้มากกว่า การแสดงรายละเอียดเป็นรายการล่ะ และถ้าต้องการแก้ไข คอลัมน์มากกว่า1 คอลัมน์ ต้องทำอย่างไร ???… ติดตามต่อครับ

Propertices ListView Control เบื้องต้น(ใช้ในบทความ):

ListView1.View =Detail: แสดงรายกรเป็นคอลัมน์ โดยคอลัมน์แรกบรรจุได้ 1 คอมลัมน์

ListView1.LabelEdit=True: เป็น True ผู้ใช้สามารถแก้ไข Label คอลัมน์แรกได้ใน View แบบ Detail

ListView1.FullRowSelect=True: เป็น True เป็นการเลือกทั้งแถวของ Item หนึ่งๆ

ListView1.GridLines=True: True เป็นการแสดงเส้นแถและคอลัมน์

ListView1.Columns = ListView หนึ่งๆ เราสามารถเพิ่ม Column ได้

Event ListView Control เบื้องต้น:

ListView1.BeforeLabelEdit: Event นี้เกิดขึ้นก่อนที่เราจะเริ่มแก้ไข Label

Method ListView Control เบื้องต้น:

ListView1.Controls.Clear(): เป็นการ Clear Control ใน ListView

ListView1.Controls.Add(ControlName): เป็นการเพิ่มControl เข้าไปใน ListView

ListView1.Controls.Remove(ControlName): เป็นการลบControl เข้าไปใน ListView

ListViewItem:

Item หนึ่งๆ ใน Listview เป็นอินสแตนซ์ตัวหนึ่งของ Class ListViewItem และมีคอลเล็กชั่นตัวหนึ่งคือ SubItems ซึ่งเจ้า SubItems จะเก็บอินสแตนซ์ของ Class ListViewSubItem subitem เหล่านี้เป็นคอลัมน์หนึ่งใน ListView เมื่อ ListView อยู่ในโหมด Detail ซึ่งเจ้า supitem ไม่สามารถแสดง icon ได้เหมือน item หลัก หรือคอลัมน์แรก (Label)

ประยุกต์ ListView Control:

เนื่องจาก ListView Control สามารถแก้ไขเฉพาะ Label (คอลัมน์แรก) เท่านั้น โดยกำหนด Properties LabelEdit=True ถ้าเราต้องการแก้ไข subitem สามารถแก้ไขได้ครับ โดยทำการเพิ่ม Coltrol TextBox เข้าไปใน ListView ตาม คอลัมน์ที่เราต้องการแก้ไข

แนวคิด:

แนวคิดในการเพิ่ม Control TextBox เข้าใน ListView เพื่อให้ ListView แก้ไขข้อมูลได้มากกว่า 1 คอลัมน์ โดยใช้ method ListView1.Controls.Add(TextBoxName)

โดย TextBoxName ได้จากเรา New อินสแตนซ์ของ Class TextBox จากนั้นทำการหนด ความกว้าง(Width), ความสูง(Height), ตำแหน่ง(Location) ข้อความบน(Text) บน TextBoxName

เป็นต้น

สมมุติว่าเรามี ListView ที่แสดงข้อมูลรายการสินค้าดังรูป โดยเราสามารถแก้ไขคอลัมน์ Pductname, ProductName, QuantityPerUnit, UnitPrice, UnitsInStock ตาม ID (ProductID) ดังรูปที่3

clip_image006

รูปที่ 3

เมื่อเราดับเบิ้ลคลิกบน Label ID จะมี TextBox Show ตาม Column ที่ต้องการแก้ไข และสามารถทำการแก้ไขข้อมูลได้ เมื่อทำการแก้ไขคอลัมน์นั้นๆ เรียบร้อยพื้นคอลัมน์จะกลายเป็นสีชมพู ละตัวหนัวสือเป็นสีแดง ดังรูปที่4

clip_image008

รูปที่ 4

ออกแบบหน้าจอ

สร้าง Project เป็น WindowsApplication (VB) แล้วลาก ListView1, Button1 มาวางบน Form1 ดังรูปที่5

clip_image010

รูปที่ 5

Coding

‘// How to add TextBox to ListView Control

Imports System.Data

Imports System.Data.SqlClient

Public Class Form1

Dim conn As SqlConnection

Dim dt As DataTable

Dim seleItem As ListViewItem

Dim tmpTxtProductName As New TextBox ‘// TextBox สำหรับ add เข้า listview Column =>ProductName

Dim tmpTxtQuantityPerUnit As New TextBox ‘// TextBox สำหรับ add เข้า listview Column =>QuantityPerUnit

Dim tmpTxtUnitPrice As New TextBox ‘// TextBox สำหรับ add เข้า listview Column =>UnitPrice

Dim tmpTxtUnitsInStock As New TextBox ‘// TextBox สำหรับ add เข้า listview Column =>UnitsInStock

‘// Load Data

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

conn = New SqlConnection("Data Source=.SQLEXPRESS;Initial Catalog=Northwind;Persist Security Info=True;User ID=sa;Password=xx")

conn.Open()

Dim sql As String = "SELECT ProductID,ProductName,QuantityPerUnit,UnitPrice,UnitsInStock FROM Products"

Dim cmd As SqlCommand = New SqlCommand(sql, conn)

Dim dsr As SqlDataReader = cmd.ExecuteReader

dsr.Read()

dt = New DataTable

dt.Load(dsr)

ListView1.Items.Clear() ‘// Clear ข้อมูลใน ListView1 ก่อน Add ข้อมูลใดๆ

‘// ลูป For Each add ข้อมูล เข้า ListView1

For Each row As DataRow In dt.Rows

Dim li As New ListViewItem

li.UseItemStyleForSubItems = False

li.Text = CType(row("ProductID"), String) ‘// Column=ID เป็น Label header เก็บข้อมูล ProductID

li.SubItems.Add(CType(row("ProductName"), String)) ‘// Column=ProductName เก็บข้อมูล ProductName

li.SubItems.Add(CType(row("QuantityPerUnit"), String)) ‘// Column=QuantityPerUnit เก็บข้อมูล QuantityPerUnit

li.SubItems.Add(CType(row("UnitPrice"), Double)) ‘// Column=UnitPrice เก็บข้อมูล UnitPrice

li.SubItems.Add(CType(row("UnitsInStock"), Integer)) ‘// Column=UnitsInStock เก็บข้อมูล UnitsInStock

ListView1.Items.Add(li) ‘// เพิ่มข้อมูล Items เข้าไปใน ListView1 (new row)

li = Nothing ‘// คืน memory ให้ระบบ

Next

dsr.Close() ‘// Close SqlDataReader

End Sub

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

‘====================================================================

‘//AddHandler

‘====================================================================

‘>>Leave

AddHandler tmpTxtProductName.Leave, AddressOf tmpTxtProductName_Leave

AddHandler tmpTxtQuantityPerUnit.Leave, AddressOf tmpTxtQuantityPerUnit_Leave

AddHandler tmpTxtUnitPrice.Leave, AddressOf tmpTxtUnitPrice_Leave

AddHandler tmpTxtUnitsInStock.Leave, AddressOf tmpTxtUnitsInStock_Leave

‘>>KeyDown

AddHandler tmpTxtProductName.KeyDown, AddressOf tmpTxtProductName_KeyDown

AddHandler tmpTxtQuantityPerUnit.KeyDown, AddressOf tmpTxtQuantityPerUnit_KeyDown

AddHandler tmpTxtUnitPrice.KeyDown, AddressOf tmpTxtUnitPrice_KeyDown

AddHandler tmpTxtUnitsInStock.KeyDown, AddressOf tmpTxtUnitsInStock_KeyDown

‘>>Click

AddHandler tmpTxtProductName.Click, AddressOf tmpTxtProductName_Click

AddHandler tmpTxtQuantityPerUnit.Click, AddressOf tmpTxtQuantityPerUnit_Click

AddHandler tmpTxtUnitPrice.Click, AddressOf tmpTxtUnitPrice_Click

AddHandler tmpTxtUnitsInStock.Click, AddressOf tmpTxtUnitsInStock_Click

‘====================================================================

ListView1.View = View.Details

ListView1.LabelEdit = True

ListView1.FullRowSelect = True

ListView1.GridLines = True

‘====================================================================

‘// set Columns

‘====================================================================

ListView1.Columns.Add("ID", 30, HorizontalAlignment.Center)

ListView1.Columns.Add("ProductName", 300, HorizontalAlignment.Left)

ListView1.Columns.Add("QuantityPerUnit", 95, HorizontalAlignment.Right)

ListView1.Columns.Add("UnitPrice", 95, HorizontalAlignment.Right)

ListView1.Columns.Add("UnitsInStock", 95, HorizontalAlignment.Right)

End Sub

Private Sub ListView1_BeforeLabelEdit(ByVal sender As System.Object, ByVal e As System.Windows.Forms.LabelEditEventArgs) Handles ListView1.BeforeLabelEdit

ListView1.Controls.Clear() ‘ลบ Control บน ListView1 ออก

e.CancelEdit = True ‘ ไม่แก้ไข label (คอลัมน์แรก)

seleItem = ListView1.SelectedItems(0) ‘ เก็บ Item ที่ User คลิกแก้ไข

”=======================================

”tmpTxtProductName column ProductName

”=======================================

‘เก็บ ความกว้าง คอลัมน์ไว้ใช้งาน

Dim widthCol1 As Integer = ListView1.Columns(1).Width

Dim widthCol2 As Integer = ListView1.Columns(2).Width

Dim widthCol3 As Integer = ListView1.Columns(3).Width

Dim widthCol4 As Integer = ListView1.Columns(4).Width

Dim y As Integer = seleItem.Bounds.Y ‘เก็บค่า แกน y

Dim h As Integer = seleItem.Bounds.Height ‘เก็บค่าความสูง

Dim _x As Integer = seleItem.Bounds.Width – widthCol1

‘กำหนด ค่าให้ อินสแตนซ์ tmpTxtProductName

tmpTxtProductName.TextAlign = HorizontalAlignment.Left

tmpTxtProductName.Width = widthCol1

tmpTxtProductName.Height = h

tmpTxtProductName.Margin = New Padding(0, 0, 0, 0)

‘set Location ให้ tmpTxtProductName

tmpTxtProductName.Location = New Point(_x – (widthCol2 + widthCol3 + widthCol4), y)

ListView1.Controls.Add(tmpTxtProductName) ‘Add TextBox to ListView

tmpTxtProductName.Text = seleItem.SubItems(1).Text ‘ set Text เอาจาก SubItems(1)หรือ ค่าใน column ProductName

tmpTxtProductName.Focus() ‘set focus

tmpTxtProductName.SelectAll() ‘Select text All

‘=======================================

‘tmpTxtQuantityPerUnit Column QuantityPerUnit

‘=======================================

y = seleItem.Bounds.Y

h = seleItem.Bounds.Height

_x = seleItem.Bounds.Width – widthCol2

tmpTxtQuantityPerUnit.TextAlign = HorizontalAlignment.Right

tmpTxtQuantityPerUnit.Width = widthCol2

tmpTxtQuantityPerUnit.Height = h

tmpTxtQuantityPerUnit.Margin = New Padding(0, 0, 0, 0)

tmpTxtQuantityPerUnit.Location = New Point(_x – (widthCol2 + widthCol3), y)

ListView1.Controls.Add(tmpTxtQuantityPerUnit)

tmpTxtQuantityPerUnit.Text = seleItem.SubItems(2).Text ‘ set Text เอาจาก SubItems(2)หรือ ค่าใน column QuantityPerUnit

‘=======================================

‘tmpTxtUnitPrice Column UnitPrice

‘=======================================

y = seleItem.Bounds.Y

h = seleItem.Bounds.Height

_x = seleItem.Bounds.Width – widthCol3

tmpTxtUnitPrice.TextAlign = HorizontalAlignment.Right

tmpTxtUnitPrice.Width = widthCol3

tmpTxtUnitPrice.Height = h

tmpTxtUnitPrice.Margin = New Padding(0, 0, 0, 0)

tmpTxtUnitPrice.Location = New Point(_x – widthCol4, y)

ListView1.Controls.Add(tmpTxtUnitPrice)

tmpTxtUnitPrice.Text = seleItem.SubItems(3).Text ‘ set Text เอาจาก SubItems(3)หรือ ค่าใน column UnitPrice

‘=======================================

‘tmpTxtUnitsInStock Column UnitsInStock

‘=======================================

y = seleItem.Bounds.Y

h = seleItem.Bounds.Height

_x = seleItem.Bounds.Width – widthCol4

tmpTxtUnitsInStock.TextAlign = HorizontalAlignment.Right

tmpTxtUnitsInStock.Width = widthCol4

tmpTxtUnitsInStock.Height = h

tmpTxtUnitsInStock.Margin = New Padding(0, 0, 0, 0)

tmpTxtUnitsInStock.Location = New Point(_x, y)

ListView1.Controls.Add(tmpTxtUnitsInStock)

tmpTxtUnitsInStock.Text = seleItem.SubItems(4).Text ‘ set Text เอาจาก SubItems(4)หรือ ค่าใน column UnitsInStock

End Sub

Private Sub ListView1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles ListView1.Click

‘เมื่อมีการ Click บน ListView1 ให้ ลบ TextBox ออกทั้งหมด

ListView1.Controls.Clear()

End Sub

Private Sub tmpTxtProductName_Leave(ByVal sender As System.Object, ByVal e As System.EventArgs)

‘เมื่อ tmpTxtProductName Lost focus

seleItem.SubItems(1).Text = tmpTxtProductName.Text ‘เก็บค่าบน TextBox กลับเข้าไปใน SubItems

seleItem.SubItems(1).ForeColor = Color.Red

seleItem.SubItems(1).BackColor = Color.PeachPuff

ListView1.Controls.Remove(tmpTxtProductName) ‘ลบ tmpTxtProductName ออก

End Sub

Private Sub tmpTxtQuantityPerUnit_Leave(ByVal sender As System.Object, ByVal e As System.EventArgs)

‘เมื่อ tmpTxtQuantityPerUnit Lost focus

seleItem.SubItems(2).Text = tmpTxtQuantityPerUnit.Text ‘เก็บค่าบน TextBox กลับเข้าไปใน SubItems

seleItem.SubItems(2).ForeColor = Color.Red

seleItem.SubItems(2).BackColor = Color.PeachPuff

ListView1.Controls.Remove(tmpTxtQuantityPerUnit) ‘ลบ tmpTxtQuantityPerUnit ออก

End Sub

Private Sub tmpTxtUnitPrice_Leave(ByVal sender As System.Object, ByVal e As System.EventArgs)

‘เมื่อ tmpTxtUnitPrice Lost focus

seleItem.SubItems(3).Text = tmpTxtUnitPrice.Text ‘เก็บค่าบน TextBox กลับเข้าไปใน SubItems

seleItem.SubItems(3).ForeColor = Color.Red

seleItem.SubItems(3).BackColor = Color.PeachPuff

ListView1.Controls.Remove(tmpTxtUnitPrice) ‘ลบ tmpTxtUnitPrice ออก

End Sub

Private Sub tmpTxtUnitsInStock_Leave(ByVal sender As System.Object, ByVal e As System.EventArgs)

seleItem.SubItems(4).Text = tmpTxtUnitsInStock.Text ‘เก็บค่าบน TextBox กลับเข้าไปใน SubItems

seleItem.SubItems(4).ForeColor = Color.Red

seleItem.SubItems(4).BackColor = Color.PeachPuff

ListView1.Controls.Remove(tmpTxtUnitsInStock) ‘ลบ tmpTxtUnitsInStock ออก

End Sub

Private Sub tmpTxtProductName_KeyDown(ByVal sender As System.Object, ByVal e As System.Windows.Forms.KeyEventArgs)

‘เมื่อUser กด Enter บน tmpTxtProductName

If e.KeyCode = Keys.Enter Then

seleItem.SubItems(1).Text = tmpTxtProductName.Text ‘เก็บค่าบน TextBox กลับเข้าไปใน SubItems

seleItem.SubItems(1).ForeColor = Color.Red

seleItem.SubItems(1).BackColor = Color.PeachPuff

ListView1.Controls.Remove(tmpTxtProductName) ‘ลบ tmpTxtProductName ออก

End If

End Sub

Private Sub tmpTxtQuantityPerUnit_KeyDown(ByVal sender As System.Object, ByVal e As System.Windows.Forms.KeyEventArgs)

‘เมื่อUser กด Enter บน tmpTxtQuantityPerUnit

If e.KeyCode = Keys.Enter Then

seleItem.SubItems(2).Text = tmpTxtQuantityPerUnit.Text ‘เก็บค่าบน TextBox กลับเข้าไปใน SubItems

seleItem.SubItems(2).ForeColor = Color.Red

seleItem.SubItems(2).BackColor = Color.PeachPuff

ListView1.Controls.Remove(tmpTxtQuantityPerUnit) ‘ลบ tmpTxtQuantityPerUnit ออก

End If

End Sub

Private Sub tmpTxtUnitPrice_KeyDown(ByVal sender As System.Object, ByVal e As System.Windows.Forms.KeyEventArgs)

‘เมื่อUser กด Enter บน tmpTxtUnitPrice

If e.KeyCode = Keys.Enter Then

seleItem.SubItems(3).Text = tmpTxtUnitPrice.Text

seleItem.SubItems(3).ForeColor = Color.Red

seleItem.SubItems(3).BackColor = Color.PeachPuff

ListView1.Controls.Remove(tmpTxtUnitPrice) ‘ลบ tmpTxtUnitPrice ออก

End If

End Sub

Private Sub tmpTxtUnitsInStock_KeyDown(ByVal sender As System.Object, ByVal e As System.Windows.Forms.KeyEventArgs)

‘เมื่อUser กด Enter บน tmpTxtUnitsInStock

If e.KeyCode = Keys.Enter Then

seleItem.SubItems(4).Text = tmpTxtUnitsInStock.Text ‘เก็บค่าบน TextBox กลับเข้าไปใน SubItems

seleItem.SubItems(4).ForeColor = Color.Red

seleItem.SubItems(4).BackColor = Color.PeachPuff

ListView1.Controls.Remove(tmpTxtUnitsInStock) ‘ลบ tmpTxtUnitsInStock ออก

End If

End Sub

Private Sub tmpTxtProductName_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)

‘เมื่อ User Click บน tmpTxtProductName ให้เลือก Text ทั้งหมด

tmpTxtProductName.SelectAll()

End Sub

Private Sub tmpTxtQuantityPerUnit_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)

‘เมื่อ User Click บน tmpTxtQuantityPerUnit ให้เลือก Text ทั้งหมด

tmpTxtQuantityPerUnit.SelectAll()

End Sub

Private Sub tmpTxtUnitPrice_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)

‘เมื่อ User Click บน tmpTxtUnitPrice ให้เลือก Text ทั้งหมด

tmpTxtUnitPrice.SelectAll()

End Sub

Private Sub tmpTxtUnitsInStock_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)

‘เมื่อ User Click บน tmpTxtUnitsInStock ให้เลือก Text ทั้งหมด

tmpTxtUnitsInStock.SelectAll()

End Sub

End Class

Summary

หวังว่าบทความนี้สามารถตอบข้อสงสัยเพื่อนๆ และผู้อ่านได้บ้างไม่มากก็น้อย และหวังเป็นอย่างยิ่งว่า ท่านจะสนุกกับการเดินบนเส้นทางของโลก.Net ต่อไป

หากเกิดข้อผิดพลาดประการได ขอน้อมรับคำแนะนำ และพร้อมแก้ไขในครั้งต่อไปครับ

อ้างอิง:

ตัวอย่างการนำข้อมูล database แสดงใน TreeView และ ListView (VB 2005)
http://greatfriends.biz/?15854 โดย คุณ surrealist (อ.สุเทพ)

Reusable ListView in C# with textbox and combobox:

http://www.codeproject.com/cs/miscctrl/CustomListView.asp

 

อ่านเพิ่มเติมบน Greatfriends.biz ครับ: greatfriends.biz:=>บทความ – How to add TextBox to ListView Control

เกี่ยวกับ

Nuchit Atjanawat is a Microsoft MVP, GreatFriends Community Leader, WindowsITPro Columnist(Mr.Nano), Silverlight Business Application Instructor, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession. He has a very good skill over Silverlight, LightSwitch, C#, XAML & Blend. He shares his technical findings, tutorials in his technical blog. Follow his Blog and Facebook page to be updated on latest articles. - Technical Blog: https://janawat.wordpress.com - WindowsITPro Columnist(Mr.Nano): http://windowsitpro.net - The GreatFriends.Biz Community Discussion Board (nano): http://greatfriends.biz - witter: https://twitter.com/janawat - Facebook Page: https://www.facebook.com/nuchit - Instructor: http://bit.ly/GF250-01, http://bit.ly/GF150-02

เขียนใน Windows Application
2 comments on “บทความ – How to add TextBox to ListView Control
  1. mamgmo พูดว่า:

    สุดยอดเลยคร๊าบ

  2. artiya พูดว่า:

    ขอบคุณมากๆนะค่ะ บทความของคุณเป็นประโยชน์กับดิฉันมากค่ะ ขอให้คุณเจ้าของบทความบทความมีสุขมากๆน่ะค่ะ ^^

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

In Archive
%d bloggers like this: