Part 4 : How I show photo in w2ui grid

bapak71

3.00/5 (2 votes)

13 Jan 2019CPOL2 min read

9.7K

Using w2ui grid to show list of uploaded photos.

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

photo index

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

change w2ui grid row height to 70px to properly show photo thumbnail.
- ```
recordHeight : 70
```
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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)