PrimeNG p-orderList disable multiple selection of items - html

I am using PrimeNG's p-orderList. By default, the metaKeySelection attribute is true which implies that a metaKey(ctrl key) is needed to be pressed to select multiple items. I was rather looking for a way to completely disable selection of multiple items. I should be able to select ONLY ONE item in the ordered list.
There is no metaKey attribute available for p-orderList. Can anyone help me with this?
<p-orderList [value]="policyList" [listStyle]="{'min-height':'calc(100vh - 325px)'}" (onSelectionChange)="onSelectionChange($event)">
<ng-template let-policy pTemplate="policy">
<span>{{policy}}</span>
</ng-template>
</p-orderList>
PS: onSelectionChange($event) is triggered every time you select items from the ordered list. $event.value contains the array of the items.

There is no easy flag for it but it can be achieved through calling a function that basically replaces the entire selection array with just the original selected row.
You will need a variable to store the previous value for comparison.
onSelectionChange(event) {
if (event.value.length === 1) {
this.tempValue = event.value[0];
}
else {
event.value = [this.tempValue];
}
}
Can also be simplified by passing event.value to the function
(onSelectionChange)="onSelectionChange($event.value)">

What about the metaKeySelection input property? (as shown here)
<p-orderList [metaKeySelection]="false" [value]="policyList" [listStyle]="{'min-height':'calc(100vh - 325px)'}" (onSelectionChange)="onSelectionChange($event)">
<ng-template let-policy pTemplate="policy">
<span>{{policy}}</span>
</ng-template>
</p-orderList>

Related

Refreshing Dropdown Arrays automatically

I have two dropdowns where I am passing two arrays from my angularjs file. One drop down has the names and the other drop down has the subjects. so when a name is selected from the first dropdown subjects related to that name is loaded to the second dropdown. Its working correctly. But if I again select another name from the first drop down instead of showing only subjects related to the secondly selected name subjects related to first name and second name both shows in the second drop down. Im storing these values in two global arrays and passing them to the two dropdowns. How can I display only the related values in the second drop down ?
js
$scope.arrayName = [];
$scope.arraySubj = [];
function1()
{
//assigning values to $scope.arrayName;
}
function2(selectedVal)
{
//assigning values to $scope.Subj;
}
HTML
<body>
<select ng-model="a" ng-options="item for item in arrayName" ng-change="function2(a)">
<select ng-model="b" ng-options="item for item in $scope.Subj">
</body>
From what I understand, whenever function2(selectedVal) is called you'll need to reset the subj array to empty. Hopefully, that should do the trick.
Would it not be better to just use the built in filter service?
<select ng-model="a" ng-options="name as name in arrayName"></select>
<select ng-model="b" ng-options="item as item in arraySubj | filter: customFilter"></select>
where
$scope.customFilter = function(item, idx, arr) {
return (does item match whatever the criteria is from $scope.a);
}
Instead of rebuilding the $scope.subJ array whenever $scope.a changes?

Display a value in HTML using MVC

I have a list held by Session's variable. Suppose: Session["SOF"].
Within this list, there are several items. Suppose each item is an integer. Let's say I want to find the item which has the value 9 and then display the item's value in HTML (this thing is clearly stupid but it is just example).
Here is what I tried in my HTML code in order to display the number:
#(List<int>(Session["SOF"]).FirstOrDefault(x => x.value == 9).ToString());
obviously it didn't work. So how can I do it?
I would use foreach in this case
Try this:
#foreach(var item in Session["SOF"])
{
if(item == 9)
{
<span>#item.ToString()</span>
}
}
Maybe casting to a List<int> will be needed for Session["SOF"], but give it a try.

AngularJS Hide selected items in the drop-down options

I am trying to allocate two crews based on the same data from the server. In the drop-down options, when I select an item in one box. I would like the selected option to disappear in the next drop-down
You could use a filter in the ngOptions expression:
Define your two select box like this , one with a filter
<select ng-model="crew1" ng-options="crew.text for crew in crews1></select>
<select ng-model="crew2" ng-options="crew.text for crew in crews2 | filter:shouldShow"></select>
and define the shouldShow() function to $scope in the controller:
$scope.shouldShow = function (crew) {
// put your authorization logic here
return $scope.crew1 != 'selectedOption';
}

PrimeNg Datatable Column Disable

I am using Primeng Datatable.
Also using [(selection)] ="selectedRowItems" in <p-dataTable...> to multiple check/uncheck etc.
I'd like to modify this datatable checkbox-column in such a way that if some certain condition is given then the column will be disabled else enabled.
In short: Is there any boolean property like [disabled] available for Primeng Datatable to disable/enable a column?
More clarification:
I would like to display some Item details in datatable. If their parent Id's status is 'Deployed', then the checkbox column will be disabled. But if the parent Id's status is not 'deployed' then the checkbox column will be active and we can add/delete/modify items in datatable.
This parent Id, or the status is not part of data-table. Only the item details shown.
in .html:
[selectionMode] = "multipleOrnull"
in .ts:
if(deployed){
multipleOrnull = "";
}
else {
multipleOrnull = "multiple";
}

Dynamic search/filter core-list (Polymer 0.5)

I need to implement a filter-type search which hides items in core list if they do not match the search. I created a .hidden class that is applied to an item if an expression returns false:
class = {{ {hidden: !match(model.host, hQuery)} | tokenList }}
The elements are hidden, but the list does not reflow elements unless I click on a visible row. Is there a way to force a reflow using a function call?
After a week of struggling, hiding list items is just not the right way to handle this. Iterate through the original array, push any matching objects to a temporary array, and then replace core-list's .data array with the temporary array: this.$.list_id.data = tmpArray. Performance is good for lists up to 10K records.
This is what I'm doing in my code, and it works:
<div style="{{hide_part1}}">
...content to show/hide...
</div>
....
Switching it based on route change(flatron-director):
routeChanged: function(oldValue, newValue) {
if ('some_route_1' == this.route) {
this.hide_part1 = ''
this.hide_part2 = 'display: none;'
} else if ('some_route_2' == this.route) {
this.hide_part1 = 'display: none;'
this.hide_part2 = ''
}
},
Also using core-list's updateSize() and especially scrollToItem(0), i.e. back to top, here and there helps as I also had problems with the 'reflow':
https://stackoverflow.com/questions/29432700/polymer-core-list-is-not-rendering-some-of-the-elements