Thank you in advance for any information you may provide:
I got the following code, which is also found on http://dojo.telerik.com/@rbordavol/OdUDE
I am trying to have a tabstrip with a dropdownlist on it. This is the way it was coded and was working fine with older versions of Telerik; unfortunately between changes on Chrome and newer versions of Chrome this is not longer working; and we are in big trouble because our sites have a lot of dropdownlists within a tabstrip.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/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.1111/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script></head>
<body>
<div id="divSysInfoArea" >
<div id="divSystemInfo" style="display:none">
</div>
</div>
<div id="tabStrip" style="clear:both">
<ul>
<li id="liGeneralInfo" class="k-state-active">General Info</li>
<li id="liContacts">Privacy</li>
</ul>
<div id="tabGeneralInfo">
<br />
<table style="width:100%" id="tblGeneralInfo">
<tr>
<td style="width:20%"><label>System Name: </label></td>
<td style="width:80%"><label id="lblSysName" style="font-weight:bold;width:320px"></label></td>
</tr>
<tr>
<td style="width:20%"><label>Version: </label></td>
<td style="width:80%"><label id="lblSysVersion" style="font-weight:bold;width:320px"></label></td>
</tr>
<tr>
<td style="width:20%"><label>System Description: </label></td>
<td style="width:80%">
<input id="txtSysDescription" maxlength="200" style="width:550px" />
</td>
</tr>
<tr>
<td>Operated By:</td>
<td><input class="dd-hover" id="kdlOperatedBy" style="width:110px;" /></td>
</tr>
<tr>
<td>Hosted: </td>
<td><input id="kdlHostedPlace" style="width:100px" /></td>
</tr>
<tr>
<td>System Status:</td>
</tr>
</table>
<br />
</div>
<div id="second">
<input id="kdlSecondTab" type="text" />
</div>
</div>
<script>
//constructor, members initialization
var sysInfoId = 13001;
var InventorySystemInfoEditor = function (sysInfoId) {
this.sysInfoId = sysInfoId;
this.sysInfo = null;
this.lnk = null;
};
InventorySystemInfoEditor.prototype = function(){
var sysOwnerGrid;
var contactGrid;
var offices = [], vmOffices;
var sysCategories = [], vmSysCategories;
var sysPurposes = [], vmSysPurposes;
var sysStatus = [], vmSysStatus;
var vmSysInfo;
var wndSysOwnerEditor;
var vmPII;
var stageGrid;
var
initialize = function () {
}
,
load = function () {
lnk = $("#lnkSystem");
var file = "zSysInfo.html";
var sie = this;
$('#divSystemInfo').html("");
$('#divSystemInfo').load(file, function () {
$('#tabStrip').kendoTabStrip();
// sie.tabStrip = $('#tabStrip').kendoTabStrip().data("kendoTabStrip");
//sie.tabStrip.select(0);
var id = 130001
if (id > 0) {
$('#divSystemInfo').show();
loadDDL.call(sie);
}
});
}
,
loadDDL = function() {
var sf = this.sysInfo;
$('#kdlOperatedBy').kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: [{ text: "Accounting", value: "Acct" }, { text: "Finance", value: "Fin" }]
, value: sf.OperatedBy
, change: function (e) {
updateSysInfoStringField(sf.SystemInfoId, "OperatedBy", this.value());
}
});
}
;
return {
load: load
, initialize: initialize
};
}();
$(document).ready(function() {
inventorySysInfoEditor.load();
}
</script>
</body>
</html>