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
Related
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 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 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";
}
I need help in disabling the value of a specific form control based on its value in Angular 2.
The field - startDate needs to be disabled whenever the value of another field - period is "Lifetime". It needs to be enabled otherwise. Also, whenever the app is loaded, the default value of period is "Lifetime" so the startDate is disabled when the form is loaded.
So this is the code that I have written till now in my component:
protected onMetadataLoaded() {
const startDateControl = this.metadata.form.controls.startDate;
startDateControl.disable();
const periodControl = this.metadata.form.controls.period;
periodControl.valueChanges
.distinctUntilChanged()
.subscribe(period => {
if(period !== "Lifetime") {
startDateControl.enable();
} else {
startDateControl.disable();
}
});
}
This allows me to enable the startDateControl when I change the period value from Lifetime to any other value. However, if I select the period value as Lifetime again, the startDateControl doesn't get disabled.
I'm guessing that it's checking it only once since I'm putting the code inside MetadataLoaded(). I'm not sure as to how I need to go about it so that it keeps monitoring the periodControl for value changes and enables and disables the startDateControl based on the period value.
Just for completeness: Period field has the following values - Monthly, Quarterly, Yearly, Lifetime.
Thanks in advance!
EDIT:
So this is what my template looks like:
<dynamic-form-item name="storeID" [metadata] = "metadata" type="chooser"></dynamic-form-item>
<dynamic-form-item name="period" [metadata] = "metadata"></dynamic-form-item>
<dynamic-form-item name="startDate" [metadata] = "metadata"></dynamic-form-item>
Basically a bunch of dynamic form items.
Is there a way to check that if the group value that is returned is "null" and then hide the group header and expand/collapse button if that is the case?
There is no easy way to go about this. However you can try this in your grid:
dataBound: function (e) {
if ($('#grid').data('kendoGrid').groupable.dataSource._group.length > 0) {
$('#grid tbody .k-grouping-row').filter(function (index) {
return $(this).find("p")[0].innerText.slice(-1) === ":";
}).hide();
$('tr td:empty').parent().hide();
} else {
$('tr td:empty').parent().show();
}
}
Every time you group a column, it calls the dataBound event. First, I check the grid for its grouped columns.
If the grid is being grouped, I find all the group header rows that end in : (meaning that the value being grouped on was empty or null and the label would show Contact Name: for example). I also find all the data rows that have an empty cell, and I hide both the header and data rows.
However, when ungrouping, I have to reveal data rows with null/empty cells again. The header rows are removed automatically. You can check this out in action here --> jsFiddle Demo. Edit the first row's name to be nothing, and then group. It will not show any empty groupings.
This is very hacky and unknown problems could arise, but hope it helps though!