DevExpress ASPxTreeList Kullanımı - Menü Oluşturma


24 Ağustos 2016 Hikmet Okumuş DevExpress Web

Merhaba arkadaşlar,

ASPxTreeList, ağaç yapısına göre menü oluşturmak için kullanılmaktadır. İstenirse kontrolün özelliklerinden CheckedList objesi gibi bir kontrol şekline de dönüştürülebilir. Bu konuda esnek seçenekleri bulunmaktadır. Fakat genel olarak menü yapısında kullanılmaktadır. İlk olarak düz bir liste görünümünde kontrolün içeriğini dolduralım ve sırası ile diğer özelliklerini anlatalım. Uygulama için database tarafında aşağıdaki gibi bir tablo kullanılacaktır.

www.hikmetokumus.com

Tablodan verileri çekelim ve kontrole set edelim.
            < dx:ASPxTreeList ID="treeCategory" ClientInstanceName="treeCategory" runat="server" AutoGenerateColumns="False"
                Width="300" Height="400" KeyFieldName="Id" Theme="Aqua">
                < Columns>
                    < dx:TreeListDataColumn FieldName="Caption" Caption="Kategoriler" />
                < /Columns>                                
            < /dx:ASPxTreeList>	
	
            var categories = GetCategories();
            Session["categories"] = categories;
            treeCategory.DataSource = categories;
            treeCategory.DataBind();            
	
Kontrol içeriği aşağıdaki gibi olacaktır.

www.hikmetokumus.com

Ağaç yapısına göre menü oluşturmak ASPxTreeList kontrolünde çok basite indirgenmiş durumdadır. Tabloda Id değeri -1 olan kayıtlar üst kategoriyi ifade etmektedir. -1 haricinde olan kayıtlar ise Id değerine eşit olan kategorinin alt kategorisi anlamına gelmektedir. Eğer standart TreeView nesnesi ile çalışsaydık, recursive bir fonksiyon ile TreeNode objelerini kendimiz hesaplayıp dolduracaktır. ASPxTreeList ile bu işlemi yapmak için kontrolün ParentFieldName özelliğine hangi alanın üst kategori id' yi temsil ettiğini belirtmeniz yeterli olacaktır. İşlem sonucunda kontrol görüntüsü aşağıdaki gibi olacaktır.
        < dx:ASPxTreeList ID="treeCategory" ClientInstanceName="treeCategory" runat="server" AutoGenerateColumns="False"
            Width="300" Height="400" KeyFieldName="Id" ParentFieldName="TopId" Theme="Aqua">
            < Columns>
                < dx:TreeListDataColumn FieldName="Caption" Caption="Kategoriler" />
            < /Columns>                                
        < /dx:ASPxTreeList>	
	

www.hikmetokumus.com

ASPxTreeList içerisinde menü görümünü yukarıdaki adımları uyguladığınızda ilk etapta aşağıdaki gibi olacaktır. Yani tüm liste Collapse modundadır. Sebebi bir expand level belirtilmemiş olmasından kaynaklanmaktadır.

www.hikmetokumus.com

ASPxTreeList kontrolünde her bir kırılım bir seviyeyi ifade etmektedir. Eğer varsayılan olarak ilk 1. seviye açık gelsin diğerleri kapalı gelsin gibi bir ayarlama yapmak isterseniz kontrolün ExpandToLevel özelliğini kullanmanız gerekecektir. Parametre olarak int bir değer almaktadır. Ve belirtilen seviyeye göre tree listesi expand olmaktadır.
            var categories = GetCategories();
            Session["categories"] = categories;
            treeCategory.DataSource = categories;
            treeCategory.DataBind();       
            treeCategory.ExpandToLevel(1);
	

www.hikmetokumus.com

Sayfa post-back olduğu için page_load olayında kontrolün datasource özelliğini yeniden setlemek gerekmektedir. Session["categories"] = categories; satırı bu sebeple kullanılmaktadır.
    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack)
        {
            var dt = Session["categories"] as DataTable;
            
            if(dt != null)
            {
	            treeCategory.DataSource = dt;
	            treeCategory.DataBind();
	            treeCategory.ExpandToLevel(1);
	        }
        }
    }
	
DataBind ettiğiniz nesneler için bu işlemi yapmazsanız, sayfa post-back işlemlerinde ilgili kontroldeki verilere erişemeyebilirsiniz.

Başarılar dilerim.



Yorum Ekle