Kendo UI 使用札记

前言：本文章只会写 Kendo UI 组件的基础调用方法

AutoComplete

    // html
    <input class="chooseCountry" type="text"/>
   
    // js 
    $(document).ready(function () {
           var data = [
               "中国",
               "中国*",
               "中国断臂山",
               "日本",
               "*"
           ];

           //create AutoComplete UI component
           $(".chooseCountry").kendoAutoComplete({
               dataSource: data,
               filter: "startswith",
               placeholder: "选择你的国家，蠢货！",
               separator: ", "
           });
       });

Button

    // html  
    <p class="button-primary">primary Button</p>
    <p class="button-passed">disabled Button</p>  

    // js
    $(".button-primary").kendoButton({
            enable : true,
            icon : "wolf" // create span inner obj, and span.class = kin-icon, k-i-"this.value";
        });
        $(".button-passed").kendoButton({
            enable : false,
            spriteCssClass : "k-icon k-i-refresh" // create span inner obj, and span.class = this.value;
        });

Calendar

// html
<div class="calendar">
    <!-- kendo will create calendar elements here -->
</div>

// js
$(".calendar").kendoCalendar();

ColorPicker

 

    // HTML
    <!-- color picker -->
    <div class="color_picker_wrap" style="width:400px;">
        <div class="color_view" style="height:60px; padding: 10px; background: #000">
            <h3 style="color: #fff;">COLOR VIEW</h3>
        </div>
        <div class="color_choose"></div>
        <br/>
        <input class="color_customer_choose"/>
    </div>

    　　// JS
　　　　function preview(e) {
　　　　　　$(".color_view").css("background-color", e.value);
　　　　}

        $(".color_choose").kendoColorPalette({
            columns: 4,
            tileSize: {
                width: 35,
                height: 19
            },
            palette: [
                "#e1dca5", "#d0c974", "#a29a36", "#514d1b",
                "#c6d9f0", "#8db3e2", "#548dd4", "#17365d",
                "#e1dca5", "#d0c974", "#a29a36", "#514d1b",
                "#c6d9f0", "#8db3e2", "#548dd4", "#17365d"
            ],
            change: preview
        });

        $(".color_customer_choose").kendoColorPicker({
            value: "#fff",
            buttons: false,
            select: preview
　　　　 });

ComboBox

     // html
    <!-- combobox -->
    <div class="combobox-wrap" style="background:#ddd; padding: 10px;">
        <h3>choose drink</h3>
        <input id="choose_drink" type="text" placeholder="Select drink..."/>

        <h3>size</h3>
        <!-- kendo will create elements replace select, select will hide -->
        <select id="size" name="" placeholder="Select size...">
            <option value="">迷你杯</option>
            <option value="">小杯</option>
            <option value="">中杯</option>
            <option value="">大杯</option>
            <option value="">特大杯</option>
        </select>
        <button id="order-submit">submit order</button>
    </div>

   
            //   JS
            //   create ComboBox from input HTML element;
　　　　　　  // ★create ComboBox by this way... this combox haven not method "value()";

            $("#choose_drink").kendoComboBox({
                dataTextField : "text",
                dataValueField : "value",
                dataSource : [
                    { text: "coffee", value : "1"},
                    { text: "banana juice", value : "2"},
                    { text: "apple juice", value : "3"},
                    { text: "ice juice", value : "4"}
                ],
                filter : "contains",
                suggest : true,
                index : 3
            });

            // create ComboBox from select HTML element
            $("#size").kendoComboBox();

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

            $("#order-submit").click(function() {
                alert('Thank you! Your Choice is:\n\nDrink ID: ' + fabric.value() + ' and Size: ' + select.value());
            });

 

DatePicker

<div class="date_picker_wrap">
　　<input id="datePicker" type="text"/>
</div>

// JS
// create DateTimePicker from input HTML element
$("#dateTimePicker").kendoDatePicker();

 

DateTimePicker

