kendo ui 사용하기 좋은 작은 위젯 --grid

Kendo Ui Grid 컨트롤이 Widget에 상속됩니다.
https://demos.telerik.com/kendo-ui/grid/index스피드 튜토리얼 아래의 코드는 이 튜토리얼에서 나온다
양식을 만들 때 매우 편리하고 강력한 기능을 제공합니다. <span style="color: #000000;"> $(document).ready(</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> () { $(</span>"#grid"<span style="color: #000000;">).kendoGrid({ dataSource: { // type: </span>"odata"<span style="color: #000000;">, transport: { read: </span>"https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"<span style="color: #000000;"> }, pageSize: </span>20<span style="color: #000000;"> }, height: </span>550<span style="color: #000000;">, groupable: </span><span style="color: #0000ff;">true</span><span style="color: #000000;">, // sortable: </span><span style="color: #0000ff;">true</span><span style="color: #000000;">, // pageable: { // refresh: </span><span style="color: #0000ff;">true</span><span style="color: #000000;">, pageSizes: </span><span style="color: #0000ff;">true</span><span style="color: #000000;">, buttonCount: </span>5 <span style="color: #000000;"> }, columns: [{ // theader template: </span>"<div class='customer-photo'" + // "style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" + "<div class='customer-name'>#: ContactName #</div>"<span style="color: #000000;">, field: </span>"ContactName"<span style="color: #000000;">, title: </span>"Contact Name"<span style="color: #000000;">, width: </span>240<span style="color: #000000;"> }, { field: </span>"ContactTitle"<span style="color: #000000;">, title: </span>"Contact Title"<span style="color: #000000;"> }, { field: </span>"CompanyName"<span style="color: #000000;">, title: </span>"Company Name"<span style="color: #000000;"> }, { field: </span>"Country"<span style="color: #000000;">, width: </span>150<span style="color: #000000;"> }] }); }); </span> <span style="color: #000000;">
.customer</span>-<span style="color: #000000;">photo {
display: inline</span>-<span style="color: #000000;">block;
width: 32px;
height: 32px;
border</span>-radius: 50%<span style="color: #000000;">;
background</span>-<span style="color: #000000;">size: 32px 35px;
background</span>-<span style="color: #000000;">position: center center;
vertical</span>-<span style="color: #000000;">align: middle;
line</span>-<span style="color: #000000;">height: 32px;
box</span>-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2<span style="color: #000000;">);
margin</span>-<span style="color: #000000;">left: 5px;
}

.customer</span>-<span style="color: #000000;">name {
display: inline</span>-<span style="color: #000000;">block;
vertical</span>-<span style="color: #000000;">align: middle;
line</span>-<span style="color: #000000;">height: 32px;
padding</span>-<span style="color: #000000;">left: 3px;
}
</span>