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 ShieldGrid's events => edit & insert functions.
Here shows my approach so far :
$("#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}?"
}
}
}
});
With editorCreating event I can easily disable the column editing by:
editorCreating: function (e) {
if (e.field == "columnName") {
e.options = {enabled: false};
}
But that approach does not work with the edit event. (e.options Undefined in the console log when it calls inside the insert & edit functions) and also editorCreating is fired just before columns editors to be initialized, which will not fulfill my requirement. :(
console.log(e.row[0].firstElementChild) returns :
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: <input class="sui-input sui-input-textbox" name="ProductName" type="text">
firstElementChild: <input class="sui-input sui-input-textbox" name="ProductName" type="text">
headers: ""
height: ""
hidden: false
id: ""
innerHTML: "<input name=\"ProductName\" class=\"sui-input sui-input-textbox\" type=\"text\">"
innerText: ""
isConnected: true
isContentEditable: false
lang: ""
lastChild: <input class="sui-input sui-input-textbox" name="ProductName" type="text">
lastElementChild: <input class="sui-input sui-input-textbox" name="ProductName" type="text">
localName: "td"
namespaceURI: "http://www.w3.org/1999/xhtml"
nextElementSibling: <td class="sui-cell sui-editable-cell">
nextSibling: <td class="sui-cell sui-editable-cell">
noWrap: false
nodeName: "TD"
nodeType: 1
nodeValue: null
offsetHeight: 36
offsetLeft: 0
offsetParent: <table class="sui-table">
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: "<td class=\"sui-cell sui-editable-cell\"><input name=\"ProductName\" class=\"sui-input sui-input-textbox\" type=\"text\"></td>"
ownerDocument: HTMLDocument http://localhost/../../../2
parentElement: <tr class="sui-alt-row">
parentNode: <tr class="sui-alt-row">
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: ""
But from there I couldn't find any feasible solution to disable the column editing. Any suggestion would be appreciable.