<div class="date_time_picker_wrap">
　　<input id="dateTimePicker" type="text"/>
</div>

// JS
// create DateTimePicker from input HTML element
$("#dateTimePicker").kendoDateTimePicker();

DropDownList

drop down List's mark must use id to create list unit, else it cant use $("#listObj").val()  Or $("#listObj").data("kendoDropDownList").value() to get current selected value data;

 

<select name="" id="demo1">
    <option value="选项11">选项1</option>
    <option value="选项22">选项2</option>
    <option value="选项33">选项3</option>
    <option value="选项44">选项4</option>
</select>

<div id="demo2"></div>

<div id="demo3"></div>

<script type="text/javascript">
    $("#demo1").kendoDropDownList();

    $("#demo2").kendoDropDownList({
        dataTextField: "text",
        dataValueField: "bishi", // #demo2.val() default return bishi(customer property);
        dataSource : [
            {text: "狼哥哥1", bishi: "狼哥哥1"},
            {text: "狼哥哥2", bishi: "狼哥哥2"},
            {text: "狼哥哥3", bishi: "狼哥哥3"},
            {text: "狼哥哥4", bishi: "狼哥哥4"}
        ]
    });

    // following are customer drop down list;
    var demo2Datas =  [
        {text: "项目1", value: "项目11"},
        {text: "项目2", value: "项目22"},
        {text: "项目3", value: "项目33"},
        {text: "项目4", value: "项目44"}
    ];

    $("#demo3").kendoDropDownList({
        dataTextField: "text",
        dataValueField: "value", // #demo2.val() default return value;
        dataSource : demo2Datas // remote dataArray;
    });
</script>

 

 

 

Editor

    // HTML
    <div class="editor" style="height:300px;"></div>
 
    // JS
    $(".editor").kendoEditor();

Grid

可编辑的 Grid 在 editing.html里，并且我写了参数注释

    // HTML
    <div class="grid_basic"></div>

    // JS
    $(".grid_basic").kendoGrid({
                    dataSource: {
                        type: "odata",
                        transport: {
                            // loading XML field;
                            read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
                        },
                        pageSize: 20
                    },
                    height: 550,
                    groupable: true, // enable item drop to group;
                    sortable: true,  // wtf is it?
                    pageable: {
                        refresh: true,  // create refresh button
                        pageSizes: true,
                buttonCount: 5
            },
            columns: [{
                field: "ProductID", // XML Mark;
                title: "ID",
                width: 60  // default width is response;
            }, {
                field: "ProductName",
                title: "名字" // default title with field;
            }, {
                field: "UnitPrice",
                title: "单件价格"
            }, {
                field: "QuantityPerUnit"
            }]
        });

 ListView: binding remote data

    // HTML
    <!-- ListView: binding remote data -->
    <script src="content/shared/js/products.js"></script>

    <div class="demo-section">
        <div id="listView"></div>
        <div id="pager_listview" class="k-pager-wrap"></div>
    </div>

    <script type="text/x-kendo-template" id="template_listview">
        <div class="product_listview">
            <img src="content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image"/>
            <h3>#:ProductName#</h3>
            <p>#:kendo.toString(UnitPrice, "c")#</p>
        </div>
    </script>

    // JS
    $(function (){
            var dataSource = new kendo.data.DataSource({
                data: products, // receive a object arr;  --> content/shared/js/products.js
                pageSize: 21
            });

            $("#pager_listview").kendoPager({
                dataSource: dataSource
            });

            $("#listView").kendoListView({
                dataSource: dataSource,
                template: kendo.template($("#template_listview").html()) // set HTML template; --> script type="text/x-kendo-template"
            });
        });


        // CSS
    <style scoped>
        .demo-section {
            width: 860px;
            margin: 20px auto;
            border: 0;
            background: none;
        }
        #listView {
            padding: 10px 5px;
            margin-bottom: -1px;
            min-height: 510px;
        }
        .product_listview {
            float: left;
            position: relative;
            width: 111px;
            height: 170px;
            margin: 0 5px;
            padding: 0;
        }
        .product_listview img {
            width: 110px;
            height: 110px;
        }
        .product_listview h3 {
            margin: 0;
            padding: 3px 5px 0 0;
            max-width: 96px;
            overflow: hidden;
            line-height: 1.1em;
            font-size: .9em;
            font-weight: normal;
            text-transform: uppercase;
            color: #999;
        }
        .product_listview p {
            visibility: hidden;
        }
        .product_listview:hover p {
            visibility: visible;
            position: absolute;
            width: 110px;
            height: 110px;
            top: 0;
            margin: 0;
            padding: 0;
            line-height: 110px;
            vertical-align: middle;
            text-align: center;
            color: #fff;
            background-color: rgba(0,0,0,0.75);
            transition: background .2s linear, color .2s linear;
            -moz-transition: background .2s linear, color .2s linear;
            -webkit-transition: background .2s linear, color .2s linear;
            -o-transition: background .2s linear, color .2s linear;
        }
        .k-listview:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

 Masked Text Box

