Simple editTemplate giving TypeError

Question

I added a simple editTemplate for the purpose of demonstration:

$(document).ready(function() {
  $("#grid").jsGrid({
    autoload: true, width: "100%", editing: true,

    data: [ { d:111}, { d:222}],

    fields: [
      { name: "d", type: "number", title: "Value",
        itemTemplate: function(value, item) { 
           return value+1;
        },
        editTemplate: function(value) {
           return `<input type="number" value="${value*2}">`;
        },
      },
      { type: "control"}
    ]
  });
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>

<div id="grid">
Test
</div>

When I click to edit, the <input> control shows up nicely with the value multiplied by 2. But when I click the green tick to save the edit, I get a:

TypeError: Cannot read property 'val' of undefined

I have localized the issue to the editTemplate. The moment I removed it, it works fine.

What could be the cause?

Answer 1

You can make use of the existing template provided jsGrid, and update the value from there

jsGrid.fields.number.prototype.editTemplate

$(document).ready(function() {
  $("#grid").jsGrid({
    autoload: true, width: "100%", editing: true,

    data: [ { d:111}, { d:222}],

    fields: [
      { name: "d", type: "number", title: "Value",
        itemTemplate: function(value, item) { 
           return value+1;
        },
        editTemplate: function(value) {
            var $result = jsGrid.fields.number.prototype.editTemplate.call(this); // original input
            $result.val(value*2);
            return $result;
        },
      },
      { type: "control"}
    ]
  });
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>

<div id="grid">
Test
</div>