Question

我正在使用Kendo Ui网格显示数据，我一直在寻找详细记录弹出对话框的解决方案，使用angular with kendo.once用户点击每个记录的详细信息我想在对话框中弹出完整的详细信息。

到目前为止，我已经实现了以下代码...

HTML

<div kendo-grid="lrrSearchGrid" options="lrrSearchGridOptions">
        </div>

CTRL.JS

$scope.lrrSearchData = {};
$scope.lrrSearchData = null;

$scope.mappedLRRSearchData = {};
$scope.mappedLRRSearchData = null;

  // Search
$scope.searchLRRs = function () {
    SubCategory.searchLRRBasedOn(1, $scope.search.searchBy, $scope.search.searchParam).then(function (data) {
            $scope.lrrSearchData = data.data;
            $scope.lrrSearchGrid.setDataSource(new kendo.data.DataSource({
                data: $scope.lrrSearchData,
                pageSize: 5
            }));
        }, function (err) {
            if (err.status === 404) {
                $scope.searchError = 'No Records Found';
            }
        });
};


$scope.gotoSubCats = function() {
    $state.go('app.subCats');
};

// Setting the LRR Search Data
$scope.lrrSearchGridOptions = lrrSearchGridConfig.lrrSearchGrid;
lrrSearchGridConfig.lrrSearchGrid.dataSource = resetLRRSearchData();

$scope.mappedLRRGridOptions = lrrSearchGridConfig.mappedLRRGrid;    
lrrSearchGridConfig.mappedLRRGrid.dataSource = resetMappedLRRSData();

Config.js

lrrSearchGrid: {
    sortable: true,
    pageable: {
        previousNext: false,
        pageSizes: false
    },
    scrollable: true,
    filterable: true,
    columns: [
    { 
        field: 'regionName',
        title: 'Jurisdiction',
        width: '32px'
    }, {
        field: 'regInvetoryName',
        title: 'Inventory',
        width: '32px'
    },{
        field: 'ruleIdentifier',
        title: 'Rule Id',
        width: '25px'
    }, {
        field: 'citationValue',
        title: 'Rule Citation',
        width: '30px'
    }, {
        field: 'ruleName',
        title: 'Rule Standard Name',
        width: '30px'
    }, {
        field: 'subPartId',
        title: 'Subpart Id',
        width: '30px'
    }, {
        field: 'subpartCitation',
        title: 'Subpart Citation',
        width: '40px'
    }, {
        field: 'subpartRuleName',
        title: 'Subpart Standard Name',
        width: '40px'
    },{
      field: 'Detail',
      title: 'Action',
      width: '40px',
      filterable:false,
      template : function(dataItem) {
        if (typeof dataItem.lrrDetail == "string") {
          return "<a href=\</a>";
        } 
      }
  }
    ]
}

在此先感谢，我将不胜感激。

Answer 1

我为此创造了一个小提琴，检查它是否对你有帮助：http://jsfiddle.net/Sowjanya51/6r01vccj/3/

   you can use the custom command option of kendo grid to achieve this.

如何使用Angularjs和kendo模式对话框弹出每条记录的详细信息？

1 个答案: