how to set the data store values in dijit.form.multiselect in dojo 1.6
var comboSiteObj = new dijit.form.MultiSelect({
id: "siteNameEQ",
store: dataSite,
style: "font-family: Arial,Verdana Helvetica, sans-serif;width:195px"
}, "comboSite");
but Store values is not displayed in the Multiselect widget
MultiSelect is different than select on populating the date. for MultiSelect please find the example below :-
var selectElemet = document.createElement('select');
for (var i in gridData.items) {
var opData = document.createElement('option');
opData.innerHTML = gridData.items[i].description;
opData.value = gridData.items[i].value;
selectElemet.appendChild(opData);
}
var myMultiSelect = new dijit.form.MultiSelect({
name: c['srchDimnId'],
id : 'elementDimnSearchGrid' + dimnSearchIndex,
height: '200px'
}, selectElemet).startup();;
where u loop through the list and create an option for each of it, then append it to the select. make sure to pass the select element to the MultiSelect
please refer to the this link for details dojo MultiSelect
Related
I need to insert at the beginning of the list a new option in the select2 control.
I tried with
var data = {
id: -1,
text: 'SISTEMA'
};
var newOption = new Option(data.text, data.id, false, false);
$('#UsuarioId').append(newOption).trigger('change');
But that does not work when data comes from Ajax. In that case, the combobox appears with that option selected and when list is expanded, that option is not there.
Regards
Jaime
Create a variable and initially define that variable as the option you want to include - eg:
var trHTML;
trHTML = '<option value=""></option>'
Then loop through your result set adding each item back to that variable
$.each(x, function (i, item) {
trHTML += '<option value=' + value_name +'>'+ display_name +'</option>';
});
Then append the entire list to the select, and initiate Select2
$('#dropdown_name').append(trHTML);
$('#dropdown_name').select2({
placeholder: "foobar",
allowClear: true
});
This documentation from select2 already explains
https://select2.org/data-sources/ajax
How can I get hold on the <option> that was just selected when listening to the select2:select event? Note that this is simple when using a single-select, as when only one option is selected, that must be the one that was just selected. I would like to also be able to find the option that was just selected when using a multiple-select (<select multiple>).
In the select2:unselect event, the unselected <option> is available through e.params.data.element, but it is not so in the select2:select event. I do not see a reason why the <option> should not be available, since it is created at this time. For the select2:selecting event, however, the <option> is not yet created, and obviously cannot be available when the event is fired.
I've used the following to get the current selected in Select2 (it's for version 4 and up):
// single value
var test = $('#test');
test.on("select2:select", function(event) {
var value = $(event.currentTarget).find("option:selected").val();
console.log(value);
});
UPDATE: Multi Selected Values (with and without last selected)
// multi values, with last selected
var old_values = [];
var test = $("#test");
test.on("select2:select", function(event) {
var values = [];
// copy all option values from selected
$(event.currentTarget).find("option:selected").each(function(i, selected){
values[i] = $(selected).text();
});
// doing a diff of old_values gives the new values selected
var last = $(values).not(old_values).get();
// update old_values for future use
old_values = values;
// output values (all current values selected)
console.log("selected values: ", values);
// output last added value
console.log("last added: ", last);
});
$('#test').on('select2:select', function(e) {
var data = e.params.data;
console.log(data);
});
I'm trying to incorporate a bootstrap toggle into a column of my AwesomeMVC Grid (http://demo.aspnetawesome.com/GridDemo) but the toggle doesn't get rendered correctly even after initializing the bootstrap toggle. This is because the AwesomeMVC grid gets rendered after page load.
I don't want to implement a timeout in initializing the bootstrap toggles as Grid loading times may be different.
Has anyone tried implementing any similar bootstrap plugin with AwesomeMVC?
Here's my code sample.
View
#(Html.Awe().Grid("UserList")
.Url(Url.Action("GetUser", "User"))
.Persistence(Persistence.Local)
.Selectable(SelectionType.None)
.Parent("pagesize", "pagesize")
.Columns(
new Column { Name = "Name", Header = "FullName", Width = 72, SortRank = 1, Sort = Sort.Asc },
new Column { Name = "Active", Header = "Active", Width = 60, ClientFormatFunc = "CustomActive", Group = true}
))
Javascript
//Custom content for Active ClientFormatFunc
var CustomActive = function (GetUserList_Result) {
return "<input type=\"checkbox\" class=\"checkbox-toggle\" data-toggle=\"toggle\" data-on=\"Yes\" data-off=\"No\" data-size=\"small\">";
}
$(function () {
$(".checkbox-toggle").bootstrapToggle();
});
there's the aweload event that you can hook up to, also when you render the checkbox I think you need to set its checked state, so you should end up with something like this:
#(Html.Awe().Grid("UserList")
.Url(Url.Action("GetUser", "User"))
.Persistence(Persistence.Local)
.Parent("pagesize", "pagesize")
.Columns(
new Column { Name = "Name", Header = "FullName"},
new Column { ClientFormatFunc = "CustomActive", Width = 75}))
<script type="text/javascript">
$(function () {
$('#UserList').on('aweload', function () {
$(this).find(".checkbox-toggle").bootstrapToggle();
});
});
//Custom content for Active ClientFormatFunc
var CustomActive = function (model) {
var checked = model.Active ? 'checked = "checked"' : '';
return '<input type="checkbox" ' + checked + ' class="checkbox-toggle" data-toggle="toggle" data-on="Yes" data-off="No" data-size="small">';
};
<script>
I also removed .Selectable(SelectionType.None) because it is like that by default, and also I see that you group by a boolean column (active) not sure if that makes sense, it will just split your grid in 2 groups, Column.Name is not required, it is used for binding to model for sorting/grouping, and it's better to always have at least 1 column without width (if you set width to all columns and the grid width doesn't match they work as percentages)
I have a Country model. In view I have a country dropdown. If country1 is selected, all states of that country must be listed in states dropdown box. If country2 is selected, only 'others' must be displayed in the drop down box. I have jquery to do this. but how do i access a constant defined in ruby in jquery? How do I do that?
$('#country_id').change(function() {
debugger
var country = $('#country_id').val();
if (country != 'India') {
// $('#country_state').val("others");
//$('#country_state').prop("disabled", true);
$('#country_state').empty().append('<option>Other</option>');
$('#phone').focus();
}
else{
$('#country_state').empty().append('<option>indiastates*</option>');
}
})
*indiastates is a constant in ruby. How do i display that as options for dropdown?
you can try grouped_collection_select
here is the railscast http://railscasts.com/episodes/88-dynamic-select-menus-revised
For the second dropdown list, I first created an array with the values i wanted to display in the dropdown.
var states_array = new Array("xxx","yyy");
to append this into dropdown
var states_option;
for(var i=0;i<states_array.length;i++)
states_option += "<option>" + states_array[i] + "</option>";
$school_state.empty().append( states_option );
I am trying to process multiple input selects in a form each one has a unique name and id.
here is my first try, this is broken when y = value.val(); executes
var selects = $("#pmWorkOrderProcedureStepsForm").find('select');
$.each(selects,
function(index, value)
{
y = value.val();
});
I can see in chrome debug that value has a reference to something that looks like
HTMLSelectElement#select-choice-400139826
Where select-choice-400139826 is my first select input name.
How do I get just the name and the selected value of the input from here.
New to jquery mobile!
You can use the following code snippet:
var selects = $("#pmWorkOrderProcedureStepsForm").find("select");
$.each(selects,function(){
name = $(this).attr('name');
value = $(this).val();
});
A demo here - http://jsfiddle.net/5xg6F/
Let me know if that helps.