diff --git a/packages/Webkul/Admin/src/DataGrids/CategoryDataGrid.php b/packages/Webkul/Admin/src/DataGrids/CategoryDataGrid.php
index 818832d6e..26dcbeb27 100755
--- a/packages/Webkul/Admin/src/DataGrids/CategoryDataGrid.php
+++ b/packages/Webkul/Admin/src/DataGrids/CategoryDataGrid.php
@@ -116,7 +116,7 @@ class CategoryDataGrid extends DataGrid
             'route'        => 'admin.catalog.categories.delete',
             'confirm_text' => trans('ui::app.datagrid.massaction.delete', ['resource' => 'product']),
             'icon'         => 'icon trash-icon',
-            'function'     => 'deleteFunction($event, "delete")'
+            'function'     => 'deleteCategory(event, "delete")'
         ]);
 
         $this->addMassAction([
diff --git a/packages/Webkul/Admin/src/Resources/views/catalog/categories/index.blade.php b/packages/Webkul/Admin/src/Resources/views/catalog/categories/index.blade.php
index a19a6c1de..e75e90004 100755
--- a/packages/Webkul/Admin/src/Resources/views/catalog/categories/index.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/catalog/categories/index.blade.php
@@ -18,6 +18,7 @@
                     {{ __('admin::app.catalog.categories.add-title') }}
                 </a>
             </div>
+
             <div class="control-group">
                 <select class="control" id="locale-switcher" name="locale"
                         onchange="reloadPage('locale', this.value)">
@@ -38,6 +39,7 @@
 
         <div class="page-content">
             @inject('categories', 'Webkul\Admin\DataGrids\CategoryDataGrid')
+
             {!! $categories->render() !!}
         </div>
 
@@ -47,35 +49,34 @@
 
 @push('scripts')
     <script>
-        function reloadPage(getVar, getVal) {
-            let url = new URL(window.location.href);
-            url.searchParams.set(getVar, getVal);
-
-            window.location.href = url.href;
-        }
-
         $(document).ready(function(){
-            $("input[type='checkbox']").change(deleteFunction);
+            $("input[type='checkbox']").change(deleteCategory);
         });
 
-        var deleteFunction = function(e,type) {
+        /**
+         * Delete category function. This function name is present in category datagrid.
+         * So outside scope function should be loaded `onclick` rather than `v-on`.
+         */
+        let deleteCategory = function(e, type) {
+            let indexes;
+
             if (type == 'delete') {
-                var indexes = $(e.target).parent().attr('id');
+                indexes = $(e.target).parent().attr('id');
             } else {
                 $("input[type='checkbox']").attr('disabled', true);
 
-                var formData = {};
+                let formData = {};
                 $.each($('form').serializeArray(), function(i, field) {
                     formData[field.name] = field.value;
                 });
 
-                var indexes = formData.indexes;
+                indexes = formData.indexes;
             }
 
             if (indexes) {
                 $.ajax({
                     type : 'POST',
-                    url : '{{route("admin.catalog.categories.product.count")}}',
+                    url : '{{ route("admin.catalog.categories.product.count") }}',
                     data : {
                         _token: '{{csrf_token()}}',
                         indexes: indexes
@@ -83,14 +84,16 @@
                     success:function(data) {
                         $("input[type='checkbox']").attr('disabled', false);
                         if (data.product_count > 0) {
-                            var message = "{{trans('ui::app.datagrid.massaction.delete-category-product')}}";
+                            let message = "{{ trans('ui::app.datagrid.massaction.delete-category-product') }}";
+
                             if (type == 'delete') {
                                 doAction(e, message);
                             } else {
                                 $('form').attr('onsubmit', 'return confirm("'+message+'")');
                             }
                         } else {
-                            var message = "{{ __('ui::app.datagrid.click_on_action') }}";
+                            let message = "{{ __('ui::app.datagrid.click_on_action') }}";
+
                             if (type == 'delete') {
                                 doAction(e, message);
                             } else {
@@ -103,5 +106,51 @@
                 $("input[type='checkbox']").attr('disabled', false);
             }
         }
+
+        /**
+         * Do action function. Not directly calling the datagrid components.
+         * Instead taking a copy and using in this scope.
+         */
+        function doAction (e, message, type) {
+            let element = e.currentTarget;
+
+            if (message) {
+                element = e.target.parentElement;
+            }
+
+            message = message || '{{ __('ui::app.datagrid.massaction.delete') }}';
+
+            if (confirm(message)) {
+                axios.post(element.getAttribute('data-action'), {
+                    _token: element.getAttribute('data-token'),
+                    _method: element.getAttribute('data-method')
+                }).then(function (response) {
+                    this.result = response;
+
+                    if (response.data.redirect) {
+                        window.location.href = response.data.redirect;
+                    } else {
+                        location.reload();
+                    }
+                }).catch(function (error) {
+                    location.reload();
+                });
+
+                e.preventDefault();
+            } else {
+                e.preventDefault();
+            }
+        }
+
+        /**
+         * Reload page.
+         */
+        function reloadPage(getVar, getVal) {
+            let url = new URL(window.location.href);
+
+            url.searchParams.set(getVar, getVal);
+
+            window.location.href = url.href;
+        }
     </script>
 @endpush
\ No newline at end of file
diff --git a/packages/Webkul/Ui/src/Resources/views/datagrid/body.blade.php b/packages/Webkul/Ui/src/Resources/views/datagrid/body.blade.php
index 962bf7811..90652ea95 100644
--- a/packages/Webkul/Ui/src/Resources/views/datagrid/body.blade.php
+++ b/packages/Webkul/Ui/src/Resources/views/datagrid/body.blade.php
@@ -56,7 +56,7 @@
 
                                         @if ($action['method'] != 'GET')
                                             @if (isset($action['function']))
-                                                v-on:click="{{$action['function']}}"
+                                                onclick="{{ $action['function'] }}"
                                             @else
                                                 v-on:click="doAction($event)"
                                             @endif
diff --git a/packages/Webkul/Ui/src/Resources/views/datagrid/table.blade.php b/packages/Webkul/Ui/src/Resources/views/datagrid/table.blade.php
index f918f2ebf..00d998cfe 100644
--- a/packages/Webkul/Ui/src/Resources/views/datagrid/table.blade.php
+++ b/packages/Webkul/Ui/src/Resources/views/datagrid/table.blade.php
@@ -97,12 +97,12 @@
                     <div class="filter-left">
                         <div class="search-filter">
                             <input type="search" id="search-field" class="control"
-                                   placeholder="{{ __('ui::app.datagrid.search') }}" v-model="searchValue"
-                                   v-on:keyup.enter="searchCollection(searchValue)"/>
+                                placeholder="{{ __('ui::app.datagrid.search') }}" v-model="searchValue"
+                                v-on:keyup.enter="searchCollection(searchValue)"/>
 
                             <div class="icon-wrapper">
                                 <span class="icon search-icon search-btn"
-                                      v-on:click="searchCollection(searchValue)"></span>
+                                    v-on:click="searchCollection(searchValue)"></span>
                             </div>
                         </div>
                     </div>
@@ -165,8 +165,8 @@
                                     <li v-if='stringCondition != null'>
                                         <div class="control-group">
                                             <input type="text" class="control response-string"
-                                                   placeholder="{{ __('ui::app.datagrid.value-here') }}"
-                                                   v-model="stringValue"/>
+                                                placeholder="{{ __('ui::app.datagrid.value-here') }}"
+                                                v-model="stringValue"/>
                                         </div>
                                     </li>
 
@@ -218,15 +218,13 @@
                                     <li v-if='datetimeConditionSelect'>
                                         <div class="control-group">
                                             <select class="control" v-model="datetimeCondition">
-                                                <option selected
-                                                        disabled>{{ __('ui::app.datagrid.condition') }}</option>
+                                                <option selected disabled>{{ __('ui::app.datagrid.condition') }}</option>
                                                 <option value="eq">{{ __('ui::app.datagrid.equals') }}</option>
                                                 <option value="neqs">{{ __('ui::app.datagrid.nequals') }}</option>
                                                 <option value="gt">{{ __('ui::app.datagrid.greater') }}</option>
                                                 <option value="lt">{{ __('ui::app.datagrid.less') }}</option>
                                                 <option value="gte">{{ __('ui::app.datagrid.greatere') }}</option>
                                                 <option value="lte">{{ __('ui::app.datagrid.lesse') }}</option>
-                                                {{-- <option value="btw">{{ __('ui::app.datagrid.between') }}</option> --}}
                                             </select>
                                         </div>
                                     </li>
@@ -246,8 +244,7 @@
                 </div>
 
                 <div class="filtered-tags">
-                    <span class="filter-tag" v-if="filters.length > 0" v-for="filter in filters"
-                          style="text-transform: capitalize;">
+                    <span class="filter-tag" v-if="filters.length > 0" v-for="filter in filters" style="text-transform: capitalize;">
                         <span v-if="filter.column == 'perPage'">perPage</span>
                         <span v-else>@{{ filter.label }}</span>
 
@@ -348,7 +345,6 @@
                                 this.type = this.columns[column].type;
 
                                 switch (this.type) {
-
                                     case 'string': {
                                         this.stringConditionSelect = true;
                                         this.datetimeConditionSelect = false;
@@ -394,7 +390,6 @@
                                         this.nullify();
                                         break;
                                     }
-
                                 }
                             }
                         }
@@ -463,7 +458,10 @@
                         this.formURL("search", 'all', searchValue, '{{ __('ui::app.datagrid.search-title') }}');
                     },
 
-                    // function triggered to check whether the query exists or not and then call the make filters from the url
+                    /**
+                     * Function triggered to check whether the query exists or not and then
+                     * call the make filters from the url.
+                     */
                     setParamsAndUrl: function () {
                         params = (new URL(window.location.href)).search;
 
@@ -522,7 +520,9 @@
                         document.getElementById('mass-action-form').action = this.massActionTarget;
                     },
 
-                    //make array of filters, sort and search
+                    /**
+                     * Make array of filters, sort and search.
+                     */
                     formURL: function (column, condition, response, label) {
                         var obj = {};
 
@@ -665,7 +665,9 @@
                         }
                     },
 
-                    // make the url from the array and redirect
+                    /**
+                     * Make the url from the array and redirect.
+                     */
                     makeURL: function () {
                         newParams = '';
 
@@ -697,7 +699,9 @@
                         window.location.href = clean_uri + newParams;
                     },
 
-                    //make the filter array from url after being redirected
+                    /**
+                     * Make the filter array from url after being redirected.
+                     */
                     arrayFromUrl: function () {
 
                         let obj = {};
@@ -802,7 +806,9 @@
                         }
                     },
 
-                    //triggered when any select box is clicked in the datagrid
+                    /**
+                     * Triggered when any select box is clicked in the datagrid.
+                     */
                     select: function () {
                         this.allSelected = false;
 
@@ -814,7 +820,9 @@
                         }
                     },
 
-                    //triggered when master checkbox is clicked
+                    /**
+                     * Triggered when master checkbox is clicked.
+                     */
                     selectAll: function () {
                         this.dataIds = [];
 
@@ -873,40 +881,40 @@
                         this.filters.push({"column": "perPage", "cond": "eq", "val": e.target.value});
 
                         this.makeURL();
-                    }
-                }
-            });
+                    },
 
