XMLDataViewer

• Download source code - 66 Kb

Introduction

This is my first CodeProject article. All comments will be greatly appreciated.

I came up with the idea of developing this control for the fact that every time I had to put an image that was in a DataSet, in a DataList control or any other, I had to go through all the effort that it takes to do so. This control is very simple to use. You put a physical path or URL of an XML file that you want to display, and the table in it you want to use.

It actually uses a DataSet object to load the data, so you have to specify which table in the DataSet you want to use. During runtime, you can change the URL or physical address of the XML file as the name of the table. The control formats all HTTP and FTP addresses to their links, puts all the tags for the image files in JPG, GIF, BMP, PNG, etc. formats. It also displays the Windows Media Player for video files.

For example, if URL: http://www.codeproject.com has some XML file in its root folder or any other folder, it displays all the data, images and video files that the file links to, even if the images and videos are contained in that URL. If the XML file is contained in the root or any folder of your web application, you use a physical address taking in consideration the links to those images and/or videos.

Here's some snippet of the Render method of the control.

Here, we start loading the XML in the DataSet and start drawing the control.

protected override void Render(HtmlTextWriter output)
{

   EnsureChildControls();
   control_Width = this.Width;
   if (_datasource != null)
   {
    ds = new DataSet();
    
    ds.ReadXml(_datasource);
     
     if (ds.Tables[TableName].Rows.Count > 0)
     {
    
      /*If the ShowTableHeader is true we draw a div control.
       *theres a slight bug in the width of the div, so if you
       * fix it send it back pls.
       */
      if (ShowTableHeader)
      {
       output.AddStyleAttribute("BACKGROUND-COLOR", HeaderBackColor.Name);
       output.AddStyleAttribute("BORDER-RIGHT", BorderColor.Name + " " + 
              BorderWidth.Value.ToString()+"px "+BorderStyle);
       output.AddStyleAttribute("BORDER-TOP", BorderColor.Name + " " + 
              BorderWidth.Value.ToString()+"px "+BorderStyle);
       output.AddStyleAttribute("BORDER-LEFT", BorderColor.Name + " " + 
              BorderWidth.Value.ToString()+"px "+BorderStyle);
       output.AddStyleAttribute("BORDER-BOTTOM", BorderColor.Name + " " + 
              BorderWidth.Value.ToString()+"px "+BorderStyle);

       output.RenderBeginTag("div");
       output.Write(this.title);
       output.RenderEndTag();
      }

This is some image of the control in design time:

This is another code snippet that shows how I format the URLs, email address, videos and images for their processing.

foreach(DataRow myRow in ds.Tables[TableName].Rows)
{
    output.Indent = 2;
    output.WriteBeginTag("tr");
    output.WriteAttribute("bordercolor", this.InnerBorderColor.Name);
    output.Write(">");

    foreach(DataColumn myColumn in ds.Tables[TableName].Columns)
    {
        string cellValue = myRow[myColumn].ToString();

        /*Here we put the www, ftp and email addresses
         *their respective links.
         */
        if (cellValue.ToLower().StartsWith("http:")||
            cellValue.ToLower().StartsWith("ftp:"))
        {
            cellValue = "<a target='_blank' href='"+cellValue+"'>"+cellValue+"</a>";
        }

        foreach(char str in cellValue)
        {
            if (str == '@')
                cellValue = "<a href='mailto:"+cellValue+"'>"+cellValue+"</a>";
        }

        output.Indent = 4;
        output.WriteBeginTag("td");

If the XML file you are using is in your local disk, it automatically displays all the images.

This is some image of the control during runtime:

Remarks

There're still many things that you could put better in this control, like using thumbnails instead of the images being displayed, so it is ugly in some occasions. Well, this is my first article so I expect to not disappoint many of you.

Next time, I expect to increase my knowledge a little bit. Thanks in advance, and all comments are welcomed.