剣道グリッドキーアップ欄

Question

こんにちは私は剣道グリッドの初心者です。編集モードでは、一度私はキーアップ元の価格と税額、私はすぐに最終的な価格を合計したいと思います。

 <div class="panel-body"> 
       <div id="productRobPrice-grid"></div> 

       <script> 
        var record = 0; 
        $(document).ready(function() { 
         $("#productRobPrice-grid").kendoGrid({ 
          dataSource: { 
           type: "json", 
           transport: { 
            create: { 
             url: "@Html.Raw(Url.Action("ProductRobPriceAdd", "Product"))", 
             type: "POST", 
             dataType: "json", 
             data: addAntiForgeryToken 
            }, 
            read: { 
             url: "@Html.Raw(Url.Action("ProductRobPriceList", "Product", new {productId = Model.Id}))", 
             type: "POST", 
             dataType: "json", 
             data: addAntiForgeryToken 
            }, 
            update: { 
             url: "@Html.Raw(Url.Action("ProductPictureUpdate", "Product"))", 
             type: "POST", 
             dataType: "json", 
             data: addAntiForgeryToken 
            }, 
            destroy: { 
             url: "@Html.Raw(Url.Action("ProductPictureDelete", "Product"))", 
             type: "POST", 
             dataType: "json", 
             data: addAntiForgeryToken 
            } 
           }, 
           schema: { 
            data: "Data", 
            total: "Total", 
            errors: "Errors", 
            model: { 
             id: "Id", 
             fields: { 
              OriginalPrice: { 
               type: "number", validation: { required: true, min: 1 }, 
              }, 
              Tax: { 
               type: "number", validation: { required: true, min: 1 }, 
               defaultValue: 6.00 
              }, 
              FinalPrice: { type: "number", validation: { required: true, min: 1 } }, 
              QuantityFrom: { type: "number", validation: { required: true, min: 1 } }, 
              QuantityTill: { type: "number", validation: { required: true, min: 1 } }, 
              Avalaible: { type: "boolean", defaultValue: true }, 
              AvalaibleQuantity: { type: "number" }, 


             } 
            } 
           }, 
           requestEnd: function (e) { 
            if (e.type == "update") { 
             this.read(); 
            } 
           }, 
           error: function (e) { 
            display_kendoui_grid_error(e); 
            // Cancel the changes 
            this.cancelChanges(); 
           }, 
           serverPaging: true, 
           serverFiltering: true, 
           serverSorting: true 
          }, 
          pageable: { 
           refresh: true, 
           numeric: false, 
           previousNext: false, 
           info: false, 
           @Html.Partial("_GridPagerMessages") 
          }, 
          editable: { 
           confirmation: "@T("Admin.Common.DeleteConfirmation")", 
           mode: "inline" 
          }, 
          scrollable: false, 
          toolbar: [{ name: "create", text: "@T("Admin.Common.AddNewRecord")" }], 
          columns: [ 



          { 
           field: "OriginalPrice", 
           template: "<strong>#: OriginalPrice # </strong>" 
    }, 

          { 
           field: "Tax", 

           title: "@T("Admin.Catalog.Products.RobSale.Fields.Tax")", 

          }, 

          { 
           field: "FinalPrice", 
           format: "{0:c}", 
           title: "@T("Admin.Catalog.Products.RobSale.Fields.FinalPrice")", 

          }, 


          { 
           field: "QuantityFrom", 
           format: "{0:d}", 
           title: "@T("Admin.Catalog.Products.RobSale.Fields.QuantityFrom")", 

          }, 


          { 
           field: "QuantityTill", 

           title: "@T("Admin.Catalog.Products.RobSale.Fields.QuantityTill")", 

          }, 
          { 
           field: "Avalaible", 

           title: "@T("Admin.Catalog.Products.RobSale.Fields.Avalaible")", 

          }, 






          { 
           command: [ 
           { 
            name: "edit", 
            text: { 
             edit: "@T("Admin.Common.Edit")", 
             update: "@T("Admin.Common.Update")", 
             cancel: "@T("Admin.Common.Cancel")" 
            } 
           }, { 
            name: "destroy", 
            text: "@T("Admin.Common.Delete")" 
           } 
           ], 
           width: 200 
          } 
          ] 
         }); 
        }); 
       </script> 
      </div> 

以下に私のコードを参照してください。しかし、現在発射することができないように見えるからkeyup一つの問題、元の価格のテキストボックスを得てください。ガイドラインを教えてください。 TQ

Answer 1

keyupイベントに機能を割り当てるには、custom editor functionを作成する必要があります。

<div id="grid"></div> 
<script> 
    $("#grid").kendoGrid({ 
     columns: [{ 
       field: "name" 
      }, { 
       field: "price", 
       editor: function(container, options) { 
        // create an input element 
        var input = $("<input/>"); 
        // set its name to the field to which the column is bound ('name' in this case) 
        input.attr("name", options.field); 
        input.keyup(function() { 
         alert("key up"); 
        }); 
        // append it to the container 
        input.appendTo(container); 
        // initialize a Kendo UI AutoComplete 
        input.kendoNumericTextBox(); 
       } 
      }, 
      { 
       command: "edit" 
      } 
     ], 
     editable: true, 
     dataSource: [{ 
      name: "Jane Doe", 
      price: 5 
     }, { 
      name: "John Doe", 
      price: 10 
     }], 
     editable: { 
      mode: "inline" 
     } 
    }); 
</script> 

しかし、おそらくthisのようなものが必要になると思います。変更時にその値を再計算する集約関数。 keyupのように即座ではありませんが、あなたのために働く必要があります。