diff --git a/media/css/seahub.css b/media/css/seahub.css
index b518cca322..e26f44b29a 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -3833,6 +3833,7 @@ img.thumbnail {
     position:relative;
 }
 .grid-item .img-link {
+    position:relative; /* for locked icon */
     display:block;
     text-align:center;
     height:100px;
@@ -3880,6 +3881,11 @@ img.thumbnail {
     border-radius:3px;
     margin:0;
 }
+.grid-file-locked-icon {
+    position:absolute;
+    bottom:0px;
+    right:10px;
+}
 .grid-item-op {
     position:fixed;
 }
diff --git a/seahub/templates/js/templates.html b/seahub/templates/js/templates.html
index 7f51b7568a..6ae08f378d 100644
--- a/seahub/templates/js/templates.html
+++ b/seahub/templates/js/templates.html
@@ -348,6 +348,9 @@
 <script type="text/template" id="grid-view-file-item-tmpl">
     <a href="<%= url %>" class="img-link" target="_blank">
         <img src="<%= icon_url %>" alt="" width="96" class="vam" />
+        <% if (is_pro && dirent.is_locked) { %>
+        <img class="grid-file-locked-icon" width="16" src="{{ MEDIA_URL }}img/file-locked-32.png" alt="{% trans "locked" %}" />
+        <% } %>
     </a>
 
     <a href="<%= url %>" class="ellipsis text-link normal" target="_blank">
diff --git a/static/scripts/app/models/dirent.js b/static/scripts/app/models/dirent.js
index f4747a714c..ecdeb65e3d 100644
--- a/static/scripts/app/models/dirent.js
+++ b/static/scripts/app/models/dirent.js
@@ -126,7 +126,74 @@ define([
                         options.error(xhr);
                 }
             });
-        }
+        },
+
+        lockOrUnlockFile: function(options) {
+            var dir = this.collection,
+                filepath = this.getPath();
+
+            $.ajax({
+                url: Common.getUrl({name: 'lock_or_unlock_file', repo_id: dir.repo_id}),
+                type: 'PUT',
+                dataType: 'json',
+                data: {
+                    'operation': options.op,
+                    'p': filepath
+                },
+                cache: false,
+                beforeSend: Common.prepareCSRFToken,
+                success: function() {
+                    options.success();
+                },
+                error: function(xhr) {
+                    options.error(xhr);
+                }
+            });
+        },
+
+        lockFile: function(options) {
+            var _this = this;
+            this.lockOrUnlockFile({
+                op: 'lock',
+                success: function() {
+                    _this.set({
+                        'is_locked': true,
+                        'locked_by_me': true,
+                        'lock_owner_name': app.pageOptions.name
+                    });
+                    if (options.success) {
+                        options.success();
+                    }
+                },
+                error: function(xhr) {
+                    if (options.error) {
+                        options.error(xhr)
+                    }
+                }
+            });
+            return false;
+        },
+
+        unlockFile: function(options) {
+            var _this = this;
+            this.lockOrUnlockFile({
+                op: 'unlock',
+                success: function() {
+                    _this.set({
+                        'is_locked': false
+                    });
+                    if (options.success) {
+                        options.success();
+                    }
+                },
+                error: function(xhr) {
+                    if (options.error) {
+                        options.error(xhr)
+                    }
+                }
+            });
+            return false;
+        },
 
     });
 
