单击网格数据时弹出剑道窗口

Question

我为我的项目中的 10 种产品创建了一个剑道网格。我希望在单击剑道网格中显示的产品名称时弹出包含产品详细信息的剑道窗口。

我查看了剑道网格的演示，但我不想编辑所选产品的详细信息，也不想使用单独的列来显示示例和演示中所示的详细信息按钮.

我还查看了 kendo ui 的音乐商店演示，但我无法理解它在 jQuery 中的代码，我正在为我的项目使用带有 razor 语法的 asp.net mvc

注意： 我希望仅在单击产品名称并显示其详细信息时才出现窗口。

Answer 1

你可以使用：

$('#grid').on("click", "tr.k-state-selected", function (e) {
    // open window here
    // you have i.e. Id here $('#grid').dataItem($('#grid').select()).Id
});

为此，您必须在网格配置中设置选项selectable: "row"。 否则你可以只使用：

$('#grid').on("click", "tr", function (e) { ... }

Answer 2

您可以利用 detailTemplate 来实现它。

 <script>
            var wnd,
                detailsTemplate;

            $(document).ready(function () {
                var grid = $("#grid").kendoGrid({
                    dataSource: {
                       pageSize: 20,
                       data: createRandomData(50)
                    },
                    pageable: true,
                    height: 550,
                    columns: [
                        { field: "FirstName", title: "First Name", width: "140px" },
                        { field: "LastName", title: "Last Name", width: "140px" },
                        { field: "Title" },
                        { command: { text: "View Details", click: showDetails }, title: " ", width: "180px" }]
                }).data("kendoGrid");

                wnd = $("#details")
                    .kendoWindow({
                        title: "Customer Details",
                        modal: true,
                        visible: false,
                        resizable: false,
                        width: 300
                    }).data("kendoWindow");

                detailsTemplate = kendo.template($("#template").html());
            });

            function showDetails(e) {
                e.preventDefault();

                var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
                wnd.content(detailsTemplate(dataItem));
                wnd.center().open();
            }
        </script>

        <script type="text/x-kendo-template" id="template">
            <div id="details-container">
                <h2>#= FirstName # #= LastName #</h2>
                <em>#= Title #</em>
                <dl>
                    <dt>City: #= City #</dt>
                    <dt>Birth Date: #= kendo.toString(BirthDate, "MM/dd/yyyy") #</dt>
                </dl>
            </div>
        </script>

转到此fiddle 进行工作演示

[更新] 这是在单击产品名称时显示窗口的代码 sn-p

 <script>
            var wnd,
                detailsTemplate;

            $(document).ready(function () {
                var grid = $("#grid").kendoGrid({
                    dataSource: {
                       pageSize: 20,
                       data: createRandomData(50)
                    },
                    pageable: true,
                    height: 550,
                    columns: [
                        { field: "FirstName", title: "First Name", width: "140px",attributes: { "class": "FirstName"} },
                        { field: "LastName", title: "Last Name", width: "140px" },
                        { field: "Title" }]
                }).data("kendoGrid");

                wnd = $("#details")
                    .kendoWindow({
                        title: "Customer Details",
                        modal: true,
                        visible: false,
                        resizable: false,
                        width: 300
                    }).data("kendoWindow");

                detailsTemplate = kendo.template($("#template").html());

                $('#grid').on("click", ".FirstName", function (e) {

                  e.preventDefault();

                var dataItem =               $("#grid").getKendoGrid().dataItem($(e.currentTarget).closest("tr"));
                wnd.content(detailsTemplate(dataItem));
                wnd.center().open();


  });
            });


        </script>

        <script type="text/x-kendo-template" id="template">
            <div id="details-container">
                <h2>#= FirstName # #= LastName #</h2>
                <em>#= Title #</em>
                <dl>
                    <dt>City: #= City #</dt>
                    <dt>Birth Date: #= kendo.toString(BirthDate, "MM/dd/yyyy") #</dt>
                </dl>
            </div>
        </script>

Working demo is here