ATLAS-1902: updated search UI to allow user to select columns in search result

Signed-off-by: Madhan Neethiraj <madhan@apache.org>
diff --git a/dashboardv2/gruntfile.js b/dashboardv2/gruntfile.js
index c0e315f..1ca5069 100644
--- a/dashboardv2/gruntfile.js
+++ b/dashboardv2/gruntfile.js
@@ -119,6 +119,7 @@
                     'backgrid-orderable-columns/js': 'backgrid-orderable-columns/backgrid-orderable-columns.js',
                     'backgrid-paginator/js': 'backgrid-paginator/backgrid-paginator.min.js',
                     'backgrid-sizeable-columns/js': 'backgrid-sizeable-columns/backgrid-sizeable-columns.js',
+                    'backgrid-columnmanager/js': 'backgrid-columnmanager/src/Backgrid.ColumnManager.js',
                     'jquery-asBreadcrumbs/js': 'jquery-asBreadcrumbs/dist/jquery-asBreadcrumbs.min.js',
                     'd3': 'd3/d3.min.js',
                     'd3/': 'd3-tip/index.js',
@@ -144,6 +145,7 @@
                     'backgrid-orderable-columns/css': 'backgrid-orderable-columns/backgrid-orderable-columns.css',
                     'backgrid-paginator/css': 'backgrid-paginator/backgrid-paginator.css',
                     'backgrid-sizeable-columns/css': 'backgrid-sizeable-columns/backgrid-sizeable-columns.css',
+                    'backgrid-columnmanager/css': 'backgrid-columnmanager/lib/Backgrid.ColumnManager.css',
                     'jquery-asBreadcrumbs/css': 'jquery-asBreadcrumbs/dist/css/asBreadcrumbs.min.css',
                     'select2/css': 'select2/dist/css/select2.min.css',
                     'backgrid-select-all': 'backgrid-select-all/backgrid-select-all.min.css',
@@ -172,6 +174,7 @@
                     'backgrid-orderable-columns': 'backgrid-orderable-columns/LICENSE-MIT',
                     'backgrid-paginator': 'backgrid-paginator/LICENSE-MIT',
                     'backgrid-sizeable-columns': 'backgrid-sizeable-columns/LICENSE-MIT',
+                    'backgrid-columnmanager': 'backgrid-columnmanager/LICENSE',
                     'jquery-asBreadcrumbs': 'jquery-asBreadcrumbs/LICENSE',
                     'd3': 'd3/LICENSE',
                     'd3/': 'd3-tip/LICENSE',
diff --git a/dashboardv2/package.json b/dashboardv2/package.json
index 5be682e..bcf5fe7 100644
--- a/dashboardv2/package.json
+++ b/dashboardv2/package.json
@@ -21,6 +21,7 @@
     "backbone.paginator": "2.0.5",
     "backbone.wreqr": "1.4.0",
     "backgrid": "0.3.8",
+    "backgrid-columnmanager": "0.2.4",
     "backgrid-filter": "0.3.7",
     "backgrid-orderable-columns": "0.1.2",
     "backgrid-paginator": "0.3.9",
