Iran Developers Network

حتما دیده‎اید که مثلا صندوق های پستی Hotmail و Yahoo به کاربران اجازه میدهند تا در لیست ایمیل های خود یک یا چند ایمیل را انتخاب کرده و عمل واحدی را روی آن انجام دهند. انتخاب هر ایمیل با تیک زدن یک checkbox کنار آن انجام می شود. شاید بخواهید چنین کاری را در ASP.NET هم انجام دهید. ولی DataGrid موجود در ASP.NET این امکان را بطور خودکار به شما نمی دهد و عمده‌ی کار را خود شما باید انجام دهید. در این مقاله مراحل لازم برای افزودن ستون انتخاب به DataGrid توضیح داده شده است.

——————————————————————————–
صورت مساله

فرض کنید Datagrid ای داریم که اطلاعات دانشجویان یک کلاس را در خود دارد (دقیقاً نام، نام خانوادگی و ID آنها). میخواهیم یک ستون انتخاب به Datagrid خود اضافه کنیم، در داخل این ستون یک checkbox قرار دارد و با انتخاب آن، سطر انتخاب میشود.

راه حل

برای ایجاد لیست دانشجویان تابع زیر را به کد خود اضافه کنید. این تابع یک DataTable ساخته که دو ستون firstname و lastname از نوع String و یک ستون ID از نوع Integer دارد که شماره شناسایی منحصر بفرد دانشجوست. DataTable حاوی اطلاعات پنج دانشجو می باشد.

Private Function generateDataSource() As DataTable
Dim dt As New DataTable
dt.Columns.Add(New DataColumn(“FirstName”, Type.GetType(“System.String”)))
dt.Columns.Add(New DataColumn(“LastName”, Type.GetType(“System.String”)))
dt.Columns.Add(New DataColumn(“ID”, Type.GetType(“System.Int32″)))
Dim dr As DataRow
dr = dt.NewRow
dr.Item(0) = “Salman”
dr.Item(1) = “Zoroofi”
dr.Item(2) = “1″
dt.Rows.Add(dr)
dr = dt.NewRow
dr.Item(0) = “Ali”
dr.Item(1) = “Mohammadi”
dr.Item(2) = “2″
dt.Rows.Add(dr)
dr = dt.NewRow
dr.Item(0) = “Reza”
dr.Item(1) = “Maghsoodi”
dr.Item(2) = “3″
dt.Rows.Add(dr)
dr = dt.NewRow
dr.Item(0) = “Maryam”
dr.Item(1) = “Moosavi”
dr.Item(2) = “4″
dt.Rows.Add(dr)
dr = dt.NewRow
dr.Item(0) = “Ehsan”
dr.Item(1) = “Mojtahedi”
dr.Item(2) = “5″
dt.Rows.Add(dr)
Return dt
End function

برای ارجاع به اینِ DataTable یک متغیر عمومی به نام dt از نوع DataTable تعریف کنید (یعنی آنرا داخل بدنه‌ی کلاس و خارج از بدنه‌ی هر متد تعریف کنید مثلاً درست قبل از Page_load).

Private dt As DataTable
متد Page_Load خود را به صورت زیر تغییر دهید. این متد به dt مقدار اولیه داده و بعضی از خصوصیات Datagrid را تنظیم میکند.

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
DataGrid1.AllowPaging = True
DataGrid1.PageSize = 3
If Not IsPostBack Then
dt = generateDataSource()
viewstate.Add(“dt”, dt)
DataGrid1.DataSource = dt
DataGrid1.DataBind()
Else
dt = CType(viewstate(“dt”), DataTable)
DataGrid1.DataSource = dt
End If
End Sub

افزودن یک ستون انتخاب به Datagrid

یک Datagrid روی فرم قرار دهید، روی آن کلیک راست کرده و Property Builder را انتخاب کنید. در قسمت Columns زیر عنوان Available Columns، گزینه‌ی Template Column را انتخاب کرده و روی دکمه‌ی < کلیک کنید تا این ستون به قسمت Selected Columns اضافه شود. در قسمت Header text نام آنرا به Select تغییر دهید. پنجره را OK کرده و به فرم برگردید. حال باید به این ستون یک checkbox اضافه کنیم. روی Datagrid کلیک راست کرده و Edit Template و Select – Column [0] را انتخاب کنید. در صفحه‌ی جدیدی که ظاهر میشود یک checkbox به داخل قسمت Item Template بیاندازید. برای برگشت به صفحه‌ی اصلی روی این قسمت کلیک راست کرده و End template editing را انتخاب کنید.