diff --git a/static/scripts/app/views/dirent-grid.js b/static/scripts/app/views/dirent-grid.js
index 94fe4a3972..5d81588b7d 100644
--- a/static/scripts/app/views/dirent-grid.js
+++ b/static/scripts/app/views/dirent-grid.js
@@ -128,21 +128,24 @@ define([
 
             // Using _.bind(function, object) to make that whenever the function is
             // called, the value of this will be the object.
-            this.$el.on('click', '.delete', _.bind(this.del, this));
-            this.$el.on('click', '.share', _.bind(this.share, this));
-            this.$el.on('click', '.mv', _.bind(this.mvcp, this));
-            this.$el.on('click', '.cp', _.bind(this.mvcp, this));
-            this.$el.on('click', '.rename', _.bind(this.rename, this));
-            this.$el.on('click', '.open-via-client', _.bind(this.open_via_client, this));
+            this.$('.delete').on('click', _.bind(this.del, this));
+            this.$('.share').on('click', _.bind(this.share, this));
+            this.$('.mv').on('click', _.bind(this.mvcp, this));
+            this.$('.cp').on('click', _.bind(this.mvcp, this));
+            this.$('.rename').on('click', _.bind(this.rename, this));
+            this.$('.open-via-client').on('click', _.bind(this.open_via_client, this));
+            this.$('.lock-file').on('click', _.bind(this.lockFile, this));
+            this.$('.unlock-file').on('click', _.bind(this.unlockFile, this));
 
             return false;
         },
 
-        _closeMenu: function() {
+        closeMenu: function() {
             this.$('.grid-item-op').remove();
         },
 
         del: function(event) {
+            this.closeMenu();
             var dirent_name = this.model.get('obj_name');
             this.model.deleteFromServer({
                 success: function(data) {
@@ -173,7 +176,7 @@ define([
                 'obj_name': obj_name
             };
             new ShareView(options);
-            this._closeMenu();
+            this.closeMenu();
             return false;
         },
 
@@ -186,12 +189,12 @@ define([
             };
 
             new DirentMvcpDialog(options);
-            this._closeMenu();
+            this.closeMenu();
             return false;
         },
 
         rename: function() {
-            this._closeMenu();
+            this.closeMenu();
             var options = {
                 'dir': this.dir,
                 'dirent': this.model
@@ -200,8 +203,32 @@ define([
             return false;
         },
 
+        lockFile: function() {
+            this.closeMenu();
+            this.model.lockFile({
+                success: function() {
+                },
+                error: function(xhr) {
+                    Common.ajaxErrorHandler(xhr);
+                }
+            });
+            return false;
+        },
+
+        unlockFile: function() {
+            this.closeMenu();
+            this.model.unlockFile({
+                success: function() {
+                },
+                error: function(xhr) {
+                    Common.ajaxErrorHandler(xhr);
+                }
+            });
+            return false;
+        },
+
         open_via_client: function() {
-            this._closeMenu();
+            this.closeMenu();
             return true;
         }
 
diff --git a/static/scripts/app/views/dirent.js b/static/scripts/app/views/dirent.js
index 4ecbd77555..90c601d3d6 100644
--- a/static/scripts/app/views/dirent.js
+++ b/static/scripts/app/views/dirent.js
@@ -456,41 +456,14 @@ define([
             return false;
         },
 
-        lockOrUnlockFile: function(params) {
-            var dir = this.dir,
-                filepath = Common.pathJoin([dir.path, this.model.get('obj_name')]),
-                callback = params.after_success;
-
-            $.ajax({
-                url: Common.getUrl({name: 'lock_or_unlock_file', repo_id: dir.repo_id}),
-                type: 'PUT',
-                dataType: 'json',
-                data: {
-                    'operation': params.op,
-                    'p': filepath
-                },
-                cache: false,
-                beforeSend: Common.prepareCSRFToken,
-                success: function() {
-                    callback();
-                },
-                error: function (xhr) {
-                    Common.ajaxErrorHandler(xhr);
-                }
-            });
-        },
-
         lockFile: function() {
             var _this = this;
-            this.lockOrUnlockFile({
-                'op': 'lock',
-                'after_success': function() {
-                    _this.model.set({
-                        'is_locked': true,
-                        'locked_by_me': true,
-                        'lock_owner_name': app.pageOptions.name
-                    });
+            this.model.lockFile({
+                success: function() {
                     _this.$el.removeClass('hl');
+                },
+                error: function(xhr) {
+                    Common.ajaxErrorHandler(xhr);
                 }
             });
             return false;
@@ -498,13 +471,12 @@ define([
 
         unlockFile: function() {
             var _this = this;
-            this.lockOrUnlockFile({
-                'op': 'unlock',
-                'after_success': function() {
-                    _this.model.set({
-                        'is_locked': false
-                    });
+            this.model.unlockFile({
+                success: function() {
                     _this.$el.removeClass('hl');
+                },
+                error: function(xhr) {
+                    Common.ajaxErrorHandler(xhr);
                 }
             });
             return false;