Just asked another question but i think I need a much simpler solution.
Therefore i have made this JSFiddle:
http://jsfiddle.net/4EVBL/18/
<select name="selection" class="box1" style="width: 200px; height: 100px;" multiple>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
Is it possible to have the values (1 and 2) selected in the selected "box" on load, so it is possible to see which ones are selected. And is it possible to have the values of the input field divided by comma, so if one add "3" the value in the input fild will be 1,2,3. Can it also be done so that if you remove the value "2" in the select field the input field will say 1,3 ?
Any tips or help is much appreciated :)
You only need to make a couple of changes to your existing code. To populate the select on load, the following will suffice:
$(".box1").val($(".box2").val().split(","));
which populates .box1 with an array of values.
Meanwhile, to populate the textbox when the select box changes, use the .val() method instead of complicating it with :selected selectors and .text() methods:
$(".box1").change(function () {
$(".box2").val($(this).val());
});
JavaScript will automatically do a .toString() of the array into a comma-separated list of selected values.
Related
I have an <ag-grid> using Angular and one thing I'm trying to do is when you click a button to add a row to the grid, I want to be able to focus and start editing the input for that row and that column
In the documentation, I have been able to get this working with various columns in various ag-grids in my app by using code like this:
this.gridApi.startEditingCell({
rowIndex: 0,
colKey: 'description'
});
However in one special case in one of my grids, I'm using the tree and autoGroupColumnDef like this:
<ag-grid-angular
#agGrid
style="width: 100%; height: 100%;"
id="myGrid"
class="ag-theme-balham"
[modules]="modules"
[columnDefs]="columnDefs"
[rowData]="rowData"
[treeData]="true"
[getDataPath]="getDataPath"
[defaultColDef]="defaultColDef"
[frameworkComponents]="frameworkComponents"
[groupDefaultExpanded]="groupDefaultExpanded"
[autoGroupColumnDef]="autoGroupColumnDef"
(gridReady)="onGridReady($event)"
(cellValueChanged)="handleChanges($event)"
(columnMoved)="handleColumnChanges($event)"
[getRowNodeId]="getRowNodeId"
[context]="this"
></ag-grid-angular>
And then in my typescript, I have my autoGroupColumnDef defined in my constructor like this:
this.autoGroupColumnDef = {
editable: true,
headerName: "Account #",
field: "accountNum",
filter: "agGroupCellRenderer",
cellRendererParams: {
suppressCount: true,
innerRenderer: 'AccountNameColumnDisplayer',
},
};
The problem is when I try to run the code like this:
this.gridApi.startEditingCell({
rowIndex: 0,
colKey: 'accountNum'
});
I get a warning that says ag-grid-community.cjs.js:27041 ag-Grid: no column found for accountNum
For the record, the data that I supply to this.rowData includes a property called accountNum
Is there something simple here that I'm not noticing or something I'm doing incorrectly? I have looked all over the ag-grid documentation and can't figure out how to solve this. Thanks in advance!
First off, lets be clear about the colKey. The colKey actually isn't directly tied to the field property. From the docs:
Some of the API methods take Column Key (named colKey) which has type
Column | string. This means you can pass either a Column object (that
you receive from calling one of the other methods) or you pass in the
Column ID (which is a string). The Column ID is a property of the
column definition. If you do not provide the Column ID, the grid will
create one for you (first by trying to use the field if it is unique,
otherwise it will generate an ID).
So, the colKey is either the column object itself, or, the colId you set in the column definition, the field property, or a random string (in that order).
Your first instinct may be to go and set the colId property of your autoGroupColumnDef column. But alas! In my experience, agGrid throws another curve ball at you and this will not work either...why?
This is because agGrid always makes the autoGroupColumnDef colId: ag-Grid-AutoColumn
TLDR: use the colKey "ag-Grid-AutoColumn" for autoGroupColumnDef column!
Cheers!
From what I can guess, I don't think your accountNum field is a part of columnDefs.
You need not provide field in autoColumnGroupDef, instead provide accountNum to actual columnDefs something like this -
{
field: 'accountNum',
hide: true,
}
Behind the scenes autoGroupColumnDefs is nothing but ag-grid group cell renderer on the column denoted with rowGroup=true.
Since your data is already in tree format, ag-grid takes care of grouping.
From the docs -
When the grid is working with Tree Data there is no need to explicitly
specify a Column Group as the grid will use the Auto Column Group.
The auto columns generated by the grid use the ag-Grid provided group
cell renderer. This means that gridOptions.autoGroupColumnDef can also
be used to pass additional properties to further customise how your
groups are displayed.
More details here
I am learning to create reports using spotfire. Could you please help me to understand the feasibility.
Is it possible to change the filters based on the previous selection(filters has to be altered based on the previous section)
For Example:
I have a following table, with three columns.
Filter1 Filter2 Data
Name Name1 test1
Age Age1 test2
Location Location1 test3
I am planning to have filter options based on the column Filter1 and Filter2.
Is it possible to create a drop down with the values "Filter1" and "Filter2"?
Is it possible to modify the list of filter options, based on the first drop down selection.
For example. if "Filter1" is selected in the drop down. The list of filter options should be "Name","Age", "Location".
if "Filter2" is selected in the drop down. The list of filter options should be "Name1","Age1", "Location1".
Thank you
We can also create a cascading drop down list through the following steps.
Create a “property Control – Drop down list” myDropDownList
Select the “Unique Column Value ” to populate the drop down list (values).
Go to “Insert -> Calculated Column”
Use a simple conditional statement something like If([Value1] = ‘${myDropDownList}’, [Value 2], NULL)
Use the newly created column in the text area filter. This will be updated based on the previous section.
Thanks.
I have a solution utilizing JavaScript to effectively toggle between hidden DIVs. I'm not aware of a way to manipulate the filter object and which column it points to in the Text Area through the API. If someone does know a way I'd love to hear it!
Here is my solution with JS:
Set up your Text Area with a Drop Down for your selection as a column selector (with columns of interest chosen through the "Select Columns..." dialogue), a label displaying that selection (we will hide this, I realize it seems redundant), and 2 filters for your 2 columns.
Right click your text area and click Edit HMTL. Utilizing the HTML below, modify your HTML to match. You will want to have the 1st DIV as your drop down, the SPAN as your label which displays that drop down's property, and then the last 2 DIVS (LETTER and NUMBER in my case) as your two filters. Make sure the DIV id name matches your column name exactly.
<DIV><SpotfireControl id="8dc9d8974bde445cab4c97d38e7908d6" /></DIV>
<SPAN id=docProp style="DISPLAY: none"><SpotfireControl id="1311015997cd476384527d91cb10eb52" /></SPAN>
<DIV id=LETTER style="DISPLAY: none"><SpotfireControl id="760ae9ffd71a4f079b792fb5f70ac8b4" /></DIV>
<DIV id=NUMBER style="DISPLAY: none"><SpotfireControl id="488ef4b1289440d5be24b0dd8cfc3896" /></DIV>
Next we will implement the JS. To do so, click the +JS button in your Edit HTML. The JS itself is below. You'll want to change my inputs of LETTER and NUMBER in the first 2 getElementById references where we set them to display:none.
filter = function(){
input = $("#docProp").text().trim() //Take the text from our hidden label and trim it from any white space.
document.getElementById("LETTER").style.display = 'none'; //Reset DIV
document.getElementById("NUMBER").style.display = 'none'; //Reset DIV
document.getElementById(input).style.display = 'block'; //Set new display
}
//Run this function every 333ms or other length of time desired to update your filters.
setInterval(filter,333)
//Larger numbers mean slower response and better performance vs. faster response and worse performance. Tune as necessary.
Alternatively instead of scanning every X milliseconds (can cause some performance drag), you can make a JS button to run it manually. e.g. $("#divIdForButtonPlacement").button().bind('click',filter)
A few images of my setup for testing are shown below. Let me know if you have any questions regarding this.
I'm designing a form like this, where the bottom of the labels in that row align in straight line and the top of the input fields in that row align in straight line.
Owing to some restriction in CSS (we can't fix the height as it will vary), I've to place the labels of the form elements in first row and then place their respective input fields in the next row (such that the input fields are placed just below their labels).
I tested the keyboard & the tab order with this html structure, it works fine.
I'm wondering that the reading order in JAWS or any other screen reader is not going to be right.
Any recommendations for any method to change the reading order
or
is it ok to go ahead with this html structure since the tab order is anywys working ?
In the HTML structure each input should be preceded by its label, rather than having labels on one row and inputs on the next.
However, you have a very particular display you want, and you are supporting IE7 (without display: table), so I think you are best off actually using a table.
You can do this accessibly, if you take these things into account:
Use a basic layout table for your form, and include an extra attribute on the table tag:
<table role="presentation">
That means the table is not a table from an accessibility point of view. (I only ever recommend this when supporting IE7 layouts!) Do not use <th> tags either.
The main thing for screen readers when filling it in would be an explicit label-input relationship.
<label for="input_id">My label</label>
<input type="text" id="input_id">
You can tell if this works by clicking on the label, it should put the cursor in the input.
However, your reading view needs a different approach. When you've got a row of items at the top that relate to a row of items underneath, that is the definition of a data table. So when the page is saved (or however it converts to the reading view), use a data table e.g:
<table>
<tr>
<th>Customer account number</th>
[other <th>s]
</tr>
<tr>
<tr>
<td>023456353434</td>
...
When read out by a screen reader it will read the 'header' (e.g. customer account number) before the content (023...). So the changes are:
Remove the role
Convert the top row into <th>s
It has to be said this is a hack, it is not particularly robust, and I certainly wouldn't recommend it for a responsive site. It is purely the required layout and browser support that lead to this.
without viewing your markup its impossible to tell exactly, but it sounds like you have a tow of inputs and then a row of labels....that's not ideal for accessibility.
you could nest the form control inside the label element, setting the form control's display to block to achieve the same effect, while also increasing usability and clickability.
I'm looking for a way to have a button toggeling the field of my form. When "locking" the form with the toggle button no data can be typed. When "unlocking" data should be allowed to be typed. What I want to achieve with this is simple avoiding users to accidentally type.
I found the code below and it works. Only problem is that it only applies to one input field. I want it to work on more that one.
<input type="checkbox" id="yourBox">
<input type="text" id="yourText">
<script>
document.getElementById('yourBox').onchange = function() {
document.getElementById('yourText').disabled = this.checked;
};
</script>
Mark the fields you want to disable with a CSS class, and then use jQuery to disable them.
jQuery - Disable Form Fields
If you want a pure Javascript solution, just repeat this line
document.getElementById('yourText').disabled = this.checked;
for each field.
Or, you can do something like this this: How to Get Element By Class in JavaScript?. Note that you can assign multiple CSS classes to the same field, so assign another class to identify those fields that need to be disabled.
I have a form and inside it I have a country/city/etc selection.
The form is inside a zone.
When calling the onSelected for make the change of the country/city, when returning I loose the other form data. How can I keep it ?
I think a zone inside the form would help, but I am getting:
Form components may not be placed inside other Form components.
The Ubigeos type is just a component with other selects that are filled from the pais select
My .tml is
<t:zone t:id="datosPersonalesZone">
<form t:type="form" t:id="formulariodatospersonales" t:zone="datosPersonalesZone">
<t:errors/>
Sexo: <select t:type="Select" t:id="sexo" t:value="actual.sexo" model="sexo" />
País: <input t:type="Select" t:id="pais" model="paises" t:value="pais" t:zone="ubigeosZone"/>
<t:zone t:id="ubigeosZone">
<input t:type="Ubigeos" t:id="ubigeo_nacimiento" t:ubigeo="ubigeoNacimiento" t:zone="ubigeosZone"/>
</t:zone>
</form>
Regards !
You either have to submit a form and process country selection differently (i.e. only updating form contents by returning a block) or try using ideas from FormFragment component and TriggerFragment mixin (probably you can't use them directly but you can try extending them to support select components).
Personally, I go with first option - I have a "SubmitFormOnEvent" mixin and attach it to select-s in the form. Then I found that similar approach is demonstrated at http://jumpstart.doublenegative.com.au/jumpstart/examples/javascript/ajaxselect1 -> so you just can start with that example and update it to your needs.