Login / Join
Make Combobox non editable
submitted on 26/05/2017 by
Codicode
+ infos
Config
Embed
Share
Make Combobox non editable
by
Codicode
This is how to make the telerik kendoui Combobox non editable and programatically prevent user to enter any character in Combobox, also the user cannot paste any text in it.
If you simply need non editable kendoComboBox(), you could use kendoDropDownList() instead.
In my case i needed it to be enabled or disabled depending on user privileges, so here's the solution i came up with, this prevents key inputs and pasting values.
Framework 1 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.2
Framework 2 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.2
+ Js file(s) :
https://cdn.kendostatic.com/2014.2.903/js/angular.min.js https://cdn.kendostatic.com/2014.2.903/js/kendo.all.min.js
+ Css file(s) :
https://cdn.kendostatic.com/2014.2.903/styles/kendo.common.min.css https://cdn.kendostatic.com/2014.2.903/styles/kendo.default.min.css
Apply
Link :
Direct http link :
Fork button :
Html code :
Embed preview :
Copy the following html code to your page to embed the preview,
To include many previews on a single page, just repeat the first line.
You can change the width, height and border color (bcolor).
<div class="refork-widget" code="4bd" style="width:100%;height:200px;" bcolor="#ccc"></div>
<script type="text/javascript" src="//snippet.run/d/z.js"></script>
HTML
<h2>Account type :</h2> <input id="myinput" placeholder="Select type..." /> <input type="checkbox" id="allowit"> <label for="allowit">Editable</label> </input>
CSS
body{ padding:10px 50px; }
Javascript
$(document).ready(function() { // create a ComboBox from the input HTML element $("#myinput").kendoComboBox({ dataTextField: "text", dataValueField: "value", dataSource: [ { text: "Basic", value: "0" }, { text: "Gold", value: "1" }, { text: "Premimum", value: "2" }, { text: "Vip", value: "3" } ], filter: "contains", suggest: true, index: 2 }); var myinput = $("#myinput").data("kendoComboBox"); myinput.input.on("keydown", function (e) { if (!isOk()) e.preventDefault(); }); myinput.input.bind("paste", function (e) { if (!isOk()) e.preventDefault(); }); }); function isOk(){ return $("#allowit").is(':checked'); }
©2013 Copyright snippet.run
Privacy
-
Terms of use
-
About
-
Contact