Question

我有一个kendo网格，我需要在其中显示一个带有连接值的列。显然我需要在columns属性中选择行模板或模板字段。

 { title: "StreetID-STREETNAME", filterable: true, template: "#: strID#-#: strName #" },

但是在运行之后，它无法在特定的网格列上看到任何过滤器图标。

任何线索或链接都会对我有所帮助。在很多R＆amp; D之后，我看不到任何使用带过滤的模板列的实例。

Answer 1

这显示了如何自定义网格过滤器。

http://demos.telerik.com/kendo-ui/web/grid/filter-menu-customization.html

                        {
                            field: "City",
                            width: 130,
                            filterable: {
                                ui: cityFilter
                           }
                        },

            function cityFilter(element) {
                element.kendoDropDownList({
                    dataSource: cities,
                    optionLabel: "--Select Value--"
                });
            }

Answer 2

检查此示例代码

复制并粘贴代码并保存为index.html

<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
 .photo {
                    width: 140px;                    
                }
                .details {
                    width: 400px;
                }                
                .title {
                    display: block;
                    font-size: 1.6em; 
                }
                .description {
                    display: block;
                    padding-top: 1.6em;
                }
                .employeeID {
                    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
                    font-size: 50px;
                    font-weight: bold;
                    color: #898989;
                }
                td.photo, .employeeID {
                    text-align: center;
                }
                .k-grid-header .k-header {
                    padding: 10px 20px;
                }
                .k-grid td {
                    background: -moz-linear-gradient(top,  rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.15) 100%);
                    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.05)), color-stop(100%,rgba(0,0,0,0.15)));
                    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
                    background: -o-linear-gradient(top,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
                    background: -ms-linear-gradient(top,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
                    background: linear-gradient(to bottom,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
                    padding: 20px;
                }
</style>
<script>
$(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                          type: "odata",
                          transport: {
                              read: {   
                                  url: "http://demos.kendoui.com/service/Northwind.svc/Employees"
                              }
                          },
                          schema: {
                                model: {
                                    fields: {
                                        EmployeeID: { type: "number" },
                                        Title: { type: "string" }
                                    },
                                    id: "EmployeeID"
                                }
                            }
                        },
                        columns: [
                            { field: "Title", width: 400 }, 
                            { field: "EmployeeID" }
                        ],
                        rowTemplate: kendo.template($("#rowTemplate").html()),
                        height: 430,
                        filterable: true
                    });
               });</script>
</head>
<body>
        <div id="grid"></div>

  <script id="rowTemplate" type="text/x-kendo-tmpl">
                <tr>
                    <td class="details">
                       <span class="title">#: Title #</span>
                       <span class="description">Name : #: FirstName# #: LastName#</span>
                       <span class="description">Country : #: Country# </span>
                    </td>
                    <td class="employeeID">
                       #: EmployeeID #
                    </td>
               </tr>
  </script>
</body>
</html>

你需要自定义它。希望这能帮到你

Answer 3

所以最后我总结了它。如果您需要过滤器，则需要提及FIELD属性。没有解决方法。

所以我从webservice本身创建了一个额外的列，并发送了一个额外的连接列。所以现在我能看到一个字符串过滤器。

Kendo UI网格与模板列和过滤

3 个答案: