ShieldUIグリッド - 挿入時のみのドロップダウン表示

Question

ShieldUIグリッドを使用していて、グリッド上に新しい行を表示したい場合は、列の1つにドロップダウンを表示します。この列は編集できず、テキストも表示されます。ユーザーがドロップダウンから値を選択できるようにしたいが、追加した後は編集できないようにする。私はそのドキュメントを何回も見直しましたが、それを理解していないようです。

$(document).ready(function() { 
 
      $("#propertiesGrid").shieldGrid({ 
 
       theme: "light-bootstrap", 
 
       dataSource: { 
 
        remote: { 
 
         read: { 
 
          url: "/api" + window.location.pathname + "/ProductAttributes", 
 
          dataType: "json" 
 
         } 
 
        }, 
 
        modify: { 
 
         update: function(items, success, error) { 
 
          $.ajax({ 
 
           type: "PUT", 
 
           url: "/api" + window.location.pathname + "/ProductAttributes", 
 
           dataType: "json", 
 
           contentType: "application/json", 
 
           data: JSON.stringify(items[0].data) 
 
          }).then(success, error); 
 
         } 
 
        } 
 
       }, 
 
       schema: { 
 
        fields: { 
 
         "attributeId": { path: "attributeId" }, 
 
         "productAttributeId": { path: "productAttributeId" }, 
 
         "productId": { path: "productId" }, 
 
         "attributeName": { path: "attributeName" }, 
 
         "minimum": { path: "minimum" }, 
 
         "target": { path: "target" }, 
 
         "maximum": { path: "maximum" }, 
 
         "method": { path: "method" } 
 
        } 
 
       }, 
 
       rowHover: false, 
 
       resizing: true, 
 
       scrolling: true, 
 
       events: { 
 
        insert: function() { AddNewRow() } 
 
       }, 
 
       editing: { 
 
        enabled: true, 
 
        type: "row", 
 
        insertNewRowAt: "pagebottom" 
 
       }, 
 
       toolbar: [ 
 
        { 
 
         buttons: [ 
 
          { commandName: "insert", caption: "Add Product" } 
 
         ], 
 
         position: "bottom" 
 
        } 
 
       ], 
 
       paging: { 
 
        pageSize: 10, 
 
        pageLinksCount: 12, 
 
        messages: { 
 
         infoBarTemplate: "From {0} to {1} items of a total of {2}", 
 
         firstTooltip: "First page", 
 
         previousTooltip: "Previous page", 
 
         nextTooltip: "Next page", 
 
         lastTooltip: "Last page" 
 
        } 
 
       }, 
 
       columns: [ 
 
        { 
 
         field: "attributeName", 
 
         title: "Attribute", 
 
         editable: false, 
 
         id: "attributeName" 
 
        }, 
 
        { field: "minimum", title: "Minimum" }, 
 
        { field: "target", title: "Target" }, 
 
        { field: "maximum", title: "Maximum" }, 
 
        { field: "method", title: "Method" }, 
 
        { 
 
         width: 150, 
 
         title: " ", 
 
         buttons: [ 
 
          { commandName: "edit", caption: "Edit" }, 
 
          { commandName: "delete", caption: "Delete" } 
 
         ] 
 
        } 
 
       ] 
 
      }); 
 
     });

Answer 1

回避策があります。列を編集可能なままにし、グリッドからスローされた編集イベントをバインドし、その列のエディタを見つけて非表示にするか、セルの値に置き換えます。

events: { 
    edit: function(e) { 
     var target = $("#column_editor_id"); 
     target.hide(); 
    }  
},