D. Prameswara
D. Prameswara Tukang ketik yang sedang belajar pemrograman #linux #android #vue #node.js

Menampilkan Hint sesuai dengan isi cell atau judul kolom pada StringGrid

Hint adalah popup text yang biasanya muncul jika user meng-mouse-over suatu komponen. Seperti gambar di bawah ini.


Nah, trik di bawah ini adalah, cara untuk menampilkan hint pada Stringgrid, dengan text hint yang tampil sesuai dengan nilai cell atau judul kolom dimana mouse berada.
  1. Buat new project, lalu tambahkan komponen Stringgrid ke dalam form.


  2. Double-klik Stringgrid tersebut, atau klik kanan -> Edit Stringgrid untuk mengisi contoh data beserta judul kolom.



  3. Ubah property ShowHint dari False menjadi True

  4. Tambahkan event OnMouseMove kepada StringGrid tersebut, dengan cara klik tab Events, lalu cari dan double klik OnMouseMove.




  5. Tuliskan kode seperti di bawah ini.

    procedure TForm1.StringGrid1MouseMove(Sender: TObject; Shift: TShiftState; X,
      Y: Integer);
    var
      lKolom, lBaris : integer;
    begin
      // baris dibawah ini untuk mengetahui kolom dan baris berapa yang
      // berapa di bawah mouse
      StringGrid1.MouseToCell(X, Y, lKolom, lBaris);
    
      // setelah cell diketahui, maka tampilkan isi dari cell
      // tersebut ke dalam hint
      // NOTE: begitu nilai hint diisi/diganti, maka hint akan otomatis
      //       ditampilkan jika pada saat itu mouse sedang berada di atas/over
      //       komponen tersebut
      StringGrid1.Hint :=StringGrid1.Cells[lKolom,lBaris];
    end;
    

    Kode di atas akan menampilkan isi cell sebagai hint. Jika anda ingin agar yang ditampikan adalah judul kolom, maka ubah kode di atas sebagai berikut. Asumsi, baris ke 0 adalah judul dari kolom.
    
    procedure TForm1.StringGrid1MouseMove(Sender: TObject; Shift: TShiftState; X,
      Y: Integer);
    var
      lKolom, lBaris : integer;
    begin
      // baris dibawah ini untuk mengetahui kolom dan baris berapa yang
      // berapa di bawah mouse
      StringGrid1.MouseToCell(X, Y, lKolom, lBaris);
    
      // setelah cell diketahui, maka tampilkan isi dari cell
      // tersebut ke dalam hint
      // NOTE: begitu nilai hint diisi/diganti, maka hint akan otomatis
      //       ditampilkan jika pada saat itu mouse sedang berada di atas/over
      //       komponen tersebut
      //StringGrid1.Hint :=StringGrid1.Cells[lKolom,lBaris];
    
      // kode ini akan menampilkan judul kolom
      StringGrid1.Hint :=StringGrid1.Cells[lKolom,0];
    end;
    


    Inti dari kode di atas kurang lebih sebagai berikut.

    Pada saat user meng-mouse-over StringGrid, cari posisi cell yang berada di bawah posisi mouse dengan menggunakan prosedure MouseToCell. Prosedur tersebut akan menghasilkan nilai kolom dan baris yang akan disimpan ke dalam variabel lKolom, lBaris.

    Setelah posisi cell diketahui, selanjutnya set property Hint dari StringGrid dengan isi dari cell atau isi dari judul kolom. Pada saat property Hint diset, maka secara otomatis hint akan ditampilkan jika pada saat itu mouse sedang berapa di atas/over komponen tersebut.

    Dan inilah hasilnya.




Bagaimana, mudah sekali bukan.

Sekian tip dan trik kali ini, semoga yang sedikit ini bermanfaat dan selamat mencoba.

D. Prameswara
D. Prameswara Tukang ketik yang sedang belajar pemrograman #linux #android #vue #node.js
Load comments