Part 4 : How I show photo in w2ui grid
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
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.
- LoadRecords
- Please look in my previous post which I discuss about this.
- I used the same function, just change the model name accordingly
- DeleteRecords
- I use this function to delete selected records from the grid
- InlineEdit
- I use this function to save changes done from inline editing
- I will discuss this two functions in my next post.
- LoadRecords
OK. I’m done here. See you in my next post.