//HTML

    <div class="maskedtextbox_wrap">
        <h1>Masked text Box</h1>
        <h3>choose Kind of Currencies</h3>
        <br/>
        <p><input class="initial_price" value="9,999.66"/></p>
        <br/>
        <h3>input </h3>
        <input class="maskedtextbox_choose" value="en-US"/>
        <br/>
        <br/>
        <p><label for="">电话号码</label><input class="phone_number" value="+ 86 18516108504"/></p>
    </div>

    // JS
    $(".phone_number").kendoMaskedTextBox({
            mask: "+ 00 18500000000"
        });

 Menu:大姨妈您杀了我吧，看了kendo自动生成的menu结构..我再也不想用它了！

    //HTML

    <!-- Menu -->
    <div style="height:200px;">
        <ul class="menu" style="width:200px;">
            <li>您大爷
                <ul style="display: none">
                    <li>一号大爷
                        <ul>
                            <li>大爷是基佬</li>
                            <li>大爷是人妖</li>
                            <li>大爷是人妖，所以不能叫基佬</li>
                        </ul>
                    </li>
                    <li>二号大爷</li>
                    <li>三号大爷</li>
                </ul>
            </li>
        </ul>
    </div>

    // JS  
    <script type="text/javascript">
        $(".menu").kendoMenu();
    </script>

MultiSelect

    // HTML

    <!-- MultiSelect -->
    <div class="multiSelect" style="width:400px; font-family: 'microsoft Yahei';">
        <h1 style="color: pink">你丫的突然打鸡血想组织一个活动，所以：</h1>
        <h3>选择朋友</h3>
        <input class="chooseFriend"/>
        <h3>选择活动</h3>

        <!-- ★ multi select must set select.property.multiple = multiple -->
        <select class="chooseEvent" multiple="multiple"/>
            <option>玩小鸭</option>
            <option>玩菊花</option>
            <option>玩泥巴</option>
            <option>玩水</option>
        </select>
    </div>

    // JS
    $(".chooseFriend").kendoMultiSelect({
            dataTextField: "text",
            dataValueField: "value",
            dataSource: [
                { text: "豆芽菜", value: "1"},
                { text: "鸡鸡猫", value: "2"},
                { text: "夜影", value: "3"},
                { text: "凹凸曼", value: "4"}
            ]
        });

　　$(".chooseEvent").kendoMultiSelect().data("kendoMultiSelect");

 Notification

     // HTML    
    <!-- Notification -->
    <div class="notification_wrap">
        <!-- creat pupup html -->
        <span id="popupNotification"></span>
        <span id="staticNotification"></span>

        <button class="static_notification k-button">static notification</button>
        <button class="bottom_right_notification k-button">as a pupup at bottom-right</button>
    </div>

    // JS
