TypeError:r.getClientRects不是一个函数 [英] TypeError : r.getClientRects is not a function

问题描述

我正在尝试通过此链接在KendoUI网格中创建自定义工具栏: http ://demos.telerik.com/kendo-ui/grid/toolbar-template ，但由于出错而卡住了.

I am trying to create a custom toolbar in KendoUI grid following this link:http://demos.telerik.com/kendo-ui/grid/toolbar-template but getting stuck with an error.

这是我要在代码中尝试做的事情:

This is what I am trying to do in my code:

<div id="example">
    <script type="text/x-kendo-template" id="template">
        <div class="toolbar">
            <label class="category-label" for="category">Show products by category:</label>
            <input type="search" id="category" style="width: 150px" />
        </div>
    </script>
    <div id="grid"></div>
    <script>
        $(document).ready(function () {
            var grid = $("#grid").kendoGrid({
                dataSource: {

                    transport: {
                        read: {
                            url: 'http://localhost:52738/Default1/KendoDataAjaxHandle',
                            type: "post",
                            dataType: "json"
                        }
                    },
                    schema: {
                        data: "Data",
                        total: function (response) {
                            return $(response.Data).length;
                        }
                    },
                    pageSize: 10
                },
                toolbar: kendo.template($("#template").html()),
                groupable: true,
                sortable: true,
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                },
                columns: [
                            {
                                field: "CustomerAltID",
                                filterable: true
                            },
                            {
                                field: "CustomerID",
                                title: "Customer ID"
                            },

                            {
                                field: "CustomerName",
                                title: "Customer Name",

                                template: "<div class='customer-photo'" +
                                                            "style='background-image: url(../Content/Images/customerimg/#:data.CustomerID#.jpg);'></div>" +
                                                        "<div class='customer-name'>#: CustomerName #</div>"
                            },
                            {
                                field: "Gender",
                                title: "Gender",
                                template: "<div class='gender-photo'" +
                                                            "style='background-image: url(../Content/Images/#:data.Gender#.jpg);'></div>" 

                            }
                ]
            });
            var dropDown = grid.find("#category").kendoDropDownList({
                dataTextField: "Gender",
                dataValueField: "CustomerID",
                autoBind: false,
                optionLabel: "All",
                dataSource: {

                    severFiltering: true,
                    transport: {
                        read: {
                            url: 'http://localhost:52738/Default1/KendoDataAjaxHandle',
                            type: "post",
                            dataType: "json"
                        }
                    },
                    schema: {
                        data:"Data"
                    }
                },
                change: function () {
                    var value = this.value();
                    if (value) {
                        grid.data("kendoGrid").dataSource.filter({ field: "CustomerID", operator: "eq", value: parseInt(value) });
                    } else {
                        grid.data("kendoGrid").dataSource.filter({});
                    }
                }
            });
        });
    </script>
</div>

我不知道问题出在什么地方，而且已经花费了数小时，我无法找到解决方案.

I don't know what the problem is and its been hours that I am unable to figure out the solution for it.

我正在使用以下版本-Jquery v-3.1 和Jquery UI- 1.12

I am using the following versions- Jquery v-3.1 and Jquery UI-1.12

推荐答案

问题可能是由于使用jQuery v3.1

The problem is likely due to using jQuery v3.1

Kendo当前正式不支持jQuery v3.但是，如果您还包含jquery-migrate，则 显然可以工作. http://www.telerik.com/forums/jquery-3-0

Kendo does not currently work with jQuery v3, officially. But it apparently can work if you also include jquery-migrate. http://www.telerik.com/forums/jquery-3-0

此处列出了官方支持的jQuery版本: http://docs.telerik.com/kendo-ui /intro/installation/prerequisites#supported-jquery-versions 请注意，它指出Kendo R3 2016 SP2 也应与jQuery 3.1.1一起使用.

The officially supported versions of jQuery are listed here: http://docs.telerik.com/kendo-ui/intro/installation/prerequisites#supported-jquery-versions Note that it states that Kendo R3 2016 SP2 should also work with jQuery 3.1.1.

因此，您可以:

1. 使用附带的jQuery版本/受任何支持 您使用的剑道版本
2. 或者将jQuery 3.1与jquery-migrate一起使用
3. 或使用Kendo R3 2016 SP2 和jQuery 3.1. 1

1. use the version of jQuery that ships with/is supported by whatever version of Kendo you use
2. OR use jQuery 3.1 with jquery-migrate
3. OR use Kendo R3 2016 SP2 and jQuery 3.1.1

这篇关于TypeError:r.getClientRects不是一个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！