title: Shield ui grid inline editing remove first cell editing when updating the row
body: <p>As I have mentioned in my title I need to set editable false of the first cell of the row once I click on edit button. But I don't need to apply this scenario when a new row adding to the table( table row insert). I figured out that the most appropriate way of reaching this is by disabling and enabling the column editing inside the <strong>ShieldGrid's</strong> <code>events</code> =>  <code>edit</code> &amp; <code>insert</code> functions.  </p>
  
  <p><strong>Here shows my approach so far :</strong></p>
  
  <pre><code>$("#grid1").shieldGrid({
      dataSource: {
          data: products,
          schema: {
              fields: {
                  id: { path: "ProductID", type: Number},
                  ProductName: { path: "ProductName", type: String },
                  quantity: { path: "SupplierID", type: Number },
                  price: { path: "UnitPrice", type: Number },
                  units: { path: "UnitsInStock", type: Number }
              }
          }
      },
      events: {
          edit: function(e) {
              //disabling here.....
              var first_cell= e.row[0].firstElementChild;  
              alert("Edit event is fired");
          },
          insert: function(e) {
              //enabling here.....
              var first_cell= e.row[0].firstElementChild; 
              alert("Insert event is fired");
          }  
      },
      rowHover: false,
      columns: [
          { field: "ProductName", width: "200px" },
          { field: "quantity" },
          { field: "price" },
          { field: "units" }
      ],
      editing: {
          enabled: true,
          type: "row",  
          confirmation: {
              "delete": {
                  enabled: true,
                  template: "Delete row {0}?" 
              }
          }
      }
  });
  </code></pre>
  
  <p>With <code>editorCreating</code> event I can easily disable the column editing by:</p>
  
  <pre><code>editorCreating: function (e) {
        if (e.field == "columnName") {
              e.options = {enabled: false};
           }
  </code></pre>
  
  <p>But that approach does not work with the <code>edit</code> event. (<code>e.options</code> Undefined in the console log when it calls inside the insert &amp; edit functions) and also <code>editorCreating</code> is fired just before columns editors to be initialized, which will not fulfill my requirement. :(</p>
  
  <p><strong><code>console.log(e.row[0].firstElementChild)</code> returns :</strong></p>
  
  <pre><code>td.sui-cell.sui-editable-cell
  ​
  abbr: ""
  ​
  accessKey: ""
  ​
  accessKeyLabel: ""
  ​
  align: ""
  ​
  attributes: NamedNodeMap [ class="sui-cell sui-editable-cell" ]
  ​
  axis: ""
  ​
  baseURI: "http://localhost/.../.../.../2"
  ​
  bgColor: ""
  ​
  cellIndex: 0
  ​
  ch: ""
  ​
  chOff: ""
  ​
  childElementCount: 1
  ​
  childNodes: NodeList [ input.sui-input.sui-input-textbox
   ]
  ​
  children: HTMLCollection { 0: input.sui-input.sui-input-textbox
  , length: 1, … }
  ​
  classList: DOMTokenList [ "sui-cell", "sui-editable-cell" ]
  ​
  className: "sui-cell sui-editable-cell"
  ​
  clientHeight: 35
  ​
  clientLeft: 0
  ​
  clientTop: 0
  ​
  clientWidth: 624
  ​
  colSpan: 1
  ​
  contentEditable: "inherit"
  ​
  contextMenu: null
  ​
  dataset: DOMStringMap(0)
  ​
  dir: ""
  ​
  draggable: false
  ​
  firstChild: &lt;input class="sui-input sui-input-textbox" name="ProductName" type="text"&gt;
  ​
  firstElementChild: &lt;input class="sui-input sui-input-textbox" name="ProductName" type="text"&gt;
  ​
  headers: ""
  ​
  height: ""
  ​
  hidden: false
  ​
  id: ""
  ​
  innerHTML: "&lt;input name=\"ProductName\" class=\"sui-input sui-input-textbox\" type=\"text\"&gt;"
  ​
  innerText: ""
  ​
  isConnected: true
  ​
  isContentEditable: false
  ​
  lang: ""
  ​
  lastChild: &lt;input class="sui-input sui-input-textbox" name="ProductName" type="text"&gt;
  ​
  lastElementChild: &lt;input class="sui-input sui-input-textbox" name="ProductName" type="text"&gt;
  ​
  localName: "td"
  ​
  namespaceURI: "http://www.w3.org/1999/xhtml"
  ​
  nextElementSibling: &lt;td class="sui-cell sui-editable-cell"&gt;
  ​
  nextSibling: &lt;td class="sui-cell sui-editable-cell"&gt;
  ​
  noWrap: false
  ​
  nodeName: "TD"
  ​
  nodeType: 1
  ​
  nodeValue: null
  ​
  offsetHeight: 36
  ​
  offsetLeft: 0
  ​
  offsetParent: &lt;table class="sui-table"&gt;
  ​
  offsetTop: 36
  ​
  offsetWidth: 625
  ​
  onabort: null
  ​
  onanimationcancel: null
  ​
  onanimationend: null
  ​
  onanimationiteration: null
  ​
  onanimationstart: null
  ​
  onauxclick: null
  ​
  onblur: null
  ​
  oncanplay: null
  ​
  oncanplaythrough: null
  ​
  onchange: null
  ​
  onclick: null
  ​
  onclose: null
  ​
  oncontextmenu: null
  ​
  oncopy: null
  ​
  oncut: null
  ​
  ondblclick: null
  ​
  ondrag: null
  ​
  ondragend: null
  ​
  ondragenter: null
  ​
  ondragexit: null
  ​
  ondragleave: null
  ​
  ondragover: null
  ​
  ondragstart: null
  ​
  ondrop: null
  ​
  ondurationchange: null
  ​
  onemptied: null
  ​
  onended: null
  ​
  onerror: null
  ​
  onfocus: null
  ​
  ongotpointercapture: null
  ​
  oninput: null
  ​
  oninvalid: null
  ​
  onkeydown: null
  ​
  onkeypress: null
  ​
  onkeyup: null
  ​
  onload: null
  ​
  onloadeddata: null
  ​
  onloadedmetadata: null
  ​
  onloadend: null
  ​
  onloadstart: null
  ​
  onlostpointercapture: null
  ​
  onmousedown: null
  ​
  onmouseenter: null
  ​
  onmouseleave: null
  ​
  onmousemove: null
  ​
  onmouseout: null
  ​
  onmouseover: null
  ​
  onmouseup: null
  ​
  onmozfullscreenchange: null
  ​
  onmozfullscreenerror: null
  ​
  onpaste: null
  ​
  onpause: null
  ​
  onplay: null
  ​
  onplaying: null
  ​
  onpointercancel: null
  ​
  onpointerdown: null
  ​
  onpointerenter: null
  ​
  onpointerleave: null
  ​
  onpointermove: null
  ​
  onpointerout: null
  ​
  onpointerover: null
  ​
  onpointerup: null
  ​
  onprogress: null
  ​
  onratechange: null
  ​
  onreset: null
  ​
  onresize: null
  ​
  onscroll: null
  ​
  onseeked: null
  ​
  onseeking: null
  ​
  onselect: null
  ​
  onselectstart: null
  ​
  onshow: null
  ​
  onstalled: null
  ​
  onsubmit: null
  ​
  onsuspend: null
  ​
  ontimeupdate: null
  ​
  ontoggle: null
  ​
  ontransitioncancel: null
  ​
  ontransitionend: null
  ​
  ontransitionrun: null
  ​
  ontransitionstart: null
  ​
  onvolumechange: null
  ​
  onwaiting: null
  ​
  onwebkitanimationend: null
  ​
  onwebkitanimationiteration: null
  ​
  onwebkitanimationstart: null
  ​
  onwebkittransitionend: null
  ​
  onwheel: null
  ​
  outerHTML: "&lt;td class=\"sui-cell sui-editable-cell\"&gt;&lt;input name=\"ProductName\" class=\"sui-input sui-input-textbox\" type=\"text\"&gt;&lt;/td&gt;"
  ​
  ownerDocument: HTMLDocument http://localhost/../../../2
  ​
  parentElement: &lt;tr class="sui-alt-row"&gt;
  ​
  parentNode: &lt;tr class="sui-alt-row"&gt;
  ​
  prefix: null
  ​
  previousElementSibling: null
  ​
  previousSibling: null
  ​
  rowSpan: 1
  ​
  scope: ""
  ​
  scrollHeight: 35
  ​
  scrollLeft: 0
  ​
  scrollLeftMax: 0
  ​
  scrollTop: 0
  ​
  scrollTopMax: 0
  ​
  scrollWidth: 624
  ​
  spellcheck: false
  ​
  style: CSS2Properties(0)
  ​
  tabIndex: -1
  ​
  tagName: "TD"
  ​
  textContent: ""
  ​
  title: ""
  ​
  vAlign: ""
  ​
  width: ""   
  </code></pre>
  
  <p>But from there I couldn't find any feasible solution to disable the column editing. Any suggestion would be appreciable.</p>