here is my html file :
...
<span data-dojo-id="staffStore" data-dojo-type="dojo.data.ItemFileReadStore" data-dojo-props='data:../../staff.json'></span>
<input data-dojo-type="dijit.form.ComboBox"
data-dojo-props="store: staffStore,
keyAttr: 'id',
searchAttr: 'staff_name',
autoComplete: true,
id: 'staff_name',
name:'staff_name',
value: '' "/>
...
and the json data goes as follows:
{
identifier: "id";,
label: "id",
items: [{id: 982483700, staff_name: "guanyu";},{id: 582057769, staff_name: "zhangfei";},{id: 166802994, staff_name: "zhaoyun";}]
}
here is my problem:
when i use post method i have got 'staff_name' in the searchAttr: 'staff_name' passed to the background-appication ,but i want to have the 'id' in the keyAttr: 'id' passed to background-application.in a word,i have passed made a wrong post action.can someone help me get out of this problem?
Use dijit/form/FilteringSelect not dijit/form/ComboBox.
You can enter any text into a ComboBox therefore it cannot return id which is the reason it returns text (or label or searchAttr). FilteringSelect allows only to chose one of options and therefore it can return id, which it does.
See it in action and experiment at jsFiddle: http://jsfiddle.net/phusick/QzQ38/
Related
I want to show en edit icon next to value in Amount column. This is because the Amount column is actually editable.But to give that as a hint to user, i want to show some edit icon next to it. How to do that in aurelia slickgrid?
Or maybe there is a way to highlight a field on hover ?
I am using aurelia slickgrid and looking if there is some option in aurelia slickgrid itself.
Go to the aurelia slickgrid example link and click on the link of example's source code
When you open it, there is a method called defineGrids
/* Define grid Options and Columns */
defineGrids() {
this.columnDefinitions1 = [
...,
...,
...,
...,
...,
{ id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: myCustomCheckmarkFormatter, type: FieldType.number, sortable: true, minWidth: 100 }
];
... rest of the code
}
The row with id effort-driven is where the icons are placed. On the other words, when you push a data collection(usually array of json object) to the table, values of the data objects with key name effort-driven are given to column with id effort-driven. Furthermore, for each passed value to the column, the method myCustomCheckmarkFormatter reformat it(for example 0 -> false or null -> not filled) and place it to the corresponding table's cell. look at the below method:
// create my custom Formatter with the Formatter type
const myCustomCheckmarkFormatter: Formatter<DataItem> = (_row, _cell, value) => {
// you can return a string of a object (of type FormatterResultObject), the 2 types are shown below
return value ? `<i class="fa fa-fire red" aria-hidden="true"></i>` : { text: '<i class="fa fa-snowflake-o" aria-hidden="true"></i>', addClasses: 'lightblue', toolTip: 'Freezing' };
};
As you can see, when the method is called, it returns an icon such as <i class="fa fa-fire red" aria-hidden="true"></i> which is placed in the table's cell.
I added an edit icon next to Amount,
{
id: "Edit",
field: "edit",
excludeFromColumnPicker: true,
excludeFromExport: true,
excludeFromQuery: true,
excludeFromGridMenu: true,
excludeFromHeaderMenu: true,
minWidth: 30,
maxWidth: 30,
formatter: Formatters.editIcon,
},
and used this custom format from ghiscoding comment:
const customEditableInputFormatter: Formatter = (_row, _cell, value, columnDef, dataContext, grid) => {
const isEditable = !!columnDef.editor;
value = (value === null || value === undefined) ? '' : value;
return isEditable ? `<div style="background-color: aliceblue">${value}</div>` : value;
};
The result is as shown in the picture.
I need to create a filter on a tipical columns created with images: each field is an image with this format:
<img src='http://lab.onclud.com/psm/blackcircle.png' class='notasg'>
I've created a fiddle example here: fiddle
An explication:
there are only 2 diferents status: [assigned/not assigned] although there are 4 diferents images (black, red, yellow and green).
Only black image correspond to not assigned status. The others three ones (red, yellow and green) correspond to assigned status.
As you could see, I've tried to differentiate those status by class HTML tag in img elements (notasg/asgn).
Thanks in advance.
PD:
I'm getting data from a json, so I can't put:
<td data-search="notassigned">
directly on HTML code. As a solution, I've used createdCell (columnDefs option) as you could see on the next updated to create data-search attribute on td element fiddle.
In this one, as you could test, your previously created filter doesn't work. I've tried some solutions, but no one has worked.
Please help me again on this one. Thanks in advance.
You can make use of the datatables HTML5 data-* attributes, and then tell yadcf to rely on this dt feature with the use of html5_data
So your td will look something like
<td data-search="assigned"><img src='http://lab.onclud.com/psm/redcircle.png' class='asgn'></td>
and yadcf init will look like
var oTable = $('#example').DataTable();
yadcf.init(oTable, [
{
column_number: 0,
html5_data: 'data-search',
filter_match_mode: 'exact',
data: [{
value: 'assigned',
label: 'Assigned'
}, {
value: 'notassigned',
label: 'Not assigned'
}]
}]);
Notice that I used filter_match_mode: 'exact', because I used data-search="notassigned" and data-search="assigned", and since the assigned word included inside notassigned I had to tell yadcf to perform an exact search, this can be avoided if you will use unique search term in your data-search= attribute,
See working jsfiddle
Another solution as introduced by kthorngren from datatables forum is to use the following dt init code
var oTable = $('#example').DataTable({
columnDefs: [{
targets: 0,
render: function(data, type, full, meta) {
if (type === 'filter') {
return full[0].search('asgn') >=1 ? "assigned" : full[0].search('notasg') >= 1 ? "notassigned" : data
} else {
return data
}
}
}],
});
and yadcf init (removed html5_data)
yadcf.init(oTable, [
{
column_number: 0,
filter_match_mode: 'exact',
data: [{
value: 'assigned',
label: 'Assigned'
}, {
value: 'notassigned',
label: 'Not assigned'
}]
}
]);
third option - look here
I have a HTML form like this in a client side Amber solution
<form id="myForm1">
Creator: <input type="text" name="creator" />
<br>
Title: <input type="text" name="title" />
<br>
Description: <input type="text" name="description" />
<br>
Doctype: <input type="text" name="doctype" />
<br>
Tags: <input type="text" name="tags" />
</form>
Question
How do I iterate through all of the fields of the form in order to put the content of the fields into a Amber dictionary with the field name as key and the text content as value?
New version of the question after answer by Stephen-Eggermont and MKroenert
How do I get the values of all the fields of the form in order to put them into an Amber dictionary with the field name as key and the text content as value?
Or is there an idiomatic way to create a form and retrieve the values?
Note: The form may be constructed with Amber code if this makes things more readable.
References
https://github.com/amber-smalltalk/amber/wiki/FAQ#how-do-i-get-the-text-value-of-an-input-field
http://api.jquery.com/each/
Edit after answer: FileIn code
The answer provided by MKroenert works fine
Below is his code I tested. It may be filed in directly in a workspace
Widget subclass: #AmberFormExample
instanceVariableNames: 'dictionary inputs'
package: 'TodoList'!
!AmberFormExample methodsFor: 'not yet classified'!
collectValues
inputs do: [ :each |
dictionary at: (each asJQuery attr: 'name')
put: (each asJQuery val).
].
Transcript show: dictionary printString
!
initialize
dictionary := Dictionary new.
inputs := Array new.
!
renderInput: inputName on: html
html p: [
html label with: inputName.
inputs add: (html input id: inputName;
name: inputName;
yourself)]
!
renderOn: html
inputs removeAll.
html form id: 'myForm1'; with: [
#('Creator' 'Title' 'Description' 'Doctype' 'Tags') do: [ :each |
self renderInput: each on: html]].
html button
with: 'Collect Inputfield Values';
onClick: [
self collectValues.
]
! !
I reused the code from this SO question and rewrote it in Amber to address the first part of your question.
Here is how you iterate over all input fields:
(('#myForm1 *' asJQuery)
filter: ':input')
each: [ :thisArg :index |
console log: thisArg ] currySelf
This Amber recipe is required to get access to the JavaScript this.
Printing both name and value of the input fields to the JavaScript console can be done like this:
(('#myForm1 *' asJQuery)
filter: ':input')
each: [ :thisArg :index |
console log: (thisArg asJQuery attr: 'name').
console log: (thisArg asJQuery val)] currySelf
Putting the values into a dictionary:
| dict |
dict := Dictionary new.
(('#myForm1 *' asJQuery)
filter: ':input')
each: [ :thisArg :index |
dict at: (thisArg asJQuery attr: 'name')
put: (thisArg asJQuery val)] currySelf
As for the second part of your question, there is the Web package in Amber which contains Classes for generating HTML pages.
What you do is to create a subclass of Widget and implement the renderOn: html method.
The object passed in as html parameter is of type HTMLCanvas and can be used to create an HTML form like this:
renderOn: html
html form with: [
html input id: 'creator'.
html input id: 'title'.]
Here is a complete example.
Take it as a starting point and be aware that it may not be the most efficient way of doing things
Widget subclass: #AmberFormExample
instanceVariableNames: 'dictionary inputs'
package: 'Examples'
AmberFormExample>>initialize
dictionary := Dictionary new.
inputs := Array new.
AmberFormExample>>renderOn: html
inputs removeAll.
html form id: 'myForm1'; with: [
#('Creator' 'Title' 'Description' 'Doctype' 'Tags') do: [ :each |
self renderInput: each on: html]].
html button
with: 'Collect Inputfield Values';
onClick: [
self collectValues.
]
AmberFormExample>>renderInput: inputName on: html
html p: [
html label with: inputName.
inputs add: (html input id: inputName;
name: inputName;
yourself)]
AmberFormExample>>collectValues
inputs do: [ :each |
dictionary at: (each asJQuery attr: 'name')
put: (each asJQuery val).
].
After implementing this class in a running Amber instance the following code can be used to execute it:
AmberFormExample new appendToJQuery: 'body' asJQuery
There is a lot of duplication in your form. You might want to take a look at HTMLCanvas and how it is used in IDE.
You could add a method renderField: aFieldName on: aCanvasand reuse that 5 times. Did you take a look at Seaside?
The end result should be something like
renderOn: html
html form with: [
#('Creator' 'Title' 'Description' 'Doctype' 'Tags') do: [:each |
self renderField: each on: html]
I'm using a FilteringSelect that use an FilteringSelect as store.
I want to ignore the accented characters that users can enter, and to return all the elements with or without accents. But i don't know what event i have to catch.
Here's my code :
var ccppMemory = new dojo.store.FilteringSelect({
data: centrosPoblado,
idProperty: "id"
});
sboMunicipio = new dijit.form.FilteringSelect({
id: "soMunicipioSelect",
hasDownArrow: false,
placeholder: i18n.tools.searches.ordinary.departmentTown,
store: ccppMemory,
searchAttr: "unitario",
intermediateChanges : true,
queryExpr: "*${0}*",
autoComplete: false,
highlightMatch: "all",
style:"margin-right:5px;width:170px;"
}, "soMunicipioSelect");
sboMunicipio.startup();
To explain better, centrosPoblado is an array that i populate as :
centrosPoblado.push({
id: value.attributes.CODIGO_DANE,
label: value.attributes.NOMBRE_CENTRO_POBLADO,
unitario: value.attributes.DEPTO + " / " + value.attributes.NOMBRE_CENTRO_POBLADO
});
In 'unitario' i have store strings like 'Medellín', ' Bogotá', ....
What i want is that when a user enter medellín, the filterselect ignore and returns 'Medellín' . So what i think i have to do it's to substitute medellin for something like m[eé]d[eé]ll[íi]n, but i don't know where.
Thanks
if anyone is interested, here is the answer :
http://dojo-toolkit.33424.n3.nabble.com/FilteringSelect-avoid-Accented-characters-td4004099.html
You have to overwrite the 'queryEngine' of the Memory that its linked to the FilteringSelect
I have a dojo.data.ItemFileReadStore as follows:
var partyStore = new dojo.data.ItemFileReadStore({
id: 'partyStore',
data: {
label:'name',
items:[
{value:'APPLES', name:['Apples']},
{value:'ORANGES', name:['ORANGES']},
{value:'PEARS', name:['PEARS']}
]}
});
and a dijit.form.FilteringSelect as:
var partyList = new dijit.form.FilteringSelect({
id: "partyLookup",
name: 'partyLookup',
store: partyStore,
searchAttr: "name"}, infoDiv);
How can I make the initially selected value be Oranges?
I have tried various entries for the value in the FilteringSelect so have left it out in this example.
Your data store doesn't seem right. Try changing it to:
var partyStore = new dojo.data.ItemFileReadStore({
identifier: 'value',
items:[
{value:'APPLES', name:'Apples'},
{value:'ORANGES', name:'ORANGES'},
{value:'PEARS', name:'PEARS'}
]
});
You can then set the value of the dijit.
partyList.set('value', 'ORANGES');
I had missed off the "identifier" from the store data. It seems without the identifier being set it indexes them ie. 0,1,2,3,4...
Once I set:
identifier: 'value'
the current value of the FilteringSelect comes back as the 'value' form the data.
Sorry to answer my own question, thanks to anyone who helped or took a look.