diff --git a/dashboardv2/public/css/scss/main.scss b/dashboardv2/public/css/scss/main.scss
index a608c95..83c2a5a 100644
--- a/dashboardv2/public/css/scss/main.scss
+++ b/dashboardv2/public/css/scss/main.scss
@@ -199,7 +199,7 @@
 }
 
 .termTableBreadcrumb {
-    min-width: 200px;
+    /* min-width: 200px; */
     /*   width: 200px; */
     /*  display: inline-block; */
     i {
diff --git a/dashboardv2/public/css/scss/override.scss b/dashboardv2/public/css/scss/override.scss
index 6821d77..d2a4bec 100644
--- a/dashboardv2/public/css/scss/override.scss
+++ b/dashboardv2/public/css/scss/override.scss
@@ -76,7 +76,7 @@
     border-color: $color_jungle_green_approx;
     border-bottom-style: solid;
     box-shadow: none;
-    padding: 20px 30px;
+    padding: 20px 15px;
     background-color: transparent;
     text-align: left;
     font-weight: 800;
@@ -89,7 +89,7 @@
     border-color: $color_gallery_approx;
     color: #333333;
     font-weight: 100;
-    padding: 15px 30px;
+    padding: 10px 15px;
 }
 
 .backgrid-paginator ul > li > a:hover,
@@ -286,3 +286,21 @@
 .query-builder .rule-value-container input {
     padding: 6px 12px !important;
 }
+
+div.columnmanager-visibilitycontrol {
+    width: auto;
+    margin-bottom: 5px;
+}
+
+.columnmanager-dropdown-container > li > span.column-label {
+    width: auto;
+}
+
+div.columnmanager-dropdown-container.open {
+    overflow: auto;
+}
+
+.columnmanager-visibilitycontrol.open .btn-atlasAction {
+    background-color: #37bb9b;
+    color: #fff;
+}
diff --git a/dashboardv2/public/index.html b/dashboardv2/public/index.html
index b460686..2b0b5d7 100644
--- a/dashboardv2/public/index.html
+++ b/dashboardv2/public/index.html
@@ -42,6 +42,7 @@
     <link rel="stylesheet" href="js/libs/backgrid-paginator/css/backgrid-paginator.css">
     <link rel="stylesheet" href="js/libs/backgrid-orderable-columns/css/backgrid-orderable-columns.css">
     <link rel="stylesheet" href="js/libs/backgrid-sizeable-columns/css/backgrid-sizeable-columns.css">
+    <link rel="stylesheet" href="js/libs/backgrid-columnmanager/css/Backgrid.ColumnManager.css">
     <link rel="stylesheet" href="js/libs/select2/css/select2.min.css">
     <link rel="stylesheet" href="js/libs/bootstrap/css/bootstrap.min.css">
     <link rel="stylesheet" href="js/libs/jquery-asBreadcrumbs/css/asBreadcrumbs.min.css">
diff --git a/dashboardv2/public/js/main.js b/dashboardv2/public/js/main.js
index 9235d28..b04141f 100644
--- a/dashboardv2/public/js/main.js
+++ b/dashboardv2/public/js/main.js
@@ -84,6 +84,9 @@
         'backgrid-select-all': {
             'deps': ['backbone', 'backgrid']
         },
+        'backgrid-columnmanager': {
+            'deps': ['backbone', 'backgrid'],
+        },
         'hbs': {
             'deps': ['underscore', 'handlebars']
         },
@@ -126,6 +129,7 @@
         'backgrid-orderable': 'libs/backgrid-orderable-columns/js/backgrid-orderable-columns',
         'backgrid-paginator': 'libs/backgrid-paginator/js/backgrid-paginator.min',
         'backgrid-sizeable': 'libs/backgrid-sizeable-columns/js/backgrid-sizeable-columns',
+        'backgrid-columnmanager': 'libs/backgrid-columnmanager/js/Backgrid.ColumnManager',
         'asBreadcrumbs': 'libs/jquery-asBreadcrumbs/js/jquery-asBreadcrumbs.min',
         'd3': 'libs/d3/d3.min',
         'd3-tip': 'libs/d3/index',
diff --git a/dashboardv2/public/js/utils/CommonViewFunction.js b/dashboardv2/public/js/utils/CommonViewFunction.js
index de46667..a04fb3f 100644
--- a/dashboardv2/public/js/utils/CommonViewFunction.js
+++ b/dashboardv2/public/js/utils/CommonViewFunction.js
@@ -92,7 +92,8 @@
         var scope = options.scope,
             valueObject = options.valueObject,
             extractJSON = options.extractJSON,
-            entityDef = options.entityDef;
+            isTable = _.isUndefined(options.isTable) ? true : options.isTable,
+            attributeDefs = options.attributeDefs;
 
         var table = "",
             fetchInputOutputValue = function(id) {
@@ -212,7 +213,7 @@
         _.sortBy(_.keys(valueObject)).map(function(key) {
             key = _.escape(key);
             var keyValue = valueObject[key];
-            var defEntity = _.find(entityDef, { name: key });
+            var defEntity = _.find(attributeDefs, { name: key });
             if (defEntity && defEntity.typeName) {
                 var defEntityType = defEntity.typeName.toLocaleLowerCase();
                 if (defEntityType === 'date' || defEntityType === 'time') {
@@ -225,7 +226,12 @@
                     keyValue = extractObject(keyValue)
                 }
             }
-            table += '<tr><td>' + _.escape(key) + '</td><td>' + (_.isObject(valueObject[key]) ? keyValue : _.escape(keyValue)) + '</td></tr>';
+            if (isTable) {
+                table += '<tr><td>' + _.escape(key) + '</td><td>' + (_.isObject(valueObject[key]) ? keyValue : _.escape(keyValue)) + '</td></tr>';
+            } else {
+                table += '<div>' + (_.isObject(valueObject[key]) ? keyValue : _.escape(keyValue)) + '</div>';
+            }
+
         });
         return table;
     }
diff --git a/dashboardv2/public/js/utils/TableLayout.js b/dashboardv2/public/js/utils/TableLayout.js
index f6183a9..db0a9da 100644
--- a/dashboardv2/public/js/utils/TableLayout.js
+++ b/dashboardv2/public/js/utils/TableLayout.js
@@ -26,7 +26,8 @@
     'backgrid-paginator',
     'backgrid-sizeable',
     'backgrid-orderable',
-    'backgrid-select-all'
+    'backgrid-select-all',
+    'backgrid-columnmanager'
 ], function(require, Backbone, FSTablelayoutTmpl) {
     'use strict';
 
@@ -103,10 +104,13 @@
                 }
             },
             columnOpts: {
-                initialColumnsVisible: 4,
-                // State settings
-                saveState: false,
-                loadStateOnInit: true
+                opts: {
+                    initialColumnsVisible: 4,
+                    // State settings
+                    saveState: false,
+                    loadStateOnInit: true
+                },
+                visibilityControlOpts: {}
             },
 
             includePagination: true,
