如何在kendo网格中显示JSON响应?

时间:2015-02-25 19:19:41

标签: javascript angularjs kendo-ui kendo-grid

我有来自另一个网格的kendo窗口弹出窗口,我希望显示所选记录的详细信息。我从服务器得到响应时看不到网格中的数据。我是Angularjs的新手我需要帮助来实现CTRL中的代码。 JS将不胜感激任何帮助或建议。

到目前为止已尝试过代码......

CTRL.JS

$scope.vendorWinOptions = subCategoryGridConfig.vendorWinConfig;
$scope.vendorDetailOptions = subCategoryGridConfig.VendorsDetailGrid;
      $scope.showDetail = function(id) {
        var dataToReturn = subCategoryGridConfig.VendorsDetailGrid;
        dataToReturn.dataSource = {
          transport : {
            read : function(options) {
              SubCategory.getAllVendors().then(function(response) {
                options.success = (response.data);

              })
            }
          }
        }
        return dataToReturn;
        $scope.$broadcast('openDetailWindow');
      };

FACTORY.JS

getAllVendors: function(subcategoryId){
          return $http.get('/third-party-management/rest/vendor/' + subcategoryId);
      }

JSON.JS

id: 1
parentAribaId: "18682"
subCatogeryCode: "X99.99.171"
subCatogeryName: "PROFESSIONAL SERVICES BUNDLED WITH TECHNOLOGY PURCHASES"
vendorAribaId: "18682"
vendorBusinessName: "SAP"
vendorLineOfBusiness: {id: 4, vendorBusinessIdentifier: "278070", primaryLOb: "GTO", secondaryLob1: "GHR",…}
id: 4
primaryLOb: "GTO"
secondaryLob1: "GHR"
secondaryLob2: "GHR"
vendorBusinessIdentifier: "278070"
vendorName: "SAP"

modalgridconfig.js

    VendorsDetailGrid: {
      scrollable: true,
      filterable: false,
      scrollable: false,
      columns: [{
          field: 'vdrDetail.parentAribaId',
          title: 'Ariba ID',
          width: '32px'
      }, {
          field: 'vdrDetail.vendorName',
          title: 'Vendor Name',
          width: '25px'
      }, {
          field: 'vdrDetail.vendorName',
          title: 'Vendor Parent',
          width: '30px'
      }, {
          field: 'vdrDetail.vendorBusinessName',
          title: 'LOB Owner',
          width: '30px'
      }]
  }

1 个答案:

答案 0 :(得分:0)

我弄明白了如何让它发挥作用。

CTRL.JS

    $scope.vendorWinOptions = subCategoryGridConfig.vendorWinConfig;
        $scope.showDetail = function (vendor){
          $scope.error = null;
          $scope.selectedVendor = vendor;
           SubCategory.getAllVendors().then(function(response){
                $scope.selectedVendor.vendorValues = response.data;
                $scope.vendorDetailWin.open().center();
                $scope.$broadcast('openDetailWindow');
          });
        }
    $scope.vendorDetailOptions = subCategoryGridConfig.VendorsDetailGrid;
    subCategoryGridConfig.VendorsDetailGrid.dataSource = new kendo.data.DataSource({
      data: [],
      pageSize: 5
  });

    $scope.closeDetailModal = function(){
      $scope.vendorDetailWin.close();
    }

modalCtrl.js

angular.module('thirdPartyManagementApp').controller('vendorDetailModalCtrl', function($scope) {
    'use strict';
    $scope.$on('openDetailWindow', function () {
      $scope.VendorsDetailGrid.setDataSource(new kendo.data.DataSource({
        data: $scope.selectedVendor.vendorValues,
        pageSize: 5
    }));
  });

 });

FACTORY.JS

 getAllVendors: function(){
          return $http.get('/URL');
      },

modalConfig.js

 vendorWinConfig: {
      width : '800px',
      title : 'Vendors',
      modal : true,
      content : '/third-party-management/views/subCategories/vendorDetailModal.html',
      visible : false,
  },
    VendorsDetailGrid: {
      scrollable: true,
      filterable: false,
      scrollable: false,
      columns: [{
          field: 'vendorAribaId',
          title: 'Ariba ID',
          width: '20px'
      }, {
          field: 'vendorName',
          title: 'Vendor Name',
          width: '20px'
      }, {
          field: 'vendorBusinessName',
          title: 'Vendor Parent',
          width: '20px'
      }, {
          field: 'vendorLineOfBusiness.primaryLOb',
          title: 'LOB Owner',
          width: '20px'
      }]
  }