title: JSGrid Custom Field
body: <p>I'm using JSGrid Jquery plugin and I need to use checkboxradio from jquery ui so I created a customfield, it works but I've a small problem: when edit this cell the value is saved even if done edit button not pressed.
  in normal case no saving happen if you leave the row without pressing done editing "right mark".</p>
  
  <p>Here is my code:</p>
  
  <pre><code>$(document).ready(function () {
  
      function editlabeldatefield(obj,value){
          obj._editTemplate_label=$("&lt;label&gt;");
          obj._editTemplate_check=$('&lt;input /&gt;', { type: 'checkbox', checked: value});
          obj._editTemplate_check.appendTo(obj._editTemplate_label);
          obj._editTemplate_check.checkboxradio();
          //return $("&lt;label&gt;").append($('&lt;input /&gt;', { type: 'checkbox', checked: value}).checkboxradio());
          return obj._editTemplate_label;///=editlabeldatefield(value);
  }
  
  var MyCheckboxDateField = function(config) {
      jsGrid.Field.call(this, config);
  };
  
  MyCheckboxDateField.prototype = new jsGrid.Field({
      itemTemplate: function(value) {
          //return $("&lt;label&gt;").append($('&lt;input /&gt;', { type: 'checkbox', checked: value}).checkboxradio());
          this._label=$("&lt;label&gt;");
          this._datecheck=$('&lt;input /&gt;', { type: 'checkbox', checked:value});
          this._datecheck.appendTo(this._label);
          this._datecheck.checkboxradio();
          console.log($(this._datecheck).prop('checked'))
          return this._label;  
          /// return $('&lt;input /&gt;', { type: 'checkbox', checked: value}).checkboxradio({label : ""});         
      },
      editTemplate: function(value) {
          ///return this._editdatecheck=$("&lt;label&gt;").append($('&lt;input /&gt;', { type: 'checkbox', checked: value}));
  
          return this._editTemplate_label=new editlabeldatefield(this,value);///=editlabeldatefield(value);   
      },
      editValue: function() {
          console.log($(this._editTemplate_check).prop('checked'));
          return $(this._editTemplate_check).prop('checked');
      },
      insertTemplate: function(value) {
          this._insertTemplate_label=$("&lt;label&gt;");
          this._insertTemplate_check=$('&lt;input /&gt;', { type: 'checkbox'});
          this._insertTemplate_check.appendTo(this._insertTemplate_label);
          this._insertTemplate_check.checkboxradio();
          //return $("&lt;label&gt;").append($('&lt;input /&gt;', { type: 'checkbox', checked: value}).checkboxradio());
          //console.log(this._insertTemplate_check);
          return this._insertTemplate_label;///=editlabeldatefield(value);
      },
      insertValue: function() {
          return $(this._insertTemplate_check).prop('checked');
      }   
  });
  
  jsGrid.fields._checkboxDateField = MyCheckboxDateField;
  
  var jobs = [
      {
          "Job Tittle": "Business Systems Analyst",
          "status" : true,
          "status1" : true
      },
      {
          "Job Tittle": "Data Archtecht",
          "status" : true,
          "status1" : true
      },
      {
          "Job Tittle": "DataBase Adminstrator",
          "status" : false,
          "status1" : false
      },
      {
          "Job Tittle": "JAva Developer",
          "status" : false   , 
          "status1" : false
      },
  ];
  
  $("#jobsTable").jsGrid({
  
      editing: true,
      inserting: true,
      deleteConfirm: "Do you really want to delete the client?",
      sorting: true,
      paging: true,
      autoload: true,
  
      pageSize: 15,
      pageButtonCount: 5,
      width: "50%",
  
      data: jobs,
      fields: [
          {name: "Job Tittle", type: "text", width: 50, validate: "required"},
          {title: "status", name: "status", type: "_checkboxDateField", width: 90, align: "center" },
          {type: "control"}
      ]
  });
  </code></pre>