We Keep Coding

Kendo UI bind drop down value from PopupEditor

I have a Kendo Grid which has an option to add a new record using the Popup Editor.
One field from the popup editor is a DropDownList. I have the first record from the dropdown list pre-selected when I open the Popup Editor. Since I pre-selected it, I would like it to be automatically created (bound) within the grid (when pressing "Update") without having to manually select it again.
I have the example script here

Working script: https://dojo.telerik.com/OFinidew/28
Here's a few things that are useful to know:
1. Defining schemas for your dataSources
A schema is a way to define what structure to expect from your data. When a schema is defined, your data will be "bound". As much as possible you'll want to bind your data, because as a last resort you'll end up having to use templates. Normally, Kendo UI will try to figure things out and get things bound automatically, but in special cases you'll have to give it a schema. This is one of those cases.
From the code sample, it seems like the approach of the workaround was to try change the "edit" event of the kendoGrid to immediately select the "Processing" status - Instead, you can define the "Processing" status (value "2") as the defaultValue of the "status" field in your model. But then, you'll need to make sure your custom editor template CAN be bound to, which leads us to..
2. Using the HTML property: data-bind="value:(nameOfYourField)"
When you're making your own editor templates for the kendo popup, it has no way of knowing what part of your HTML to bind to. See the statusDropdownEditorTemplate in the link provided as an example of how this is done.
3. What valuePrimitive means
Normally, a kendoDropDownList will return an object containing both the Text and Value of the selected choice. But this is not what we want in this case, because status is defined as "0", "1", "2" - so we just wanted the value. When you set valuePrimitive to true, you're instructing the kendoDropDownList to only return the value itself, not an object containing everything.

How to pass map from java to javascript?

I have a drop down list and an info tooltip icon beside it, when the user changes the value in the drop down then hover to the info icon, a description for the selection should appear ... as in figure :
Now I have a map of values in the backend where key is the drop down value and value is the description, I want this map to be available to the front end (javascript) , I have many options :
1- on each value change make an ajax call (not good since many calls to the backend with no need as the map is actually static)
2- pass the map as a json object to some html hidden element and then read it ... but the problem was in escaping quotes and other similar stuff in json before setting it to the html element
3- use data attribute .... but the framework I am working on does not support HYML5
4- make one ajax call after page load, read the json and putting it in javascript var .... but again a useless request to the back-end
5- make a global variable in my JSP (using declaration element) .... but this is not thread safe and will cause me to use scriplets
I went to the fifth solution because the map is static and has no much problem with concurrency .... more over the framework I am working on is entirely written with scriplets
Do any one has other recommendation from the solution I mentioned or any other solution ....

2- pass the map as a json object to some html hidden element and then read it ... but the problem was in escaping quotes and other similar stuff in json before setting it to the html element
You can easily solve this problem by using JSON.stringify() and later JSON.parse().
So I suggest to use that approach - stringify the json object and put it in an element, then you can just parse the data.
var obj = {foo: 'bar', arr: ['baz','foobar']};
var el = document.getElementById('jsonData');
// setting the value here -- you would do this in your jsp template
el.setAttribute('data-json', JSON.stringify(obj));
console.log(JSON.parse(el.getAttribute('data-json')));
<div style="display:none" id="jsonData"></div>

This is my approach.
Generate mirror DOM elements for each option.By default those are hidden.
When in the Onchange event of select box or mouse over event of tooltip icon process the message and show.
For JSP loop you can have again 2 approaches. Those are Value and index of select box.
1.you can use value field of combobox(dropdown list/html select) as : ${c.id}
2.you can use loop index as : ${cStatus.index}
<c:forEach items="${somethingList}" var="c" varStatus="cStatus">
<input type="hidden" id="hiddenToolTip${${cStatus.index}" value="you have selected XXX. XXX is blah blah blah">
</c:forEach>
After that in mouse over event of tooltip function:
You can read current selected option selected index or selected value and read value from hidden field
and display tooltip.
var tooltipText=document.getElementById("hiddenToolTip"+ document.getElementById("comboBoxId").value ).value;
alert("here is tooltip text="+tooltipText);

Setting Default Dynamic Values in Select2 2.4.0?

I'm currently using the most up-to-date version of Select2. The select2 box is used to display a list of skills. I am trying to set the default values (for when it's opened) to contain the current skills. I have the information in proper format, I just cannot understand how to set it. The closest I've gotten is using:
//b is array containing list of user selected options
//#e1 is select2 id
for($i=0;$i<b.length;$i++) $('#e1').val(b[$i]).trigger("change");
However, this only displays the LAST option. Which I think is because I'm not allowed to set it in a loop. However I'm unsure how else to do it??
Any current solutions are invalid as of Select v2.4.0 as initSelection and .select2("val", data etc.) was removed.
Any help is appreciated.

My solution was actually very simple and avoided for loops all together.
$('#e1').select2({
//info
}).val(b).trigger("change");
val() in jQuery also accepts arrays.

Search on hidden select2 text

With a standard select2 dropdown box, populated with a list of names from a database call, is there a way to search on hidden items within the search area?
Example:
Select2 box shows to end user "Charlie Watts" but actually the options value holds "Charlie Watts (22)". I want the use to be able to search for 22, but not show it by default to the end user.
TIA

Yep, you can achieve that using the formatResult and/or formatSelection methods. There's a great example of using them in the Select2 Docs: Templating.
In your format function, filter out the " (22)" part of your value and return everything before it.
On a UX note, it could be strange to see matches appear that don't give any indication as to why they match. If that doesn't matter for your use-case, carry on.

Qooxdoo ComboBox Label Function

I'm using Qooxdoo 2.0 ComboBox and SelectBox component.
I'm looking for a solution to programmatically define the label of each combo entry.
Something similar to the labelFunction or labelField properties in the Flex ComboBox *(or spark DropDownList) componenent.
Thanks
Davide

I am not quite sure what your looking for but the data binding controller might be the stuff you need. Just check out the following demo [1] which shows a select box bound to an array containing strings. The select boxes can be replaced by combo boxes as well.
[1] http://demo.qooxdoo.org/current/demobrowser/#data~SelectBox.html

I wanted to populate the ComboBox, or SelectBox, with a list ob object with 2 properties, and then set the Combobox to use the first properties as the label and the second one as value.
A the end I used the model property from the the qx.ui.form.ListItem class. to store additional data for each selection.
This is how I populate the ComboBox item.
for(var x in data){
var tempItem = new qx.ui.form.ListItem(data[x]["name"]);
tempItem.model=data[x];
combo.add(tempItem);
}
And this is How I get the additional values from the selection:
combobox.getSelection()[0].model.id
Davide