overflowstack9 overflowstack9 - 11 months ago 81
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");


Per the Kendo documentation for combo box:

  placeholder: "Select..."