I have loaded p-multiselect with values of 30000 in array. When I click on select all from drop-down then browser hangs/freeze.
testcase: Please check test case at plnkr
<p-multiSelect [options]="cities1" [(ngModel)]="selectedCities1"></p-multiSelect>
cities1:any =[];
selectedCities1:any = [];
ngOnInit() {
for (let i=0; i<30000; i++)
this.cities1.push({label:'City'+i, value:'City'+i});
}
Please suggest.
Thanks!
Related
I have been searching the internet for answer but I am not having any luck. I would like to know if it is possible to only show Kendo detail rows after 19 rows of data? I have a very odd requirement and I'm not sure it can be done. However if there is a solution out there, is there a small example I can see? Or a resource I have not found yet?
As a note a side note I am using Kendo with AngularJS.
Thank you in advance!
AnthonyFastcar
This may not be the best way to do this but I just hid the detail icon for the rows. I used the dataBound event.
dataSource: yourDataSouce,
dataBound: function(e) {
var grid = this,
grid2 = $('#yourGrid').data('kendoGrid');
grid.tbody.find("tr[role='row']").each(function () {
var index = $(this).index();
if (index < 19) {
$(this).find('.k-i-expand').removeClass('k-i-expand');
}
})
}
Additionally if you are trying to use a column, say an ID column you can do it like the below.
dataSource: yourDataSouce,
dataBound: function(e) {
var grid = this,
grid2 = $('#yourGrid').data('kendoGrid'),
grid.tbody.find("tr[role='row']").each(function () {
var data = grid.dataItem(this);
if (data.yourColumnID < 19) {
$(this).find('.k-i-expand').removeClass('k-i-expand');
}
})
}
I hope this helps anyone else who runs into the same issue.
My form has got 2 select boxes. The second select options box is loaded when an option is selected in first box. The form is used for both adding and editing. I show the list below the form with edit button against each row. When I click on edit button it loads the values in form to edit. The thing is when I click on a row for first time it loads the values in form perfectly. If I click on another row button to edit, the SECOND select option alone does not show the selected value. But the box is loaded with values.
Code in controller:
$scope.editShift = function(row) {
for (var i = 0; i < $scope.availableShift.length; i++) {
if ($scope.availableShift[i].shiftId === row.entity.shiftId) {
$scope.shift = angular.copy($scope.availableShift[i]);
break;
};
};
$scope.selectLineNames();
};
$scope.selectLineNames = function(){
$scope.availableListOfLineNames = [];
$scope.availableListOfLineNamesTemp = LineDetails.ld_get_ln_resource.query
({plant: $scope.shift.plant}, function(response) {
angular.forEach(response, function(item) {
if (item) {
$scope.availableListOfLineNames.push(item);
}
});
});
};
Second Select Option in Form
<select name="lineName" ng-model="shift.lineName"
ng-options="x for x in availableListOfLineNames" id="selectoption2" required>
<option value="">Select One</option>
</select>
EDIT:
Calling $scope.selectLineNames(); inside $scope.editShift somehow makes the lineName value undefined after copy, on second time. Inside selectLineNames() too the value is available until it reaches the forEach() .Only after the loop starts It becomes undefined.
So used a duplicate method like $scope.selectLineNamesTemp(); and passed values from $scope.editShift and assigned them in the duplicate method like below.
$scope.selectLineNamesTemp = function(){
$scope.availableListOfLineNames = [];
$scope.availableListOfLineNamesTemp = LineDetails.ld_get_ln_resource.query(
{plant: plantTemp}, function(response) {
angular.forEach(response, function(item) {
if (item) {
$scope.availableListOfLineNames.push(item);
$scope.shift.lineName = lnTemp; // assigned from editShift
}
});
}) ;
};
Can someone point out why the value become undefined? Also is there a way to use the same old method without using the duplicate method. Hope someone help.
I'm trying to create an interactive photo database where the user can sort through photos and filter by user, check multiple categories he or she is interested in, and sort the filtered data by date, number of favorites, etc. The filter/sorting criteria are selected by the user on the DOM and are stored from the client side to $scope.model. The quantity of data visible to the user would be controlled with infinite scroll.
I've created a repository of this example, and I've deployed it here. I've reproduced some of the relevant code from scroll.controller.js below:
Code
// infinite-scroll logic & collection subscription //
$scope.currentPage = 1;
$scope.perPage = 12;
$scope.orderProperty = '-1';
$scope.query = {};
$scope.images = $scope.$meteorCollection(function() {
query={};
// if filtered by a user...
if ($scope.getReactively('model.shotBy')) {
query.shotBy = $scope.model.shotBy;
};
// if category filter(s) are selected...
if ($scope.getReactively('model.category', true)) {
if ($scope.model.category.length > 0){
var categories = [];
for (var i=0; i < $scope.model.category.length; i++){
categories.push($scope.model.category[i]);
}
query.category = {$in: categories};
}
};
$scope.currentPage = 1; // reset
return Images.find(query, { sort: $scope.getReactively('model.sort')});
});
$meteor.autorun($scope, function() {
if ($scope.getReactively('images')){
$scope.$emit('list:filtered');
}
});
$meteor.autorun($scope, function() {
$scope.$meteorSubscribe('images', {
limit: parseInt($scope.getReactively('perPage'))*parseInt(($scope.getReactively('currentPage'))),
skip: 0,
sort: $scope.getReactively('model.sort')
});
});
$scope.loadMore = function() {
// console.log('loading more');
$scope.currentPage += 1;
};
Problem
I can scroll through the images fine, and the infinite-scroll feature seems to work. However, when I attempt to filter the images from the DOM, the only filtered results are those which were initially visible before scrolling, and scrolling doesn't make the rest of the images that meet the criteria show, despite using $scope.$emit to signal ngInfiniteScroll to load more (documentation).
EDIT: If the initial filtered list does, in fact, reach the bottom, scrolling will append properly. It seems to not append only if the initial filtered list doesn't reach the bottom of the screem.
Question
What can I change to make ngInfiniteScroll behave as I would expect on a filtered collection?
Any help, thoughts, or suggestions would be appreciated, and let me know if there's anything else you'd like to see. Thank you!
Well, it took almost all day to figure out, but I now have a working example at this Github repository and deployed here.
To summarize, I found I need to filter at both the collection and subscription levels to cause perPage to apply properly and for ngInfiniteScroll functioning. Also, I needed to send an event via $scope.$emit to ngInfiniteScroll to tell it to fire again in case the images array was too small and didn't reach the edge of the screen. See the Github repository for more details, if you're interested.
Updated relevant code
// infinite-scroll logic & collection subscription //
$scope.currentPage = 1;
$scope.perPage = 12;
$scope.query = {};
function getQuery(){
query={};
// if filtered by a user...
if ($scope.getReactively('model.shotBy')) {
query.shotBy = $scope.model.shotBy;
};
// if category filter(s) are selected...
if ($scope.getReactively('model.category', true)) {
if ($scope.model.category.length > 0){
var categories = [];
for (var i=0; i < $scope.model.category.length; i++){
categories.push($scope.model.category[i]);
}
query.category = {$in: categories};
}
};
return query;
}
$meteor.autorun($scope, function(){
$scope.images = $scope.$meteorCollection(function() {
$scope.currentPage = 1; // reset the length of returned images
return Images.find(getQuery(), { sort: $scope.getReactively('model.sort')});
});
$scope.$emit('filtered'); // trigger infinite-scroll to load in case the height is too small
});
$meteor.autorun($scope, function() {
$scope.$meteorSubscribe('images', {
limit: parseInt($scope.getReactively('perPage'))*parseInt(($scope.getReactively('currentPage'))),
skip: 0,
sort: $scope.getReactively('model.sort'),
query: getQuery()
});
});
$scope.loadMore = function() {
// console.log('loading more');
$scope.currentPage += 1;
};
I'm not sure if I've used best practices with this answer, so please feel free to chime in with suggestions.
I have the following test (for the sake of brievity I've removed the page object):
element(by.model("elc.search.placeOfBirth")) //this is a select
element(by.model("elc.search.placeOfBirth")).all(by.tagName("option")).then(function(options) {
for(var i = 0; i < options.length; i++) {
options[i].getText().then(function(text) {
if(text !== "---") {
element(by.model("elc.search.placeOfBirth")).sendKeys(text);
var firstRow = element.all(by.repeater("employee in elc.filtered")).first();
firstRow.all(by.tagName("td")).then(function(cells) {
expect(cells[4].getText()).toBe(text);
});
var lastRow = element.all(by.repeater("employee in elc.filtered")).last();
lastRow.all(by.tagName("td")).then(function(cells) {
expect(cells[4].getText()).toBe(text);
});
}
});
}
});
Let me explain what's happening here. I have a table and a select box above it. The table's 5th column is related to the select combobox and the array I use in ng-repeat for the table is filtered by the value in the combobox. What I wanted to do here is to go over the values in the combobox, select a particular value and make sure the table has that value in the first and last row.
If I but browser.debugger() in the loop this works and the test passes, however if I don't debug the testing seems to go too fast and my table doesn't get updated quickly enough and the tests fail. I'm guessing this is due to the fact that a promise isn't resolved and the code keeps running, but I'm not sure which promise I'm waiting for, as I've also tried to put a .then(function() {...} right after I send the keys to the combobox.
I guess your for loop executes quickly and so the code inside it waiting for promises gets skipped. You can avoid it by executing a function inside the for loop. Update your code to do it -
var someFunction = function(options, i){
//Write your code that was inside your for loop
};
element(by.model("elc.search.placeOfBirth")).all(by.tagName("option")).then(function(options) {
for(var i = 0; i < options.length; i++) {
someFunction(options, i);
}
});
However there's a better solution for this problem. Use the inbuilt loops that protractor has .each() or .map() to get your job done. Here's how -
element(by.model("elc.search.placeOfBirth")).all(by.tagName("option")).each(function(option) {
option.getText().then(function(text) {
if(text !== "---") {
element(by.model("elc.search.placeOfBirth")).sendKeys(text);
var firstRow = element.all(by.repeater("employee in elc.filtered")).first();
firstRow.all(by.tagName("td")).then(function(cells) {
expect(cells[4].getText()).toBe(text);
});
var lastRow = element.all(by.repeater("employee in elc.filtered")).last();
lastRow.all(by.tagName("td")).then(function(cells) {
expect(cells[4].getText()).toBe(text);
});
}
});
});
You may use wait's in between to make sure your DOM is updated before you perform any operation. Hope it solves your issue.
Is it possible to include all check boxes in the list if one is selected. For example, 10 checkboxes on the page and we check the 5th - so 1,2,3,4,5 should be checked.
Does anybody have an example of this with angular JS?
As pointed out by Blackhole, a possible solution would be using ng-change on your checkboxes.
your html:
<input type="checkbox" ng-repeat="bx in boxes" ng-model="bx.value" ng-change="boxChecked($index, bx.value)">
in controller:
$scope.boxChecked = function(index, value) {
for (var i = 0; i < index; i++) {
$scope.boxes[i].value = value;
}
}