مدیریت لیست سطر های انتخاب شده

نکته‌ی مهم در مورد DataGrid اینجاست که DataGrid با هر بار فراخوانی متد DataBind، خود را مجدداً از روی Datasource میسازد . و چون ستون انتخاب ما جزئی از DataSource نیست پس تمام سطرهای انتخاب شده با فراخوانی متد Databind به حالت انتخاب نشده میروند(حالت پیش فرض). راه حل این مشکل این است که قبل از Databind، سطر هایی که انتخاب شده اند را در جایی ذخیره کرده و درست بعد از فراخوانی DataBind آنها را به داخل Datagrid مجددا بارگذاری کنیم.
در اینجا لازم نیست تمام اطلاعات سطرهای انتخاب شده را ذخیره کنیم بلکه کافیست مقدار ستون ID آنها را ذخیره کنیم. زیرا این ID منحصر بفرد بوده و بوسیله‌ی آن میتوان به بقیه اطلاعات فرد هم دسترسی پیدا کرد. این ID ها در یک arraylist به نام arrselected که به صورت عمومی تعریف میشود قرار میگیرند.

Public Shared arrselected As New ArrayList
دقت کنید که تعریف یک متغیر یه صورت shared باعث میشود که مقدار آن در رفت و برگشت های (postback) متوالی به سرور حفظ شود.

سپس باید برای دو رویداد DataBinding و PreRender شی Datagrid کد نوشت: اولی قبل از انجام DataBind (برای عمل ذخیره) و دومی بعد از DataBind (برای عمل load). رویداد PreRender دقیقاً قبل از تولید کد HTML مربوط به Datagrid روی میدهد. در رویداد ID ،DataBinding سطرهای انتخاب شده را به arrselected اضافه کرده (یا اگر قبلاً انتخاب شده بود و هم اکنون انتخاب نشده بود از arrselected حذف میکنیم).

Private Sub DataGrid1_DataBinding(ByVal sender As Object, ByVal e As System.EventArgs) Handles DataGrid1.DataBinding
For Each i As DataGridItem In DataGrid1.Items
‘add
If CType(i.FindControl(“checkbox1″), CheckBox).Checked AndAlso Not arrselected.Contains(i.Cells(3).Text) Then
arrselected.Add(i.Cells(3).Text)
End If
‘remove
If Not CType(i.FindControl(“checkbox1″), CheckBox).Checked Then
arrselected.Remove(i.Cells(3).Text)
End If
Next
End sub

و در رویداد ID ،prerender سطر های Datagrid را با IDهای موجود در arrayselected مقایسه کرده اگر این ID قبلاً انتخاب شده بود checkbox مربوط به آنرا تیک میزنیم.

Private Sub DataGrid1_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles DataGrid1.PreRender
For Each i As DataGridItem In DataGrid1.Items
If arrselected.Contains(i.Cells(3).Text) Then
CType(i.FindControl(“checkbox1″), CheckBox).Checked = True
End If
Next
End Sub

خصوصیت مهم این روش در این است که حتی اگر Datagrid را sort کرده یا از صفحه‌ی جاری به صفحه‌ی دیگری رفته و دوباره به این صفحه برگردید تیک ها سر جای خود می مانند. برای افزودن قابلیت تغییر صفحه، کد زیر را به code behind اضافه کنید.

Private Sub DataGrid1_PageIndexChanged(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridPageChangedEventArgs) Handles DataGrid1.PageIndexChanged
DataGrid1.CurrentPageIndex = e.NewPageIndex
DataGrid1.DataBind()
End Sub

خلاصه

در این مقاله با نحوه‌ی اضافه کردن یک ستون انتخاب به Datagrid آشنا شدید. ابتدا یک ستون template column که یک checkbox در خود دارد به Datagrid اضافه کردید. با دو رویداد DataBinding و PreRender آشنا شده در اولی لیست سطرهای انتخاب شده را به ‌روز میکنید و در دومی وضعیت انتخاب سطرهای Datagrid را از روی این لیست تعیین میکنیم.