Menu
Here I created sample for autocomplete, which is working fine and I need to do some modification on this.currently it works like this
but what I exactly need is I need to show the dropdown as grid view. some like this
can any one help on this?.. thanks
var app = angular.module('app', ['ui.bootstrap']);
app.controller('TypeaheadCtrl', function ($scope, $http, limitToFilter, filterFilter) {
$scope.sample_data = [{
"name": "Nelson",
"designation":"Senior Developer",
"company": "acme",
"companydisplay": "abc"
},
{
"name": "suresh",
"designation":"Developer",
"company": "acme",
"companydisplay": "def"
},
{
"name": "Naresh",
"designation":"Developer",
"company": "acme",
"companydisplay": "xyz"
}];
$scope.filtered_sample_data = function (search) {
var filtered = filterFilter($scope.sample_data, search);
var results = _(filtered)
.groupBy('company')
.map(function (g) {
g[0].initial = true; // the first item in each group
return g;
})
.flatten()
.value();
return results;
};
}); body {
font-family:'Trebuchet MS', Verdana, sans-serif;
margin:20px 0px;
padding:0px;
text-align:center;
}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
cursor:pointer;
}
label {
cursor:default;
margin:0;
}
.form {
width:400px;
margin:0px auto;
text-align:left;
background:#F2F1F0;
border-top-left-radius: 10px 5px;
border-top-right-radius: 10px 5px;
border:1px solid #474641;
}
.formHeader {
background:#474641;
color:#ddd;
padding:4px;
font-weight:600;
border-top-left-radius: 10px 5px;
border-top-right-radius: 10px 5px;
}
.formBody {
padding:10px;
}
.data {
margin:0px auto;
text-align:left;
}
.dropdown-menu {
text-align:left;
}
table {
border-collapse: collapse;
width: 100%;
}
th{
background-color: #29ABE2;
color: white;
}
tr> td {
text-align: left;
}
th, td {
padding: 15px;
}
tbody>tr:hover {
background-color: #0088cc;
color: white;
}
.headerSortUp {
background: url(http://tablesorter.com/themes/blue/bg.gif) no-repeat 99%;
}
.headerSortDown {
background: url(data:image/gif;
base64, R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7) no-repeat 99%;
}
.suggestion-name { min-width: 100px; }
.suggestion-designation { min-width: 100px; }
.suggestion-company { min-width: 100px; } <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet"/>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-dropdown.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<div ng-app="app">
<div class='container-fluid' ng-controller="TypeaheadCtrl">
<!-- <pre>Model: {{result | json}}</pre>
<input type="text" ng-model="result" typeahead="suggestion for suggestion in cities($viewValue)">
--> <pre>Model: {{monkey | json}}</pre>
<input type="text" ng-model="monkey" typeahead-template-url="columnTwo.html" typeahead="suggestion.name for suggestion in filtered_sample_data($viewValue) | filter: $viewValue">
</div>
<!-- CACHE FILE: columnTwo.html -->
<script type="text/ng-template" id="columnTwo.html">
<table class="">
<thead ng-if="match.model.initial">
<tr>
<th>Name</th>
<th>Designation</th>
<th>Company</th>
</tr>
</thead>
<tr>
<td class="suggestion-name">
<div ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)">
<a>{{ match.model.name }} </a>
</div>
</td>
<td class="suggestion-designation"> {{ match.model.designation }} </td>
<td class="suggestion-company"> {{ match.model.companydisplay }} </td>
</tr>
</table>
</script>
614
As I commented, since the template is repeated for every suggestion.name in your sample data set, it's going to include column headers above each of the listed names.
UPDATE: A jury-rigged solution, as found in this previous SO answer, is to inject angular's filterFilter and, rather than using $scope.sample_data as your collection to repeat through, instead create a pre-filtered group based on the $viewValue. In order to group all the persons in your data set together, I added a company property to each (making an assumption here). You can then set an indicator property (in this case initial = true) on the first element in the filtered data set.
And finally, in your template, in addition to changing your typeahead attribute value to suggestion.name for suggestion in filtered_sample_data($viewValue) | filter: $viewValue">, you'll set an ng-if on the table head to show only if `match.model.initial' is true.
This will work as long as every person in the data set has some generic property with the same value as all other persons in the set, and you group by that property.
[Note that the filter uses lodash's implicit chaining, so I added a script tag for lodash.js as well.]
Credit @runTarm for the workaround.
var app = angular.module('app', ['ui.bootstrap']);
app.controller('TypeaheadCtrl', function ($scope, $http, limitToFilter, filterFilter) {
$scope.sample_data = [{
"name": "Nelson",
"designation":"GM",
"company": "acme"
},
{
"name": "suresh",
"designation":"Developer",
"company": "acme"
},
{
"name": "Naresh",
"designation":"Developer",
"company": "acme"
}];
$scope.filtered_sample_data = function (search) {
var filtered = filterFilter($scope.sample_data, search);
var results = _(filtered)
.groupBy('company')
.map(function (g) {
g[0].initial = true; // the first item in each group
return g;
})
.flatten()
.value();
return results;
};
});body {
font-family:'Trebuchet MS', Verdana, sans-serif;
margin:20px 0px;
padding:0px;
text-align:center;
}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
cursor:pointer;
}
label {
cursor:default;
margin:0;
}
.form {
width:400px;
margin:0px auto;
text-align:left;
background:#F2F1F0;
border-top-left-radius: 10px 5px;
border-top-right-radius: 10px 5px;
border:1px solid #474641;
}
.formHeader {
background:#474641;
color:#ddd;
padding:4px;
font-weight:600;
border-top-left-radius: 10px 5px;
border-top-right-radius: 10px 5px;
}
.formBody {
padding:10px;
}
.data {
margin:0px auto;
text-align:left;
}
.dropdown-menu {
text-align:left;
}
table, td, th {
border: 1px solid #ddd;
text-align: left;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 15px;
}
.suggestion-name { min-width: 100px; }
.suggestion-designation { min-width: 100px; } <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet"/>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-dropdown.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<div ng-app="app">
<div class='container-fluid' ng-controller="TypeaheadCtrl">
<!-- <pre>Model: {{result | json}}</pre>
<input type="text" ng-model="result" typeahead="suggestion for suggestion in cities($viewValue)">
--> <pre>Model: {{monkey | json}}</pre>
<input type="text" ng-model="monkey" typeahead-template-url="columnTwo.html" typeahead="suggestion.name for suggestion in filtered_sample_data($viewValue) | filter: $viewValue">
</div>
<!-- CACHE FILE: columnTwo.html -->
<script type="text/ng-template" id="columnTwo.html">
<table class="">
<thead ng-if="match.model.initial">
<tr>
<th>Name</th>
<th>Designation</th>
</tr>
</thead>
<tr>
<td class="suggestion-name">
<div ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)">
<a>{{ match.model.name }} </a>
</div>
</td>
<td class="suggestion-designation"> {{ match.model.designation }} </td>
</tr>
</table>
</script>
agGrid.initialiseAgGridWithAngular1(angular);
function showGrid(val)
{
console.log(val.length)
if(val.length <3){
document.getElementById('myGrid').style.display='none'
}
else
{
console.log("hide count")
document.getElementById('myGrid').style.display='block'
}
}
var fileBrowserModule = angular.module('basic', ['agGrid']);
fileBrowserModule.controller('basicController', function($scope) {
$scope.gridheader = [
{headerName: "Make", field: "make"},
{headerName: "Model", field: "model"},
{headerName: "XModel", field: "model"},
{headerName: "Rate", field: "price"},
{headerName: "Price", field: "price"}
];
$scope.rowData = [
{make: "Toyota", model: "Celica", price: 35000},
{make: "Ford", model: "Mondeo", price: 32000},
{make: "Porsche", model: "Boxter", price: 72000},
{make: "Audi", model: "Boxter", price: 92000},
{make: "Toyota", model: "Celica", price: 35000},
{make: "Ford", model: "Mondeo", price: 32000},
{make: "Porsche", model: "Boxter", price: 72000},
{make: "Audi", model: "Boxter", price: 92000}
];
$scope.gridOptions = {
columnDefs: $scope.gridheader,
rowData: $scope.rowData,
onSelectionChanged: onSelectionChanged,
rowSelection: 'single',
enableColResize: true,
enableSorting: true,
enableFilter: true,
groupHeaders: true,
rowHeight: 22,
onModelUpdated: onModelUpdated,
suppressRowClickSelection: false
};
function onModelUpdated() {
var model = $scope.gridOptions.api.getModel();
var totalRows = $scope.gridOptions.rowData.length;
var processedRows = model.getVirtualRowCount();
$scope.rowCount = processedRows.toLocaleString() + ' / ' + totalRows.toLocaleString();
}
function onSelectionChanged() {
var selectedRows = $scope.gridOptions.api.getSelectedRows();
var selectedRowsString = '';
selectedRows.forEach( function(selectedRow, index) {
if (index!=0) {
selectedRowsString += ', ';
}
selectedRowsString += selectedRow.make;
});
$scope.gridOptions.quickFilterText = selectedRowsString;
document.querySelector('#selectedRows').innerHTML = selectedRowsString;
document.getElementById('myGrid').style.display='none'
}
document.addEventListener('DOMContentLoaded', function() {
var gridDiv = document.querySelector('#myGrid');
});
});<script src="https://www.ag-grid.com/dist/ag-grid.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
</head>
<body ng-app="basic">
<div ng-controller="basicController" style="width: 800px;">
<div style="padding: 4px">
<div style="float: left;">
<p>type audi or toyota</p><input type="text" ng-model="gridOptions.quickFilterText" onKeyPress="return showGrid(this.value)" placeholder="Type text to filter..."/>
</div>
<div style="padding: 4px;">
<span id="selectedRows">
</span>
({{rowCount}})
</div>
<div style="clear: both;"/>
</div>
<!--<grid-Wrapper get-header="gridheader" get-data="rowData" enable-Filter="{{true}}" enable-Sorting="{{true}}" enable-Col-Resize="{{true}}"></grid-Wrapper>-->
<div id="myGrid" style="width: 100%; height: 400px; display:none"
ag-grid="gridOptions"
class="ag-fresh ag-basic" >
</div>
</div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
