Two way data binding with ng-grid - angularjs

I want to bind my ng-grid celltemplate to html textbox ( I am having ng-grid , which displays the data,below that I want to add a textbox, so that as I type something in textbox, the values should get update in cell Template of ng-grid).
Here is my html page:
<div ng-controller="bulkAssign" >
<form name="signup_form" method="POST">
<div style=" border: 1px solid rgb(212,212,212);
width: 1000px;
height: 200px;" ng-grid="gridUser">
</div>
<p><b>Editing grid</b></p>
<div class="gridStyle" ng-grid="gridOptions" data-ng-click="testSeletion()"></div>
<label>Edit grid from textbox</label>
<input type="number" name="assignTo" ng-model="assignTo" placeholder="Assign order to" class="form-control" >
</form>
</div>
Here is my controller:
$scope.gridOptions = {
data: 'names',
enableCellSelection: false,
enableRowSelection: true,
showSelectionCheckbox: true,
multiSelect: true ,
columnDefs: [
{
field: 'orderId',
displayName: 'OrderId',
enableCellEdit: false,
cellTemplate:'<div class="ngCellText" ng-class="col.colIndex()"><a ng-click="loadById(row)">{{row.getProperty(col.field)}}</a></div>'
},
{field: 'trackingId', displayName: 'trackingId', enableCellEdit: false, cellTemplate:'<div class="ngCellText" ng-class="col.colIndex()"><a ng-click="loadById(row)">{{row.getProperty(col.field)}}</a></div>' },
{field: 'orderTitle', displayName: 'OrderTitle', enableCellEdit: false},
{field:'customerName', displayName:'CustomerName', enableCellEdit: false},
{field:'customerContactno', displayName:'ContactNo', enableCellEdit: false},
{field:'assignTo', displayName:'assignTo', enableCellEdit:true,cellTemplate:'<input type="number">'}
],
selectedItems: $scope.mySelections,
filterOptions: $scope.filterOptions
};
My question is after entering value in textbox, when i click button, is it possible to update values in ng-grid celltemplate?

Related

How can I open a map popover inside ui grid?

I'm having trouble getting an iframe inside a popover to render to show a map per row for each address in that row.
My grid:
<div class="form-group col-xs-12">
<div ui-grid="gridOptions" class="grid" ui-grid-cellNav ui-grid-selection ui-grid-auto-resize></div>
</div>
Grid config:
$scope.gridOptions = {
enableSorting: true,
enableHorizontalScrollbar: uiGridConstants.scrollbars.NEVER,
enableVerticalScrollbar: uiGridConstants.scrollbars.NEVER,
enableColumnResizing: true,
columnDefs: $scope.columns,
enableRowHeaderSelection: false,
multiSelect: false,
rowHeight: 40,
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
}
};
The none working column:
{
name: 'Map',
width: 55,
cellClass: 'grid-align-center',
headerCellClass: 'grid-align-center grid-header-text',
cellTemplate: '<a style="margin-right: 3px; color: #006699; cursor: pointer;" class="material-icons place" ' +
'popover-trigger="'outsideClick'" popover-placement="bottom" popover-append-to-body="true"' +
'uib-popover-html="'<div style="height: 300px; width: 300px; position: relative;">' +
'<iframe height="100%" width="100%" frameborder="0" ng-src="{{ sce.trustAsResourceUrl(row.entity.mapUrl) }}" ' +
'scrolling="no"></iframe></div>'"' +
'</a>'
},
A screenshot of the behaviour:
I've also tried
$scope.gridOptions.data.mapUrl = $sce.trustAsResourceUrl($scope.gridOptions.data.mapUrl);
Any help getting this to work would be greatly appreciated!
I simplified your example and created something similar:
// dummy URL for iframe
$scope.cvUrl =
'http://docs.google.com/gview?url=https://d9db56472fd41226d193-1e5e0d4b7948acaf6080b0dce0b35ed5.ssl.cf1.rackcdn.com/spectools/docs/wd-spectools-word-sample-04.doc&embedded=true';
var trusted = {};
$scope.getPopoverContent = function(url) {
var content = '<iframe src="' + url + '"></iframe>';
return trusted[ content] || (trusted[content] = $sce.trustAsHtml(content));
}
Where ui-grid template will look like:
<div class="ui-grid-cell-contents">
<a popover-placement="right"
uib-popover-html="grid.appScope.getPopoverContent(grid.appScope.cvUrl)"
href="" >Popover</a>
</div>
Here is working Plunker Demo
Hope it will give you right direction

