File Browser

The following example demonstrates how RadSplitter, RadTreeView, RadGrid and RadMenu can be integrated with the RadAjax framework. The example features the following components:

• RadSplitter - allows resizing of the content panes

• RadTreeView - displays the folder structure

• RadGrid - displays the selected folder contents

• RadMenu - contains commands

• RadAjax Manager - manages the Ajax requests

This is a typical example for "File browser" type of application for web.

JavaScript

var loadingPanel = null;
function clientNodeClicked(sender, args) {
  if (!loadingPanel) {
    loadingPanel = $find("AjaxLoadingPanel1");
  }
  loadingPanel.show("RadGrid1"); Directories.GetFilesAndFolders(sender.get_selectedNode().get_value(), updateGrid);
}
function updateGrid(result) {
  var tableView = $find("RadGrid1").get_masterTableView(); tableView.set_dataSource(result); tableView.dataBind();
  if (loadingPanel) {
    loadingPanel.hide("RadGrid1");
  }
}
function rowDataBound(sender, args) {
  var value = args.get_dataItem()["Name"];
  args.get_item().get_cell("Name").innerHTML = String.format('<img src="Img/{0}" align="absmiddle" style="border-width: 0px; vertical-align: middle;margin-right:5px;" alt="icon" />{1}', getImageByFileExt(value), value);
}
function getImageByFileExt(fileName) {
  var image = "File.gif"; var extension = fileName.split(".")[fileName.split(".").length - 1];
  switch (extension) {
    case "dll": case "pdb": image = "File.gif"; break;
    case "cs": image = "cs.gif"; break;
    case "css": image = "css.gif"; break;
    case "html": image = "html.gif"; break;
    case "resx": image = "resx.gif"; break;
    case "vb": image = "vb.gif"; break;
    case "config": case "xml": case "asmx": image = "xml.gif"; break;
    case "ascx": case "aspx": image = "ascx.gif"; break;
    case "gif": case "jpg": image = "gif.gif"; break;
    default: image = "mailfolder.gif"; break;
  }
  return image;
}

ASP.NET

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
  <Services>
    <asp:ServiceReference Path="Directories.asmx" />
  </Services>
</telerik:RadScriptManager>
<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
<!-- content start -->
<div class="wrapper">
  <div class="wrapper2">
    <h3 class="browser">
      File Browser</h3>
    <div class="wrapper3">
      <telerik:RadMenu RenderMode="Lightweight" ID="RadMenu1" runat="server" Skin="Vista" Width="708px" BorderWidth="0">
        <ExpandAnimation Duration="100" />
        <CollapseAnimation Duration="100" />
        <Items>
          <telerik:RadMenuItem Text="File" runat="server">
            <Items>
              <telerik:RadMenuItem Text="New Node" runat="server" ImageUrl="Img/new.gif" Enabled="false" />
              <telerik:RadMenuItem Text="Delete Node" runat="server" ImageUrl="Img/delete.gif"
                Enabled="false" />
              <telerik:RadMenuItem Text="Rename Node" runat="server" ImageUrl="Img/rename.gif"
                Enabled="false" />
            </Items>
          </telerik:RadMenuItem>
          <telerik:RadMenuItem ID="RadMenuItem4" Text="Edit" runat="server">
            <Items>
              <telerik:RadMenuItem Text="Copy Node" runat="server" ImageUrl="Img/copy.gif" Enabled="false" />
              <telerik:RadMenuItem Text="Paste Node" runat="server" ImageUrl="Img/paste.gif" Enabled="false" />
            </Items>
          </telerik:RadMenuItem>
        </Items>
      </telerik:RadMenu>
      <div class="innerWrapper">
        <telerik:RadSplitter RenderMode="Lightweight" ID="RadSplitterBrowser" runat="server" Height="500px" Width="708px"
          BorderSize="0" BorderStyle="None" Skin="Vista">
          <telerik:RadPane ID="RadPaneTreeView" runat="server" Height="500px" Width="222px">
            <div class="leftPaneHeader">
            </div>
            <telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView1" OnClientNodeClicked="clientNodeClicked" runat="server"
              Skin="Vista" Width="100%" Height="476px" AccessKey="T">
              <WebServiceSettings Path="Directories.asmx" Method="GetDirectories" />
              <DataBindings>
                <telerik:RadTreeNodeBinding ImageUrlField="ImageUrl" TextField="Text" ValueField="Value" />
              </DataBindings>
            </telerik:RadTreeView>
          </telerik:RadPane>
          <telerik:RadSplitBar ID="RadSplitBar1" runat="server" />
          <telerik:RadPane ID="RadPaneGrid" runat="server" Width="480px">
            <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" AutoGenerateColumns="False" GridLines="None"
              Width="100%" Height="498px" Skin="Vista">
              <MasterTableView Width="100%">
                <Columns>
                  <telerik:GridTemplateColumn HeaderText="Name" SortExpression="Name" UniqueName="Name">
                    <ItemTemplate>
                      <asp:Image ID="icon" runat="server" />
                      <asp:Label ID="itemLabel" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
                    </ItemTemplate>
                  </telerik:GridTemplateColumn>
                  <telerik:GridTemplateColumn HeaderText="Size" SortExpression="Size" UniqueName="Size">
                  </telerik:GridTemplateColumn>
                </Columns>
              </MasterTableView>
              <ClientSettings ReorderColumnsOnClient="True">
                <Selecting AllowRowSelect="True" />
                <Resizing AllowColumnResize="True" />
                <Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="99.9%" />
                <ClientEvents OnRowDataBound="rowDataBound" />
              </ClientSettings>
              <HeaderStyle BorderColor="DarkGray" BorderStyle="Solid" BorderWidth="1px" />
            </telerik:RadGrid>
          </telerik:RadPane>
        </telerik:RadSplitter>
      </div>
    </div>
    <div class="footer">
      <telerik:RadAjaxLoadingPanel ID="AjaxLoadingPanel1" runat="server" Height="75px"
        Width="275px" Transparency="60" BackColor="Gray" ForeColor="White">
        <asp:Image ID="Image1" runat="server" AlternateText="Loading..." ImageUrl="~/Controls/Examples/Integration/FileBrowser/Img/LoadingProgressBar.gif"
          CssClass="UpdateImage" />
        <span style="position: relative; top: -6px;">Updating...</span>
      </telerik:RadAjaxLoadingPanel>
    </div>
  </div>