　　　　 var popupNotification = $("#popupNotification").kendoNotification().data("kendoNotification");
        var staticNotification = $("#staticNotification").kendoNotification({
            appendTo: "body"  // static popup want to stay's wrap
        }).data("kendoNotification");

        $(".static_notification").click(function(){
            var d = new Date();
            popupNotification.show(kendo.toString(d, 'HH:MM:ss.') + kendo.toString(d.getMilliseconds(), "000"), "error");
        });

        $(".bottom_right_notification").click(function(){
            var d = new Date();
            staticNotification.show(kendo.toString(d, 'HH:MM:ss.') + kendo.toString(d.getMilliseconds(), "000"), "info");
            var container = $(staticNotification.options.appendTo);
            container.scrollTop(container[0].scrollHeight);
        });

 

Numeric Text Box

    <!-- Numeric Text Box -->
    <div class="numericTextBox">
        <div>
            <input class="currency" type="number" value="30" min="0" max="100"/>
        </div>
        <div style="margin-top: 7px;">
            <input class="percentage" value="0.05"/>
        </div>
        <div style="margin-top: 7px;">
            <input class="custom" value="2.00"/>
        </div>
        <div style="margin-top: 7px;">
            <!-- 此格式等同于在接下来的JS代码中的组件调用中设置参数 -->
            <input class="numeric" type="number" value="17" min="0" max="100" step="1"/>
        </div>
    </div>


    <!-- JS -->
    <script type="text/javascript">
        $(".currency").kendoNumericTextBox({
            format: "c",
            decimals: 2 //小数数位
        });

        $(".percentage").kendoNumericTextBox({
            format: "p0",
            min: 0,
            max: 0.4,
            step: 0.01
        });

        // custom numeric text box;
        $(".custom").kendoNumericTextBox({
            format: "0.00 克拉",
            min: 0,
            max: 12,
            step: 0.01
        });

        $(".numeric").kendoNumericTextBox();
    </script>

PanelBar 竖式手风琴菜单

<!-- panelBar -->
    <div class="panelBar_wrap">
        <ul class="panelBar">
            <li>
                <h2>这是标题</h2>
                <div>
                    <p>这全是内容</p>
                    <p>这全是内容</p>
                    <p>这全是内容</p>
                </div>
            </li>
            <li>
                <h2>这是标题</h2>
                <div>
                    <p>这全是内容</p>
                    <p>这全是内容</p>
                    <p>这全是内容</p>
                </div>
            </li>
            <li>
                <h2>这是标题</h2>
                <div>
                    <p>这全是内容</p>
                    <p>这全是内容</p>
                    <p>这全是内容</p>
                </div>
            </li>
        </ul>
    </div>

    <!-- JS -->
    <script type="text/javascript">
        $(".panelBar").kendoPanelBar({
            expandMode: "single"
        });
    </script>

 Progress Bar

     <!-- progress Bar -->

    <div class="progressBarWrap">
        <h2>who are u favorite one</h2>
        <ul>
            <li>
                <label for="">你第一喜欢的人</label>
                <select id="prBar1" name="">
                    <option value="dad" selected="selected">爸爸</option>
                    <option value="mom">妈妈</option>
                    <option value="hao">豪仔鸡</option>
                </select>
            </li>
        </ul>
        <ul>
            <li>
                <label for="">你第二喜欢的人</label>
                <select id="prBar2" name="" >
                    <option value="dad">爸爸</option>
                    <option value="mom" selected="selected">妈妈</option>
                    <option value="hao">豪仔鸡</option>
                </select>
            </li>
        </ul>
        <ul>
            <li>
                <label for="">你第三喜欢的人</label>
                <select id="prBar3" >
                    <option value="dad">爸爸</option>
                    <option value="mom">妈妈</option>
                    <option value="hao" selected="selected">豪仔鸡</option>
                </select>
            </li>
        </ul>
        <ul class="progressResults">
            <li>
                <h4>"爸爸"</h4>
                <div class="dad"></div>
            </li>
            <li>
                <h4>"妈妈"</h4>
                <div class="mom"></div>
            </li>
            <li>
                <h4>"豪仔鸡"</h4>
                <div class="hao"></div>
            </li>
            <li>
                <h4>其他人</h4>
                <div class="another"></div>
            </li>
        </ul>
        <button class="progressBtn">vote submit</button>
    </div>


    <!-- JS -->

    <script type="text/javascript">
        function progressDemo(){ var progressbars = []; $(".progressResults div").each(function () { var pb = $(this).kendoProgressBar({ min: 0, max: 100, type: "percent", animation: { duration: 600 } }).data("kendoProgressBar"); progressbars.push(pb); }); $(".progressBarWrap select").kendoDropDownList(); $(".progressBtn").click(function () { var first = $("#prBar1").val(); var second = $("#prBar2").val(); var third = $("#prBar3").val(); $.each(progressbars, function (i, pb) { pb.value(0); // setting progress bar default progressing;
 }); if (first !== "" && first !== second && second !== "" && second !== third && first !== third) { $("." + first).data("kendoProgressBar").value(100); $("." + second).data("kendoProgressBar").value(70); $("." + third).data("kendoProgressBar").value(40); $.each(progressbars, function (i, pb) { // setting not be voting's progressbar's progressing;
                        if (pb.value() == 0){ pb.value(5); } }); } else { alert("please select different people to vote it"); } }); } progressDemo(); </script>