typeerror cannot read property 'data' of undefined

This is my JS class. M getting this error and not getting grid values in my UI.
define([
'angular',
'./module'
], function(angular, module){
'use strict',
module.controller('userSelectController',[
'$scope',
'$filter',
'$http',
'filterStateService',
'messageBus',
'userDetails',
'toasty',
function($scope,$filter,$http,filterStateService,messageBus, userDetails, toasty){
$scope.onAddUser = function(){
messageBus.send(Message.AddUser);
};
$scope.gridOptions = {
rowHeight:60,
multiSelect: false,
enableColumnMenus:false,
enableEdit: false,
enableSorting: false,
enableFiltering: false,
columnDefs: [
{
field: 'select',
maxWidth: 30,
headerCellTemplate:'<div> <div>',
headerCellClass: 'grid-header-center',
cellClass: 'grid-data-cell',
cellTemplate: '<div class="inner-data-cell"><input type="checkbox"></div>'
},
{
field: 'status',
minWidth: 75,
maxWidth: 150,
displayName: 'Status',
headerCellClass: 'grid-header-center',
cellClass: 'grid-data-cell',
'cellTemplate': '<div class="inner-data-cell">{{row.entity.registrationStatus}}</div>'
},
{
field: 'name',
minWidth: 75,
maxWidth: 150,
displayName: 'Name',
headerCellClass: 'grid-header-center',
cellClass: 'grid-data-cell',
cellTemplate: '<div class="inner-data-cell">{{row.entity.lastName}},{{row.entity.firstName}}</div>'
},
{
field: 'organization',
minWidth: 150,
displayName: 'Org',
headerCellClass: 'grid-header-center',
cellClass: 'grid-data-cell',
cellTemplate: '<div class="inner-data-cell">{{row.entity.organization}}</div>'
},
{
field: 'registratioDate',
minWidth: 150,
displayName: 'Registration Date',
headerCellClass: 'grid-header-center',
cellClass: 'grid-data-cell',
cellTemplate: '<div class="inner-data-cell">{{row.entity.registeredOn}}</div>'
},
{
field: 'lastActive',
minWidth: 220,
displayName: 'Last Active',
headerCellClass: 'grid-header-center',
cellClass: 'grid-data-cell',
cellTemplate: '<div class="inner-data-cell">{{row.entity.lastActive}}</div>'
},
{
field: 'uplaodId',
minWidth: 200,
displayName: 'Upload Id',
headerCellClass: 'grid-header-center',
cellClass: 'grid-data-cell',
cellTemplate: '<div class="inner-data-cell">NA</div>'
}
],
filterOptions: $scope.filterOptions
};
$scope.filterName = function() {
var filterText = $scope.nameFilter;
if (filterText != null ) {
alert("M not null");
$scope.filterOptions.filterText = filterText;
} else {
$scope.filterOptions.filterText = '';
}
};
$scope.resetSearchQuery = function() {
$scope.query = '';
filterStateService.updateSearchQuery($scope.query);
};
$scope.numberRecordsFound = 0;
$scope.$onMessage(Message.NumberOfSearchRecordsChanged, function (event, numberRecordsFound) {
$scope.numberRecordsFound = numberRecordsFound;
});
/* $scope.filterOnLocation = function(gridOptions) {
return (gridOptions.firstName + gridOptions.lastName).indexOf($scope.search) >= 0;
};*/
var userList = [
{
registrationStatus:'Added',
firstName:'first1',
lastName:'last1',
organization:'org1',
registeredOn:'date1',
lastActive:'date1'
},
{
registrationStatus:'Added',
firstName:'first2',
lastName:'last2',
organization:'org2',
registeredOn:'date2',
lastActive:'date2'
},
{
registrationStatus:'Added',
firstName:'first3',
lastName:'last3',
organization:'org3',
registeredOn:'date3',
lastActive:'date3'
},
{
registrationStatus:'Added',
firstName:'first4',
lastName:'last4',
organization:'org4',
registeredOn:'date4',
lastActive:'date4'
},
{
registrationStatus:'Added',
firstName:'first5',
lastName:'last5',
organization:'org5',
registeredOn:'date5',
lastActive:'date5'
},
{
registrationStatus:'Added',
firstName:'Priyanka',
lastName:'Taneja',
organization:'GE',
registeredOn:'25-JAN-2016 : 12:34 pm',
lastActive:'date5'
}
];
$scope.gridOptions.data = userList;
$scope.filterData = function (){
$scope.gridOptions.data = $filter('filter')(userList,$scope.searchText, undefined);
}
}])
})
This is my HTML class
<div ng-controller="userSelectController" class="full-panel-container">
<div class="row title-bar">
<!-- Add User -->
<div class="div-actions col-sm-4 col-md-3 group1">
<span class="title-text">Users &nbsp</span>
<button class="btn btn-large btn-icon" title="{{getAddTitle()}}" id="add-user-btn" ng-click="onAddUser()">
<i class="fa fa-plus"></i>
</button>
<button class="btn btn-large btn-icon" title="{{getAddTitle()}}" id="add-user-btn" ng-click="onAddUser()">
<i class="fa fa-cloud-upload fa-lg title-action"> &nbsp</i>
</button>
</div>
<!-- search -->
<div class="col-sm-8 col-md-9 group2 pull-left">
<input title="" type="text" size="50" class="title-search ng-pristine ng-valid" placeholder="Enter search text" ng-change="filterData()" ng-model="searchText">
<i class="fa fa-search fa-lg" style="margin-left: -25px;" title="{{getSearchTitle()}}" ng-if="!query.length"></i>
<i class="fa fa-times" style="margin-left: -25px;" title="{{::'title.search.clear' | translate}}" ng-if="query.length" ng-click="resetSearchQuery();"></i>
</div>
<!-- <div class="hidden">{{filteredLength = gridData.data.length}}</div>
<div class="no-records" ng-show="!organizationDetailsFilteredList.length">
{{:: 'text.search.no.records' | translate }}
</div> -->
</div>
</div>
<div class="full-panle-body">
<div class="row job-summary-grid" ng-show="!loadingLog">
<div ui-grid="gridOptions" ui-if="gridData.data.length>0" ui-grid-auto-resize ui-grid-cellNav ui-grid-edit ui-grid-resize-columns ui-grid-pinning></div>
</div>
</div>
M getting this error and not getting grid values in my UI
You're calling gridData.data.length, but I don't see a gridData object defined in your controller. Shouldn't that be gridOptions.data.length?
This error comes because there is no property of name data in your class
$scope.gridOptions
this class must containt data property
$scope.gridOptions = {
rowHeight:60,
multiSelect: false,
enableColumnMenus:false,
enableEdit: false,
enableSorting: false,
enableFiltering: false,
columnDefs: [
{
field: 'select',
maxWidth: 30,
headerCellTemplate:'<div> <div>',
headerCellClass: 'grid-header-center',
cellClass: 'grid-data-cell',
cellTemplate: '<div class="inner-data-cell"><input type="checkbox"></div>'
},
{
field: 'status',
minWidth: 75,
maxWidth: 150,
displayName: 'Status',
headerCellClass: 'grid-header-center',
cellClass: 'grid-data-cell',
'cellTemplate': '<div class="inner-data-cell">{{row.entity.registrationStatus}}</div>'
},
{
field: 'name',
minWidth: 75,
maxWidth: 150,
displayName: 'Name',
headerCellClass: 'grid-header-center',
cellClass: 'grid-data-cell',
cellTemplate: '<div class="inner-data-cell">{{row.entity.lastName}},{{row.entity.firstName}}</div>'
},
{
field: 'organization',
minWidth: 150,
displayName: 'Org',
headerCellClass: 'grid-header-center',
cellClass: 'grid-data-cell',
cellTemplate: '<div class="inner-data-cell">{{row.entity.organization}}</div>'
},
{
field: 'registratioDate',
minWidth: 150,
displayName: 'Registration Date',
headerCellClass: 'grid-header-center',
cellClass: 'grid-data-cell',
cellTemplate: '<div class="inner-data-cell">{{row.entity.registeredOn}}</div>'
},
{
field: 'lastActive',
minWidth: 220,
displayName: 'Last Active',
headerCellClass: 'grid-header-center',
cellClass: 'grid-data-cell',
cellTemplate: '<div class="inner-data-cell">{{row.entity.lastActive}}</div>'
},
{
field: 'uplaodId',
minWidth: 200,
displayName: 'Upload Id',
headerCellClass: 'grid-header-center',
cellClass: 'grid-data-cell',
cellTemplate: '<div class="inner-data-cell">NA</div>'
}
],
filterOptions: $scope.filterOptions
};

