Kendo multiselect dropdown issue - angularjs

I have a dropdown that using multiselect dropdown .The dropdown values are remove every time I'm clicking in a cross button in the dropdown after I'm removing some items the dropdown is coming as blank .it may be html issue I will include the html code below can I get a solution for this issue
<kendo-multiselect #accountingStandareddrpdwn iconClass="k-i-arrow-chevron-down" [data]="accountingStandards"
[(ngModel)]="selectedAccountingStandard" [textField]="'Name'" [ngModelOptions]="{standalone: true}"
[valueField]="'ID'" (valueChange)="getAccountingStandard($event)" >
<ng-template kendoMultiSelectItemTemplate let-dataItem>
<input type="checkbox" class="k-checkbox" [checked]="isItemSelectedAccountingStandard(dataItem)">
<label class="k-checkbox-label" style="padding-left:25px !important;">{{ dataItem.Name }}</label>
</ng-template>
<ng-template kendoMultiSelectNoDataTemplate>{{No_Data_Found}}
</ng-template>
</kendo-multiselect>
I want a solution for this issue

Related

Nested checkbox in ngbTabTitle not working

I'm trying to put a checkbox in a tabset title, but it doens't seem to work. I really appreciate some help. My simplified code look like this:
<ngb-tabset>
<ngb-tab>
<ng-template ngbTabTitle>
<input type="checkbox" [(ngModel)]="selectedTabs" (click)="selectTab(i)" />
Result
</ng-template>
<ng-template ngbTabContent>
<input type="checkbox" [(ngModel)]="selectedTabs" (click)="selectTab()" />
...
The model is being changed as I can see in the second "test-checkbox" and the console, but the activation-state is not shown by the checkbox in the title. Does anybody has an idea how this can going to work, please?
regards,
Lars
I believe it's the event handling in ng-boostrap's tab selection that is interfering with the checkbox selection (when the checkbox is in the header). To get around this, you can pass $event into the (click) handler for the checkbox and call event.stopPropagation();:
HTML
<ngb-tabset>
<ngb-tab>
<ng-template ngbTabTitle>
<input type="checkbox" [(ngModel)]="selectedTabs" (click)="selectTab($event)" />
Result
</ng-template>
<ng-template ngbTabContent>
<input type="checkbox" [(ngModel)]="selectedTabs" />
</ng-template>
</ngb-tab>
...
</ngb-tabset>
Typescript
public selectTab(event): void {
this.selectedTabs = !this.selectedTabs;
console.log(this.selectedTabs)
event.stopPropagation(); // Prevents event propogation and the checkbox is selected/deselected
}
Please see this StackBlitz for a demo.

cannot select/unselect angular-ui bootstrap checkbox

I am using angular-ui bootstrap in my project. I use navigation bar, carousel, dropdowns etc. without problem. However checkbox html code doesn't work. I cannot click on checkbox to select/unselect. I am using bootstrap v3.3.6 and angularjs v1.5.5
<div class="checkbox">
<label class="pull-left">
<input type="checkbox" ng-model="accept"> I Accept Terms&Conditions
</label>
</div>
If I remove class="checkbox" from div checkbox works fine.

Angular radio button validation with an ng- repeat

I'm running into an interesting Angular validation issue. I need to make sure that radio buttons are selected (they might not have a default value when loaded). The values for the radio buttons are iterated over from an array using ng-repeat. This whole thing also happens inside another ng-repeat for a list of users.
The issue is that I have to set a unique/dynamic name attribute on each group of related radio buttons, otherwise selecting one will unselect others in a different row. The validation in based on the name attribute and I cannot seem to find a way to use this unique/dynamic name in the needed ng-class and ng-show expressions.
This is waht is not working:
ng-show="userFormRow.service-{{$index}}.$invalid"
Here's a sample of the code in context:
<table class='table table-striped table-bordered'>
<tbody>
<tr ng-repeat="u in users"
ng-form="userFormRow">
<td>
<!-- THIS is having an issue determining the name of this form item since I need to generate a dynamic one here-->
<div class="form-group"
ng-class="{'has-error': userFormRow.service-{{$index}}.$invalid }">
<label class="control-label center-block">Service</label>
<div class="radio-inline" ng-repeat="o in serviceOptions">
<label>
<!-- HERE is where I define the unique name attribute based on the index of the table repeater -->
<input type="radio"
name="service-{{$parent.$index}}"
value="{{::o}}"
ng-model="u.Service"
ng-required="!u.Service"> {{::o}}
</label>
</div>
<!-- THIS is having an issue determining the name of this form item since I need to generate a dynamic one here-->
<p class="help-block" ng-show="userFormRow.service-{{$index}}.$invalid">A service must be selected!</p>
</div>
</td>
</tr>
</tbody>
</table>
And here is a full code example.http://codepen.io/chrismbarr/pen/eNoGLJ?editors=101 Check the console for errors
You should use bracket notation to access variable object property:
ng-show="userFormRow['service-' + $index].$invalid"
and same with ngClass:
ng-class="{'has-error': userFormRow['service-' + $index].$invalid }"
Demo: http://codepen.io/anon/pen/rVbYpG?editors=100

how to show a section based on radio button selected

I am generating some radio buttons using ng-repeat, here is the code
<input type="radio" ng-repeat="i in items" name="myRadio{{$index}}" value="{{i.val}}" />
its generating 2 radio buttons, I want to show a section only if the radio button of value "sftp" is selected, how can I do that?
<div ng-show="????">
this section is visible when radio button having value sftp is selected
</div>
Give a model to both radios:
<input ng-model="myRadio" type="radio" ng-repeat="i in items" name="myRadio{{$index}}" value="{{i.val}}" />
And just do:
ng-show="myRadio == 'sftp'"

Save Check Box State with Angular Js ... For back button from another page

Save Check Box State with AngularJs ... For back button from another page.
I have a complex search page that is generated via AngularJS like so
<input type="checkbox" class="checkall" id="all_types"><strong><?=lang('select_all')?></strong>
<div class="span12" ng-controller="typesCtrl">
<label class="checkbox inline" data-ng-repeat="record in records">
<input type="checkbox" class="small_checkbox" value="{{ record.type_id }}" name="auto_type[]"> {{ record.en_type_name }} ({{ record.type_count }})
After search selection is complete I check what is selected and send it to a search url
/search?auto_type=1,4,5,7
The problem is when I click back button ... the state of checkboxes and select is not saved. What is the most elegant way to save checkbox state in this scenario.

Resources