Problem:
I have a grid with lazy loading and therefore my data is not in memory.
To show the check box to select/deselct all i used this Question.
My code looks like this:
Grid<CustomClass> grid;
...
// set selection mode
grid.setSelectionMode(SelectionMode.MULTI);
// make select all check box visible
GridSelectionModel<CustomClass> selectionModel = grid.getSelectionModel();
((GridMultiSelectionModel<CustomClass>) selectionModel)
.setSelectAllCheckboxVisibility(SelectAllCheckboxVisibility.VISIBLE);
The Problem is, that the check box does not work in the UI as you can see:
If i log the selected items with the following code the check box works as expected
grid.addSelectionListener(l -> {
log.info("selected: " + l.getAllSelectedItems().size());
});
Question:
What can i do that the check box also works in the UI?
The Solution i found that the checkoxes are updated in the UI is to add dataPovider.refreshAll() in the listener.
Code of the Solution:
grid.addSelectionListener(l -> {
...
dataPovider.refreshAll();
...
});
Related
Using Angular 4 (typescript), I have some code like below using ag-grid 12.0.2. All I'm trying to do is load my grid and automatically (programmatically) select the first row.
:
this.gridOptions = ....
suppressCellSelection = true;
rowSelection = 'single'
:
loadRowData() {
this.rowData = [];
// build the row data array...
this.gridOptions.api.setRowData(this.rowData);
let node = this.gridOptions.api.getRowNode(...);
// console logging here shows node holds the intended row
node.setSelected(true);
// console logging here shows node.selected == true
// None of these succeeded in highlighting the first row
this.gridOptions.api.redrawRows({ rowNodes: [node] });
this.gridOptions.api.redrawRows();
this.gridOptions.api.refreshCells({ rowNodes: [node], force: true });
First node is selected but the row refuses to highlight in the grid. Otherwise, row selection by mouse works just fine. This code pattern is identical to the sample code here: https://www.ag-grid.com/javascript-grid-refresh/#gsc.tab=0 but it does not work.
Sorry I am not allowed to post the actual code.
The onGridReady means the grid is ready but the data is not.
Use the onFirstDataRendered method:
<ag-grid-angular (firstDataRendered)="onFirstDataRendered($event)">
</ag-grid-angular>
onFirstDataRendered(params) {
this.gridApi.getDisplayedRowAtIndex(0).setSelected(true);
}
This will automatically select the top row in the grid.
I had a similar issue, and came to the conclusion that onGridReady() was called before the rows were loaded. Just because the grid is ready doesn't mean your rows are ready.(I'm using ag-grid community version 19) The solution is to setup your api event handlers after your data has loaded. For demonstration purposes, I'll use a simple setTimeout(), to ensure some duration of time has passed before I interact with the grid. In real life you'll want to use some callback that gets fired when your data is loaded.
My requirement was that the handler resizes the grid on window resize (not relevant to you), and that clicking or navigating to a cell highlights the entire row (relevant to you), and I also noticed that the row associated with the selected cell was not being highlighted.
setUpGridHandlers({api}){
setTimeout(()=>{
api.sizeColumnsToFit();
window.addEventListener("resize", function() {
setTimeout(function() {
api.sizeColumnsToFit();
});
});
api.addEventListener('cellFocused',({rowIndex})=>api.getDisplayedRowAtIndex(rowIndex).setSelected(true));
},5000);
}
Since you want to select the first row on page load, you can do onething in constructor. But your gridApi, should be initialized in OnGridReady($event) method
this.gridApi.forEachNode((node) => {
if (node.rowIndex === 0) {
node.setSelected(true);
}
It's setSelected(true) that does this.
We were using MasterDetail feature, its a nested grid and on expanding a row we needed to change the selection to expanded one.
Expanding a row was handled in
detailCellRendererParams: {
getDetailRowData: loadNestedData,
detailGridOptions: #nestedDetailGridOptionsFor('child'),
}
and withing loadNesteddata, we get params using we can select expanded row as
params.node.parent.setSelected(true)
Hope this helps.
I want to hide the "top" part of all connector labels of a diagram. For this, I tried to set up a script, but it currently hides ALL labels (also the "bottom" labels which I want to preserve):
// Get a reference to the current diagram
var currentDiagram as EA.Diagram;
currentDiagram = Repository.GetCurrentDiagram();
if (currentDiagram != null)
{
for (var i = 0; i < currentDiagram.DiagramLinks.Count; i++)
{
var currentDiagramLink as EA.DiagramLink;
currentDiagramLink = currentDiagram.DiagramLinks.GetAt(i);
currentDiagramLink.Geometry = currentDiagramLink.Geometry
.replace(/HDN=0/g, "HDN=1")
.replace(/LLT=;/, "LLT=HDN=1;")
.replace(/LRT=;/, "LRT=HDN=1;");
if (!currentDiagramLink.Update())
{
Session.Output(currentDiagramLink.GetLastError());
}
}
}
When I hide only the top labels manually (context menu of a connector/Visibility/Set Label Visibility), the Geometry property of the DiagramLinks remains unchanged, so I guess the detailed label visibility information must be contained somewhere else in the model.
Does anyone know how to change my script?
Thanks in advance!
EDIT:
The dialog for editing the detailed label visibility looks as follows:
My goal is unchecking the "top label" checkboxes programmatically.
In the Geometry attribute you will find a partial string like
LLT=CX=36:CY=13:OX=0:OY=0:HDN=0:BLD=0:ITA=0:UND=0:CLR=-1:ALN=1:DIR=0:ROT=0;
So in between LLT and the next semi-colon you need to locate the HDN=0 and replace that with HDN=1. A simple global change like above wont work. You need a wild card like in the regex LLT=([^;]+); to work correctly.
I am using aloglia autocomplete.js and followed the tutorial.
I want to use autocomplete text box with others select2 selectbox.
var client = algoliasearch('YourApplicationID','YourSearchOnlyAPIKey')
var index = client.initIndex('YourIndex');
autocomplete('#search-input', { hint: false }, [
{
source: autocomplete.sources.hits(index, { hitsPerPage: 5 }),
displayKey: 'my_attribute',
templates: {
suggestion: function(suggestion) {
return suggestion._highlightResult.my_attribute.value;
}
}
}
]).on('autocomplete:selected', function(event, suggestion, dataset) {
console.log(suggestion, dataset);
$("#search-input").val(suggestion.full_name.name)
});
Problem is when I clicked anywhere beside that autocomplete box autocomplete disappear and it showed only what I typed before.
I don't want it to disappear. How can I implement it? Thanks for helping.
Please see the example below for detail problem.
Assume you have a simple form with one auto complete input field,two select2 boxes and one submit button. After you choose auto complete filed, when you click anywhere, it changed to default text. I mean, you put "piz" and it shows "pizza". Therefore you select pizza and it display "pizza".Then, you try to choose one select2 box or click anywhere. The autocomplete input field changed back to "piz".
I tried autocomplete:closed , $("#search-input").focusout to set the input field but it just changed back to my query.
To prevent it from disappearing, you can use autocomplete.js's debug option:
autocomplete('#search-input', { hint: false, debug: true }, [ /* ... */ ]);
The complete options list is available on GitHub.
Now I have it. When you need to only select and not to do any action, you can safety remove autocomplete:selected. And make sure your display key is value not object.
It saves me for trouble.
I have a combo box which contains two List Items. Each list item consists of a checkbox and a text message.
Now, I am using a function which looks something like this to uncheck all the checkbox's within the combobox.
public ApplicationReports UnSelectAllCheckBox()
{
int i = 0;
ComboBox someVariable= Application.Library.GetFromWindow(Application.Configuration.LoginWindow.Title).OfType<ComboBox>("corresponding Automation Id");
foreach (ListItem casino in someVariable.Items)
{
someVariable.Item(i).UnCheck();
i++;
}
// someVariable.Item(0).UnCheck();
return this;
}
I am able to uncheck the second checkbox using this approach but not the first one. Unable to identify
what is the problem when it is working fine for the second list item. I am using the recently released version of
white framework. "someVariable" is not a problem. I checked its retrieving the correct combo box while
debugging.
Try this instead:
foreach (ListItem casino in someVariable.Items)
{
casino.UnCheck();
}
No need to use i and make your own loop iterator.
I am trying open & close accordion panes programatically. Here is the simplified version of my code. Even though I set the first pane's selected to false and and second pane's selected to true, only the first pane opens when it loads on the browser (FF3).
var accordionContainer = new dijit.layout.AccordionContainer().placeAt("test");
var accordPane = new dijit.layout.ContentPane({"title": "test", "content":"hello"});
var accordPane2 = new dijit.layout.ContentPane({"title": "test1", "content":"hello1"});
accordionContainer.addChild(accordPane);
accordionContainer.addChild(accordPane2, 1);
accordPane.startup();
accordPane2.startup();
//accordionContainer.selectChild(accordPane2);
accordionContainer.startup();
accordPane.selected = false;
accordPane2.selected = true;
You can do it like this:
accordionContainer.selectChild( accordPane2 );
Assuming you are using dojo 1.3.
dijit.layout.AccordionContainer is a subclass of dijit.layout.StackContainer, which has selectChild defined.
I set up a demo page where you can see this code in action
If you were calling selectChild before startup, that could cause the error you were seeing since the widget wasn't in a 'complete' state. (Sorry, missed the commneted out code before I posted original answer)