Januari 2016 – Agunahwan's Blog

Membuat Menu Treeview dengan C#

Di hari yang cerah ini, waktunya saya untuk berbagi. Jadi ceritanya teman saya ada permasalahan dalam tasknya, dia disuruh untuk membuat menu dengan Treeview namun menu tersebut harus dinamis. Nah, di sinilah tantangannya. Saya pun ikut mencari cara untuk permasalahan ini. Dikarenakan dinamisnya dan menu-menu itu pun dapat memiliki anak-anak yang kita tidak tahu cabangnya sampai level berapa. Saya memikirkan untuk membuat sebuah fungsi rekursif untuk mengisi setip node anak pada TreeView ini. Apa itu fungsi rekursif? Fungsi rekursif merupakan sebuah fungsi yang memanggil dirinya sendiri. Di dalam fungsi tersebut diharuskan adanya sebuah kondisi yang memungkinkan untuk keluar dari fungsi. Bila tidak, maka tentunya akan menyebabkan hang dikarenakan pemanggilan yang tak terhenti. Untuk membuatnya, berikut langkah-langkah yang bisa teman-teman ikuti :

1. Buat sebuah project pada Visual Studio. Di sini saya menggunakan Visual Studio 2010 dengan .NET Framework 4.0. Pilih Jenis Project ASP Web Empty Application.

2. Tambahkan Connection String berikut pada Web.config

3. Tambahkan class DataAccess pada project. Class dapat diakses pada link berikut :

DataAccess.cs

4. Tambahkan sebuah halaman Web dan tambahkan sebuah TreeView dengan nama tvMenu.

5. Isi code Default.aspx.cs dengan code berikut :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using Library;

namespace MenuTreeView
{
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
DataTable dtMenu = new DataTable();
dtMenu = GetData();
DataRow[] row = dtMenu.Select("idParent IS NULL");

tvMenu.Nodes.Clear();

for (int i = 0; i < row.Length; i++)
{
TreeNode tn = new TreeNode(row[i]["menu"].ToString());
if (!row[i]["linkMenu"].ToString().Equals(""))
tn.NavigateUrl = row[i]["linkMenu"].ToString();
else
tn.SelectAction = TreeNodeSelectAction.Expand;
tn = setChildNode(tn, row[i]["idMenu"].ToString(), dtMenu);
tvMenu.Nodes.Add(tn);
}
}

private DataTable GetData()
{
SqlDataReader dr;
DataTable dt = new DataTable();
DataAccess da = new DataAccess();
dr = da.ExecuteSP("connData", "sp_GetMenuList");
dt.Load(dr);

return dt;
}

private TreeNode setChildNode(TreeNode parentNode, String idParent, DataTable data)
{
DataRow[] row = data.Select("idParent=" + idParent);
if (row.Length > 0)
{
for (int i = 0; i < row.Length; i++)
{
TreeNode treeChild = new TreeNode(row[i]["menu"].ToString());
if (!row[i]["linkMenu"].ToString().Equals(""))
treeChild.NavigateUrl = row[i]["linkMenu"].ToString();
else
treeChild.SelectAction = TreeNodeSelectAction.Expand;
treeChild = setChildNode(treeChild, row[i]["idMenu"].ToString(), data);
parentNode.ChildNodes.Add(treeChild);
}
}
return parentNode;
}
}
}

6. Buat database MenuTreeView. Buat table tblMenu dengan Query berikut :

USE [MenuTreeView]
GO

