Part 4 : How I show photo in w2ui grid

Hi,

recently my client ask me to create a photo gallery.

This was easy, using Blueimp Gallery, I manage to develop it in no time.

But then I face a problem how to delete and edit photo as we cannot do it directly from  Blueimp Gallery . This is when I try to use w2ui grid and to my surprise its work like charm.

So here I want to share what I have done so far.

The Model

public class Photo 
{
   public int Id { get; set; }
   public DateTime CreatedDate { get; set; }
   public String Description { get; set; }
   public String ImagePath { get; set; }
   public String ThumbPath { get; set; }
}

My View (Index.cshtml)

@model IEnumerable<MyProject.Models.Photo>

@Styles.Render("~/w2ui/css")
<div id="indexGallery" style="width: 100%; height: 400px; overflow: hidden;"></div>

@section Scripts 
{
@Scripts.Render("~/w2ui/js")

<script>
  $(document).ready(function () {
    $('#indexGallery').w2grid({
      name: 'indexGallery',
      header: 'Gallery',
      recordHeight: 70,
      url: {
        get: '@Url.Action("LoadRecords")',
        remove: '@Url.Action("DeleteRecords")',
        save: '@Url.Action("InlineEdit")'
      },
      recid: 'Id',
      fixedBody: true,
      show: {
         lineNumbers: true,
         toolbar: true,
         header: true,
         footer: true,
         toolbarAdd: false,
         toolbarDelete: true,
         toolbarEdit: false,
         toolbarSave: true,
      },
      columns: [
        { field: 'ThumbPath', caption: 'Photo', sortable: false, size: '5%',
            render: function (record) {
              var html; 
              html = '<a href="' + record.ImagePath + '" target="_blank">' +
                     '<img src="' + record.ThumbPath + '" alt="' + record.ThumbPath + '" class="img-rounded" style="margin:2px;" /></a>';
              return html;
              }
        },
        { field: 'Description', caption: 'Tajuk', sortable: true, size: '5%', editable: { type: 'text' }, info: true },
        { field: 'CreatedDate', caption: 'Tarikh Upload', sortable: true, size: '5%',
            render: 'date:dd-mm-yyyy', editable: { type: 'date', format: 'dd-mm-yyyy' },
        },
        { field: 'NoFail', caption: 'No. Fail', sortable: true, size: '5%', editable: { type: 'text' } },
      ],
      searches: [
        { field: 'Description', caption: 'Tajuk', type: 'text' },
        { field: 'NoFail', caption: 'No. Fail', type: 'text' },
      ],
      onDelete: function (event) {
        if (event.status == "error") {
          console.log("Error Delete Record : " + event.message);
        }
      },
      onSave: function (event) {
        if (event.status == "error") {
           w2alert(event.message, "Error During Save");
        } else {
           w2ui['indexGallery'].mergeChanges();
        }
      },
   });
  });
</script>
}

The Result

Notes

• In the above example, I load image thumbnail into w2ui grid.
• User are able to delete selected photo(s) or edit the description using inline edit
• If user click on a thumbnail, the bigger size of the photo will be loaded into a new tab.

Steps

• In order to do this, there are two main properties we need to configure

1. change w2ui grid row height to 70px  to properly show photo thumbnail.
   • recordHeight : 70

2. using render in column-field setting to show the thumbnail .

{ field: 'ThumbPath', caption: 'Photo', sortable: false, size: '5%', 
     render: function (record) { 
       var html; 
       html = '<a href="' + record.ImagePath + 
              '" target="_blank">' + 
              '<img src="' + record.ThumbPath + '" alt="' + record.ThumbPath + 
              '" class="img-rounded" style="margin:2px;" /></a>'; 
       return html; } 
     },

• That’s it. This the only steps you have to do.

The controller

• Before I end my post, a little bit about the controller.
• There is nothing special in my controller. I have created related functions to support calls from w2ui grid.
  1. LoadRecords
     • Please look in my previous post which I discuss about this.
     • I used the same function, just change the model name accordingly
  2. DeleteRecords
     • I use this function to delete selected records from the grid
  3. InlineEdit
     • I use this function to save changes done from inline editing
     • I will discuss this two functions in my next post.

OK. I’m done here. See you in my next post.

Reference

• w2ui homepage
• Part 1 - Implement w2ui in asp.net mvc - basic setting
• Part 2 - Implement w2ui in asp.net mvc - w2ui.grid with local data source
• Part 3 - Implement w2ui in asp.net mvc - w2ui.grid with remote data source