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";
}
Related
I know how to do it with Clientside Row Model, simply set your column filter property to true in columnDefs. Example:
{
headerName: 'Technology',
field: 'technologyType.name',
filter: true
},
When using Clientside Row Model, setting "filter: true" instead of something like "filter:'agTextColumnFilter'", will automatically gray out the textbox on the filter row, and when the filter button is clicked, cause a checkbox dropdown to be populated with all the possible column values.
When using Serverside Row Model, setting "filter: true", will automatically gray out the textbox on the filter row, and when the filter button is clicked, will cause a checkbox dropdown to be populated, unfortunately, with only 1 checkbox row (Select All)).
I realize that the Serverside Row Model grid, when the first page loads, could only know about all the possible values of the column for the first page of data, but it seems to me, I should be able to populate the dropdown filter checkbox rows from another datasource.
Thank you for your assistance!
Supplying Filter Values:
colDef:
{
field: 'days',
filter: 'agSetColumnFilter',
filterParams: {
// provide all days, even if days are missing in data!
values: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
}
}
https://www.ag-grid.com/javascript-grid-filter-set-filter-list/#supplying-filter-values
https://www.ag-grid.com/javascript-grid-filter-set-filter-list/#synchronous-values
https://www.ag-grid.com/javascript-grid-filter-set-filter-list/#asynchronous-values
I have a dropdown(having 2 values - Employee and department) and two kendogrids(emp grid and dept grid), on change of dropdown I am enabling/disabling grid based on dropdown value and also clearing datasource of both grid, when I select employee in dropdown and sort employees based on name it gives results, when i change dropdown value to 'Department' it disables employee grid and shows 'No data found' in employee grid,but when I clicked on EmpName column i still got the previous results. I have added dropdown change sample code below.
var ddlvalue = $("#drpmodule").data("kendoDropDownList").text();
$("#EmpGrid").data("kendoGrid").dataSource.data([]); //Clear EmpGrid DataSource
$("#DeptGrid").data("kendoGrid").dataSource.data([]); //Clear DeptGrid DataSource
if (module == 'Employee') {
$('#DeptGrid').addClass('k-state-disabled');
$('#EmpGrid').removeClass('k-state-disabled');
}
else if (module == 'Department') {
$('#EmpGrid').addClass('k-state-disabled'); //shows no data found in EmpGrid, but clicking on column header gives results
$('#DeptGrid').removeClass('k-state-disabled');
} else {
$('#EmpGrid').removeClass('k-state-disabled');
$('#DeptGrid').removeClass('k-state-disabled');
}
I am not getting why Employee grid is showing previous/old data even after 'No data found' records(on changing dropdown).
It would be nice to see how the datasource is configured.
As it is I can assume that maybe when you are filtering, the datasource is fetching data. It would explain why you see data on filtering the empty grid.
Maybe hiding the disabled grid could be a solution : $('#EmpGrid').hide();
Then display it again $('#EmpGrid').show();
By hiding/showing the grid you don't need to empty the grid anymore.
I have created Radiobutton group and first one is coming as auto selected. how can i remove that?
var radio = CardService.newSelectionInput()
.setType(CardService.SelectionInputType.RADIO_BUTTON)
radio.setOnChangeAction(CardService.newAction()
.setFunctionName("setType")
.setLoadIndicator(CardService.LoadIndicator.SPINNER))
radio.setFieldName("event_type").setTitle("Select Type")
radio.addItem('item1',1,false);
radio.addItem('item2',2,false);
radio.addItem('item3',3,false);
Since you have set values for all the items to false, it is showing the first item as auto selected.
radio.addItem('item1',1,false);
radio.addItem('item2',2,false);
radio.addItem('item3',3,false);
If you want to show any of the items as default, you can set one of the values to true,
radio.addItem('item2',2,true);
However, in both the cases, when you submit the form, it returns the value of the item that you have selected, not the autoselected one.
You can test it like this,
var radio = CardService.newSelectionInput()
.setType(CardService.SelectionInputType.RADIO_BUTTON)
.setFieldName("event_type").setTitle("Select Type")
.addItem('item1',1,false)
.addItem('item2',2,false)
.addItem('item3',3,false);
var button = CardService.newTextButton().setText("Submit")
.setOnClickAction(CardService.newAction().setFunctionName('test'));
function test(e){
Logger.log(e.formInputs.event_type);
}
The logs shows value of selected radio-button as [1.0] if item1 is selected.
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>
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';
}