@@ -301,14 +305,20 @@
              * ColumnManager for the table
              */
             renderColumnManager: function() {
-                var $el = this.$("[data-id='control']");
-                var colManager = new Backgrid.Extension.ColumnManager(this.columns, this.columnOpts);
-                // Add control
-                var colVisibilityControl = new Backgrid.Extension.ColumnManagerVisibilityControl({
-                    columnManager: colManager
-                });
-
+                var that = this,
+                    $el = this.$("[data-id='control']"),
+                    colManager = new Backgrid.Extension.ColumnManager(this.columns, this.columnOpts.opts),
+                    // Add control
+                    colVisibilityControl = new Backgrid.Extension.ColumnManagerVisibilityControl(_.extend({
+                        columnManager: colManager,
+                    }, this.columnOpts.visibilityControlOpts));
                 $el.append(colVisibilityControl.render().el);
+                colManager.on("state-changed", function(state) {
+                    that.collection.trigger("state-changed", state);
+                });
+                colManager.on("state-saved", function() {
+                    that.collection.trigger("state-changed");
+                });
             },
 
             renderSizeAbleColumns: function() {
@@ -323,7 +333,7 @@
                 // Add resize handlers
                 var sizeHandler = new Backgrid.Extension.SizeAbleColumnsHandlers({
                     sizeAbleColumns: sizeAbleCol,
-                    grid: this.getGridObj(),
+                    // grid: this.getGridObj(),
                     saveModelWidth: true
                 });
                 this.$('thead').before(sizeHandler.render().el);
@@ -341,6 +351,7 @@
                     grid: this.getGridObj(),
                     columns: this.columns
                 });
