Question

我想通过点击Kendo Grid列上的链接打开一个弹出窗口。 Pop窗口应包含当前行的详细数据。像http://demos.telerik.com/kendo-ui/grid/custom-command链接中给出的内容。但是我希望这可以单击现有列的链接而不是新的自定义按钮。 HTML：

<div ng-app="myApp">

    <div ng-controller="myCtrl">

        <div id="grid" kendo-grid k-options="kendoGrid"></div>

    </div>

</div>

控制器：

var myApp = angular.module('myApp',[]);
myApp.controller('myCtrl', function ($scope, myService) {
    $scope.kendoGrid = myService.getKGrid();
});

服务：

myApp.service('myService', function () {
this.getKGrid = function () {                
var kGrid = {
       dataSource: [{"Col1":"Val1","Col2":"Val2"}],
       columns: [{
                    field: "Col1",
                    title: "Col1"
                },
                {
                    field: "Col2",
                    title: "Col2",
                    template: "<a href='\\#' class='link' **ng-click='TBD(Open Pop-up window with row details)'**>#=Col2#</a>"
                }                                
            ]
        };
        return kGrid;
    };
});

请指导如何实现这一目标。在此先感谢。

Answer 1

通过进行以下更改，我可以显示带有行详细信息的弹出式kendo窗口。 HTML：

<div ng-app="myApp">

<div ng-controller="myCtrl">

    <div id="grid" kendo-grid k-options="kendoGrid"></div>

     <div id="details"></div>

        <div id="detailsTemplate" style="display: none;">

                    <div class="row">

                            <text>Data :</text> <text>#=Col1#</text><!--We can add more data here-->
                        </div>
        </div>

   </div>

</div>

控制器：

var myApp = angular.module('myApp',[]);
myApp.controller('myCtrl', function ($scope, myService) {
    $scope.kendoGrid = myService.getKGrid();
    $scope.showDetails = function (dataItem) {
            myService.showWindow(dataItem);
    } 
});

服务：

myApp.service('myService', function () {
this.showWindow function () {
                var window = angular.element(details)
                  .kendoWindow({
                      title: "Details",
                      modal: true,
                      visible: false,
                      resizable: false,
                      width: 600
                  }).data("kendoWindow");
                var detailsTemplate = kendo.template(angular.element(detailsTemplate).html());
                window.content(detailsTemplate(dataItem));
                window.center().open();
            };
this.getKGrid = function () {                
var kGrid = {
       dataSource: [{"Col1":"Val1","Col2":"Val2"}],
       columns: [{
                field: "Col1",
                title: "Col1"
            },
            {
                field: "Col2",
                title: "Col2",
                 template: "<a href='\\#' class='link' ng-click='showDetails(dataItem)'>#=Col2#</a>"
            }                                
        ]
    };
    return kGrid;
  };
});

单击Kendo Grid列上的链接，打开弹出窗口

1 个答案: