Membuat Background Datagridview seperti Row

Hallo, sudah lama saya tidak muncul di dunia blog. Pada kesempatan kali ini saya mau berbagi tips bahasa pemrograman C#, point-nya pada Datagridview. Pada umumnya tampilan datagridview pada saat terisi data dari database yang jumlah record-nya kurang dari tinggi datagridview ,maka akan terlihat ‘bolong’ di bawahnya. Untuk lebih jelasnya lihat gambar di bawah ini :

DataGridView_sebelum

DataGridView_sebelum

Bisa kita lihat gambar di atas terlihat kosong di bagian bawah, hal itu membuat datagridview kurang menarik.  Jika masalah diatas merupakan masalah anda, maka saya punya solusinya, berikut kodenya:

private void newDataGridView1_Paint(object sender, PaintEventArgs e)
{
 List<int> displayedIndex = new List<int>();
 for (int i = 0; i < ((DataSet)newDataGridview1.DataSource).Tables[0].Columns.Count; i++)
 {
    if (newDataGridView1.Columns[i].Visible == true)
    {
      displayedIndex.Add(i);
    }
 }

 int fIndex = displayedIndex[0];//mengetahui index dari visible column
 Rectangle rc = new Rectangle(newDataGridView1.GetCellDisplayRectangle(fIndex, newDataGridView1.Rows.Count - 1, true).X, newDataGridView1.GetCellDisplayRectangle(3, newDataGridView1.Rows.Count - 1, true).Y + 22, newDataGridView1.Width, (newDataGridView1.Height - (newDataGridView1.Rows.Count * 22)));

 #region "editable"
 rc.Inflate(1, 1);
 rc.Width = rc.Width - 4;
 #endregion

 e.Graphics.FillRectangle(new SolidBrush(newDataGridView1.DefaultCellStyle.BackColor), rc);
 Pen pen = new Pen(Color.FromArgb(208, 215, 229), 0.2f);
 int jmlKurang = (newDataGridView1.Height + newDataGridView1.ColumnHeadersHeight - (newDataGridView1.Rows.Count * newDataGridView1.Rows[0].Height)) / 22;
 for (int j = 0; j < jmlKurang; j++)
 {
   switch (newDataGridView1.AdvancedCellBorderStyle.Bottom)
   {
    case DataGridViewAdvancedCellBorderStyle.None:
    break;
    case DataGridViewAdvancedCellBorderStyle.Single:
    e.Graphics.DrawLine(pen, rc.X, rc.Y, rc.X + rc.Width - 1, rc.Y);
      for (int a = 0; a < displayedIndex.Count -1; a++)
      {
        float vLX = newDataGridView1.GetCellDisplayRectangle(displayedIndex[a] + 1, newDataGridView1.Rows.Count - 1, true).X;
        e.Graphics.DrawLine(pen, vLX, rc.Y, vLX, rc.Y + 22);
      }    
    break;
    case DataGridViewAdvancedCellBorderStyle.Inset:
    case DataGridViewAdvancedCellBorderStyle.InsetDouble:
    case DataGridViewAdvancedCellBorderStyle.Outset:
    case DataGridViewAdvancedCellBorderStyle.OutsetDouble:
    case DataGridViewAdvancedCellBorderStyle.OutsetPartial:
    break;
   }
 rc.Y += 22;
 }
}

Script diatas diletakkan pada event Paint dari ‘newDatagridView1’. Copy Paste aja script diatas. Mungkin kode diatas kurang sempurna bagi anda2 yang sudah profesional, untuk itu andalah yang menyempurnakan, hehehehe :D. Untuk script block “editable”, anda bisa mengedit ukuran dari rectangle, tergantung dari style datagridview anda. Kemudian pada baris kode “DataGridViewAdvancedCellBorderStyle”,  saya hanya membuat dengan style Single. Untuk style lainnya sekali lagi anda yang menyempurnakan :D.  Oh ya, kode diatas terdapat angka 22. Angka tersebut merupakan tinggi default dari sebuah row, anda bisa mengubah sesuai tinggi dari row anda. Perlu di ingat, set ‘False’ untuk property AllowUserToResizeRows, agar tinggi row tidak berubah-ubah. Untuk kode diatas tampilan akan seperti berikut:

DataGridView_sesudah

DataGridView_sesudah

Gimana? Lumayan kan buat bagusin tampilan. Oke, sekian dari saya dan terima kasih :D. Moga bermanfaat.

Advertisements