we are using select2 v4 with the knockout. Initially, we are loading option for select2 at 'select2:open' event but when adding data to select2 Datasource control gets rebuild. we wanted to have dynamic data-bind for select2 without rebuilding the control.
Html file code:
<select class="control" data-bind="select2: { dataSource: temp, placeholder: 'Enter data', originalPlaceholder: 'Enter data',} "></select>
js code:
function initialiseSelect2($element, settings) {
$element.select2(settings); //here select2 element get rebuild
$element.select2('data',settings.datasource); //wanted to have something like this, but not working
Can you please help me in this?
Thanks in advance
Related
I am trying to set default or pre select values in a kendo multiselect which data source is an array.
This is my multiselect:
<kendo-multiselect
v-model="JobStatusFilter"
id="ddlstatusField"
ref="jobStatusSelect"
:auto-bind="true"
:data-source="JobStatusFilterDatas"
:value-primitive="false"
:auto-width="true"
:height="800">
</kendo-multiselect>
I was trying to set up default values using javascript as shown below:
var multiSelectWidget = $("#ddlstatusField").data("kendoMultiSelect");
multiSelectWidget.value("Scheduled");
But seems like it is not possible to access to the value function.
Thanks in advance
Ok, will answer my own question. It worked after I added the script below just after kendo multiselect
<script>
$(document).ready(function () {
$("#ddlstatusField").getKendoMultiSelect().value(["Scheduled", "InProcess"]);
});
</script>
I have been trying to implement the autocomplete and have come across a problem that has stumped me. The first time I call .autocomplete it all works fine and I have no problems. If, however, I call it after I have removed some (unrelated) elements from the DOM and added a new section to the DOM then autocomplete does nothing and reports no errors.
Code:-
$.ajax({
type : 'get',
dataType : 'json',
url : '/finance/occupations',
cache:true,
success:function(data){
occupationList = data;
$('.js-occupation').autocomplete({
source: occupationList,
messages: {
noResults: '',
results: function(){}
},
minLength : 2,
select:function(event, ui){
$('.js-occupationId').val(ui.item.id);
}
});
}
});
The background to this page is that it contains multiple sections that are manipulated as the user moves through them. Hide and show works fine and does not impact on the autocomplete. However, if I do the following:-
var section = $('.js-addressForm:last').clone();
clearForm(section);
$('div.addressDetails').append(section);
$('.js-addressForm:first').remove();
Which gives the user the bility to add multiple addresses on the previous section then the autocomplete stops working.
Any suggestions or pointers on something obvious I am missing?
I have tried to put the initialisation of the autocomplete on an event when the element gets focus and it still does not work.
You have to create the autocomplete after all other underlying objects. If you F12, you will see that the list is "visible", however it is below and hidden by all instances created after it.
If you created a div with inputs (one input being the autocomplete), then you create the automplete then the dialog instances, the autocomplete will never show. If you create the dialog then the autocomplete, no problem. The problem is the z-order
I have faced the same issue. For now to fix this, i'm creating widget on the input once input is in focus. It will help you solve the issue.
You can look for the help on
making sure some event bing only when needed
Sample code will look like this
$( "#target" ).focus(function() {
//I don't care if you manipulated the DOM or not. I'll be cautious. ;)
(function() {
$( "#combobox" ).combobox();
$( "#toggle" ).click(function() {
$( "#combobox" ).toggle();
});
})();
// use a flag variable if you want
});
This solved my problem. Hope its the solution you were looking f
I have a project here that wasn't developed by me.
The project technologies: ASP.NET MVC, jQuery, Bootstrap and KendoUI.
And, it has a little problem.
The KendoComboBox autocompletes the text with the JSON datasource text while you are typing. This is perfect!
But if you subscribe the DataBound event to handle it, this autocomplete doesn't work correctly. It erases what you're typing. And this cause some rage in users.
This Window is the same to create a New Resgister and also to Edit some existing register...
So, the subscribed DataBound does the work to select one item in the ComboBox when editing.
And, the normal behavior of the ComboBox have to autocomplete when typing if we're creating a new one.
This is the New Window. The Autocomplete doesn't work with DataBound subscribed:
This is the Edit Window (the same, but, loaded).
If I remove the DataBound, the autocomplete of the ComboBox works fine:
This my HTML:
<div class="k-field">
<div class="k-fieldlabel">Responsável:</div>
<div style="float: left; width: calc(100% - 100px);">
<input type="text" id="cboResponsavel" name="Responsavel.Id" style="width: 100%;" required validationmessage="Responsável é obrigatório" />
</div>
</div>
In my document.ready function I have:
$("#cboResponsavel").kendoComboBox({
dataTextField: "Nome",
dataValueField: "Id",
dataSource: {
type: "json",
schema: {
data: "data",
total: "total"
},
transport: {
read: {
url: "/Projeto/Projetos/CarregarResponsaveis",
dataType: "json"
}
}
},
filter: "contains",
suggest: true,
dataBound:function(e){
e.sender.value(#(Model == null ? "null" : Model.Responsavel.Id.ToString()))
}
});
My research:
KendoCombobox is not fetching Localsource jsondata
Kendo UI Demos - ComboBox / Basic Usage
Kendo UI Docs - ComboBox - Events - DataBound
KendoUI and json
kendo ui: how to remove a dataItem of a dataSource bound to some comboBox, inside combobox dataBound event
Selecting item in databound combobox
I looked some posts in Kendo UI Fórum too.
I've updated jQuery and KendoUI and still persists...
I am pretty new to KendoUI and I had just fixed some ASP.NET MVC projects, so, I don't know how to fix this issue for now. Please, if someone can help or give me a direction, I will be thankful.
Oh, yeah, I want to fix others Combos with the same problem...
P.S.: If I select a value clicking on it, I can work here, but this is not productive.
I hope I made myself clear enough. Thank you for any help.
Gotcha this error!
The solution is too idiot as me... haha
We, actually, doesn't need that event.
Here is the code that does the same:
$("#cboResponsavel").kendoComboBox({
dataTextField: "Nome",
dataValueField: "Id",
dataSource: {
type: "json",
schema: {
data: "data",
total: "total"
},
transport: {
read: {
url: "/Projeto/Projetos/CarregarResponsaveis",
dataType: "json"
}
}
},
filter: "contains",
suggest: true,
value: #(Model == null ? "null" : Model.Responsavel.Id.ToString())
});
The behavior is working fine for New ones and it brings me the value in Edit mode.
The comment made by Onabai was useful to discover that the DataBound event was not the problem, but trying to set the Value on it.
The solution was change the DataBound for Value, and it works fine!
Hope this help someone else (even this is simple).
I searched a lot on net but couldnt find any solution. I am making a webapp in which I want 2 textbox to get data input from user. I want autocomplete feature in this textbox. The list of tags for autocomplete is available locally. I tried listview but what I want is that after user select some option from autocomplete hints, the textbox should have the selected value, and through some object, i should get the value of textbox to be used by javascript/php. This is a very basic thing, but I'm not able to do. Please help me out
I tried this jsfiddle.net/ULXbb/48/ . But the problem in this is that both listview gets same value after I select something in 1 listview.
In order not to add the same value to both search input, you need to target them using .closest(), .next(), .prev() and .find(). jQuery-Mobile, enhances list-view with data filter in a different way.
Demo
<form>
<input>
</form>
<ul data-role="listview">
<li>
<a>text</a>
</li>
</ul>
The form where the input is located, is on the same level of the ul. To target the input box, you need to use .prev('form').find('input'). Check the demo and the new code below.
$("input[data-type='search']").keyup(function () {
if ($(this).val() === '') {
$(this).closest('form').next("[data-role=listview]").children().addClass('ui-screen-hidden');
}
});
$('a.ui-input-clear').click(function () {
$(this).closest('input').val('');
$(this).closest('input').trigger('keyup');
});
$("li").click(function () {
var text = $(this).find('.ui-link-inherit').text();
$(this).closest('[data-role=listview]').prev('form').find('input').val(text);
$(this).closest('[data-role=listview]').children().addClass('ui-screen-hidden');
});
Thanks #user714852 I have extended your answer just add this line in the script tag:
$("#mylist li" ).addClass('ui-screen-hidden');
It will do wonders.
A working example: Listview Autocomplete - Enhanced
Select2 loads all items from my list successful, the issue I found when try to select a specific value when page loads. Example:
:: put select2 in a specific html element, no value is selected even all items are loaded.
$('#my_id').select2();
:: When the page is loaded I'm trying to show a specific item selected, but doesn't work as expected, because even selected, the select2 doesn't show it.
$('#my_id').val('3'); //select the right option, but doesn't render it on page loads.
How to make a selected option to pop up when pages loads?
Thanks in advance.
#UPDATED
:: How I load all select2 items (sorry, its jade, not pure HTML):
label(for='category') Category
span.required *
select(id='category', style='width:230px', name='category')
option(value='') - Select -
each cat in categories
option(value='#{cat.id}') #{cat.description}
P.S.: All items from my list are loaded.
:: How I initialize the select2:
Just put the following line code on my javascript and it does successful:
$('#category').select2();
:: How I'm trying to select a specific value:
First attempt:
$('#category').select2(
{
initSelection: function(element, callback) {
callback($('#field-category').val());
}
}
);
Second attempt:
$('#category').val($('#field-category').val());
P.S.: #field-category has a value its a hidden input field and works OK.
You need to use the initSelection option to set the initial value.
If you are using a pre-defined select element to create the select2, you can use the following method
$('select').select2().select2('val','3')
Demo: Fiddle
add a trigger change after setting val:
$('#my_id').val('3').trigger('change');
A very simple way to tackle this problem is :
//Step1: Here assuming id of your selectbox is my_id, so this will add selected attribute to 1st option
$('#my_id option').eq(0).prop('selected',true);
//Step2: Now reinitialize your select box
//This will work, if you haven't initialized selectbox
$('#my_id').select2();
or
//This will work, if you have initialized selectbox earlier, so destroy it first and initialise it
$('#my_id').select2('destroy').select2();
This may help:
$('#mySelect2').val('1'); // Select the option with a value of '1'
$('#mySelect2').trigger('change'); // Notify any JS components that the value changed
You can find more on details here:
Thanks
Per here initSelection is deprecated in Select2 4.0 and later.
Using Select2 4.0.0 this worked for me:
$('#my_id').select2({val:3});
HT: #Kokizzu
Here is how to make val in select2 just select the corresponding element.
For some reason, select2 doesn't provide the function to look up selections by id.
init:
$("#thing").select2({data:sources, initSelection: function(item, callback) {
// despite select2 having already read the whole sources list when you
// do .val(n) you have to explicitly tell it how to find that item again.
var to_be_selected = null;
$.each(sources, function(index, thing) {
if (thing.id == item.val()) {
to_be_selected = thing;
return;
}
})
callback(to_be_selected);
}})
normal code
// to load the thing with id==3 from the initial sources list.
$("#thing").select2({'val': 3})
For me I was sending selected in the data set still default option was not getting selected. I had to do something like below to make it work -
$(".select").select2({
data: data_names
});
data_names.forEach(function(name) {
if (name.selected) {
$(".select").select2('val', name.id);
}
});
I had a multiple select2 box with multiple selections.
Step 1 was to put my string of school_ids into an array of integers corresponding to the id of each school, and remove a leading zero. I had to do this in a separate script tag.
<script>
var school_ids = <%= raw JSON.parse(#search.school_ids).map{|x| x.to_i} - [0]%>
</script>
Step two was to create the select box, then set the values, then trigger like so:
<script>
$(document).ready(function() {
$('.select2-multiple').select2({
placeholder: "Hit Enter After Selection",
width: 'resolve'
});
$('.select2-multiple').val(school_ids);
$('.select2-multiple').trigger('change');
</script>
trigger just select2 to set the value
$('#my_id').val('3').trigger("change.select2");
and this will trigger select2 with dropdown
$('#my_id').val('3').trigger("change");
I meet with the same problem, this works for me：
Using Select2 > 4.0.0
$('#select_id').val('3').trigger('change');
var option=$(this);
if(option.val()==data.StudentCourses.CourseId)
{
option.setAttribute('Selected');
}
});
i have initilized select2 because i just want few options selected from them.
If you are using select2 v4.0.0 or above, you can check select2 documentation
// Initialize select2 for all select tags
$('select').select2();
// Initialize select2 for a specific id
$('#my-id').select2();
// Initialize select2 for a class
$('.my-class').select2();
// Update the displayed value after changing the selected option.
$('#my-id').trigger('change');
$('.classname').each(function() {
$(this).siblings().find('.select2selection__rendered').text($(this).text())
})
in my case I were dealing with a class then I used this way to set showing content at select2
<option selected value="your_value">your_text</option>
u need to put this at each select box's first option