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.

Preserve dynamically changed select values when back button clicked

I have a form which filters through different cars, and it's working perfect.
When a user selects a "Make" the correct sibling "Models" are populated into the next dropdown, so on and so forth.
The problem is that once a user has performed a search, if they click the browser's back button, the select values which are dynamically populated - are back to default!
I am not using ajax to dynamically populate the select fields, but only javascript where I am reading a JSON file and updating the models/series/etc like that.
I have looked at this post: Preserve dynamically changed HTML on back button
And I do not understand how this works, I have also heard about localstorage - what would be the best avenue for me to travel down? Thanks.

Using localStorage for this can be a bit unwieldy (when and how should I clear this value?) and there are security related considerations that may make it an infeasible solution.
Another option is to use a hidden textbox which makes use of the browser's default behaviour.
When a page is loaded after clicking the back button, browsers appear to populate textboxes based on the value contained in it when the user left the page (even if that value was dynamically changed). Note, this is different to how hidden inputs are handled, where dynamic changes are ignored, so you must use a textbox.
<select></select>
<input type="text" style="display:none" />
<script>
// store the dropdown's value in a hidden textbox which is persisted and
// used to populate the dropdown when the back button is used to get here
$('select').on('change', function() {
$('input').val($(this).val());
});
// example showing dynamic population of dropdown
$.ajax({
url: 'api/get-dropdown-options',
success: function(data) {
// dynamically populate the dropdown
$('select').html(data);
// update the dropdown's value based on the persistent value
// retained in the hidden textbox
$('select').val($('input').val());
}
});
</script>

Because the data is dynamically loaded, the browser will not be able to repopulate the previously selected entries when the user goes back to the previous page.
I suggest you make use of the browser's localStorage to store the latest selections and retrieve them when the user goes back. To accomplish that it's as simple as setting a new variable to the localStorage object and later retrieving it like so:
localStorage.make = "BMW";
alert(localStorage.make);
Also here's a more useful example:
select = document.getElementById("make");
if (localStorage.make) {
select.options[localStorage.make].selected = true;
}

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);

ember.js Ember.Select value binding with multiple options

I am trying to create a multiple select input element in Ember, where the content is coming from a hash, containing the label, value and group for the different options. This works fine, however I am not able to access the value binding.
Here is the JSBin; after submitting the form, it logs the selectedField variable to the console which is always 'undefined'.
I would like to implement the binding so that the initial contents of selectedField are preselected.
Update: I now see that the value method is unsupported for multiple selections, but then how do I pre-select and retrieve the selections?

Solved: I need to bind the Select via 'selection' (see JSBin).

How to refresh CGridView control using values from other controls

I have set up a CGridView widget in my application. It displays a list of user accounts. I also have two other drop down lists that basically filter out the users. My problem is that I cannot use the values from the drop down lists to filter out the users. What I actually need is to refresh the list of user accounts based on the selected values from the drop down lists.
How am I supposed to do that with Javascript?

Yes you use Javascript to do this. CGridView's jquery.yiigridview.js has $('#id-of-grid').yiiGridView('update', options) function which can be used for such things:
function(){// in your function
$('#id-of-grid').yiiGridView('update', {data: {value_of_list: $(this).val()}});
}
This will call the url that renders this view with a parameter value_of_list with the value selected in the drop down.
Edit:
The $('#id-of-grid').yiiGridView('update', options) signature indicates that you can specify which grid to update, and also the specific options to be sent. In the above example i have sent only data, i could have also specified which url to send the data to using url option. The full list of options can be seen in the link i have specified above.