How to disable kendo-grid-checkbox-column?
I have tried
[disabled]="true"
[attr.disabled]="true"
disabled ="true"
disabled
readonly
But nothing is helped to disable this below column
<kendo-grid-checkbox-column width="50" showSelectAll="true">
</kendo-grid-checkbox-column>
You can produce a disabled checkbox by specifying custom templates and adding a condition to the [disabled] attribute.
<kendo-grid-checkbox-column width="80" [locked]="true">
<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex" >
<input *ngIf="!dataItem.IsNew"
[disabled]="dataItem.IsNew === true"
type="checkbox"
class="k-checkbox"
id="checkbox-{{rowIndex}}"
[kendoGridSelectionCheckbox]="rowIndex"
/>
<label class="k-checkbox-label"
for="checkbox-{{rowIndex}}">
</label>
</ng-template>
</kendo-grid-checkbox-column>
This will render out a Kendo checkbox that will be disabled according to your conditions specified above.
If you want to display a select all checkbox in the header you need to add this template to the checkbox column:
<ng-template kendoGridHeaderTemplate >
<input kendoGridSelectAllCheckbox type="checkbox"
class="k-checkbox"
id="headerCheckbox"
/>
<label class="k-checkbox-label"
for="headerCheckbox"
></label>
</ng-template>
You can use the Grid rowClass input and provide a function that will return the "k-disabled" class (or any other custom class that would prevent the user from interacting with the given row), for all data items that pass some condition, e.g.:
public isDisabled(args) {
return {
'k-disabled': args.dataItem.UnitsOnOrder === 0
};
}
I hope this helps.
========OR========
<kendo-grid-checkbox-column>
<ng-template kendoGridCellTemplate let-dataItem let-
rowIndex="rowIndex" >
<div class="{{dataItem.UnitsOnOrder === 0 ? 'k-disabled' : ''}}">
<input [kendoGridSelectionCheckbox]="rowIndex" />
</div>
</ng-template>
CSS class was changed from k-disabled to k-state-disabled in recent Kendo UI theme versions
Resource: https://www.telerik.com/forums/kendo-angular-grid---row-selection
Related
I try to apply some css for the ngx-datatable element like this.
.datatable-body-row:hover {
background-color: #3387b5;
}
Nothing changed, result are the same. The css remains default setting.
The color is still the same when I hover my mouse to the specific row.
How can I customize it? Thankyou.
For reference the over all HTML structure are like this.
<ngx-datatable >
<!-- row are included in these column, but these column includes header-->
<ngx-datatable-column >
<ng-template ngx-datatable-header-template>
<label class="datatable-checkbox">
<input />
</label>
</ng-template>
<ng-template ngx-datatable-cell-template >
<label class="datatable-checkbox">
<input type="checkbox" />
</label>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column *ngFor="let column of columns; let i = index" >
</ngx-datatable-column>
</ngx-datatable>
Probably lower CSS Priority
you can use this or raise Priority other way https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
.datatable-body-row:hover,
.datatable-body-row:hover .datatable-row-group {
background-color: #3387b5 !important;
}
When I implemented my html template, checked property of checkbox is not properly working.
My html file contains code like the following,
<div *ngIf="userPermissionObj" >
<label for="pm">Permissions:</label>
<div *ngFor="let pt of permissionType">
<label>
<input type="checkbox"
[value]="pt.id"
ng-checked="${userPermissionObj.sPermissionType} == ${pt.name} ? true : false" />
{{pt.name}}
</label>
</div>
How can I find out where I implemented in wrong way?
In new Angular ng-checked does not exists. To acheive the same, use [checked]:
<input type="checkbox" [checked]="'Your_condition_here' ? true : false" (change)="someMethod()"/>
Use [checked] instead of ng-checked (It is angularJS directive, not angular.io),
See example below,
<input type="checkbox"
[value]="pt.id"
[checked]="${userPermissionObj.sPermissionType} == ${pt.name} ? true : false" >
Please go through the link(https://ng-select.github.io/ng-select#/multiselect-checkbox) to know ng-select multi select checkbox.
I am trying to use the ng-select "Group selects children" in my angular 6 application.
I am having problem using ng-select "Group selects children" with Reactive Forms instead of template driven forms.
I have tired it as
<ng-select
[items]="userGroupsList"
[multiple]="true"
bindLabel="name"
groupBy="gender"
[selectableGroup]="true"
[selectableGroupAsModel]="false"
[closeOnSelect]="false"
bindValue="id"
formControlName="userGroups" placeholder="Select a user group">
<ng-template ng-optgroup-tmp let-item="item" let-item$="item$" let-index="index">
<input id="item-{{index}}" type="checkbox" [(ngModel)]="" formControlName="userGroupParent"/> {{item.gender | uppercase}}
</ng-template>
<ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index">
<input id="item-{{index}}" type="checkbox" [(ngModel)]="" formControlName="userGroupChild"/> {{item.name}}
</ng-template>
</ng-select>
I have used the same data of the multiselect-checkbox-- [items]="userGroupsList"
https://github.com/ng-select/ng-select/blob/master/demo/app/shared/data.service.ts -- getMockPeople() has the data
So here can i use the [(ngModel)] as well as formControlName on the input how can i child elements are selected when the parent is select as in the example
Please help....!
To make this work with formGroup : keep the formControlName on the ng-select who will be bind to your formGroup.
The problem is those input in the template. For me the best solution is to keep using ngModel like in the example. But you must make angular understand that is as nothing to do with the fromGroup so you can add the option standalone on it.
<input id="item-{{index}}" type="checkbox" [(ngModel)]="item$.selected" [ngModelOptions]="{ standalone : true }" />
There is an other way to do that without the ngModel :
<input id="item-{{index}}" type="checkbox" [checked]="item$.selected" />
My dropdown item was not getting selected on clicking the item in the dropdown, it was only getting checked on clicking on the checkbox. This worked for me thanks
<form [formGroup]="sampleEditForm" (ngSubmit)="sampleSubmit(sampleEditForm.value)">
<md2-select placeholder="{{'Parameter'|translate:lang}}" [formControl]="sampleEditForm.controls['parameterId']" [(ngModel)]="parameterId" (change)="changeParam($event.value)" class="input_custom_width" required>
<md2-select-header>
<md-input-container class="input_custom_width">
<input mdInput type="text" placeholder="{{'Search'| translate:lang}}" [ngModelOptions]="{standalone: true}" [(ngModel)]="searchParameter"/>
</md-input-container>
</md2-select-header>
<md2-option *ngFor="let parameter of parametersAry | filterPipe : searchParameter" [value]="parameter.value">{{ parameter.name }}</md2-option>
</md2-select>
<md-card-actions align="start">
<button md-raised-button type="submit" color="primary">Submit</button>
</md-card-actions>
</form>
When I select an option from dropdown,I have to edit it or convert it to text type to edit.plz help me to sort out this.
You can achieve this by toggling a boolean value using *ngIf.
This can be done with a status variable.
If the status is false, display dropdown. If an option gets selected, set the status to true. This will hide the dropdown and display the text Area/text box.
<md2-option *ngFor="let parameter of parametersAry | filterPipe : searchParameter" [value]="parameter.value">
<span
*ngIf="!editing">
{{parameter.name}}
</span>
<input autofocus *ngIf="editing" type="text" [value]="parameter.name" />
</md2-option>
I think when you select an option from drop down, change event is triggered and on this change event you can write your code as per requirement
$("#selectId").change(function () {
//your code as per requirement
});
I have this carousel. Each item in the carousel has a checkbox above it. I want to be able to click on item and the checkbox gets a checked attribute. The code does this. The only problem I'm having is it toggles all check boxes in the carousel. I just want it to toggle the one clicked.
<tshq-carousel [dataSource]="brands" [selections]="selectedBrands" (select)="onItemsSelected($event)" [changeKey]="changeKey" [pageSize]="5" [circular]="false"
[enableSelection]="true" mode="single">
<ng-template let-brand>
<ng-container [ngSwitch]="brand.icon&&brand.icon.length>0">
<ng-container *ngSwitchCase="true" >
<label class="apply carousel-checkbox">
<input type="checkbox" id="brandCheck" [checked]="isChecked" value="no" name = "brand">
</label>
<img [src]="formatLogo(brand.icon)" style="max-width:150px" (click)="isChecked = !isChecked" />
</ng-container>
</ng-container>
</ng-template>
</tshq-carousel>
You use isChecked variable to binding to all input checkbox of carousel, so when you change value (check or uncheck) 1 input checkbox, it also set to all remain ones.
I suggest you add 1 property to model brand and use it to binding to input checkbox or image.
Ex:
<tshq-carousel [dataSource]="brands" [selections]="selectedBrands" (select)="onItemsSelected($event)" [changeKey]="changeKey" [pageSize]="5" [circular]="false"
[enableSelection]="true" mode="single">
<ng-template let-brand>
<ng-container [ngSwitch]="brand.icon && brand.icon.length>0">
<ng-container *ngSwitchCase="true" >
<label class="apply carousel-checkbox">
<input type="checkbox" id="brandCheck" [checked]="brand.isChecked" value="no" name="brand">
</label>
<img [src]="formatLogo(brand.icon)" style="max-width:150px" (click)="brand.isChecked = !brand.isChecked" />
</ng-container>
</ng-container>
</ng-template>
</tshq-carousel>