More in this section

Forums / Developing with Sitefinity / File Browser demo into Sitefinity

File Browser demo into Sitefinity

5 posts, 0 answered
  1. losol
    losol avatar
    5 posts
    Registered:
    24 Aug 2004
    19 Jan 2009
    Link to this post
    I tried to implement the File Browser demo from Telerik into Sitefinity for giving the possibility to download articles/papers from a folder.

    I added a folder /Sitefinity/UserControls/FileBrowser, and succesfully compiled the Directories.asmx web service. I also added a web user control FileBrowser.ascx

    I have two problems:
    1) How do I get it working
    2) How do I add a "Download this" column?

    I get this error message in IE:

    Webpage Script Errors

    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; InfoPath.2; .NET CLR 3.5.30729; .NET CLR 3.0.30618)
    Timestamp: Mon, 19 Jan 2009 15:06:48 UTC

    Message: 'loadingPanel' is null or not an object
    Line: 6
    Char: 5
    Code: 0
    URI: http://domain/Sitefinity/UserControls/FileBrowser/FileBrowser.js

    And when trying to expand folders it comes a popup with: "The server method 'GetDirectories' failed"



    This is my FileBrowser.ascx:

     


     

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="FileBrowser.ascx.cs" Inherits="Sitefinity_UserControls_FileBrowser_WebUserControl" %>

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

    <script src="/Sitefinity/UserControls/FileBrowser/FileBrowser.js" type="text/javascript" ></script>

    <asp:ScriptManagerProxy ID="RadScriptManager1" runat="server">

    <Services>

    <asp:ServiceReference Path="/Sitefinity/UserControls/FileBrowser/Directories.asmx" />

    </Services>

    </asp:ScriptManagerProxy>

    <div class="wrapper">

    <div class="wrapper2">

    <h3 class="browser">

    File Browser</h3>

    <div class="wrapper3">

    <telerik:RadMenu 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 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 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 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="/Sitefinity/UserControls/Filebrowser/Integration/FileBrowser/Img/LoadingProgressBar.gif"

    CssClass="UpdateImage" />

    <span style="position:relative; top: -6px;">Updating...</span>

    </telerik:RadAjaxLoadingPanel>

    </div>

    </div>

    </div>

     

     

    This is the Code-Behind:

     

     

     

     

     

    using System;

    using System.Collections;

    using System.ComponentModel;

    using System.Data;

    using System.Drawing;

    using System.Web;

    using System.Web.SessionState;

    using System.Web.UI;

    using System.Web.UI.WebControls;

    using System.Web.UI.HtmlControls;

    using Telerik.Web.UI;

    using System.IO;

     

    public partial class Sitefinity_UserControls_FileBrowser_WebUserControl : System.Web.UI.UserControl

    {

    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("~/Files/Documents/"));

    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("~/Files/Documents/"));

    }

    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 = "&nbsp;";

    }

    }

    }

    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;

    }

     

    }

     

    This is the Filebrowser.js

     

     

    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;

     

    }

  2. Georgi
    Georgi avatar
    3583 posts
    Registered:
    28 Oct 2016
    21 Jan 2009
    Link to this post
    Hello Ole Losvik,

    I just noticed that you have asked for the same problem in our RadControls forums. Could you please let us know about the status of this issue? Have you resolved the problem?

    Thank you in advance.

    All the best,
    Georgi
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. losol
    losol avatar
    5 posts
    Registered:
    24 Aug 2004
    21 Jan 2009
    Link to this post
    Thanks for your reply. The project seems to work fine standalone, but it applies a lot of errors when using it inside Sitefinity. Status is not resolved.

    It might be easier with another approach? I just wanted to show the content of one all subfolders in one of my documents folder, and give the user ability to download content. It will be some hundre files, and I do not want to use a Document Library due to the fact that it stores files in database (expensive to host large databases).
  4. losol
    losol avatar
    5 posts
    Registered:
    24 Aug 2004
    21 Jan 2009
    Link to this post
    To be more precise: it is working when using as described in an aspx. But when using an aspx and including the ascx I allways get this error message:
    "Microsoft JScript runtime error: 'loadingPanel' is null or not an object".
    Sorry for crossposting, I just realized after posting that it was not a Sitefinity-problem but it did not work outside sitefinity either. I will post to the Telerik forum.
  5. Georgi
    Georgi avatar
    3583 posts
    Registered:
    28 Oct 2016
    22 Jan 2009
    Link to this post
    Hi Ole Losvik,

    That is fine. We will follow the forum post as well and will post there if we might help with something.

    Regards,
    Georgi
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Register for webinar
5 posts, 0 answered