</div>

C#

protected void Page_Load(object sender, EventArgs e)
{
    RadGrid1.NeedDataSource += new GridNeedDataSourceEventHandler(RadGrid1_NeedDataSource);
    RadGrid1.ItemDataBound += new GridItemEventHandler(RadGrid1_ItemDataBound);
    if (!IsPostBack)
    {
        RadTreeView1.DataSource = new Directories().BindDirectory(Server.MapPath("~/"));
        RadTreeView1.DataBind();
        foreach (RadTreeNode node in RadTreeView1.Nodes)
        {
            node.ExpandMode = TreeNodeExpandMode.WebService;
        }
        RadTreeView1.Nodes[0].Selected = true;
    }
}
void RadGrid1_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
{
    RadGrid1.DataSource = new Directories().GetFilesAndFolders(Server.MapPath("~/Ajax"));
}
void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        Directories.Info info = (Directories.Info)e.Item.DataItem;
        System.Web.UI.WebControls.Image icon = (System.Web.UI.WebControls.Image)e.Item.FindControl("icon");
        icon.ImageUrl = "Img/" + GetImageForExtension(info.Name);
        icon.AlternateText = "icon";
        icon.ImageAlign = System.Web.UI.WebControls.ImageAlign.AbsMiddle;
        icon.Style.Add("vertical-align", "middle");
        icon.BorderWidth = Unit.Pixel(0);
        if (info.Size != null)
        {
            ((GridDataItem)e.Item)["Size"].Text = info.Size.ToString();
        }
        else
        {
            ((GridDataItem)e.Item)["Size"].Text = " ";
        }
    }
}
private string GetImageForExtension(string fileName)
{
    string image = "File.gif";
    switch (Path.GetExtension(fileName))
    {
        case ".cs":
            image = "cs.gif";
            break;
        case ".css":
            image = "css.gif";
            break;
        case ".html":
            image = "html.gif";
            break;
        case ".resx":
            image = "resx.gif";
            break;
        case ".vb":
            image = "vb.gif";
            break;
        case ".xml":
            image = "xml.gif";
            break;
        case ".ascx":
        case ".aspx":
            image = "ascx.gif";
            break;
        case ".gif":
        case ".jpg":
            image = "gif.gif";
            break;
        case "":
            image = "mailfolder.gif";
            break;
    }
    return image;
}

VB

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    AddHandler RadGrid1.NeedDataSource, AddressOf RadGrid1_NeedDataSource
    AddHandler RadGrid1.ItemDataBound, AddressOf RadGrid1_ItemDataBound
    If Not IsPostBack Then
        RadTreeView1.DataSource = New Directories().BindDirectory(Server.MapPath("~/"))
        RadTreeView1.DataBind()
        For Each node As RadTreeNode In RadTreeView1.Nodes
            node.ExpandMode = TreeNodeExpandMode.WebService
        Next
        RadTreeView1.Nodes(0).Selected = True
    End If
End Sub
Sub RadGrid1_NeedDataSource(ByVal source As Object, ByVal e As GridNeedDataSourceEventArgs)
    RadGrid1.DataSource = New Directories().GetFilesAndFolders(Server.MapPath("~/"))
End Sub
Sub RadGrid1_ItemDataBound(ByVal sender As Object, ByVal e As GridItemEventArgs)
    If TypeOf e.Item Is GridDataItem Then
        Dim info As Directories.Info = DirectCast(e.Item.DataItem, Directories.Info)
        Dim icon As System.Web.UI.WebControls.Image = DirectCast(e.Item.FindControl("icon"), System.Web.UI.WebControls.Image)
        icon.ImageUrl = "Img/" + GetImageForExtension(info.Name)
        icon.AlternateText = "icon"
        icon.ImageAlign = System.Web.UI.WebControls.ImageAlign.AbsMiddle
        icon.Style.Add("vertical-align", "middle")
        icon.BorderWidth = Unit.Pixel(0)
        If Not info.Size.Equals(Nothing) Then
            CType(e.Item, GridDataItem)("Size").Text = info.Size.ToString()
        Else
            CType(e.Item, GridDataItem)("Size").Text = " "
        End If
    End If
End Sub
Private Function GetImageForExtension(ByVal fileName As String) As String
    Dim image As String = "File.gif"
    Select Case Path.GetExtension(fileName)
        Case ".cs"
            image = "cs.gif"
            Exit Select
        Case ".css"
            image = "css.gif"
            Exit Select
        Case ".html"
            image = "html.gif"
            Exit Select
        Case ".resx"
            image = "resx.gif"
            Exit Select
        Case ".vb"
            image = "vb.gif"
            Exit Select
        Case ".xml"
            image = "xml.gif"
            Exit Select
        Case ".ascx", ".aspx"
            image = "ascx.gif"
            Exit Select
        Case ".gif", ".jpg"
            image = "gif.gif"
            Exit Select
        Case ""
            image = "mailfolder.gif"
            Exit Select
    End Select
    Return image
End Function