ng-gridセル編集でもコードから無効にすることができます

Question

私はいくつかの動的列を持つグリッドグリッドを持っています。 グリッドのデータバインディングなどの機能がうまく機能しています。 条件に応じてラベルやテキストボックスを表示するためにテンプレートに条件文があります。

問題は、以下の

に示すようchormeで

.. ラベルが正しく が表示されている。しかし、私はそれのようにセル編集モードになり、セルをダブルクリックしたときに以下

IE 11

何かを入力するとラベルやテキストボックスで同じことが起こります。セル編集モードになり、これらのテキストボックスでは境界イベントが発生しません。 私は番号などを許可する妥当性検査のための指令を持っています。これらのものも動作しません。

しかし、クロムで、私はそれは、セル編集モードに行くことはありませんし、すべてがうまく機能し、テキストボックスにセルをダブルクリックしていない場合。

グリッド列を動的に定義するためのコードです。ここで

function prepareGridColumns() { 

       var dtLength = $scope.dateList.length; 
       $scope.columnDefinitions.length = 0; 
       $scope.columnDefinitions = [ 
        { 
         field: 'Item', 
         displayName: 'Item', 
         width: '25%' 
        }, 
        { 
         field: 'SupplierName', 
         displayName: 'Supplier', 
         width: '15%' 
        }, 
        { 
         field: 'Total', 
         displayName: 'Total', 
         width: '6%' 
        }, 
         { 
          field: 'Variance', 
          displayName: 'Variance', 
          width: '6%' 
         } 


       ]; 

       var colWidth = 0; 
       if (dtLength > 0) 
        colWidth = 50/dtLength; 
       //var cWidth = colWidth.toString() + "%"; 

       for (var i = 0; i < dtLength; i++) { 

        var newcol = { 
         field: $scope.dateList[i].field, 
         displayName: $scope.dateList[i].displayName, 
         cellTemplate: 
          '<div class="ngCellText" > <input type="text" ng-if="!controlGridCol(row.entity)" only-number decimal-upto="4" data-ng-model="row.entity.' + 
           $scope.dateList[i].field + 
           '" class="form-control input-lg" ng-keyup="calculateForward(row.entity,col.field,row.entity.' + 
           $scope.dateList[i].field + 
           ')" ng-disabled="controlGridCol(row.entity)" ng-readonly="controlGridCol(row.entity)">' + 
           '<label ng-if="controlGridCol(row.entity)" data-ng-bind="row.entity.' + 
           $scope.dateList[i].field + 
           '"></label></div>', 
         width: '60px', 
         enableCellEdit: true 

        }; // '<div class="ngCellText">{{row.getProperty(col.field)}}</div>' 
        $scope.columnDefinitions.push(newcol); 

       } 

       if (!$scope.$$phase) 
        $scope.$apply(); 

      }; 

がグリッド

$scope.tGrid = { 
       data: 'gridDataList', 
       multiSelect: false, 

       enableCellEdit: false, 
       enableColumnResize: true, 
       enableCellSelection: true, 


       plugins: [new ngGridFlexibleHeightPlugin()], 

       rowTemplate: '<div style="height: 100%" ng-class="colorRow(row.getProperty(\'Variance\'))"><div ng-style="{ \'cursor\': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell ">' + 
        '<div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }"> </div>' + 
        '<div ng-cell></div>' + 
        '</div></div>', 
       columnDefs: 'columnDefinitions', 
       //enablePaging: true, 
       showFooter: true, 
       rowHeight: 40, 

       footerTemplate: "<div ng-show=\"showFooter\" class=\"ngFooterPanel\" ng-class=\"{'ui-widget-content': jqueryUITheme, 'ui-corner-bottom': jqueryUITheme}\" ng-style=\"footerStyle()\">" + 
        " <div class=\"ngTotalSelectContainer\" >" + 
        "  <div class=\"ngFooterTotalItems\" ng-class=\"{'ngNoMultiSelect': !multiSelect}\" >" + 
        "   <span class=\"ngLabel\">{{i18n.ngTotalItemsLabel}} {{maxRows()}}</span><span ng-show=\"filterText.length > 0\" class=\"ngLabel\">({{i18n.ngShowingItemsLabel}} {{totalFilteredItemsLength()}})</span>" + 
        "  </div>" + 
        "  <div class=\"ngFooterSelectedItems\" ng-show=\"multiSelect\">" + 
        "   <span class=\"ngLabel\">{{i18n.ngSelectedItemsLabel}} {{selectedItems.length}}</span>" + 
        "  </div>" + 
        " </div>" + 
        "</div>" 
      }; 

Answer 1

問題だった... でも、私は私のグリッド宣言でenableCellEdit: falseを述べてきたためのコードですが、私は私の動的な列の生成にこれをtrueに設定しました。

var newcol = { 
         field: $scope.dateList[i].field, 
         displayName: $scope.dateList[i].displayName, 
         cellTemplate: 
          '<div class="ngCellText" > <input type="text" ng-if="!controlGridCol(row.entity)" only-number decimal-upto="4" data-ng-model="row.entity.' + 
           $scope.dateList[i].field + 
           '" class="form-control input-lg" ng-keyup="calculateForward(row.entity,col.field,row.entity.' + 
           $scope.dateList[i].field + 
           ')" ng-disabled="controlGridCol(row.entity)" ng-readonly="controlGridCol(row.entity)">' + 
           '<label ng-if="controlGridCol(row.entity)" data-ng-bind="row.entity.' + 
           $scope.dateList[i].field + 
           '"></label></div>', 
         width: '60px', 
         enableCellEdit: true // I've declared column with 
               // Cell Edit enabled 

        }; 

は、実はこれはあなたの問題とplunkerでデモを投稿してください