scheduler //我的亲姨妈啊，您是不知道这个插件有多复杂- -;

slider 

　　<!-- slider -->
    <div class="sliderWrap">
        <input class="sliderVertical" value="500"/>
        <div style="height: 40px;"></div>
        <input class="sliderHorizontal"/>
    </div>


    <script type="text/javascript">
        $(".sliderVertical").kendoSlider({
            min: 0,
            max: 1000,
            smallStep: 100, // 每次点击按钮的 step
            largeStep: 200 // 刻度
        }).data("kendoSlider");

        $(".sliderHorizontal").kendoSlider({
            orientation: "vertical",
            min: -20,
            max: 20,
            value: 10,  // default point, u can also setting input.value;
            smallStep: 1,
            largeStep: 10,
            showButtons: false
        });
    </script>

sortable

    <!-- sortable -->
    <div class="sortableWrap" style="margin-left: 400px;">
        <ul class="sortable-basic">
            <li class="sortable">狼哥哥<span>handsome</span></li>
            <li class="sortable">豆芽菜<span>dude</span></li>
            <li class="sortable">鸡鸡猫<span>dude</span></li>
            <li class="sortable">凹凸曼<span>idiot</span></li>
            <li class="sortable disabled">船长<span>disabled item</span></li>
            <li class="sortable disabled">船长老婆大人<span>disabled item</span></li>
            <li class="not-sortable">猪头<span>not sortable item</span></li>
        </ul>
    </div>
    <style type="text/css">
        .sortable-basic li{ height:40px; line-height: 40px; background: lightcyan; margin-bottom: 5px;}
        .sortable-basic .disabled{ background: pink;}
        .sortable-basic .not-sortable{ background: grey;}
        li.hint{display: block; width: 200px;}
        li.hint {
            position: relative;
            display: block;
            width: 200px;
            height:40px;
            background-color: #52aef7;
            color: #fff;
        }

        li.hint:after {
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            border-left: 6px solid #52aef7;
            position: absolute;
            right: -6px;
            top: 8px;
        }

        li.hint:last-child {
            border-radius: 4px;
        }

        li.hint span {
            color: #fff;
        }
    </style>
    <script type="text/javascript">
        $(".sortable-basic").kendoSortable({
            hint:function(element) {
                return element.clone().addClass("hint");    // when draging, auto create draging element: "<li></li>"  and this statement is setting the mark's CSS;
            },
            placeholder:function(element) {
                return element.clone().addClass("placeholder").text("drop here");   // when draging, auto create placeHolder element: "<li></li>"  and this statement is setting the mark's CSS && text;
            },
            filter: ".sortable", // only abled filter's selector to sortable;
            disabled: ".disabled", // cant drop self;
            cursor: "url('content/web/sortable/grabbing.cur'), default",
            // coursor image;
            cursorOffset: { // basic from cursor;
                top: -10,
                left: -230
            }
        });
    </script>

