How can I show programmatically the column PopupMenu in Ag-Grid?
PopupMenu Ag-Grid
With the gridApi you can hide it, but not show it
gridApi.hidePopupMenu()
I try also with the FilterInstance and the columnApi, but I haven't found anything that works
gridApi.getFilterInstance(colKey)
gridColumnApi?.getColumn(colKey) ...
Thanks
you can add a little workaround to open the filter popup:
// find the header menu button for the desired column
const colElement = document.querySelector("div[col-id='" + desiredColumn.getColId() + "'] > .ag-cell-label-container > .ag-header-cell-menu-button");
colElement.dispatchEvent(new Event("click")); // simulate a click on the menu button
// the next part ist to switch to the filter tab:
setTimeout(() => { // give the browser some time to render the menu
const tabElement = document.querySelectorAll("div.ag-tabs-header > .ag-tab")[1]; // select the filter tab
if (!tabElement.classList.contains("ag-tab-selected")) { // if the filter tab is not selected already
tabElement.dispatchEvent(new Event("click")); // click the filter tab
}
}, 10);
Basically, you locate the button in the DOM and execute a virtual click on it. It's not pretty but it works well, maybe we'll get an API for this in the future.
What you're wanting to do is to access getFilterInstance() of the Ag Grid API. Here's the relevant documentation: https://www.ag-grid.com/javascript-grid/filter-api/
Here's one way of accessing, and setting the filter using the getFilterInstance method
var FilterComponent = gridOptions.api.getFilterInstance('Status');
FilterComponent.selectNothing(); //Cleared all options
FilterComponent.selectValue('Approved') //added the option i wanted
FilterComponent.onFilterChanged();
Here's a related Stackoverflow question: how to pre-set column filter in ag-grid
Related
I have a reactive form and I am using Material Angular, with a tab group and the tab names comes from an array, I need to add the possibility of changing those tabs names for new ones. If a write a new title in the input I need to update the name of the tab label.
I’m getting the value from the input, but I can’t figure it out how to send it to the names of the tabs:
app.component.ts
this.newTitleArm = selection.formdata.titleTextArms;
console.log(this.newTitleArm);
STACKBLITZ
SCREENSHOT
Can you have a look at this Stackblits
Note that I have modified the submit method and have added
if(this.form.get('titleArms').value === 'changeArm'){
this.tabs[this.selected.value].name = this.form.get('titleTextArms').value;
}
Here I'm assigning the titleTextArms control value to selected tab name. You can get selected tab by this.tabs[this.selected.value]
Also added the if condition to check selection of radio button.
UPDATE:
since you have used tab names to create the text in the parent component.
In the submit method
need to do the tab name update before emitting the updateDataEvent.
submit(): void {
if (this.form.get('titleArms').value === 'changeArm') {
if (this.form.get('titleTextArms').value !== '') {
this.tabs[this.selected.value].name =
this.form.get('titleTextArms').value;
}
}
this.updateDataEvent.emit({
formdata: this.form.getRawValue(),
tabs: this.tabs,
});
}
The problem is that you are not updating the respective tab name anywhere, neither in your submit, nor in your updateData.
You submit the value, but you are not updating the tabs.
For example, in your submit method add this hard-coded update and then press the Save button:
this.tabs[0].name = "test";
Because now you updated the first tab's name, you should see the change.
Instead of manually selecting the check boxes of several pages,
I am using TamperMonkey to select all the check boxes with a small Javascript function.
The checkboxes get selected but the next step (SyncNow)for the procedure is greyed out.
I think it has to do with changing classes.
Is there another way to select the checkboxes with a 'click' via TamperMonkey?
or
How do I add an extra class that will hopefully not grey out the next step?
You can see the code that I have here:
https://codepen.io/Marina_2019/pen/dxXmZL
I tried this, and it did not work:
function selectAll(){
document.getElementById("AllInventorySelected").checked = true;
}
}, false);
This function worked:
checkThem([].slice.call(document.querySelectorAll('input[type="checkbox"]')));
function checkThem(nodes) {
nodes.forEach(function(n) { n.checked = true });
}
The problem is that the next after selecting all the check boxes are greyed out (unless I do it manually).
I noticed that a class gets added if I select the check boxes manually.
Code snippets are here:
https://codepen.io/Marina_2019/pen/dxXmZL
Scenario is quite simple. I have edit view which comprises of select element with multiple selection. Select element looks as follows
<select class="selectpicker" multiple
ng-model="UserBeingEdited.UberTypes"
ng-options="uberType.Id as uberType.Name for uberType in UberTypes"></select>
</div>
If I press edit for specific user then showEditModal function is called and edit pop up shows up. User has his own UberTypes objects selected so I pick theirs Ids and assign to UserBeingEdited.UberTypes.
$scope.UserBeingEdited = { UberTypes: []};
$scope.showEditModal = function (user) {
for (var i = 0; i < user.UberTypes.length; i++) {
$scope.UserBeingEdited.UberTypes.push(user.UberTypes[i].Id);
}
$("#editUserModal").modal("show");
};
Unfortunately they are not selected, no matter what. Suprisingly, if I set values to property UserBeingEdited by the time of declaring then it works, items are selected.
$scope.UserBeingEdited = { UberTypes: [1,2]}; //this works
It seems like angular does not refresh selected items within UI.
EDIT:
I have two items: Uber1 and Uber2. Both items are selected but view does not reflect it. If I open drop down menu and select Uber2 it shows Uber1 selected, apparently Uber2 was selected and another click was treated as unselection. The same happens when I click Uber1 first, Uber2 shows as selected.
As above picture depicts, Uber2 is highlighted since I have just clicked it but it shows Uber1 as selected. Both were selected in User's UberTypes but view just simply does not mark them as selected.
http://jsfiddle.net/upusq8ah/7/
I use bootstrap-select.js for select element and presumably this library causes such an error since without including it, it works fine.
Solution
After a while of struggle, I accidentally ran into below workaround. You need to call refresh on selectPicker and this has to be delayed otherwise it will bring no effect.
setTimeout(function () {
$('.selectpicker').selectpicker('refresh');
}, 100);
$("#editUserModal").modal("show");
My greetings !
I am trying to focus on first pagingtoolbar`s button by hot key. For example, when it will be pushed combination CTRL + -->, the focus will be on first enabled button of pagingtoolbar.
At this time I can get fisrt disabled button:
Ext.ComponentQuery.query('pagingtoolbar button{isDisabled()}')[0]
But I need a code like that:
Ext.ComponentQuery.query('pagingtoolbar button{isEnabled()}')[0]
I have thought that there is such method in Ext.button.Button, but I could not find it.
Obviously, I can resolve my problem by another way, for example, I can get all enabled buttons in paging toolbar by this code:
var buttons = Ext.ComponentQuery.query('pagingtoolbar button');
var en_buttons = [];
for(var i=0;i<buttons.length;i++){
if( !buttons[i].isDisabled() )en_buttons.push(buttons[i]);
}
en_buttons[0].focus(false,100);
But I believe that there are no need to write such code, it must be resolved by one line of code.
With regards ,
A
You can use the disabled property.
Disabled buttons:
Ext.ComponentQuery.query('pagingtoolbar button[disabled=true]')
Enabled buttons:
Ext.ComponentQuery.query('pagingtoolbar button[disabled=false]')
I'm using Sencha Touch 1.1. I have a Ext.List and when the user selects an item, I switch to the details page using
rootPanel.setActiveItem('details');
That works fine. Now I want to get the details of the selected item and populate properties in the 'details' panel. How do I do that?
At the moment I'm passing the record around to the various panels of the details page by using this code:
onItemDisclosure: function (record) {
// user has selected a Country from the Country List.
// TODO: There must be a better way to pass the data around
CountryDetailsToolbar.setTitle(record.data.title);
var upperData = { upper: record.data.title.toUpperCase()};
CountryDetailsHeaderLeft.update(upperData);
CountryDetailsHeaderMonth.update(record.data);
viewport.setActiveItem('CountryDetailsCarousel');
}
This seems a bit messy to me. Is there a cleaner way to set titles and update panels with the data "record"?
you can use rootPanel.getActiveItem() to get instance of currently selected panel, i am not sure about what do you mean by populate properties in the details tab
Update:
i think there isn't any problem in passing record data between panels, i think that is the most efficient way
onItemDisclosure: function (record) {
// user has selected a Country from the Country List.
var title = record.get('title');
CountryDetailsToolbar.setTitle(title);
CountryDetailsHeaderLeft.update({ upper: title.toUpperCase() });
CountryDetailsHeaderMonth.update(record.data);
viewport.setActiveItem('CountryDetailsCarousel');
}