Blog

Creating an image gallery with Tile Manager

Marina Stoyanova / Monday, September 23, 2013

The Ignite UI Tile Manager control is a layout control that gives a friendly, interactive user interface, that allows users to move the items on the page, to expand and collapse them.

In this blog you will see how to create an image gallery using Ignite UI Tile Manager and File Upload controls.

Step One: Setting the basis

To get started you need to insert Infragistics library Infragistics.Web.Mvc.dll. As we are making an ASP.NET MVC project using Razor, the inclusion will look like this:

  1. @using Infragistics.Web.Mvc;

Most MVC projects has jQuery scripts already included in itself, so you don’t have to worry about that. What you need to do is include the Infragistics scripts and of course append Infragistics CSS folder and scripts to your project folders. The following shows how to do it:

  1. <link type="text/css" href="@Url.Content("~/Content/css/themes/infragistics/infragistics.theme.css")" rel="stylesheet" />
  2. <link type="text/css" href="@Url.Content("~/Content/css/structure/infragistics.css")" rel="stylesheet" />
  3. <script type="text/javascript" src="@Url.Content("~/Scripts/infragistics.core.js")">script>
  4. <script type="text/javascript" src="@Url.Content("~/Scripts/infragistics.lob.js")">script>

 

 

Step Two: The File Upload

The Ignite UI File Upload control allows you to make a single or multiple upload. You just have to add these lines:

  1. <div id="uploader">
  2.      @(Html.Infragistics().Upload()
  3.     .ID("igUpload1")
  4.     .AddClientEvent("fileUploaded","UpHand")
  5.     .AutoStartUpload(true)
  6.     .ProgressUrl("/IGUploadStatusHandler.ashx")
  7.     .Render()
  8. )

We use the AddClientEvent to trigger a reload on Uploaded event. You can read how to do that later in the blog. The client-site of the configuration is the easy part, now let’s look at the server-site configuration. Shortly, what you need to do is:

  • Ignore the URL of the HTTP handler in Global.asax
  1. public static void RegisterRoutes(RouteCollection routes)
  2. {
  3.     routes.IgnoreRoute("IGUploadStatusHandler.ashx");
  5.     . . .
  6. }
  • Create a folder for your uploaded files and register it in Web.config
  1. <appSettings>
  2.   <add key="fileUploadPath" value="~/Uploads" />
  3.   <add key="maxFileSizeLimit" value="100000000" />
  4.   . . .
  5. appSettings>
  • Register the module and the handler in Web.config
  1. <system.webServer>
  2.   <modules runAllManagedModulesForAllRequests="true">
  3.     <add name="IGUploadModule" type="Infragistics.Web.Mvc.UploadModule"
  4.                                preCondition="managedHandler" />
  5.   modules>
  6.   <handlers>
  7.     <add name="IGUploadStatusHandler" path="IGUploadStatusHandler.ashx" verb="*"
  8.          type="Infragistics.Web.Mvc.UploadStatusHandler" preCondition="integratedMode" />
  9.   handlers>
  10.   <validation validateIntegratedModeConfiguration="false" />
  11. system.webServer>

If you need more detailed information on how to set up the File Upload, you can read the blog “Using jQuery Upload Control and HTML5 Video Player to create Video Gallery” or you can look up the features and the samples of the control.

Step three: The Tile Manager

Tile Manager is a wise choice if you want an interactive layout for your gallery. This control is still CTP, that is why you may experience difficulties with some of its functions. The new release is coming soon,so if there are changes in the configuration we will let you know.

To start with, you need to add a div tag for your image dashboard in your HTML code.

  1. <div id="dashboard">div>

Then you need to add the following jQuery code snippet, that demonstrates how to initialize the igTileManager control:

  1. function callTileManager () {
  2.     $('#dashboard').igTileManager({
  3.         layoutConfiguration: {
  4.             gridLayout: {
  5.                 columnWidth: 300,
  6.                 columnHeight: 250,
  7.                 marginLeft: 10,
  8.                 marginTop: 10
  9.             }
  10.         },    
  11.         animationDuration: 1000,
  12.         dataSource: dataSource,
  13.         contentTemplate: ''
  14.        
  15.     });
  16. }
  17. callTileManager();

As you can see we are taking the data source from a variable called dataSource. Our data is actually an array of objects, which has two elements a name and a path. For that purpose you have to create a new model called GalleryItems.cs like that:

  1. public class GalleryItems
  2. {
  3.     public string path { get; set; }
  4.     public string name { get; set; }
  5.   
  6. }

Then you need to go to the HomeController.cs and set the gallery source.You made a new model that is why you have to include it in HomeController.cs:

  1. public ActionResult Index()
  2. {
  3.  
  4.     var model = new List<GalleryItems>();
  5.  
  6.     string[] paths = System.IO.Directory.GetFiles(Server.MapPath("~/Uploads"));
  7.  
  8.     for (int i = 0; i < paths.Length; i++)
  9.     {
  10.         model.Add(new GalleryItems()
  11.         {
  12.             path = "/Uploads/" + System.IO.Path.GetFileName(paths[i]),
  13.             name = System.IO.Path.GetFileNameWithoutExtension(paths[i])
  14.         });
  15.  
  16.     }
  17.  
  18.     return View(model);
  19. }

The code is in Razor, but we need it in our jQuery code that is why the variable dataSource must be JSON encoded.

  1. var dataSource =@Html.Raw(Json.Encode(Model));

The last step of the configuration is to set up the handler that triggers when a new item is added. Therefor, you have to make an AJAX request and if the request completes correctly you should be able to bind the new data.

  1. function UpHand(evt,ui) {       
  2.     $.ajax({
  3.        type: "POST",
  4.        url: "@Url.Action("Image","Home")",
  5.        data: {image: ui.filePath}
  6.     }).done(function (data) {
  7.         dataSource.push(data);
  8.         $("#dashboard").igTileManager("destroy");
  9.         callTileManager ();      
  10.        }        
  11. )};

For the data source you need to create a new control in the HomeController.cs:

  1. public JsonResult Image(string image)
  2. {
  3.     var model = new GalleryItems()
  4.     {
  5.         path = "/Uploads/" + System.IO.Path.GetFileName(image),
  6.         name = System.IO.Path.GetFileNameWithoutExtension(image)
  7.     };
  8.     return Json(model);
  9. }

So this is how to make an image gallery with Tile Manager. The sample of the above mentioned source can be found here.

 

You can follow us on Twitter @Infragistics and stay in touch on Facebook, Google+ and LinkedIn!