Makale Özeti

Selamlar bu makale ile sizlere datagrid’in içine nasil checkbox yerlestirecegimizi ve bu checkbox sayesinde nasil istegimiz Rowlari seçebilecegimizi anlatmaya çalisacagim.

Makale

Selamlar bu makale ile sizlere datagrid’in içine nasil checkbox yerlestirecegimizi ve bu checkbox sayesinde nasil istegimiz Rowlari seçebilecegimizi anlatmaya çalisacagim. Asp.net’te ki datagrid aslinda hareketlerimizi çok sinirlayici gibi görünsede TemplateColumn sayesinde aslinda datagrid’de özgürlügümüzü tekrardan kontrol altina alabiliyoruz. Bununla ilgili çok karisik olmayan bir örnegi anlatmak istiyorum.

Ilk olarak datagridimizde neler olacagini anlatmakla baslayalim.
1- Datagridimizin Header’inda yani basliginda bir checkbox olacak ki datagrid’mizde listeledigimiz recordlarimizin hepsini ayni anda seçme olasiligimiz olsun
2- Her recorda da checkbox olacak ki seçtigimiz zaman o recorda ait bit itemi tutabilelim
3- Son olarak datagridimizin disinda seçtigimiz recorlari gösterecek bir button

 

 

Figürlere bakarak asagi yukari neler yapacagimizi tahmin etmeye baslamissinizdir.

Ilk olarak Page_Load kisminda datagridimizi bind yapmak için gerekli kodlari ve bind islemini yapacak olan fonksiyonumuzu çagiracagiz ve bu fonsiyonun kodlarini yazacagiz.

Yazmaya baslamadan önce sunu eklemek isterim ki burdaki connection string benim kullandigim ortama göre yazildi siz kendi sisteminize göre uygulayin (cnnDB)

private void Page_Load(object sender, System.EventArgs e)
{
//connection stringimize database baglantisi için gerekli kodlari
//ekliyoruz
cnnDB = new SqlConnection("server=HOME;user id=sa;password=;database=Contacts");
if (!IsPostBack)
bindGrid();
// Datagirid doldurmak çogu yerde kullanildigi için bu islem için bir //fonsiyon tanimlayip, bu islemi yapacaginiz yerde sadece datagiridi //dolduracak olan fonksiyonunu çagirmak size baya bi kolaylik getirir
}
private void bindGrid()
{
String SQL="select * from kullanicilar"; //SQL kodumuzu yazdik
SqlDataAdapter da = new SqlDataAdapter(SQL,cnnDB);
//SQLimizi ve connection stringimizi dataadaptörümüze ekledik

DataSet ds = new DataSet(); //Yarattigimiz datasetimize verileri
da.Fill(ds, "kullanicilar");//yükledik.
myDataGrid.DataSource=ds.Tables["kullanicilar"].DefaultView;
myDataGrid.DataBind();
}


Buraya kadar datalarimizi nasil datagridimize bind edecegimizi gördük. Simdi bu islemin kodsal kismini HTML olarak görelim.

<form id="Form1" name="Form1" method="post" runat="server">
<ASP:DATAGRID id="myDataGrid"
runat="server"
AutoGenerateColumns="false"
HeaderStyle-BackColor="#aaaadd"
Font-Size="8pt"
Font-Name="Tahoma"
CellSpacing="0"
CellPadding="3"
ShowFooter="true"
BorderColor="Black"
BackColor="AntiqueWhite"
Width="600">
<HeaderStyle BackColor="NavajoWhite"></HeaderStyle>
<FooterStyle BackColor="NavajoWhite"></FooterStyle>
<Columns>
<asp:TemplateColumn HeaderText="contract">
<HeaderTemplate>
<input type="checkbox" id="checkAll"
onclick="CheckAll(this);" runat="server" name="checkAll">
</HeaderTemplate>
<ItemTemplate>
<input type="checkbox" runat="server" id="KulId"
onclick="CheckChanged();" checked='false' name="KulId" />
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Id">
<ItemTemplate>
<asp:Label id="Id" Text='<%#
DataBinder.Eval(Container.DataItem, "Id") %>' runat="server" />
</ItemTemplate>
</asp:TemplateColumn>
<asp:BoundColumn DataField="Ad"
HeaderText="Ad"></asp:BoundColumn>
<asp:BoundColumn DataField="Soyad"
HeaderText="Soyad"></asp:BoundColumn>
<asp:BoundColumn DataField="Meslek"
HeaderText="Meslek"></asp:BoundColumn>
</Columns>
</ASP:DATAGRID>
</form >


Datagridle ilk tanisanlar, datagridin çogu hareketlerini sinirlayacagini düsünebilirler. Bu konudada haklidirlar aslinda, datagridin ilk görünüsü size çok fazla özgürlük tanimiyomus gibi görünsede TemplateColumn ‘u kesfettikten sonra aslinda datagridin gerçekten de neler yapabilecegini anlamis olacaklardir. Azönce yazdigim kodlardanda anlayabileceginiz gibi bende burda TemplateColumnu kullandim bu islemi gerçeklestirebilmek için. CheckBox için ise Html Input CheckBox u kullandim. HtmlInputCheckbox client tarafta çalisir ve benim checkboxlarin tiklanip yada tiklanmadigini anlamam için server tarafina ihtiyacim. Oyüzden bu kisimda HtmlInputCheckBox kullanmak daha dogru olacaktir. Baslik kismindaki checkboxun çalisabilmesi için gerekli script functionu CheckAll() çagrilacak ve recordlardaki CheckBoxlar için ise CheckChanged() fonsiyonu çagirilacak.


