Select from db, making icons from the items.

Question

What I'm trying to do is basicly what this photo shows.

When I select something from the treeview it passes a parameter to a linq command that selects some data from the database. For every item in the selection I want to make a Icon and a text that represents if the item is a folder or a file. When I push the Icon or the Link i want it to do the same as i would push the treeview, pass a parameter to a linq command that selects again from the database and populates the placeholder.

The way I'm doing this now is to make at runtima a Panel that holds the ImageButton and LinkButton. Then i add the Panel to the ContentPlaceHolder. The problem with this that it does it every time i select something new and also i cant get it to work if the push the icon or the linkbutton, only the from the treeview.

Could i use some controller and css to get this look for the Icons ? Is there another better way ?

This is basicly the same system as the Explorer uses in Windows, Treeview shows only the folder but the window shows the folders and files. When i click a folder that folder opens up and the main window is populated with items that are inside that folder. If i click a file a editor opens up with the contents of the file.

Answer 1

Not sure I understand you question 100% but I think I got the gist.

I'm assuming that you want the folders first, then the files. I would create two repeaters in this area, one to hold the Folder Image and link buttons, and the other for the file image and link buttons.

Break your linq command into two queries, one to get the folders and one for files. Then just bind the repeaters to the corresponding repeaters.

Here's a bit of code to get you started:

<asp:Repeater ID="rptFolders" runat="server" OnItemCommand="rptFolders_ItemDataBound">
    <ItemTemplate>
        <div>
            <asp:ImageButton ID="btnImage" runat="server" />
            <asp:LinkButton ID="btnLink" runat="server" />
        </div>
    </ItemTemplate>
</asp:Repeater>

And the code behind after calling DataBind():

protected void rptFolders_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        Book book = (Book)e.Item.DataItem; //Or whatever your passing

        ImageButton btnImage = e.Item.FindControl("btnImage");
        LinkButton btnLink = e.Item.FindControl("btnLink");

        btnLink.Text = book.Name;

        btnLink.Click += new EventHandler(FolderClicked);
        btnImage.Click += new ImageClickEventHandler(FolderClicked);
    }
}

You can obviously do whatever you want with Click Events, just added those in for good measure.

I would probably create a Folder and File Control and use those instead of the imagebutton / linkbutton combo, this way I could store more information about the Folder / File to access them later without having to do another query to get the ID or what not. But there are a million approaches to this, pick the one you think is best.

Let me know if you need more guidance w/ this solution, or if I didn't understand your question.

Happy Coding...

Answer 2

Sorry had to add as another Answer. Here's a quick sample of the folder user control.

Create your Control... Format however you want.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="FolderButton.ascx.cs" Inherits="FolderButton" %>
<div>
    <asp:ImageButton ID="btnImage" runat="server" ImageUrl="yourfolder.jpg" />
    <asp:LinkButton ID="btnTitle" runat="server" />
</div>

Add Properties and Click Event to the Code Behind (don't forget to fire the click event when your image and link buttons are clicked):

public partial class FolderButton : System.Web.UI.UserControl
{
    public int DatabaseId { get; set; }
    public string Name { get; set;}  // you can even set your linkbutton text here. 

    public event EventHandler Click;
}

Create your Repeater of the FolderButton Controls:

 <asp:Repeater ID="rptFolders" runat="server" OnItemDataBound="rptFolders_ItemDataBound">
            <ItemTemplate>
                <uc1:FolderButton ID="FolderButton1" runat="server" />
            </ItemTemplate>
        </asp:Repeater>

Set Folder Id on DataBinding:

protected void rptFolders_ItemDataBound(object sender, RepeaterItemEventArgs e)        
{        
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)        
    {        
        Book book = (Book)e.Item.DataItem; //Or whatever your passing        

        FolderButton btnFolder = e.Item.FindControls("FolderButton1");

        btnFolder.Name=book.Name;
        btnFolder.DatabaseId=book.Id;

        btnFolder.Click += new EventHandler(FolderClicked);        
    }        
}     

Lastly you can then do whever you want on the event Click:

     void FolderClicked(object sender, EventArgs e)
{
     int id = ((FolderButton)sender).DatabaseId;

     /// Do something with your Id
}

Let me know if anything is unclear. This is just a quick freehand sample, so forgive any typos or bad practices... code is just for demostration purposes only.