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!
Related
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"}]
I am working on a DOJO form, and looking to create the base for basic ajax elements.
It will be a multi-tabbed form - with the dynamic fields being created/populated through ajax.
Is there an easier way of making the form more object orientated - where perhaps if a dynamic field is expected to appear under a parent - the api url is part of a data attribute of that field? What is the best practice for dyanmic forms like this.
http://jsfiddle.net/aGCFs/297/
on(dom.byId("getJson"), "click", function (e) {
dojo.xhrGet({
url: "https://api.github.com/users/mralexgray/repos",
handleAs: "json",
load: function (newContent) {
console.info("JSON loaded from server: ", newContent);
},
error: function () {}
});
console.log("getJson button was clicked!");
});
My latest code is here - http://jsfiddle.net/aGCFs/312/
I am using a dojo.place to dynanmically add a dropdown html markup - as the site is likely to pick up the markup for a prepopulated drop downs from transforming xml to html - my remaining issue now though is how do I invoke the select box generated dynamically?
dojo.place('<select data-dojo-type="dijit/form/Select"><option>test1</option><option>test2</option></select>', "div1", "");
I learned some good things here here
What I want to know if it is possible to load these various JS model values, once the model is converted, from fields on the page without having to use
model.ProductId = $("#txtProductId").val();
What I mean, and this may be a dumb question, is there a way to type in data directly into the JS field? Like the #Html.TextBoxFor to load controller model field for JS variable?
My product form looks somewhat like this:
#model ProductModel
<form id="productForm">
<table>
<tr>
<td>#Html.TextBoxFor(o => o.BrandName, new {#id=txtBrandName})
///etc
One option you have is to use a javascript MVC framework like AngularJS, and then this will happen (more or less) automatically for you. You will probably want to create the text input using plain HTML instead of #Html.TextBoxFor.
For example, if you use AngularJS, your view would look like:
<input type="text" ng-model="model.ProductId" />
This creates a two-way data binding between your text box value and model.ProductId. What this means is that any time the user types a value into the text box, model.ProductId will automatically be set to the new value. Also any time you set model.ProductId in javascript, your text box will automatically update.
As a note, if you have any repeat sections in your view using #for loops, you will probably want to convert them to ng-repeat sections (for AngularJS at least).
I've found the best way to do this with a lot of help from Stephen Muecke. What I do is in the main page I have several DIVs:
<div id="divPerson" style="display: none"></div>
<div id="divProduct" style="display: none"></div>
In the JavaScript code I load each DIV with a partial view:
function loadPerson() {
$.ajax({
type: 'POST',
url: '#Url.Action("LoadPerson"),
success: function(data) {
$("#divPerson").html(data);
$("#divPerson").show();
}
});
And the controller method:
public ActionResult LoadPerson()
{
var model = new PersonModel();
return PartialView("PersonPage", model);
}
And in the PersonPage:
$(document).ready(function() {
$.validator.unobtrusice.parse();
});
And each field in this page has a class of 'personForm'.
This is to read the validation tags again after the page has loaded so that clicking next is this in the main page:
function goNext() {
if (!$("#form1").valid()) {
return false;
}
$.ajax({
type: 'POST',
url: '#Url.Action("AddPerson),
data: $(".personForm").serializeArray(),
success: function(data) {
$("#divProduct").html(data);
$("#divProduct").show();
$("#divPerson").hide();
}
});
I do the same thing for the product page by setting a certain class and serializing those controls to send to the controller.
This, to me, is a good balance between using MVC and jQuery to make the page smooth, crisp, and clean, and enhance the user experience.
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 have a dojo dijit.filering.select that populates with values from a dojo.data.ItemFileReadStore.
Everything is working fine except I would like the filtering select to automatically get populated with the first value in the itemFileReadStore. Currently it is loading them as a list of options that are revealed when you click the down arrow, as per spec. I would instead like filteringSelect to be loaded with the first value. How do I do this? For some reason I cant figure it out. Any help would be hugely appreciated!
Kind Regards
Nick Frandsen
<script type="text/javascript">
function updateOptions(){
var itemId = dijit.byId("item_select").attr("value");
var jsonStore = new dojo.data.ItemFileReadStore({ url: "/options/get-options-json/itemId/" + itemId });
optionSelect.attr("store", jsonStore);
}
</script>
<select dojoType="dijit.form.FilteringSelect"
name="option_select"
id="option_select"
labelAttr="name"
required="true"
jsId="optionSelect">
</select>
It's has the feeling of a hack to me (not to mention a bit late for you) but I did this to achieve the same thing:
var valueSet = false;
filteringSelect.store.fetch({
query:{ id:"*" },
onItem : function(item, request) {
if (!valueSet) {
filteringSelect.setValue(request.store.getValue(item, "id"));
valueSet = true;
}
}
});
This might work:
optionSelect.attr('displayedValue', itemLabel);
Where itemLabel is the label of the item you wish displayed (will depend on what your datastore looks like internally). That should set both the textbox content and the hidden field (with the corresponding itemValue).