+                this.$('thead').before(sizeAbleCol.render().el);
                 var orderHandler = new Backgrid.Extension.OrderableColumns({
                     grid: this.getGridObj(),
                     sizeAbleColumns: sizeAbleCol
diff --git a/dashboardv2/public/js/views/audit/AuditTableLayoutView.js b/dashboardv2/public/js/views/audit/AuditTableLayoutView.js
index f650b1c..223e728 100644
--- a/dashboardv2/public/js/views/audit/AuditTableLayoutView.js
+++ b/dashboardv2/public/js/views/audit/AuditTableLayoutView.js
@@ -57,7 +57,7 @@
              * @constructs
              */
             initialize: function(options) {
-                _.extend(this, _.pick(options, 'guid', 'entity', 'entityName', 'entityDef'));
+                _.extend(this, _.pick(options, 'guid', 'entity', 'entityName', 'attributeDefs'));
                 this.entityCollection = new VEntityList();
                 this.limit = 26;
                 this.entityCollection.url = UrlLinks.entityCollectionaudit(this.guid);
@@ -239,7 +239,7 @@
                     that.action = $(e.target).data("action");
                     var eventModel = that.entityCollection.fullCollection.findWhere({ 'eventKey': $(e.currentTarget).data('modalid') }).toJSON(),
                         collectionModel = new that.entityCollection.model(eventModel),
-                        view = new CreateAuditTableLayoutView({ guid: that.guid, entityModel: collectionModel, action: that.action, entity: that.entity, entityName: that.entityName, entityDef: that.entityDef });
+                        view = new CreateAuditTableLayoutView({ guid: that.guid, entityModel: collectionModel, action: that.action, entity: that.entity, entityName: that.entityName, attributeDefs: that.attributeDefs });
                     var modal = new Modal({
                         title: that.action,
                         content: view,
diff --git a/dashboardv2/public/js/views/audit/CreateAuditTableLayoutView.js b/dashboardv2/public/js/views/audit/CreateAuditTableLayoutView.js
index 34c56cb..71332d7 100644
--- a/dashboardv2/public/js/views/audit/CreateAuditTableLayoutView.js
+++ b/dashboardv2/public/js/views/audit/CreateAuditTableLayoutView.js
@@ -55,7 +55,7 @@
              * @constructs
              */
             initialize: function(options) {
-                _.extend(this, _.pick(options, 'guid', 'entityModel', 'action', 'entity', 'entityName', 'entityDef'));
+                _.extend(this, _.pick(options, 'guid', 'entityModel', 'action', 'entity', 'entityName', 'attributeDefs'));
             },
             bindEvents: function() {},
             onRender: function() {
@@ -84,7 +84,7 @@
                         var tagHeader = ((name ? name : this.entityName));
                         this.ui.tagHeader.append(tagHeader);
                         this.ui.auditHeaderValue.html('<th>Key</th><th>New Value</th>');
-                        table = CommonViewFunction.propertyTable({ scope: this, valueObject: values, entityDef: this.entityDef, extractJSON: { extractKey: 'value' } });
+                        table = CommonViewFunction.propertyTable({ scope: this, valueObject: values, attributeDefs: this.attributeDefs, extractJSON: { extractKey: 'value' } });
                         if (table.length) {
                             this.ui.noData.hide();
                             this.ui.tableAudit.show();
diff --git a/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js b/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
index d44962f..c45755f 100644
--- a/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
+++ b/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
@@ -242,12 +242,12 @@
             },
             getEntityDef: function(obj) {
                 var data = this.entityDefCollection.fullCollection.findWhere({ name: obj.entity.typeName }).toJSON();
-                var entityDef = Utils.getNestedSuperTypeObj({
+                var attributeDefs = Utils.getNestedSuperTypeObj({
                     data: data,
                     attrMerge: true,
                     collection: this.entityDefCollection
                 });
-                obj['entityDef'] = entityDef;
+                obj['attributeDefs'] = attributeDefs;
                 this.renderEntityDetailTableLayoutView(obj);
                 this.renderAuditTableLayoutView(obj);
             },
diff --git a/dashboardv2/public/js/views/entity/EntityDetailTableLayoutView.js b/dashboardv2/public/js/views/entity/EntityDetailTableLayoutView.js
index 79f7807..87c5dcd 100644
--- a/dashboardv2/public/js/views/entity/EntityDetailTableLayoutView.js
+++ b/dashboardv2/public/js/views/entity/EntityDetailTableLayoutView.js
@@ -48,7 +48,7 @@
              * @constructs
              */
             initialize: function(options) {
-                _.extend(this, _.pick(options, 'entity', 'referredEntities', 'typeHeaders', 'entityDef'));
+                _.extend(this, _.pick(options, 'entity', 'referredEntities', 'typeHeaders', 'attributeDefs'));
                 this.entityModel = new VEntity({});
             },
             bindEvents: function() {},
@@ -65,7 +65,7 @@
                     });
                     attributeObject.columns = valueSorted;
                 }
-                var table = CommonViewFunction.propertyTable({ scope: this, valueObject: attributeObject, entityDef: this.entityDef });
+                var table = CommonViewFunction.propertyTable({ scope: this, valueObject: attributeObject, attributeDefs: this.attributeDefs });
                 that.ui.detailValue.append(table);
             }
         });
diff --git a/dashboardv2/public/js/views/search/SearchLayoutView.js b/dashboardv2/public/js/views/search/SearchLayoutView.js
index c77d8a7..cb8844d 100644
--- a/dashboardv2/public/js/views/search/SearchLayoutView.js
+++ b/dashboardv2/public/js/views/search/SearchLayoutView.js
@@ -403,16 +403,28 @@
             },
             triggerSearch: function(value) {
                 this.query[this.type].query = value || null;
+                var params = {
+                    searchType: this.type,
+                    dslChecked: this.ui.searchType.is(':checked')
+                }
                 this.query[this.type].type = this.ui.typeLov.select2('val') || null;
                 if (!this.dsl) {
                     this.query[this.type].tag = this.ui.tagLov.select2('val') || null;
                 }
+                if (this.dsl) {
+                    params['attributes'] = null;
+                } else {
+                    var columnList = JSON.parse(Utils.localStorage.getValue('columnList'));
+                    if (columnList) {
+                        params['attributes'] = columnList[this.query[this.type].type];
+                    } else {
+                        params['attributes'] = null;
+                    }
+                }
+
                 Utils.setUrl({
                     url: '#!/search/searchResult',
-                    urlParams: _.extend(this.query[this.type], {
-                        searchType: this.type,
-                        dslChecked: this.ui.searchType.is(':checked')
-                    }),
+                    urlParams: _.extend(this.query[this.type], params),
                     updateTabState: function() {
                         return { searchUrl: this.url, stateChanged: true };
                     },
diff --git a/dashboardv2/public/js/views/search/SearchResultLayoutView.js b/dashboardv2/public/js/views/search/SearchResultLayoutView.js
index 5236751..dba27fa 100644
--- a/dashboardv2/public/js/views/search/SearchResultLayoutView.js
+++ b/dashboardv2/public/js/views/search/SearchResultLayoutView.js
@@ -136,13 +136,22 @@
                 this.limit = 25;
                 this.asyncFetchCounter = 0;
                 this.offset = 0;
+                this.columnToShow = this.value && this.value.attributes ? this.value.attributes.split(',') : [];
                 this.commonTableOptions = {
                     collection: this.searchCollection,
-                    includeFilter: false,
                     includePagination: false,
-                    includePageSize: false,
                     includeFooterRecords: false,
-                    includeSizeAbleColumns: false,
+                    includeColumnManager: (this.value && this.value.searchType === "basic" ? true : false),
+                    includeOrderAbleColumns: false,
+                    columnOpts: {
+                        opts: {
+                            initialColumnsVisible: null,
+                            saveState: false
+                        },
+                        visibilityControlOpts: {
+                            buttonTemplate: _.template("<button class='btn btn-atlasAction btn-atlas'>Columns&nbsp<i class='fa fa-caret-down'></i></button>")
+                        }
+                    },
                     gridOpts: {
                         emptyText: 'No Record found!',
                         className: 'table table-hover backgrid table-quickMenu'
@@ -206,6 +215,25 @@
                         }
                     }
                 }, this);
+                this.listenTo(this.searchCollection, "state-changed", function(state) {
+                    if (Utils.getUrlState.isSearchTab()) {
+                        this.updateColumnList(state);
+                        var columnList = JSON.parse(Utils.localStorage.getValue('columnList'));
+                        if (!columnList && this.value.type) {
+                            columnList = {};
+                            columnList[this.value.type] = this.value.attributes;
+                        } else {
+                            columnList[this.value.type] = this.value.attributes;
+                        }
+                        Utils.localStorage.setValue('columnList', JSON.stringify(columnList));
+                        Utils.setUrl({
+                            url: '#!/search/searchResult',
+                            urlParams: this.value,
+                            mergeBrowserUrl: false,
+                            trigger: true
+                        });
+                    }
+                }, this);
                 this.listenTo(this.searchVent, "search:refresh", function(model, response) {
                     this.fetchCollection();
                 }, this);
@@ -225,6 +253,7 @@
                             'searchType': 'basic'
                         };
                     }