/****** Object:  Table [dbo].[tblMenu]    Script Date: 1/27/2016 11:06:43 AM ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

SET ANSI_PADDING ON
GO

CREATE TABLE [dbo].[tblMenu] (
[idMenu] [int] IDENTITY(1, 1) NOT NULL
,[idParent] [int] NULL
,[menu] <a href="50">varchar</a> NULL
,[linkMenu] <a href="50">varchar</a> NULL
,CONSTRAINT [PK_tblMenu] PRIMARY KEY CLUSTERED ([idMenu] ASC) WITH (
PAD_INDEX = OFF
,STATISTICS_NORECOMPUTE = OFF
,IGNORE_DUP_KEY = OFF
,ALLOW_ROW_LOCKS = ON
,ALLOW_PAGE_LOCKS = ON
) ON [PRIMARY]
) ON [PRIMARY]
GO

SET ANSI_PADDING OFF
GO

7. Buat sp sp_GetMenuList dengan query berikut :

USE [MenuTreeView]
GO

SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE PROCEDURE [dbo].[sp_GetMenuList]
AS
BEGIN
SET NOCOUNT ON;

SELECT *
FROM tblMenu
END
GO

8. Isi table tblMenu dengan data seperti berikut :

9. Coba jalankan.

Saya akan menjelaskan beberapa code yang saya buat.

private DataTable GetData()
{
SqlDataReader dr;
DataTable dt = new DataTable();
DataAccess da = new DataAccess();
dr = da.ExecuteSP("connData", "sp_GetMenuList");
dt.Load(dr);

return dt;
}

Pada fungsi GetData di atas, saya membuat fungsi ini menghasilkan tipe data DataTable. Kita akan mendapatkan data dari hasil execute sp_GetMenuList yang akan kita gunakan sebagai data acuan untuk me-list menu.

DataTable dtMenu = new DataTable();
dtMenu = GetData();
DataRow[] row = dtMenu.Select("idParent IS NULL");

Pada bagian Page_Load di bagian code di atas, saya mendeklarasikan sebuah variable dengan tipe DataTable. Dari hasilnya, data tersebut kemudian saya filter kembali hanya untuk yg parent saja.

tvMenu.Nodes.Clear();

for (int i = 0; i < row.Length; i++)
{
TreeNode tn = new TreeNode(row[i]["menu"].ToString());
if (!row[i]["linkMenu"].ToString().Equals(""))
tn.NavigateUrl = row[i]["linkMenu"].ToString();
else
tn.SelectAction = TreeNodeSelectAction.Expand;
tn = setChildNode(tn, row[i]["idMenu"].ToString(), dtMenu);
tvMenu.Nodes.Add(tn);
}

Pada code di atas, saya hapus terlebih dahulu semua node yg ada pada TreeView. Ini untuk menghindari duplicate node saat AutoPostBack ataupun Refresh halaman. Pada bagian for ini, saya ingin membuat node Parent dari data yang telah kita filter pada baris code sebelumnya. Untuk data-data yang memiliki alamat URL, saya tambahkan link URL tersebut pada node. Bila tidak ada, saya jadikan ActionSelect node agar meng-expand Tree saat diklik.

tn = setChildNode(tn, row[i]["idMenu"].ToString(), dtMenu);

Pada bagian di ataslah saya mendefinisikan setiap node anak sacara rekursif pada fungsi setChildNode

private TreeNode setChildNode(TreeNode parentNode, String idParent, DataTable data)
{
DataRow[] row = data.Select("idParent=" + idParent);
if (row.Length > 0)
{
for (int i = 0; i < row.Length; i++)
{
TreeNode treeChild = new TreeNode(row[i]["menu"].ToString());
if (!row[i]["linkMenu"].ToString().Equals(""))
treeChild.NavigateUrl = row[i]["linkMenu"].ToString();
else
treeChild.SelectAction = TreeNodeSelectAction.Expand;
treeChild = setChildNode(treeChild, row[i]["idMenu"].ToString(), data);
parentNode.ChildNodes.Add(treeChild);
}
}
return parentNode;
}

Fungsi di atas yang digunakan untuk mendefinisikan node anak dengan kondisi dimana node tersebut masih memiliki anak. Jika tidak, maka fungsi rekursif akan keluar. Bila benar, saat dijalankan akan tampil seperti berikut :

Demikian sharing dari saya, mudah-mudahan bermanfaat untuk teman-teman yang mengalami masalah serupa. Selamat bekerja… 😀

S	S	R	K	J	S	M
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31