or
navigationMenu_selectItem("myPage");
function navigationMenu_selectItem(id) { $("#navigationMenu").find("#" + id).addClass("k-state-selected"); $("#contentPane").load("pages/" + id);}$("#selectCategory").kendoDropDownList({
dataTextField: 'Name',
dataValueField: 'Id',
dataSource: data
});
var selectCategory = $("#selectCategory").data("kendoDropDownList");
selectCategory.dataSource.read();
selectCategory.refresh();@(Html.Kendo().ComboBox() .Name("Dim1") .DataTextField("Barcode") .DataValueField("Barcode") .Filter(FilterType.StartsWith) .DataSource(action => action.Read(read => read.Action("GetStockLocationsForComboBoxAjax","StockLocation")).ServerFiltering(true)) .MinLength(3) )<script type="text/javascript"> function onAdditionalData() { return { Barcode: $("#Dim1").val() }; }</script>@(Html.Kendo().ComboBox() .Name("Dim2") .DataTextField("Barcode") .DataValueField("Barcode") .Filter(FilterType.StartsWith) .DataSource(action => action.Read(read => read.Action("GetStockLocationsForComboBoxAjax","StockLocation").Data("onAdditionalData")).ServerFiltering(true)) .MinLength(3) .CascadeFrom("Dim1") )[HttpGet]public JsonResult GetStockLocationsForComboBoxAjax([DataSourceRequest] DataSourceRequest request, string text, string Barcode)To fix these issues i came up with some event handlers that can be easily attached to your autocomplete setup script plus two lines browser specific of CSS code.
JS Autocomplete setup code:
$("input.autoComplete") .kendoAutoComplete({...}).focusin(function () { //If IE the placeholder will be hidden, but typed text
// would be in the placeholders colour, so change it here to your normal
// input color if ($.browser.msie === true) { $(this).css('color', 'black'); } }).focusout(function () { //If IE and the value is empty, the placeholder will be shown;
// make sure it has the right colour if ($.browser.msie === true && $(this).val() === '') { $(this).css('color', '#6d6d6d'); } }).ready(function () { var el = $("input.autoComplete"); var value = $(el).val(); if (value !== $(el).data('kendoAutoComplete').options.placeholder) { //every browser except IE return empty value if input is empty
// but placeholder is shown if (value !== '') { $(el).css('color', 'black'); } } else { //if IE change color for your place holder; if ($.browser.msie === true) { $(el).css('color', '#6d6d6d'); } } });
CSS Code:/*This will make the placeholder invisible in Gecko/WebKit browsers on focus*/input:focus::-webkit-input-placeholder { color: transparent !important; } input:focus:-moz-placeholder {color: transparent !important; }
I hope the code helps others, with the same cross browser issues.