Burda ikinci bir TemplateColumn daha kullandim. Bu columnun içinde ise bir Label var. Bu label bize seçtigimiz recordun Id numarasini tutmamizi saglicak ve daha sonra, seçtigimiz recordlari göstermek için yardimci olacak.

Simdi client kisminda çalisacak olan javascript kodumuza bir göz atalim. Bu kod bize CheckBoxlari seçili hale getirecek.

Kod yazimina geçmeden once size biraz RegisterClientScriptBlock fonksiyonundan bahsetmek istiyorum. Client tarafinda script kullandigimiz için bu kontrolü yapmamiz gereklidir. Bu sayede Client tarafli scriptler direk olarak browser’iniza HTML streamin içerisinde gönderilir. External JavaScript kullanimlarinda bu sekilde çalismak çok dogru olacaktir. Bu sekilde çalismak hem client tarafini hemde server tarafinda performance açisindan rahatlik saglayavaktir.

Simdi JavaScript fonksiyonmuz olan CheckAll() fonksiyonunu inceleyelim. Ben bu scripti yazarken string kullandim fakat siz daha karmasik scriptler yazacak olursaniz StringBuilder classinida kullanabilirsiniz.

string strScript;
strScript= " <script language=JavaScript> ";
strScript+=" function CheckAll( checkAllBox ) ";
strScript+=" {";
strScript+=" var frm = document.Form1; ";
strScript+=" var kontrol=checkAllBox.checked; ";
strScript+=" for(i=0;i< frm.length;i++)";
strScript+=" { ";
strScript+=" e=frm.elements[i]; ";
strScript+=" if(e.type=='checkbox' && e.name.indexOf('Id') != -1)";
strScript+=" e.checked= kontrol ; ";
strScript+=" } ";
strScript+=" } ";
strScript+=" </script>";
if(!this.IsClientScriptBlockRegistered("clientScriptCheckAll"))
this.RegisterClientScriptBlock("clientScriptCheckAll", strScript);
//kisaca bu script ile bütün checkboxlari seçili hale getirdik.
Simdi yazacaimiz JavaScript ise bütün recorlardaki CheckBox larin seçili olup olmadigini kontrol edecek ve seçili durumda olmayanlari ise CheckAll () fonksiyonuna gönderecek ve seçili hale getirecek. Böylelikle recorlardaki CheckBoxlarin basliktaki CheckBox ile ayni iarete sahip olmasini saglamis olacagiz.


strScript="";
strScript= "<script language=JavaScript>";
strScript+="function CheckChanged()";
strScript+="{ ";
strScript+=" var frm = document.Form1; ";
strScript+=" var boolAllChecked; ";
strScript+=" boolAllChecked=true; ";
strScript+=" for(i=0;i< frm.length;i++) ";
strScript+=" { ";
strScript+=" e=frm.elements[i]; ";
strScript+=" if ( e.type=='checkbox' && e.name.indexOf('Id') != -1 )";
strScript+=" if(e.checked== false) ";
strScript+=" { ";
strScript+=" boolAllChecked=false; ";
strScript+=" break; ";
strScript+=" } ";
strScript+=" } ";
strScript+=" for(i=0;i< frm.length;i++)";
strScript+=" { ";
strScript+=" e=frm.elements[i]; ";
strScript+=" if ( e.type=='checkbox' && e.name.indexOf('checkAll')!= -1 )";
strScript+=" { ";
strScript+=" if( boolAllChecked==false) ";
strScript+=" e.checked= false ; ";
strScript+=" else ";
strScript+=" e.checked= true; ";
strScript+=" break; ";
strScript+=" } ";
strScript+=" } ";
strScript+=" } ";
strScript+=" </script> ";
if(!this.IsClientScriptBlockRegistered("clientScriptCheckChanged"))
this.RegisterClientScriptBlock("clientScriptCheckChanged", strScript);


Son olarak da Seçili recorlarimizi gösterecek olan buttonumuzun olayini yaziyoruz.

public void secileni_goster(object sender, EventArgs e)
{
foreach( DataGridItem di in myDataGrid.Items )
{
HtmlInputCheckBox chkBx = (HtmlInputCheckBox)di.FindControl("KulId") ;
if( chkBx !=null && chkBx.Checked )
{
Label lbl = (Label)di.FindControl("Id");
Response.Write( lbl.Text +"<br>" );
}
}
}


Bu button ile DataGrid deki bütün recorlari DataGridItem in içine yolluyoruz. Ve HtmlInputCheckBox larinin seçili durumda olup olmadigini ariyoruz. Eger seçili ise DataGridItem in içinde Label i ariyoz. Hatirlarsaniz bu labelin içine seçili olan recordun Id sini yazdiriyorduk yazimin baslarinda TemplateColumunu anlatirken bundan bahsetmistim. DataGridiItemin içinde ID yi aldiktan sonra bunu response kisminda labele yazdiriyorum.

Son olarak yaptigimiz label’e yazdirma islemini siz daha degisik fonsiyonlar için kullanabilirsiniz.

Bu makale ile kisaca datagrid le normal formatindan farkli daha degisik islemler yapabilecegimizi anlatmaya çalistim. Buna benzer yazdigimiz uygulamalarimizda bizlere degisik sekillerde yardim edecek datagrid uygulamarini sizlere zaman zaman anlatacagim.

Kesifler her zaman ihtiyaçtan degil, bazen baskidan da ortaya çikar.

Iyi günler dilerim.
Eyüp Altiparmak
eyup.altiparmak@gmail.com