How to check a dijit checkbox with javascript - dojo

I am working a very old codebase. It is using an old version of dijit, so I am having a hard time finding out how to do what I need to do.
There is a dijitcheckbox on a modal, it uses aria-pressed instead of checked, I need to check this box when a user selects a value elsewhere, but I can't get the box to check.

depends a bit on how old the dojo version is....
usually you can do something like
var w = dijit.byId(myWidgetId);
// or var w = dijit.byNode(checkboxDomNode);
w.set('checked', true);
for dojo 1.3 you need to use more specific functions:
w.setChecked(true)
the aria-pressed should be an additional attribute for screenreader, there will be a hidden "real" checkbox that is checked.
btw., the dojo api documentation even has entries for v1.3: http://dojotoolkit.org/api/1.3/dijit/form/CheckBox

Related

DOJO 1.9. FilteringSelect ComboBox scroll to last selected item on show [IE]

How to make dropdown scroll to the last selected option after dropdown is re-opened?
Calling filtering_select_ref.dropdown.set('selected', selected_node_ref) or filtering_select_ref.set('scrollOnFocus', true) did not work for me on IE 11.
If you just need to scroll to the option, you could use win.scrollIntoView(node_ref) from "dojo/window" module as shown in the docs and pass the id or the node reference to the option as an argument.
You may also find these methods interesting to help solve your problem:
filtering_select_ref.openDropDown()
var dropdown = filtering_select_ref.dropdown;
dropdown.selectFirstNode()
dropdown.selectNextNode()
dropdown.selectPreviousNode()
dropdown.selectLastNode()
#Carlos Nantes suggested good options however I was aware of them and my problem with them was that I could not "catch" the moment when dropdown got opened.
I finally found a way to "catch" that moment with filtering_select_ref.watch('_opened', function()...
watch doc can be found here

How to inject CSS into webkit?

On Linux I'm creating a webkit window which needs to display a certain URL.
I'm doing that like the following:
GtkWidget *main_window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
// Create a browser instance
WebKitWebView *webView = WEBKIT_WEB_VIEW(webkit_web_view_new());
// Put the browser area into the main window
gtk_container_add(GTK_CONTAINER(main_window), GTK_WIDGET(webView));
// Load a web page into the browser instance
webkit_web_view_load_uri(webView, "http://example.com");
// Make sure that when the browser area becomes visible, it will get mouse
// and keyboard events
gtk_widget_grab_focus(GTK_WIDGET(webView));
// Show the result
gtk_window_set_default_size(GTK_WINDOW(main_window), 800, 600);
gtk_widget_show_all(main_window);
However, I need to inject some CSS into this to hide a certain checkbox.
How do I inject CSS into the DOM.
I see that I can get the dom like
WebKitDOMDocument *dom = webkit_web_view_get_dom_document(webView);
But from here I can't see how to inject the CSS.
It sounds like the webkit_web_view_run_javascript() answer was a good solution to your specific problem, since you only needed to hide one checkbox.
To answer the general problem of how to inject arbitrary CSS: if you're using a recent version of WebKitGTK+, create a WebKitUserContentManager, call webkit_user_content_manager_add_stylesheet(), and then pass the WebKitUserContentManager when creating your WebKitWebView, either using webkit_web_view_new_with_user_content_manager() or by using g_object_new() manually if you need to set multiple construct-only properties.
Unrelated warning: webkit_web_view_get_dom_document() was removed in WebKitGTK+ 2.6. (The DOM API is only accessible via web process extensions nowadays.) You are using an old, insecure version of WebKitGTK+!
Its not clear which Webkit GTK version you are using, however concepts essentially remain same for both versions. For webkit version 2, its slightly more complicated as DOM manipulation is done on extension side.
You need to reach to the desired element - either by id e.webkit-dom-document-get-element-by-id or by name. This will return you instance of WebElement. If you use by name call, please be ware that there could be multiple elements with same name
From here you can either set the style by setting appropriate style attribute webkit_dom_element_set_attribute or other variations that can deal with styles and css rules.
Or you can take easy option and just execute the javascript that does the same thing by calling webkit_web_view_run_javascript

xpages view picklist custom control

I am using mark t hughes view picklist custom control from open NTF.
Link to control on openNTF
I have set all the paramenters etc, however when I load the page with the control on, I get my custom error page, and the error below in my error logging database
Error on dialog1button5999 null property/event:
1:
Script interpreter error, line=1, col=35: [ReferenceError]
'compositeData' not found
compositeData.picklistButtonClass + " domfindmebutton5999"
This is trying to set the styleClass of a button in the custom control here:
<xp:this.styleClass><![CDATA[#{javascript:compositeData.picklistButtonClass + " domfindmebutton5999"}]]></xp:this.styleClass>
I am also definately passing this parameter is with the default code:
picklistButtonClass="button2"
I also followed the video Here to the letter, and still get exactly the same issue.
Has anyone come across this before or have any pointers as to where I should be looking to resolve it? Im not sure where to start, as all the instructions and video's explain how to complete the custom properties of the control, but there is never any mention of a need to actually modify any code WITHIN the custom control....
Thanks
(as a side note, I am using bootstrap, should this make any difference)
This is because of the theme definition. Look at the Mark Leusink's blog entry here. http://linqed.eu/2014/08/28/xpages-gotcha-modeconcat-in-your-themes/
If a theme has a "concat" definition, that will be computed at a very early phase. To concat values, it needs to compute the initial value. However, in some cases (e.g. Repeat, Custom control, etc.), the initial value cannot be computed at the page-load section.
For such cases, you can override the theme with a special themeId, as Mark suggested.

Dojo 1.4.2 Tree Grid "expando click" event? persist state?

Question:
Given a DOJO TreeGrid, how can I capture the event when a user clicks the expando ("+") button to expand a row, and store the specific row number or associated item's identifier? I'd like to do this for the express purpose of completely deleting the TreeGrid from the DOM, rebuilding it, and restoring it's state once rebuilt (i.e. programmatically expanding the rows that the user has previously expanded).
Background:
So I've got a custom DOJO TreeGrid, hooked up to a custom QueryReadStore, in my app. It was constructed using the following tutorial:
http://www.ibm.com/developerworks/web/library/wa-dojotreegrid/index.html?ca=drs-
Pretty interesting tutorial, but it might be irrelevant to my question because it doesn't really squash any functionality, it only seems to augment it.
Anyway, googling around for a moment, I found a nice function in the DOJO forums that I can use to programmatically expand a row, given the specific row index. Works perfectly.
The problem is that I haven't been able to find a good way to capture the expando click event, and relate it to a specific "parent item row" index in the grid.
Details aside, I'd like to get the row index of every row that the user has expanded, into an array (and delete the index of a row that the user collapses, obviously), so I can destroy this TreeGrid, and faithfully rebuild it, with the user's selections expanded properly.
I'm not really a novice to DOJO, but I'm certainly no expert by any means. I've done a fair bit of googling, and FireBugging, and haven't really been able to find anything that I can use to do this.
Suggestions? Anybody done something similar before? Stupid question with obvious answer that I've missed? I'm totally misguided and am going about it all wrong? Thanks everybody!
Something similar to this would probably work, this is how the dijit.Tree implementation wouldve looked;
var expandedNodes = {}
dijit.tree._onExpandoClick = function (args /* object wrap for args.node */) {
var treeNode = args.node,
path = treeNode.getTreePath(),
id = treeNode.getIdentity();
expandedNodes[id] = path;
}
I am not 100% sure im being strictly correct but for the TreeGrid you will have to look through code of dojox/grid/_TreeView.js (link). The _setOpen would be an entrypoint from which you can 'hook' the onclick action. from there, find the expandoCell.openStates hash, this is a true/false variable set, indexed by itemId. This hash is most likely what you need as your state

Dojo enhancedgrid sorting problem

I am using Dojo enhancedGrid (1.6) with indirectSelection plugin to generate checkboxes. I am having an issue with row selection and sorting.
Here is how to recreate the problem:
Check the checkboxes of the first 2 rows
Sort the grid by clicking on a column
The sort order of the rows changes, but the first 2 rows are still checked, the checkmark doesn't move with the rows.
This issue is present in both dataGrid and enhancedGrid, even on the Dojo example page.
http://dojotoolkit.org/reference-guide/dojox/grid/DataGrid.html
http://dojotoolkit.org/reference-guide/dojox/grid/EnhancedGrid.html
Is this a bug or is there a way to make the checkbox move with the row when sorting?
Yes,it really is.
I'm using dojo 1.7.1 release , and it still has this problem
what's more , when use
grid.rowSelectCell.setDisabled(0, true),
and then use
dijit.byId("dataGrid").rowSelectCell.toggleAllSelection(true);
the disabled checkboxes will still be selected.
badly, use
gridDomNode.selection.getSelected();
will still select the rows with disabled checkboxes
Hope this still helps.
I had the same issue, and found out it is already solved and patched... (at least from dojo version 1.6)
In short, the only thig you need to do is this.
[in your EnhancedGrid] set 'keepSelection' attribute to true,
e.g.
<div dojoType="dojox.grid.EnhancedGrid" keepSelection = true .../>
also, note that there is a precondition: Identifier(id) is required for store, as id is used for differentiating row items
thats it! now any sorting, filtering or pagination actions in the grid will preserve the selections!
More info here:
http://bugs.dojotoolkit.org/ticket/10855
Note: I'm using dojo version 1.6 and the patch mentioned in there is ALREADY applied to the dojo files, so you DO NOT NEED to apply such patch, just add the attribute to the grid, (and ensure your store is identified by the id.)