I am making my first steps with KendoUI for MVC. I have a very simple model that reads a table "Products" from the database and passes it to the view as a strongly type model.
I am using the Model to bind it to the autocomplete to get the suggested values. This works almost fine. This is done using the following Razor syntax:
#(Html.Kendo().AutoComplete()
.Name("productAutoComplete")
.DataTextField("Name")
.BindTo(Model)
.Filter(FilterType.StartsWith)
.Placeholder("Select the product")
.Suggest(true)
)
The problem that I have is that the dropdown list that has the suggestions for the autocomplete appears on top of the textbox itself (instead of right below it).
Please see the image below without typing anything in the autocomplete field:
And with the autocomplete in action:
Do you have any suggestions?
Thanks in advance,
Lefteris
I have overcome the problem by using the latest jQuery library (1.9.1) instead of the one shipped with KendoUI (1.7.1).
I am still not sure why this was not working with 1.7.1 (it is ok with 1.9.0+).
In any case KendoUI latest version (Q1 2013) ships with 1.9.1 jQuery. Unfortunatelly this doesn't seem to be available yes as a trial for KendoUI Complete for ASP.NET MVC
I hope this solution helps someone else.
Lefteris
Related
Here is a block of code that was working and now isn't. I am using Kendo UI for MVC. The error is
CS1593: Delegate 'System.Action' does not take 1 arguments.
This was an older site; opening and running shows the working version as VS2010, I did update Kendo and MVC, but not in this project. Any ideas?
#(Html.Kendo().Window()
.Name("Window")
.Title("Results")
.Content(#<text><div class="Result"></div></text>).Draggable()
.Resizable()
.Visible(false)
.Width(450)
.Actions(actions => actions.Minimize().Maximize().Close())
)
I found the answer.
I had updated from MVC3 to MVC4
This update will break 3 party controls
please read this section of release notes
http://www.asp.net/whitepapers/mvc4-release-notes#_Toc303253815
section: Installing ASP.NET MVC 4 breaks ASP.NET MVC 3 RTM applications.
Item 3 in this section was all that wasn't there. Once corrected, everything works fine.
In case this is of use to someone else I found that
CS1593: Delegate 'System.Action' does not take 1 arguments.
is potentially a bit of a 'catch all' for errors in the function passed to the Content method.
In my case I was using a Kendo.Mvc.UI.Fluent.SplitterPanBuilder (which has a method signature of public SplitterPaneBuilder Content(Func<object, object> content);) and the error came from where I had changed the namespace of a class used and not updated it.
To better illustrate this here is some (pseudo-ish) code which caused the error
verticalPanes.Add()
.Content
(
#<div class="pane-content" id=#panelName>
#(Html.Kendo().Grid<OldInvalidNameSpace.Person>().Name(reportGridName))
</div>
)
and changing to this:
verticalPanes.Add()
.Content
(
#<div class="pane-content" id=#panelName>
#(Html.Kendo().Grid<NewValidNameSpace.Person>().Name(reportGridName))
</div>
)
resolved it.
In my mind the error does really help pinpoint the cause, but maybe knowing this will help someone else!
For me the problem was that I used a model item inside Content() that wasn't present in the model. That also triggered CS1593 error.
I've been using this knockout binding from this jsfiddle (from this initial SO question) for a while and it has been working.
After upgrading to jQuery 1.8.3 and jQuery UI 1.9.2 (jsfiddle), when typing text into the input, after the items list is populated (but not selected!), the input textbox is cleared and you have to restart typing from the beginning. That's annoying as you won't be able to complete your text input because you always have to start from scratch.
If the jqAutoSourceInputValue and the jqAutoSourceValue have the same property name, it works, but then either the id or the input value after the selection are not the desired one.
Looks like the issue is coming from the fact that the binding's update function has a dependency on the observableArray that is being updated. I am not quite sure what has changed in jQuery UI to make the actual behavior change from before, but one fix is to update to Knockout 2.2.1 and access the observableArray via the peek function to avoid a dependency. Something like:
var source = (ko.isObservable(allBindings.jqAutoSource) ? allBindings.jqAutoSource.peek() : allBindings.jqAutoSource) || [];
Updated fiddle: http://jsfiddle.net/rniemeyer/xXuq6/
If you can't update to KO 2.2.1, then there are some other ways to do it as well. Let me know.
Select boxes converted to Select2, do not automatically integrate with unobtrusive validation mechanism in ASP.NET MVC framework.
For example, on a form which contains a regular select box (marked as required in model definition), submitting the form while no options have been selected in the select box, will cause the border and background of the select box to take a reddish color, and by using #Html.ValidationMessageFor, error messages, if any, can be displayed beside the box. However if the select box is converted to a Select2 component, then none of the mentioned features work any more. Even the validation error message will not show up.
It seems that the reason for even the validation error message not showing, is because Select2 changes the display CSS property of the original select box to none (display:none), and I guess the unobtrusive validation script does not bother generating error messages for invisible fields.
Any ideas / solutions?
This issue isn't really specific to Select2, but rather to the jQuery unobtrusive validator.
You can turn on validation for hidden fields as highlighted in this answer.
$.validator.setDefaults({
ignore: ''
});
As the comments noted, it didn't work inside an anonymous callback function within $(document).ready(). I had to put it at the top level.
I've run into similar issues with the select2 plugin. I don't know exactly which features you're using specifically, but in my experience, when you set an element as a select2 in the document.ready event, the plugin will change some of the element's attributes on the fly (inspect one of the elements after your page has finished loading - oftentimes you'll see the id and class properties are different than what you're seeing when you view source).
It's difficult to offer more without actually seeing the code, but here's a few ideas to get you started:
First off, obviously make sure you have the a link to your select2.css stylesheet in the header.
Then, since you're talking about form submissions, I'd recommend you examine whether or not you're getting a full postback or submitting via AJAX (if you're using jQueryMobile, you're using AJAX unless you override it in the jquerymobile.js file or set a data-ajax="false" in your form attributes). You can just look at the value returned by Request.IsAjaxRequest() for this. Obviously if you're submitting via ajax, you won't hit the document.ready event and the select2 won't initialize properly and you'd need to figure out a way around that. Try refreshing the page after the submit and see if it renders the select2 component.
Then I'd suggest examining the elements and see if they're not behaving like you'd expect because you're actually trying to work with classes that the plugin has reassigned at runtime. You can either just adjust your logic, or you can dig into the select2 code itself and change the behavior - it's actually fairly well-documented what the code is doing, and if you hop on the Google group for select2, Igor is usually pretty quick to follow up with questions.
like this
$('select').on('select2:select', function (evt){
$(this).blur();
});
$('body').on('change', 'select.m-select2', function () {
$(this).blur();
})
I am having a html dropdown
<select id="ExternalIp" onchange="externalIpchange()"></select>
I bind the data to dropdown through jquery and a I am passing data from controller which is working properly. I want to change the look and feel of the dropdown so I called a function
$("#ExternalIp").selectbox();
Now the look and feel of drop down is changed but it is not showing the data which I bind to dropdown. I am not getting what is the problem. Plz help
It appears as if the jQuery plugin you are using resets the values bound to the select list.
Look for a method provided within your jQuery plugin to rebind the data which you earlier attached with jQuery or style your element first and then try binding the values.
Cheers!!!
I was wondering how do i know what scripts are required for what Ajaxtoolkit control?
for instance i know for Datetime control these are requried in the following sequence
as seen here
BaseScripts.js
Common.js
DateTime.js
Animations.js
PopupBehavior.js
AnimationBehavior.js
Threading.js
Timer.js
CalendarBehavior.js
For an ASP.NET MVC app, follow these directions.
Note, however, that the jQuery date picker is nicer.