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).
Related
In a .net MVC app, trying to learn semantic UI. (2.2.13) I've been beating my head against the wall on this one.
I have a remote populated dropdown, that I'm trying to create a default value for at initial page load.
The API is working, returning expected data.
My problem is that when a user 'tabs' into the element, the forceSelection default of the apiSettings forces the selection of the first item in the dropdown, which in this case is not what my default value is. (In this case, say that CAT is the first option in the list)
The desired behavior is keeping 'DOG' as the selected value when tabbed through, and i would like to keep the functionality of 'forceSelection' to prevent a user from leaving the dropdown with something typed that isn't included in the dropdown options.
I'm THINKING that i need a way of passing the current (default) value, and making that the selected value when the dropdown is initialized?
Here's the .js, in a doc ready.
$('.quom').dropdown({
apiSettings: {
url: 'ActualUrlRemoved',
cache: false
},
fields: {
name: 'Animal_Name',
value: 'Animal_Name'
},
onShow: function (val) {
///set active based on val here??
// $(this).val('DOG');
}
});
And the HTML setting the default 'DOG' (and using the "" value as the label) :
<select id="animalTest" name="ANIMAL" class="ui fluid search selection dropdown quom">
<option value="">Animal*</option>
<option value="DOG" selected>DOG</option>
</select>
Figured it out. This works for me.
$('.quom').dropdown({
apiSettings: {
url: 'URLHERE',
cache: false
},
fields: {
name: 'Animal_Name',
value: 'Animal_Name'
},
onShow: function () {
current = $(this).val();
$(this).dropdown('set selected', current);
}
});
I have an ASP.NET MVC web app and trying to use Bootstrap 3 Datepicker for my "month/year" field like the one in demo here:
https://eonasdan.github.io/bootstrap-datetimepicker/#min-view-mode
In that demo, it only allows users to select "year" and "month". Not "days". I want the same functionality in my app. However, in my app, it works the same on first click but on succeeding clicks it shows the "days" selection view. Setting the viewMode to 'years' doesn't fix the problem.
My model is as follows:
public class FilterViewModel
{
public DateTime? StartMonthYear { get; set; }
...
My view is as follows:
<div class="col-sm-3">
#Html.TextBoxFor(model => model.StartMonthYear, new { #class = "month-picker" })
...
<script type="text/javascript">
$(function () {
$('.month-picker').datetimepicker({
viewMode: 'months',
format: 'MM/YYYY',
useCurrent: false
});
});
</script>
The problem is that viewMode only sets the initial view. However, it seems this particular library doesn't provide any way to actually restrict which views are available.
There's an alternate libary that I personally use, which does give you the ability. It's virtually a drop-in replacement, so you shouldn't have to change much to switch over. However, importantly, it provides minView/maxView options you can utilize:
$(function () {
$('.month-picker').datetimepicker({
startView: 'month',
minView: 'month',
format: 'mm/yyyy'
});
});
As you can see there's a few minor differences:
viewMode becomes startView. The view names are also singular month vs. months.
The formatting string is more similar to C# formatting, so you'd use lowercase mm and yyyy.
The default for this library is to use the current date/time, so there's no need for a separate useCurrent option. If you want to specify a different start date/time, you'd use initialDate.
I found a work around which works pretty well:
$(function () {
$('.month-picker').datetimepicker({
viewMode: 'months',
format: 'MM/YYYY',
useCurrent: false
});
$('.month-picker').on("dp.show", function (e) {
$(e.target).data("DateTimePicker").viewMode("months");
})
});
This is based on a reply found here.
This was a bug in the library and solved. I faced same problem and solved by simply downloading latest version.
I tried setting the disableTouchKeyboard option but it did nothing -- at least on iOS/Safari. The options I was specifically using were:
$(".datepicker").datepicker({
autoclose: true,
disableTouchKeyboard: true,
format: 'm/d/yyyy',
startDate: '01/01/1900',
todayBtn: 'linked',
todayHighlight: true,
});
Anyone know what the best way to do this is?
If you are using Bootstrap3 Datepicker: https://eonasdan.github.io/bootstrap-datetimepicker
Just add this property to the input: readonly="readonly"
and this property to options when instantiate the library.
$('#datetimepicker1').datetimepicker({
useCurrent: false,
daysOfWeekDisabled: [0, 6],
format: 'DD-MM-YYYY',
ignoreReadonly: true <------ this property
});
Tested on Safari iPhone and Chrome / Native browser Android.
This is how I've accomplished this but I'd love to know if there are better ways.
Using the same options in the question, I then also made the HTML text box readonly by doing this in my HTML:
#Html.EditorFor(model => model.Date, new { htmlAttributes = new {
#class = "form-control datepicker", #readonly = "true",
}})
This seems to work as JavaScript can still change the value of the field. However, it does make the background of the text box gray (i.e., disabled) and it changes the mouse pointer to the crossed circle icon (not-allowed) which is not desired. To get around that I did this added an inline style:
#Html.EditorFor(model => model.Date, new { htmlAttributes = new {
#class = "form-control datepicker", #readonly = "true",
style = "cursor: default; background-color: #fff"
}})
I tried to override the cursor and background-color in CSS (using !important) but that didn't seem to work in Internet Explorer.
This isn't pretty but it works for me. Still need to see how I could do this in a more robust way (e.g., no hard coding the background color, not having to specify this on all of my date fields, etc.). If anyone knows a better way, I'd very much appreciate it.
I have/had a similar problem like this.
I use a input field type=text where i bind a jQuery datepicker to it. When I select the input field on my mobile (android chrome) I get the datepicker and the keyboard of the phone.
After searching StackOverflow I found some solutions about setting the input field on readonly or disabling the field. The problem with this is when you disable the field it will not be submitted, and when read-only is set my jQuery validator skips the field. So I needed a different solution.
I have now fixed it by letting the datepicker set the field on read only before opening the picker, and removing the readonly when the picker is closed. I have tested it so far on mobile android (chrome and I.E) and i dont get the native keyboard. iphone/ipad is not tested yet but maybe other can check it.
The code is:
$(this).datepicker({
beforeShow: function(input, obj){$(input).prop('readonly', 'readonly');},
onClose: function () {$(this).prop('readonly', false);}});
Just also add attribute readonly in datepicker.
$(".datepicker").datepicker({
format: "dd-M-yyyy",
autoclose: true,
disableTouchKeyboard: true,
Readonly: true
}).attr("readonly", "readonly");
This is an old question but I thought I should share my solution since this question shows up in Google search. If you make the input type a button the keyboard will not show up and you can style the button to look like a text input field if you really need to.
<input type="button" style="background-color:white;border:1px solid #DDD;padding:5px;cursor:text;" value="Enter a Date" id="datepicker">
This quick block of Javascript will allow you to disable keyboard input within Date fields. This snippet is helpful if you need to avoid the virtual keyboard from appearing within the datepicker.
<script type="text/javascript">
jQuery(function() {
jQuery( ".datepicker" ).datepicker({ }).attr('readonly','readonly');
});
</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 table in the following form on a side-panel:
<table>
<tr title='term1'><td>one</td></tr>
<tr title='term2'><td>two</td></tr>
<tr title='term3'><td>three</td></tr>
<tr title='term4'><td>four</td></tr>
</table>
When someone clicks on a row of that column, the title of that row is passed as an argument to a function which displays the search results in the main-panel.
$("#content-display").on('click', 'tr', function (){
searchResults($(this).attr('title'));
});
The title of that row is the search term used in a get request
function searchResults(searchTerm){
$.ajax({
url: "search.php",
data: {term: searchTerm},
success: function(data){
$("#content-display").html(data);
},
dataType: 'html'
});
}
Whenever someone clicks on a row in the table, the new search results replace the old in the #content-display div.
I would like to improve this functionality with jquery ui tabs so that each click on a <tr> element would create a new tab with those search results inside of it instead of replacing the existing search results whenever a new search is done.
How can I write the callback function to the add event so that it would append the dynamically generated content of the search query (search.php?term=dynamicString)?
Here's some sample code of callback function to the add event that adds static content:
var $tabs = $("#tabs").tabs({
tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
add: function (event, ui){
var tab_content = "testing";
$(ui.panel).append(tab_content);
}
});
You can try this.
jQuery UI Tabs support adding new tabs dynamically (you already added code for this).
It provides "add" method to add new items using AJAX
So, if I do this
$( "#tabs").tabs("add", "filename.php", "Search Heading");
It will load content from "firlename.php" when we click on that tab.
Also, we can select any tab using JavaScript.
$('#tabs').tabs('select', tab_index);
It will select any tab with the specified index.
In your case, I assume these two will fit nicely.
Example code will be :
$( "#tabs").tabs("add", "search.php?term=" + search_var, search_var);
$('#tabs').tabs('select', last_index);
You can try this from Google Chrome developer tools' console by going to this URL
http://jqueryui.com/demos/tabs/manipulation.html
Just add the following code in the console.
$( "#tabs").tabs("add", "collapsible.html", "Collapsible"); $('#tabs').tabs('select', 1);
Please let me know if I am missing something.
Friends, please suggest better solutions if any.
Thanks.