Как я уже упоминал в своем заголовке, мне нужно установить редактируемое значение false для первой ячейки строки, как только я нажму кнопку редактирования. Но мне не нужно применять этот сценарий при добавлении новой строки в таблицу (вставка строки таблицы). Я выяснил, что наиболее подходящим способом достижения этого является отключение и включение редактирования столбцов в events => edit & insert функциях ShieldGrid.
Здесь показан мой подход на данный момент:
$("#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}?"
}
}
}
});
С событием editorCreating я могу легко отключить редактирование столбца:
editorCreating: function (e) {
if (e.field == "columnName") {
e.options = {enabled: false};
}
Но этот подход не работает с событием edit. (e.options Не определено в журнале консоли при вызове внутри функций вставки и редактирования), а также editorCreating запускается непосредственно перед инициализацией редакторов столбцов, что не будет соответствовать моему требованию. (
console.log(e.row[0].firstElementChild) возвращает:
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: ""
Но оттуда я не смог найти никакого приемлемого решения, чтобы отключить редактирование столбца. Любое предложение будет заметно.