CODEWITHSUNDEEP
angularjskendo-uikendo-grid
aftab
aftab

Reputation: 545

How can i popup detail for each record using Angularjs with kendo modal dialog?

I am using Kendo Ui grid to display data , i have been searching for solution for detail record popup dialog using angular with kendo.once user click detail for each record i want to popup complete detail in dialog box.

so far i have implemented below code...

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>";
        } 
      }
  }
    ]
}

Thanks in advance i will appreciate any help.

Upvotes: 0

Views: 811

Answers (1)

Andrea
Andrea

Reputation: 175

I have created a fiddle for the same,check if it helps you : http://jsfiddle.net/Sowjanya51/6r01vccj/3/

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

Upvotes: 2

Related Questions