Question

目标是将外部模板加载到Kendo UI网格的工具栏中。我不希望在视图本身中直接使用任何脚本（如剑道网站上的示例所示）。我一直在玩$ .get，但还没有完全成功。将模板分配到下面工具栏的最佳方法是什么？

Kendo Version 2012.3.1114，Visual Studio 2012

在设置网格设置的脚本中调用函数：

    var configureGrid = function() {
        var grid = $('#allItemsGrid').kendoGrid({
            dataSource: {
                type: 'json',
                transport: {
                    read: {
                        url: "api/GridApi/GetAll",
                        dataType: 'json',
                        type: 'GET',
                        contentType: "application/json; charset=utf-8"
                    }
                },
                schema: {
                    model: {
                        fields { {
                            MusicItemId: { type: "integer" },
                            Artist: { type: "string" },
                            Title: { type: "string" },
                            Genre: { type: "string" },
                            Format: { type: "string" },
                            Notes: { type: "string" },
                            Country: { type: "string" }
                        }
                    }
                },
                pageSize: 5
            },
            toolbar: // load external template????
            sortable: true,
            pageable: { pageSizes: [5, 10, 15] },
            columns: gridCols.GridColumns
        });

这是我在MVC项目根目录下的Tmpl文件夹中的模板：

    <script type="text/x-kendo-template" id="tmplTarget">
        <div class="toolbar">
            <label class="category-label" for="category">Show By Genre:</label>
            <input type="search" id="category"></input>
        </div>
        <div class="toolbar">
            <label class="category-label" for="category">Show By Format:</label>
            <input type="search" id="category2"></input>
        </div>
        <a class="k-button" id="searchCriteria" href="\\\#" onclick="test_fn()">Search</a>
    </script>

Per Ryan的要求。下面的代码是一个重新工作，只是为了看看我是否可以根据kendo文档获得工作。代码：

    <!DOCTYPE html/>
    <html>
        <head>
            <title>The Grid</title>
            <script src="~/Scripts/jquery-1.8.3.min.js"></script>
            <script src="~/Scripts/kendo.web.min.js"></script>
            <script src="~/Scripts/templateLoader.js"></script>
            <link href="~/Content/kendo/2012.3.1114/kendo.common.min.css" rel="stylesheet" />
            <link href="~/Content/kendo/2012.3.1114/kendo.default.min.css" rel="stylesheet" />
        </head>
        <script type="text/javascript">
            templateLoader.loadExtTemplate("@Url.Content("~/Tmpl/Test.tmpl.html")");

            $(document).ready(function () {
                var _itemTemplate;
                $(document).bind("TEMPLATE_LOADED", function (e, path) {
                    console.log('Templates loaded');

                    _itemTemplate = kendo.template($('#template').html(), { useWithBlock: false });

            });
            $('#allItemsGrid').kendoGrid({
                dataSource: {
                    type: 'json',
                    transport: {
                        read: {
                            url: "", // left blank, not concerned with pulling data back for now
                            dataType: 'json',
                            type: 'GET',
                            contentType: "application/json; charset=utf-8"
                        }
                    },
                    schema: {
                        model: {
                            fields: {
                                MusicItemId: { type: "integer" },
                                Artist: { type: "string" },
                                Title: { type: "string" },
                                Genre: { type: "string" },
                                Format: { type: "string" },
                                Notes: { type: "string" },
                                Country: { type: "string" }
                            }
                        }
                    },
                    pageSize: 5
                },
                toolbar: [{ name: 'customTemplate', template: _itemTemplate }],
                sortable: true,
                pageable: { pageSizes: [5, 10, 15] },  // page size using pager
                columns: [
                { field: "Artist", title: "Aritst" },
                { field: "Title", title: "Title" },
                { field: "Genre", title: "Genre" },
                { field: "Format", title: "Format" },
                { field: "Notes", title: "Notes" },
                { field: "Country", title: "Country" }
                ]
            });
        });
    </script>

    <style scoped="scoped">
        #grid .k-toolbar {
            min-height: 27px;
        }
        .category-label {
            vertical-align: middle;
            padding-right: .5em;
            float: left;
        }
        #category {
            vertical-align: middle;
        }
        .toolbar {
            float: right;
            margin-right: .8em;
        }
    </style>
    <body>
        <div id="allContainer">
            <div id="allItemsGrid"></div>
        </div>
    </body>
</html>

这是templateLoader.js文件：

    var templateLoader = (function($, host) {
        return {
            loadExtTemplate: function(path) {
                var tmplLoader = $.get(path)
                    .success(function(result) {
                        $('body').append(result);
                    })
                    .error(function(result) {
                        alert("Error loading template...");
                });

                tmplLoader.complete(function() {
                    $(host).trigger("TEMPLATE_LOADED", [path]);
                });
            }
        };
    })(jQuery, document);

模板与上面发布的模板相同。显然这不起作用，因为它将结果附加到文档正文。我需要的是附加到网格工具栏中的模板的结果。通过观察网络流量，它可以成功下拉模板。

将外部模板加载到工具栏Kendo UI中

0 个答案: