I'm trying to implement x-editable into my Rails project and I want to use a list of participants that come from my DB as the source of a 'Select' question.
I've read the documentation and it states that the Source option accepts an array of objects, so I'm formatting this list accordingly. Unfortunately, the 'Select' field appears blank as if the source was not really recognized.
Since I'm using x-editable-rails gem to implement I thought it was a problem on how the gem was rendering the HTML data attributes. However, when I inspected the element in my browser console I don't see what's the problem.
My rendered HTML
<span class="editable editable-click editable-empty" title="Participant" data-type="select" data-model="answer" data-name="participant_id" data-value="" data-placeholder="Participant" data-source="[{"id":1,"username":"Shari","created_at":"2017-08-15T11:23:26.692Z","updated_at":"2017-08-15T11:23:26.692Z"},{"id":2,"username":"Mireya ","created_at":"2017-08-15T11:23:41.760Z","updated_at":"2017-08-15T11:23:41.760Z"},{"id":3,"username":"Edgar ","created_at":"2017-08-15T11:23:53.356Z","updated_at":"2017-08-15T11:23:53.356Z"}]" data-url="/answers/2">Empty</span>
x-editable Documentation advice
[{value: 1, text: "text1"}, {value: 2, text: "text2"}, ...]
Could you advise on a potential solution?
I've found the mistake. I misread the documentation. The keys of the hashes within the array must take the values "value" and "text" literally. So HTML must render:
[{:value=>1, :text=>"Shari"}, {:value=>2, :text=>"Mireya "}, {:value=>3, :text=>"Edgar "}, {:value=>"", :text=>"None"}]
Related
I have this part of my page.
the select-box ID: `GROUPS`
the input-type-number ID: `yr1`
the input-type-text ID: `yr2` (readonly)
The selectbox(GROUPS)has more options under it. It has a query that depends on a field(grpID) with prefixes of A.Y. For example:
20152016AA1
20152016AA2
20152016AA3
yeah this is quite a long kind of ID but please excuse me for that (school kind of project, so needs academic year for primary key purposes). The problem here is that when the yr1 changes its value, I want the select box to change as well. I want it to requery like "Select * from table1 where ID like '%'.$yr1.$yr2.'%'"
yeah its a php code but I am currently under a javascript function(when yr1 changes) where I go like:
document.getElementbyID('GROUPS').innerHTML = 'I want to echo out options under a query which will require the values of yr and yr2 for sql_query correctness'
so yeah, i suppose it's gonna be AJAX but I know nothing about it. I have tried a simple tutorial but still can't get me going. Please help me people :)
well I get some data from php from a data base, and then have it in angularjs like that:
stuff=
[
{name:'stuff1', id:'1'},
{name:'stuff2', id:'2'},
{name:'stuff3', id:'3'},
{name:'stuff4', id:'4'}
];
and i want to add this in a select that it is in a templateCache
-code-
.run(['$templateCache',function($templateCache,$scope){
$templateCache.put('/dialogs/editUser.html',
-code-
+'<select data-ng-options="s.name for s in stuff" data-ng-model="selected_s"> </select>'
-code-
}])
I'm using the angular-dialog-service code from m-e-conroy, and build a custom dialog.
It supposed to be a dialog that is showing up, if you want to edit something, then you should select from 'stuff', but i couldn't figure out how. Maybe someone could gave me a tip, or is that even possible?? The other Code is working, and i dont get an error, just an empty select
The problem is related to that you are using whole object as model and select in angular don't really work with it. Change your code to work with id instead.
<select data-ng-options="s.id as s.name for s in stuff" data-ng-model="selected_s"> </select>
I am trying to get a DGrid working using the following properties:
Drag and Drop
Single Selection
Unfortionatly, this doesn't work quite as easily as I was hoping. I am declaring my DGrid like this:
this._grid = new (declare([OnDemandGrid, DijitRegistry, Selection, DnDGrid]))({
store: this.store,
columns: [
{label: "ID", field:"id", sortable: false},
...
],
touchesToScroll: 2, // Required to enable d&d on mobile
dndSourceType: "grid-row",
getObjectDndType: function(item){
return [item.type ? item.type : this.dndSourceType];
},
selectionMode: "single"
}, this.gridDiv);
this._grid.startup();
For the most part this works well. DnD is working. Selection is mostly working. There is just some strange state on occasion. These are the cases:
Shift Select:
If I perform a shift select then I will get multiple items looking as if they are selected. They will have the following css classes attached to them:
.claro .dojoDndItemAnchor, .claro .dojoDndItemSelected { ... }
When listening to the dgrid-select event, it reports the selected elements correctly.
Attempting to drag the selected elements also works correctly -> only one of them is moved.
Edit: I have found a solution to the Shift Select issue. It is posted as answer below. I still haven't been able to figure out the next issue.
Programmatic Deselect:
If I do the following:
Select an item
Programmaticlly deselect all: this._grid.clearSelection();
Programmatically select another item: this._grid.select(row);
Leaves two items looking selected.
The two items have different styles. The incorrect one has:
.claro .dojoDndItemAnchor, .claro .dojoDndItemSelected { ... }
The correct one has:
.dgrid-selected
As before, when listening to the dgrid-select event, it reports the selected elements correctly.
It seems like this is the default dojo DnD moduel that is causing me issues. Looking at the doc it seems like I need to do something with the selector. Selector has a property called singular but I haven't been able to figure out how/where to set this.
Info on singular: https://dojotoolkit.org/reference-guide/1.9/dojo/dnd.html#id2
RE programmatic deselect, I think you've found a legit dgrid bug. I took a quick look at this and issued a pull request. See if that changeset resolves the issue for you.
It is possible to prevent Shift Select the multiple selection issue by using the dndParams field.
Instantiating the grid like this will solve the issue:
this._grid = new (declare([OnDemandGrid, DijitRegistry, Selection, DnDGrid]))({
store: this.store,
columns: [
{label: "ID", field:"id", sortable: false},
...
],
touchesToScroll: 2, // Required to enable d&d on mobile
dndSourceType: "grid-row",
getObjectDndType: function(item){
return [item.type ? item.type : this.dndSourceType];
},
selectionMode: "single",
dndParams:{singular: true} // ADDED THIS.
}, this.gridDiv);
this._grid.startup();
Still haven't figured out how to deal with programmatic changes.
I am trying to display the count of the field in the footerTemplate.
Follow is the fiddle:
http://jsbin.com/ajoyug/8/edit
However, without the footerTemplate it works fine. But as soon as I add the footerTemplate, it stops working.
Inside the aggregateResult object I am getting the value of count. But then how shall I add it to the footerTemplate?
Kindly help me out.
Thanks!!
The problem is with your approach the grid is rendered twice, the first time on Kendo UI initialization (implicit during the first bind) and the second when you bind the actual data.
The first time the data is still not available and then it fails.
If anyway you want to follow that path you should do:
<div id="myListView" data-role="grid" class="transaction-grid"
data-columns="[
{ field: 'name', title: 'Name', width:'20%' },
{
field: 'age',
title: 'Age' ,
width:'35%',
footerTemplate: 'Total Count: # if (data.age) { # #= age.count # # } #'
}
]"
data-bind="source: dataSource">
</div>
i.e. check if data.age is available and then is when you print it.
Otherwise, I recommend following #UmankantPatil suggestion and do not use data-* but JavaScript for initializing the widgets and binding data.
Check it in the modified version of your JSBin here
I could not explain why it's not working. But I have tried doing your example by other way and it works well.
Here goes the link.
http://jsbin.com/ajoyug/35/edit
i'm developing a mobile WebApp using DHTMLx touch.
i have created combo control using DHTMLx Touch.
i need to add items for this control dynamically.
there are samples explaining how to populate the control using JSON or XML.
But i need to populate in runtime.
i'm open to approach other than loading from JSON/XML
Thanks in advance.
i couldn't find the correct solution.
One Tweak solution is to use a template and create a HTML ccombo box
<head>
<script type="text/javascript">
function drawCombobox()
{
document.getElementByID("comboZone").innerHTML = '<select class= "combostyle"><options...></select>
}
</script>
</head>
<body>
<script>
...
<view:'template',template:'<div id="comboZone"></div>'
</script
I know this is an old question, but I had a hard time finding a proper solution (even now). I'm posting this just in case anyone else is interested.
Okay, so to dynamically populate a DHTMLX Touch Combobox simply include the "datatype" and "url" properties in your combobox definition. Note: these properties do not appear to be included in the official DHTMLX Touch documentation.
Your comobox definition should look something like this:
{ view: 'combobox', label: 'Your Label:', id: 'Your ID', datatype: 'json', url: 'YourSourceFile.php' }
And your source file should output a valid json format that includes a value and an id, for example:
[
{ "value":"My first value", "id":"1" },
{ "value":"My second value", "id":"2" },
{ "value":"My third value", "id":"3" }
]
That's it!