TimePicker

basic using

    <!-- time Picker -->
    <input id="timePicker" type=""/>
    <script type="text/javascript">
        $("#timePicker").kendoTimePicker();
    </script>

range time picker

<!-- time Picker -->
    <input id="timePicker_start" type="" value="8:00 AM"/>
    <input id="timePicker_end" type="" value="8:30 AM"/>
    <script type="text/javascript">
        function timePickerDemo(){
　　　　　　　/** 这段 start.onchange时执行的函数，狼哥哥还看不懂- - */
            function startChange() {
                var startTime = start.value();

                if (startTime) {
                    startTime = new Date(startTime);

                    end.max(startTime);

                    startTime.setMinutes(startTime.getMinutes() + this.options.interval);

                    end.min(startTime);
                    end.value(startTime);
                }
            }

            // init star timepicker;
            var start = $("#timePicker_start").kendoTimePicker({
                change: startChange
            }).data("kendoTimePicker");

            // init end timepicker
            var end = $("#timePicker_end").kendoTimePicker().data("kendoTimePicker");

            // define min/max range;
            start.min("8:00 AM");
            start.max("10:00 PM");

            // define min/max range;
            end.min("8:00 AM");
            end.max("11:30 PM");
        }
        timePickerDemo();
    </script>

ToolTip

basic demo

    <div class="tooltipWrap">
        <h2>ToolTip</h2>
        <ul id="tooltip">
            <li title="当然是剁椒鱼头啦！">湖南的美食 - 鼠标移上来</li>
            <li title="回锅肉！必须是它！">四川的美食 - 鼠标移上来</li>
            <li title="上海菜很难吃！甜甜的..">上海的美食 - 鼠标移上来</li>
        </ul>
    </div>
    <style type="text/css">
        .tooltipWrap{position: relative; width:500px;}
        .tooltipWrap li{position: relative; line-height: 40px; margin-bottom: 5px; background: pink;}
        .tooltipWrap .k-animation-container{left: 0;}
    </style>
    <script type="text/javascript">

        $(document).ready(function() {
            var tooltip = $("#tooltip").kendoTooltip({
                filter: "li",
                width: 120,
                position: "bottom" // value: top right bottom left;
　　　　　　　　　// content: this.title;   default using thisElement's property( title );

            }).data("kendoTooltip");

            $("#tooltip").find("li").click(false);
        });
    </script>

Tree View

basic demo

    <!-- tree view -->
    <div class="treeViewWrap">
        <div>
            <ul id="treeview">
                <li data-expanded="true">
                    <span class="k-sprite folder"></span>images
                    <ul>
                        <li><span class="k-sprite image"></span>狼哥哥.png</li>
                        <li><span class="k-sprite image"></span>豪仔鸡.jpg</li>
                    </ul>
                </li>
                <li data-expanded="true">
                    <span class="k-sprite folder"></span>resource
                    <ul>
                        <li>
                            <span class="k-sprite folder"></span>html
                            <ul>
                                <li><span class="k-sprite image"></span>index.html</li>
                                <li><span class="k-sprite image"></span>category.html</li>
                            </ul>
                        </li>
                        <li>
                            <span class="k-sprite folder"></span>PDF
                            <ul>
                                <li><span class="k-sprite pdf"></span>Javascript高级程序设计.pdf</li>
                                <li><span class="k-sprite pdf"></span>前端精粹.pdf</li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <style scoped>
        .treeViewWrap {
            width: 400px;
        }

        .k-sprite {
            margin-right: 5px;
            /* icon sprite */
            background-image: url("content/web/treeview/coloricons-sprite.png");
        }

        .rootfolder { background-position: 0 0; }
        .folder { background-position: 0 -16px; }
        .pdf { background-position: 0 -32px; }
        .html { background-position: 0 -48px; }
        .image { background-position: 0 -64px; }

    </style>

    <script type="text/javascript">
        // ID must setting on "UL" element;
        $("#treeview").kendoTreeView();
    </script>

