Let's say we have a simple Gantt chart, implemented in JavaScript, using AnyChart library:
If the user clicks on Tuesday row, it's automatically highlighted:
Is it possible to do it programatically? I mean, I don't want the user to click on a row, I want to do it with code.
AnyChart provides a wonderful playground to test the library. I created one to have a starting point: Select a row programatically. In the JavaScript code, search for the selectRow function, and do your magic.
function selectRow() {
const idToSelect = "3";
const selected = treeData.search("id", idToSelect);
// highlight selected item
}
To achieve that you should apply true to the selected field of the item meta. For details, check the sample.
Related
SUMMARY: I have a column for ids within an ag-grid table. How can I get a button-click to only display some of the rows (for which I have a list of ids), while not re-writing the whole table?
BACKGROUND: I am using the community version of ag-grid and am using it with Javascript. I have a column with the id numbers in it. When I click a button (or something else eventually, but start with a button for simplicity), is it possible for it to act as a filter within the table, and hence could be undone by clicking another button to clear the filter?
In case that wasn't cleaar, I am looking to do:
1. Click button1
2. Display certain rows within a table whose id numbers are in my list variable
3. Have this button1's action act as a filter that can be undone by a button2 (which could be programmed perhaps like a clear filter button)
Is this possible to do with a quickfilter? Otherwise, if this isn't possible, how could I do this when over-writing the table, whilst still having the option to 'instantly' revert back to the original table
(I don't think I need to add code as I am unsure of how to build in this functionality)
Thanks in advance.
I have an implementation where I have to select from a drop-down (Image or video). On the basis of this selection, Image path field and Alt Text should be displayed in dialog on the selection of Image (other fields should remain hidden)and Video ID and Alt Text should be displayed on selection of Video (other fields should remain hidden)from the drop-down. This entire thing has to be implemented in multi-field. Each multi-field will have drop-down along with fields.
Could anyone help me with this?
On the component create a clientlib -
example
/yourcomponent/clientlib/authoring.js
On authoring.js create the javascript code to handle the hide/show functionality for your fields
Yourcompany.authoring = {
hideFields: function(this, value, sChecked){
//your code goes here
}
}
Using cq5's extJs API
In your AEM instance download the package called Using ExtJS Widgets (v01) from Package Share and install
On the drop-down node add a listeners node of type nt:unstructured and add a property selectionchanged with the following value:
function(this, value, sChecked ) {
Yourcompany.authoring.hideFieds(field, value, isChecked);
}
Hope the below serves your requirement:
http://adobeaemclub.com/toggle-fields-based-on-selection-in-granite-ui-dialogs/
I want to update drop down list in FilteringSelect after set displayValue.
I know that FilteringSelect chose first element from results after set displayValue, but when I open drop down list (openDropDown() function) it has old filter results.
That's because there's a difference between the displayed value and the dropdown. The FilteringSelect widget uses a store to fill the dropdown. If you want the dropdown to change, you will have to change your object in your store too.
Depending on your version of Dojo you will have to work with the dojo/store or dojo/data API. For the dojo/stor API (new versions of Dojo) you have to do something like:
var myItem = filteringSelect.item;
myItem.name = "Testing 1 2 3";
myStore.put(filteringSelect.item);
Based on the ID it will update that object.
An example JSFiddle can be found here. It will replace the displayedValue and the store itself when you click the "Test" button.
UPDATE:
I noticed your answer (you should have commented on me because now I didn't get any notification in my inbox);
If I understand it correctly you want to enter a value programmatically and open the dropdown with the highlighted results. Well, this is possible with:
filteringSelect._startSearch("C");
This is a function the AutoCompleterMixin provided. You can see the result at my updated JSFiddle.
Honestly been looking everywhere..
The traditional 3-dropdown list dynamically populated from database:
1st table gives airport departure
2nd table gives airports choices
from 1st choice
3rd table show routes between 1 and 2.
That works perfectly!!
When passenger chooses a route from the 3rd drop list I want to check if the value from 3rd dropdownlist is represented in a 4th table called "donations"
Some routes are marked for donation possibility where passengers can donate their unused baggagecapacity to charity
My last hurdle is:
when 3rd list is selected --> check for donationpossibilities--> if possible then show a hidden div on submit
...
I've tried and read so much and gotten a lot more clever and I think I have the query to check the values in order, but I'm lost...
Not sure what programming language you are using to load the dropdowns from your database, but one option that you could try is that when you are adding the html option elements to the 3rd dropdown list you could add a data attribute to each, for example:
<option value="route 1" data-can-donate="true">...</option>
Then if you are using jquery you could bind the change event to the 3rd dropdown and do something like this:
$('#ddlRoutes').change(function() {
var canDonate = $('#ddlRoutes > option:selected').data('can-donate');
if (canDonate) {
$('#myDiv').show();
}
};
Obviously this is untested but it may work for what you are trying to do.
I have an asp:ListBox control on my web page. I am trying to select an item in the list using javascript. After looking at the underlying structure I have tried:
catListBoxCtl[0].Selected = true;
Which does indeed set the 'selected' value to true but it doesn't highlight the appropriate row. I am just trying to replicate what a user does when you select a row using a mouse. How do you select a row programatically so that it get's highlighted etc?
Thanks.
I think you're missing the reference to the options. Try:
catLIstBoxCtl.options[0].selected = true;