GridView Satırlarını tıklayınca genişletmek (Expand Rows)

Nedenini bilmiyorum ama başlığı seçerken epeyce zorlandım, neyse ki bir tane buldum :) Konumuza dönelim, GridView kontrolünde verileri listeletirken ilgili satırın altında ilişkili diğer kayıtları göstermemiz gerekebiliyor. Bu sayede kullanıcıya çok işlevsel bir listeleme yapabiliyoruz. Bu işlem için genelde kullanılan yöntem; tüm verilerin tümünün çekilip sonra javascript kullanarak göster-gizle şeklinde gösterilmesi. Bu yöntemde ciddi anlamda performans sıkıntısı yaşarız çünkü 40 tane kaydımız olsa ve bu kayıtlara ait 5′ er de alt kayıt olsa ilk seferde toplam 200 kayıt listelemiş oluyoruz. Anlatacağım yöntemde bu işi jQuery Ajax ile birlikte verimli ve efektif bir şekilde çözeceğiz. (Bugün çok değişik bir gün sanırım havalardan kaynaklanıyor, anlatım bozukluğu varsa kusuruma bakmayın) Mekanızmamız iki adet .aspx sayfasından oluşuyor. Birincisi normal kayıtlarımızı listelettiğimiz GridGenislet.aspx diğeri ise üzerine tıklayınca açılacak olan kısmın bilgilerini getiren Genisle.aspx GridGenislet.aspx sayfamızın ilgili kodlarına bakalım. Burada jQuery ile açılıp kapanma işlemi sırasında oluşacak efekt işini ve Genisle.aspx sayfamıza Ajax ile ilgili kayıtların gelmesini sağlayacak fonksiyonumuzu yazıyoruz. Sonrada Tümünü Göster ve Tümünü Gizle olayını ekledim. Sırf jQuery i biraz daha algılayabilmek adına :)

	$(document).ready(function(){
		$('a#tgizle').click( tumunuGizle );
		$('a#tgoster').click( tumunuGoster );
	});

	function tumunuGizle(){
	    $('div.genisleyenDiv').slideUp();
	}

	function tumunuGoster(){
	    $("div.genisleyenDiv").each(function()
        {
           goster($(this).attr('id'));
        });
	}
	//can damarımız burdaki fonksyion, genisle.aspx e id bilgisini gönderip sayfamızda gösteriyoruz.
	function goster(divId)
	{
		$('div#'+divId).toggle('slow');
		$('div#'+divId).load('Genisle.aspx?Id='+divId);
	}

GridGenislet.aspx.cs sayfamızın ilgili kodlarına bakalım.

	DataTable dt = veritabani.DataTableGetir("Select top 10 id,baslik,icerik,tarih from yazilar");
	GridView1.DataSource = dt;
	GridView1.DataBind();

	for (int i = 0; i < GridView1.Rows.Count; i++)
	{
		//burada hersatırın onclick özelliğine goster fonksiyonumuzu atıyoruz ve ilgili id yi yazdırıyoruz.
	    GridView1.Rows[i].Cells[0].Attributes.Add("onclick", "goster('" + dt.Rows[i][0].ToString() + "')");
	}

Genisle.aspx sayfamızda ise gelen id değerini alıp sql cümlemizdeki yerine koyuyor ve listeletiyoruz. Burdaki yöntemde ben GridView üzerine anlatmaya çalışıyorum, mantığı anlarsanız çoğu yerde bu mekanizmayı kullanabilirsiniz.

Sadece dilimin döndüğünce mantığı anlatmaya çalıştım, eğer isteyen olursa çalışır kodları da paylaşabilirim. Çalışan örneği görmek için tıklayın. Zaman problemim nedeniyle css ile süsleyemedim, istendiği taktirde çok şık bir görünüm verilebilir. Herkese güzel günler diliyor ve konuyu burada noktalıyorum.