+                    this.updateColumnList();
                     this.fetchCollection(value);
                     $('body').click(function(e) {
                         var iconEvnt = e.target.nodeName;
@@ -242,6 +271,22 @@
                 }
                 this.showHideFilter();
             },
+            updateColumnList: function(updatedList) {
+                if (updatedList) {
+                    var listOfColumns = []
+                    _.map(updatedList, function(obj) {
+                        var key = obj.name;
+                        if (key == "selected" || key == "displayText" || key == "description" || key == "typeName" || key == "owner" || key == "tag" || key == "terms") {
+                            return;
+                        }
+                        if (obj.renderable) {
+                            listOfColumns.push(obj.name);
+                        }
+                    });
+                    this.value.attributes = listOfColumns.length ? listOfColumns.join(",") : null;
+                }
+                this.columnToShow = this.value && this.value.attributes ? this.value.attributes.split(',') : [];
+            },
             generateQueryOfFilter: function() {
                 var value = this.value,
                     entityFilters = this.filterObj && this.filterObj.entityFilters ? this.filterObj.entityFilters[value.type] : null,
@@ -292,7 +337,8 @@
                     entityFilters = this.filterObj && this.filterObj.entityFilters ? this.filterObj.entityFilters[this.value.type] : null,
                     filterObj = {
                         'entityFilters': entityFilters ? entityFilters.result : null,
-                        'tagFilters': tagFilters ? tagFilters.result : null
+                        'tagFilters': tagFilters ? tagFilters.result : null,
+                        'attributes': this.columnToShow.length ? this.columnToShow : null
                     }
                 this.showLoader();
                 if (Globals.searchApiCallRef && Globals.searchApiCallRef.readyState === 1) {
@@ -393,7 +439,21 @@
                 var that = this,
                     count = 5;
                 require(['utils/TableLayout'], function(TableLayout) {
-                    var columns = new Backgrid.Columns(that.getFixedDslColumn());
+                    var columnCollection = Backgrid.Columns.extend({
+                        sortKey: "position",
+                        comparator: function(item) {
+                            return item.get(this.sortKey) || 999;
+                        },
+                        setPositions: function() {
+                            _.each(this.models, function(model, index) {
+                                model.set("position", index + 1, { silent: true });
+                            });
+                            return this;
+                        }
+                    });
+                    var columns = new columnCollection(that.getFixedDslColumn());
+                    columns.setPositions().sort();
+                    //var columns = new Backgrid.Columns(that.getFixedDslColumn());
                     that.REntityTableLayoutView.show(new TableLayout(_.extend({}, that.commonTableOptions, {
                         columns: columns
                     })));
@@ -438,6 +498,9 @@
                     cell: "html",
                     editable: false,
                     sortable: false,
+                    resizeable: true,
+                    orderable: true,
+                    renderable: true,
                     className: "searchTableName",
                     formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
                         fromRaw: function(rawValue, model) {
@@ -473,6 +536,9 @@
                     cell: "String",
                     editable: false,
                     sortable: false,
+                    resizeable: true,
+                    orderable: true,
+                    renderable: true,
                     formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
                         fromRaw: function(rawValue, model) {
                             var obj = model.toJSON();
@@ -487,6 +553,9 @@
                     cell: "Html",
                     editable: false,
                     sortable: false,
+                    resizeable: true,
+                    orderable: true,
+                    renderable: true,
                     formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
                         fromRaw: function(rawValue, model) {
                             var obj = model.toJSON();
@@ -501,6 +570,9 @@
                     cell: "String",
                     editable: false,
                     sortable: false,
+                    resizeable: true,
+                    orderable: true,
+                    renderable: true,
                     formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
                         fromRaw: function(rawValue, model) {
                             var obj = model.toJSON();
@@ -515,7 +587,9 @@
                     cell: "Html",
                     editable: false,
                     sortable: false,
+                    resizeable: true,
                     orderable: true,
+                    renderable: true,
                     className: 'searchTag',
                     formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
                         fromRaw: function(rawValue, model) {
@@ -535,7 +609,9 @@
                         cell: "Html",
                         editable: false,
                         sortable: false,
+                        resizeable: true,
                         orderable: true,
+                        renderable: true,
                         className: 'searchTerm',
                         formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
                             fromRaw: function(rawValue, model) {
@@ -553,6 +629,44 @@
                         })
                     };
                 }
+                if (this.value && this.value.searchType === "basic") {
+                    var def = this.entityDefCollection.fullCollection.find({ name: this.value.type });
+                    if (def) {
+                        var attrObj = Utils.getNestedSuperTypeObj({ data: def.toJSON(), collection: this.entityDefCollection, attrMerge: true });
+                        _.each(attrObj, function(obj, key) {
+                            var key = obj.name,
+                                isEenderable = that.columnToShow.length ? _.contains(that.columnToShow, key) : false;
+                            if (key == "name" || key == "description" || key == "owner") {
+                                return;
+                            }
+                            col[obj.name] = {
+                                label: obj.name.capitalize(),
+                                cell: "Html",
+                                editable: false,
+                                sortable: false,
+                                resizeable: true,
+                                orderable: true,
+                                renderable: isEenderable,
+                                formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
+                                    fromRaw: function(rawValue, model) {
+                                        var modelObj = model.toJSON();
+
+                                        if (modelObj && modelObj.attributes && !_.isUndefined(modelObj.attributes[key])) {
+                                            var tempObj = {
+                                                'scope': that,
+                                                'attributeDefs': [obj],
+                                                'valueObject': {},
+                                                'isTable': false
+                                            }
+                                            tempObj.valueObject[key] = modelObj.attributes[key]
+                                            return CommonViewFunction.propertyTable(tempObj);
+                                        }
+                                    }
+                                })
+                            };
+                        });
+                    }
+                }
                 return this.searchCollection.constructor.getTableCols(col, this.searchCollection);
             },
             addTagModalView: function(guid, multiple) {