(Kendo UI, Angular) Pie Chart will not center

My markup is as follows:
<div id="severity-piechart">
<div ng-controller="SingleDetailsPieCtrl">
<div kendo-chart k-theme="'metro'" k-title="{ text: 'All Issues', positon: 'top' }"
k-series-defaults="{ type: 'pie',
labels: {
visible: true,
background: 'transparent',
template: '#= category #: \n #= value#'
} }"
k-series=" [{ data: [{category: 'Issues', value: 14, color: '#FF0044'},
{category: 'Warnings', value: 4, color: '#FFD023'},
{category: 'Messages', value: 2, color: '#0B6FE8'}],
}]"
k-legend="{ visible: false }"
style="height: 35vh" >
</div>
</div>
</div>
Whenever I try the example located here I can do whatever I want to the chart as long as I touch the style attribute. However when I do the same in this example:
<div id="severity-piechart">
<div ng-controller="SingleDetailsPieCtrl">
<div kendo-chart k-theme="'metro'" k-title="{ text: 'All Issues', positon: 'top' }"
k-series-defaults="{ type: 'pie',
labels: { visible: true, background: 'transparent',
template: '#= category #: \n #= value#' } }"
k-series=" [{data: [{category: 'Issues', value: 14, color: '#FF0044'},
{category: 'Warnings', value: 4, color: '#FFD023'},
{category: 'Messages', value: 2, color: '#0B6FE8'}],
}]"
k-legend="{ visible: false }"
style="height: 35vh; width: 50%; margin: 0 auto; display: block;" >
</div>
</div>
</div>
The chart becomes incredibly small, it's not centered, and all of the labels are clipped.
Has anyone encountered a similar situation?