window

    <!-- window -->
    <div class="windowWrap">
        <div id="window">
            这是个窗口
        </div>
    </div>
    <script type="text/javascript">
        function windowDemo(){
            var onClose = function () {
                alert("我要关闭了");
            }

            $(".windowWrap").kendoWindow({
                width: "600px",
                title: "狼哥哥的故事",
                actions: [
                    "Pin",
                    "Minimize",
                    "maximize",
                    "Close"
                ],
                close: onClose
            })
        }
        windowDemo();
    </script>

data Source

    <!--  data source -->
    <div class="dataSource">
        <table class="peoples">
            <thead>
                <tr>
                    <th>Rank</th>
                    <th>Name</th>
                    <th>Age</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td colspan="4"></td>
                </tr>
            </tbody>
        </table>
    </div>

　　<!-- data create template -->
    <script id="templateDataSource" type="text/x-kendo-template">
        <tr>
            <td>#= rank #</td>
            <td>#= name #</td>
            <td>#= age #</td>
        </tr>
    </script>


    <script type="text/javascript">
        function dataSourceDemo() {
            var template = kendo.template($("#templateDataSource").html());

            var peoples = [
                { "rank": 1, "name": "狼哥哥", age: "18"},
                { "rank": 2, "name": "豆芽菜", age: "21"},
                { "rank": 3, "name": "王晓花", age: "23"},
                { "rank": 4, "name": "夜影", age: "25"},
                { "rank": 5, "name": "鸡鸡猫", age: "19"}
            ];

            var dataSource = new kendo.data.DataSource({
                data: peoples,
                change: function () { // subscribe to the CHANGE event of the data source;
                    $(".peoples tbody").html(kendo.render(template, this.view())); // populate the table;
                    console.log(this.view());
                }
            });

            // read data from "peoples" array
            dataSource.read();
        }

        dataSourceDemo();
    </script>

template    custom template to show data;

<!-- template -->
    <div class="templateWrap" style="height: 300px;">
        <input id="product_dropDown" type=""/>
        <div id="product-preview"></div>
    </div>

    <script id="product_templateDemo" type="text/x-kendo-template">
        <h4>ProductName: #: ProductName #</h4>
        <img src="content/web/foods/#= ProductID #.jpg" alt=""/>
    </script>

    <script>
        function templateDemo() {
            var template = kendo.template($("#product_templateDemo").html());

            function preview() {
                var dropdown = $("#product_dropDown").data("kendoDropDownList");

                var product = dropdown.dataSource.get(dropdown.value()); // get current dropDown's Element.dataSource [return Object]
                // dropdown.value() == current dropDown Element's ID;  -->  dataValueField: "ProductID";

                var productPreviewHtml = template(product);

                $("#product-preview").html(productPreviewHtml);  // populate the view box;
            }

            $("#product_dropDown").kendoDropDownList({
                dataTextField: "ProductName",
                dataValueField: "ProductID",
                dataSource: {
                    transport: {
                        read: {
                            url: "http://demos.telerik.com/kendo-ui/service/products",
                            dataType: "jsonp"
                        }
                    },
                    schema: {
                        model: {
                            id: "ProductID"
                        }
                    }
                },
                dataBound: preview,
                change: preview
            });
        }
        templateDemo();
    </script>

MVVM

Effect

placeholder!!!!!!!!!!