+                    doAction: function (e, message, type) {
+                        let element = e.currentTarget;
 
-            function doAction(e, message, type) {
-                var element = e.currentTarget;
-                if (message) {
-                    element = e.target.parentElement;
-                }
-
-                message = message || '{{__('ui::app.datagrid.massaction.delete') }}';
-
-                if (confirm(message)) {
-                    axios.post(element.getAttribute('data-action'), {
-                        _token: element.getAttribute('data-token'),
-                        _method: element.getAttribute('data-method')
-                    }).then(function (response) {
-                        this.result = response;
-
-                        if (response.data.redirect) {
-                            window.location.href = response.data.redirect;
-                        } else {
-                            location.reload();
+                        if (message) {
+                            element = e.target.parentElement;
                         }
-                    }).catch(function (error) {
-                        location.reload();
-                    });
 
-                    e.preventDefault();
-                } else {
-                    e.preventDefault();
-                }
-            }
+                        message = message || '{{__('ui::app.datagrid.massaction.delete') }}';
+
+                        if (confirm(message)) {
+                            axios.post(element.getAttribute('data-action'), {
+                                _token: element.getAttribute('data-token'),
+                                _method: element.getAttribute('data-method')
+                            }).then(function (response) {
+                                this.result = response;
+
+                                if (response.data.redirect) {
+                                    window.location.href = response.data.redirect;
+                                } else {
+                                    location.reload();
+                                }
+                            }).catch(function (error) {
+                                location.reload();
+                            });
+
+                            e.preventDefault();
+                        } else {
+                            e.preventDefault();
+                        }
+                    }
+                },
+            });
         </script>
     @endpush
 </div>