overflowstack9 overflowstack9 - 1 year ago 91
HTML Question

How to display placeholder by default in kendo-ui

I implemented kendo but i want to keep the place holder by default like select planets should be displayed on default.

But the options are displaying by default as seen in the below example when i remove the options the place holder is displaying properly.

But my aim is to achieve to display the place holder by default and also increase the place holder size. Thanks in advance.

<!doctype html>
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
<div id="example" role="application">
<div id="tshirt-view" class="demo-section k-content">
<h4 style="margin-top: 2em;">Solar System</h4>
<select id="size" placeholder="Select Planets..." style="width: 220px;" >
<option />Mercury
<option />Venus
<option />Earth
<option />Mars
<option />Jupiter
<option />Plutz
$(document).ready(function() {
// create ComboBox from input HTML element

// create ComboBox from select HTML element

var select = $("#size").data("kendoComboBox");

Answer Source

Per the Kendo documentation for combo box:

  placeholder: "Select..."