Angular ng-repeat filter to hide elements

I need filter for ng-repeat, which will hide elements.
If $scope.selected will get true, i need to hide elements when select: true or visible: false
$scope.selected = false;
$scope.array = [
{name: 'item1', select: true, visible: false},
{name: 'item2', select: true, visible: true},
{name: 'item3', select: false, visible: true},
{name: 'item4', select: true, visible: false},
{name: 'item5', select: false, visible: true},
]
<div ng-repeat="item in array">
<div>{{item.name}}</div>
</div>
In this case you need use filter.
Live example in jsfiddle.
var myApp = angular.module("myApp", []);
myApp.controller("myCtrl", function($scope) {
$scope.selected = true;
$scope.myFilter = function(item){
return $scope.selected && (!item.visible || item.select)
}
$scope.array = [
{name: 'item1', select: true, visible: false},
{name: 'item2', select: true, visible: true},
{name: 'item3', select: false, visible: true},
{name: 'item4', select: true, visible: false},
{name: 'item5', select: false, visible: true},
]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="item in array|filter:myFilter">
<div>{{item.name}}</div>
</div>
</body>
Try this
<div ng-repeat="item in arrray">
<div ng-show="selected">
<div ng-hide="item.visible==false && item.select==true">{{item.name}}</div>
</div>
</div>
use ng-if:
<div ng-if="item.visible && selected && item.select == true">{{item.name}}</div>
I would recommend this one:
<div ng-repeat="item in array">
<div ng-hide="selected && (!item.visible || item.select)">{{item.name}}</div>
</div>

How To Filter A Grid In AngularJS Using A Drop Down List

I have a data-ng-gridand I want to filter a specific column in using a <select> (dropdown list) but I cant seem to get it working. I am new to AngularJS so I may be doing this completely wrong but my code samples are below
HTML:
<div data-ng-controller="manualrecunreconciled as vm" class="form-horizontal">
<div class="form-group">
<div class="col-sm-6">
<select name="manualrecfilter" ng-options="choice for choice in manualrecfilter" ng-model="sourceNameSelected" ng-change="filterOptions.filterText = sourceNameSelected.type" class="form-control" style="width:100% !important">
<option>All</option>
</select>
</div>
<div class="col-sm-6 pull-right">
<div class="input-group">
<input class="form-control pull-right" type="text" name="SearchBox" data-ng-model="searchfilter" placeholder="Search for ..." />
<span class="input-group-addon">
<i class="fa fa-search" style="color: #555"></i>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="gridStyle" data-ng-grid="gridOptions" id="recoptions" style="height: 325px;"></div>
</div>
</div>
Controller:
$scope.manualrecfilter = [
'All',
'P - Property',
'I - Investment',
'B - Both'
];
$scope.sourceNameSelected = '';
$scope.filterOptions = {
filterText: "",
};
function updategridoptions() {
$scope.gridOptions = {
data: 'myData',
rowHeight: 40,
enableColumnResize: true,
selectedItems: $scope.mySelections,
plugins: [gridLayoutPlugin],
totalServerItems: 'totalServerItems',
columnDefs: [
{ field: 'selected', displayName: '', cellTemplate: 'checkboxcelltemplate.html', width: 25 },
{ field: 'type', displayName: 'Type', width: 41 },
{ field: 'date', displayName: 'Date', cellFilter: "date:'dd-MM-y'", width: 85 },
{ field: 'reference', displayName: 'Reference', width: 162 },
{ field: 'amount', displayName: 'Amount', cellFilter: "currency:'£'", width: 98 },
{ field: 'notes', displayName: 'Actions', cellTemplate: 'recoptions.html', width: 117 }
],
filterOptions: {
filterOptions : $scope.filterOptions,
useExternalFilter: true
},
};
}
The filter should work when the option is selected (no clicking of any button), what am I doing wrong?
Found the answer a sort of answer that I could use but please note that it will filter all columns that have a match.
I updated my <select> in my HTML to:
<select name="manualrecfilter" ng-options="choice for choice in manualrecfilter" ng-model="filterOptions.filterText" class="form-control" style="width:100% !important">
and I also updated my controller to:
$scope.filterOptions = {
filterText: ''
};
$scope.manualrecfilter = [
'Prop',
'Inv',
'Both'
];
function updategridoptions() {
$scope.gridOptions = {
data: 'myData',
rowHeight: 40,
enableColumnResize: true,
filterOptions: $scope.filterOptions,
selectedItems: $scope.mySelections,
plugins: [gridLayoutPlugin],
totalServerItems: 'totalServerItems',
columnDefs: [
{ field: 'selected', displayName: '', cellTemplate: 'checkboxcelltemplate.html', width: 25 },
{ field: 'type', displayName: 'Type', width: 41 },
{ field: 'date', displayName: 'Date', cellFilter: "date:'dd-MM-y'", width: 85 },
{ field: 'reference', displayName: 'Reference', width: 162 },
{ field: 'amount', displayName: 'Amount', cellFilter: "currency:'£'", width: 98 },
{ field: 'notes', displayName: 'Actions', cellTemplate: 'recoptions.html', width: 117 }
]
};
}

Resources