Click here to Skip to main content
13,899,494 members
Click here to Skip to main content
Add your own
alternative version

Stats

2.4K views
4 bookmarked
Posted 12 Jan 2019
Licenced CPOL

Part 4 : How I show photo in w2ui grid

, 13 Jan 2019
Rate this:
Please Sign up or sign in to vote.
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
  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

License

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

Share

About the Author

bapak71
Software Developer
Malaysia Malaysia
No Biography provided

You may also be interested in...

Pro

Comments and Discussions

 
-- There are no messages in this forum --
Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web05 | 2.8.190306.1 | Last Updated 14 Jan 2019
Article Copyright 2019 by bapak71
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid