I have a edit template using a list view and want a drop down list that is populated from a remote source. But the drop down list just shows the loading icon.
Here is the DropDownList DataSource.
var dsTitles = new kendo.data.DataSource({
transport: {
read: "../data/options/",
dataType: "json"
},
serverFiltering: true,
filter: [{
field: "category_opt",
operator: "eq",
value: "title"
}]
});
and here is what I'm putting in the edit template
<input name="title_clt"
data-bind="value:title_clt"
data-value-field="value_opt"
data-text-field="label_opt"
data-source="dsTitles"
data-role="dropdownlist"
required
validationMessage="Required" />
any help would be great.
Your code is basically fine but there a couple of question that you might have missed.
Since you are defining the DataSource saying data-source="dsTitles" as part of the HTML the order on how you define things is pretty important.
The first thing that gets defined is the HTML. Which means that dsTitle should be global.
Then, after the input is processed is when you should call kendo.init.
So, it should be something like this:
<html>
<head>
<meta charset="UTF-8"/>
<title>OnaBai - KendoUI DrowDownList</title>
<!-- Kendo UI Web styles-->
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css"/>
<link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css"/>
<!-- Kendo UI Web scripts-->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/kendo.web.min.js" type="text/javascript"></script>
<!-- Web Page styling -->
<style type="text/css">
</style>
<script type="text/javascript">
var dsTitles = new kendo.data.DataSource({
transport: {
read: "../data/options/",
dataType: "json"
},
serverFiltering: true,
filter: [{
field: "category_opt",
operator: "eq",
value: "title"
}]
});
$(document).ready(function () {
kendo.init("input");
});
</script>
</head>
<body>
<input name="title_clt"
data-bind="value:title_clt"
data-value-field="value_opt"
data-text-field="label_opt"
data-source="dsTitles"
data-role="dropdownlist"
required
validationMessage="Required" />
</body>
</html>
I think the answer might be as simple as using a Kendo DropDownListFor, which will be populated with the given data.
Related
I had a situation like this, my dropdownlist supposedly it should display GUEST HOUSE based on my userPropertyID=3 but somehow it still not display the right value in dropdownlist. Need your help, thank you for your time.
var userPropertyID = 3;
var propertyTBL = [
{"propertyID":"1","propertyName":"HOTEL"},
{"propertyID":"2","propertyName":"RESORT"},
{"propertyID":"3","propertyName":"GUEST HOUSE"},
{"propertyID":"4","propertyName":"HOME"},
{"propertyID":"5","propertyName":"MOTEL"}];
var dropdownlist = $("#dropdownlist").kendoDropDownList({
dataTextField: "propertyName",
dataValueField: "propertyID",
dataSource: propertyTBL
});
dropdownlist.select(userPropertyID);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.silver.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
<style>*{font-family:Arial;font-size:11px;}</style>
<body>
Property Name:<input id="dropdownlist"/>
</body>
</html>
This happens because you didn't assign correct kendo widget into variable. So it doesn't know kendo's functions.
Correct way would be this (by using .data('kendoDropDownList'))
var dropdownlist = $("#dropdownlist").data('kendoDropDownList');
so in your case, you need change your part of code to this.
var dropdownlist = $("#dropdownlist").kendoDropDownList({
dataTextField: "propertyName",
dataValueField: "propertyID",
dataSource: propertyTBL
}).data('kendoDropDownList');
But remember that indexing starts at 0 (I see in your code, that at index 3, you have again value HOME as is at index 0, so don't get confused by that).
Now calling .value() function will work
dropdownlist.select(userPropertyID - 1);
Eventually, if you set value immediately after you create widget even in your real application, you can use value property to set it up
var dropdownlist = $("#dropdownlist").kendoDropDownList({
dataTextField: "propertyName",
dataValueField: "propertyID",
dataSource: propertyTBL,
value: userPropertyID
}).data('kendoDropDownList');
EDIT: To make it complete, here is your modified code snippet
var userPropertyID = 3;
var propertyTBL = [
{"propertyID":"1","propertyName":"HOTEL"},
{"propertyID":"2","propertyName":"RESORT"},
{"propertyID":"3","propertyName":"GUEST HOUSE"},
{"propertyID":"4","propertyName":"HOME"},
{"propertyID":"5","propertyName":"MOTEL"}];
var dropdownlist = $("#dropdownlist").kendoDropDownList({
dataTextField: "propertyName",
dataValueField: "propertyID",
dataSource: propertyTBL
}).data('kendoDropDownList');
dropdownlist.select(userPropertyID - 1);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.silver.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
<style>*{font-family:Arial;font-size:11px;}</style>
<body>
Property Name:<input id="dropdownlist"/>
</body>
</html>
I'm creating a mobile app using KendoUI in the Telerik AppBuilder. I created a blank view to hold my chart and then went in to start adding the code. I cannot get the chart to appear.
These are the scripts referenced in my index.html:
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="app.js"></script>
<script src="lib/progress/progress.all.min.js"></script>
<script src="dataProviders/progressDataProvider.js"></script>
Here is the code of my chart view:
<div data-role="view" data-title="Audit Tracker" data-layout="main" data- model="app.auditTracker" data-show="app.auditTracker.onShow" data-after-show="app.auditTracker.afterShow">
<div id="chart">
</div>
</div>
And here is the code in the associated JavaScript file:
'use strict';
app.auditTracker = kendo.observable({
onShow: function () {},
afterShow: function () {}
});
(function(parent) {
$("#chart").kendoChart({
title: {
text: "Audit Tracker"
},
series: [
{name: "Audits Completed", data: [5,10,15,3]}
],
categoryAxis: {
categories: ["January", "February", "March", "April"]
}
});
})(app.auditTracker);
What am I doing wrong here? This seems like it should be simple!
Thanks in advance for the help.
My problem was that I did not have the correct framework files referenced in my index.html.
Here are the files that I ended up using as far as the framework goes:
<script src="cordova.js"></script>
<script src="jquery.min.js"></script>
<script src="kendo.all.min.js"></script>
<link rel="stylesheet" href="kendo.common.min.css" />
<link rel="stylesheet" href="kendo.default.min.css" />
<link rel="stylesheet" href="kendo.mobile.all.min.css"/>
I am using Kendo UI MVC version "version:2016:1.112.545" in our project and there is a bug in Cascading ComboBox which can be reproduced in Telerik Demos in ASP.NET MVC, HTML5/JavaScript, JSP and PHP (http://demos.telerik.com/kendo-ui/combobox/cascadingcombobox).
(Note: Text in the ComboBox needs to be typed)
Steps to reproduce:
Visit the given URL.
Type letter b in Categories ComboBox and select Beverages
Type letter c in Products ComboBox and select Chai
Type letter p in Orders ComboBox and select Portland
Now clear the text in Categories ComboBox and it will populate all categories, But don't select any of them, just click outside
Notice that content in all the ComboBoxes are cleared, But Orders dropdown is still accessible and clicking on it will populate all the orders.
(Note: I checked it in Chrome and Firefox, Also just clicking on the dropdowns does not reproduce this issue. Please follow the instructions as it is)
If someone knows a fix or hack please share it.
(Note: My license is expired, so don't have dedicated support or access to premium forum thread)
Nice catch. Its bug in kendo-ui and you can also report this bug into kendo-UI bug tracking.
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<title>Jayesh Goyani</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/jszip.min.js"></script>
<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
<script src="http://rniemeyer.github.io/knockout-kendo/js/knockout-kendo.min.js"></script>
<style>
</style>
</head>
<body>
<input id="categories" />
<br />
<br />
<input id="products" disabled="disabled" />
<br />
<br />
<input id="orders" disabled="disabled" />
<script>
$(document).ready(function () {
var categories = $("#categories").kendoComboBox({
filter: "contains",
placeholder: "Select category...",
dataTextField: "CategoryName",
dataValueField: "CategoryID",
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
}
}
}).data("kendoComboBox");
var products = $("#products").kendoComboBox({
autoBind: false,
cascadeFrom: "categories",
filter: "contains",
placeholder: "Select product...",
dataTextField: "ProductName",
dataValueField: "ProductID",
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
}
}
}).data("kendoComboBox");
var orders = $("#orders").kendoComboBox({
autoBind: false,
cascadeFrom: "products",
filter: "contains",
placeholder: "Select order...",
dataTextField: "Order.ShipCity",
dataValueField: "OrderID",
dataBound: onDataBound,
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Order_Details?$expand=Order"
}
}
}).data("kendoComboBox");
});
function onDataBound(e) {
if ($("#products").data("kendoComboBox").selectedIndex == -1) {
$("#orders").data("kendoComboBox").enable(false);
}
}
</script>
</body>
</html>
Let me know if any concern.
Below code has been thankfully provided by machun for toggling between RTL and LTR directions in Kendo UI widgets.
The code consists of:
HTML:
kendo autocomplete form plus a button to activate support for RTL and LTR language.
Script:
k-rtl class container
datasource (json file)
kendo autocomplete widget initializing + template to show image beside data and to open data links in the same tab
k-rtl class
The problem is that links don't open correctly. It shows a 404 Not Found error plus a /undefined at the end of the URL.
Live demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
</head>
<body>
<div id="container">
<input type="button" id="toggleRTL" value="Activate RTL Support" class="k-button" />
<input id="autocomplete" type="text" />
</div>
</body>
</html>
<script>
/*------k-rtl class container----------*/
function createAutoComplete(){
if($("#autocomplete").data("kendoAutoComplete") != null){
$("#autocomplete").parent().remove();
$("#container").append("<input id='autocomplete' type='text' />")
}
/*------datasource (json file)---------*/
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "json.txt",
dataType: "json",
data: {
q: "javascript"
}
}
},
schema: {
data: "results"
}
});
/*------kendo autocomplete widget initializing + template to show image beside data and to open data links in the same tab----------*/
$("#autocomplete").kendoAutoComplete({
dataSource: dataSource,
dataTextField: "name",
template: '<span><img src="/kendo-autocomplete-test/img/#: id #.jpg" /></span>' + '<span data-href="#:link#">#:name#</span>',
select: function(e) {
var href = e.item.find("span").data("href");
location.assign(href);
}
});
}
/*------k-rtl class----------*/
createAutoComplete();
$('#toggleRTL').on('click', function(event) {
var form = $('#container');
console.log(form);
if (form.hasClass('k-rtl')) {
console.log("test1");
form.removeClass('k-rtl')
} else {
console.log("test2");
form.addClass('k-rtl');
}
createAutoComplete();
})
</script>
I advice to debug your function first then simply check the variable and make sure it contain the right thing. You overlooked a simple thing that your jquery dom selector isn't quite right resulting var href contain "undefined".
Change
var href = e.item.find("span").data("href");
To
var href = e.item.find("span[data-href]").attr("data-href");
Take a look here
I use kendoui window to create a dialog
in first time that i click on some button the kendo window open end of my page
in other time it's work good
my window div is below the body tag
plz help
$('#myModal').html(response);
var accessWindow = $("#myModal").kendoWindow({
actions: ["Maximize", "Close"], /*from Vlad's answer*/
draggable: false,
resizable: false,
title: "ویرایش سوال",
width: "90%",
visible: true
}).data("kendoWindow").center().open();
Your example seems to work fine to me (http://jsfiddle.net/OnaBai/uspmW/) and it should not happened that your window ends placed outside body tag since you are explicitly saying where it should be.
Your full HTML should be something like:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<link href="/styles/kendo.common.min.css" rel="stylesheet" type="text/css"/>
<link href="/styles/kendo.default.min.css" rel="stylesheet" type="text/css"/>
<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/kendo.all.min.js" type="text/javascript"></script>
</head>
<body>
Type the text to add as response here : <input type="text" id="response" class="k-widget k-textbox"/></br>
<button id="button" class="k-button">Show response</button>
<div id="myModal"></div>
<script>
$("#button").on("click", function () {
var response = $("#response").val();
$('#myModal').html(response);
var accessWindow = $("#myModal").kendoWindow({
actions : ["Maximize", "Close"], /*from Vlad's answer*/
draggable: false,
resizable: false,
title : "ویرایش سوال",
width : "90%",
visible : true
}).data("kendoWindow").center().open();
});
</script>
</body>
</html>
As a recommendation, try not creating a new window each time you want to display it. Consider creating it at the beginning or the first time that you need it and then open it each time that you need it.