kendo ComboBox显示多列数据（自定义样式）

项目中经常要求在ComboBox 中显示多列，方便查看更多的信息，查看了kendo combobox发现其中是有个template的样式，

可以自定义样式，以及显示的风格；

这就是kendo Demo中的样式了。以下实现自己的样式：先上图

先上css样式：

.dropdown-header {font-size: 1.2em;padding: 0 0;width:auto;}
.dropdown-header > span 
	{-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-align: left;
	display: inline-block;
	border-style: solid;
	border-width: 0 0 1px 1px;
	margin-left:0PX;
	padding: .1em .6em;width: 78%;}
.dropdown-header > span:first-child 
	{width: 22%;border-left-width: 0;}
Democombo-list .k-item > span
	{-webkit-box-sizing: border-box;
	 -moz-box-sizing: border-box;
	 box-sizing: border-box;
	 display: inline-block;
	 border-style: solid;
	 border-width: 0 0 0px 0px;
	 vertical-align: top;
	 min-height: 78%; 
	 width: 78%;
	 padding: .6em 0 0 .6em;}
Democombo-list .k-item > span:first-child
	{width: 22%;
	 border-left-width: 0;
	 padding: .6em 0 0 0; 
	 border-width: 0 0 0 0;}

接着就是kendo combobox:

$("#DemoCombo").kendoComboBox({
        filter: "contains",
        dataTextField: 显示的字段名,
        dataValueField: value字段名,
        headerTemplate: '<div class="dropdown-header">' +
                '<span class="k-widget k-header">省份ID</span>' +
                '<span class="k-widget k-header">备注（说明）</span>' +
            '</div>',
        template: '<span class="k-state-default">#: data.显示的字段名 #</span>' +
                  '<span class="k-state-default">#: data.value字段名 #</span>',
        dataSource: DATASOURCE,
        height: 370
    });
$("#DemoCombo-list").width(350);

希望有更好的方法，一起交流。群：364125779