QuickEdit in sharepoint 2013 using CSR

Hi Nanddeep Nachan,

When I clicked the Select Tag, it does not Shown the dropdown.

(function () {
var editWrapper = '';
var createVerySimpleColumnGridEditControl = function (gridContext, gridTextInputElement) {
var cellContext, inEdit, html, container, input, id;
id = "tolle-" + new Date().getTime();
html = String.format(editWrapper, id, "");
container = document.createElement("div");
container.innerHTML = html;
input = container.getElementsByTagName("select")[0];
container.style.cssText = 'visibility:hidden;position:absolute;top:0;left:0;background:#ffffff;';
gridContext.parentNode.appendChild(container);
var bindToCell = function(ctx) {
cellContext = ctx;
//An input is put as an overlay. We have to set the width and height so that it takes the whole cell place
container.style.minWidth = cellContext.cellWidth + 'px';
container.style.width = cellContext.cellWidth + 'px';
container.style.height = cellContext.cellHeight + 'px';
console.log("tolle BindToCell");
};
var onCellMove = function () { console.log("tolle OnCellMove"); };
var focus = function(eventInfo) {
input.focus();
console.log("tolle Focus", eventInfo);
};
var onBeginEdit = function (eventInfo) {
inEdit = true;
var currentValue = cellContext.originalValue.localized;
if (currentValue) {
input.value = currentValue;
}
cellContext.Show(container);
console.log("tolle OnBeginEdit");
this.Focus(eventInfo);
};
var onEndEdit = function() {
//cellContext.Hide(container);
inEdit = false;
var value = input.value;
cellContext.SetCurrentValue({
localized: value
});
console.log("tolle OnEndEdit");
};
var unbind = function() { console.log("tolle Unbind"); };
var dispose = function () { console.log("tolle Dispose"); }
return {
SupportedWriteMode: window.SP.JsGrid.EditActorWriteType.LocalizedOnly,
SupportedReadMode: window.SP.JsGrid.EditActorReadType.LocalizedOnly,
BindToCell: bindToCell,
OnCellMove: onCellMove,
Focus: focus,
OnBeginEdit: onBeginEdit,
OnEndEdit: onEndEdit,
Unbind: unbind,
Dispose: dispose
}
};
function handleGridMode(ctx, field) {
window.SP.SOD.executeOrDelayUntilScriptLoaded(function () {
window.SP.GanttControl.WaitForGanttCreation(function (ganttChart) {
var verySimpleColumn = null;
var editId = "EDIT_TOLLE_VERYSIMPLEFIELD";
var columns = ganttChart.get_Columns();
for (var i = 0; i
if (columns[i].columnKey == "Division") {
verySimpleColumn = columns[i];
break;
}
}
if (verySimpleColumn) {
verySimpleColumn.fnGetEditControlName = function (record, fieldKey) {
return editId;
};
window.SP.JsGrid.PropertyType.Utils.RegisterEditControl(editId, function (gridContext, cellControl) {
return createVerySimpleColumnGridEditControl(gridContext, cellControl);
}, []);
}
});
}, "spgantt.js");
}
function verySimpleView(ctx, field) {
var wrapper = '{0}';
var value = ctx.CurrentItem[ctx.CurrentFieldSchema.Name] || "";
if (ctx.inGridMode) {
handleGridMode(ctx, field);
}
return String.format(wrapper, value);
}
var overrideContext = {};
overrideContext.Templates = overrideContext.Templates || {};
overrideContext.Templates.Fields = {
'Division': {
'View': verySimpleView
}
};
window.SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
})();

Ref: http://tech.bool.se/jsgrid-basics/#comment-104438

Thanks in advance

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Gowtham8y ago
Hi Nanddeep Nachan,

When I clicked the Select Tag, it does not Shown the dropdown.
(function () {
var editWrapper = '';
var createVerySimpleColumnGridEditControl = function (gridContext, gridTextInputElement) {
var cellContext, inEdit, html, container, input, id;
id = "tolle-" + new Date().getTime();
html = String.format(editWrapper, id, "");
container = document.createElement("div");
container.innerHTML = html;
input = container.getElementsByTagName("select")[0];
container.style.cssText = 'visibility:hidden;position:absolute;top:0;left:0;background:#ffffff;';
gridContext.parentNode.appendChild(container);
var bindToCell = function(ctx) {
cellContext = ctx;
//An input is put as an overlay. We have to set the width and height so that it takes the whole cell place
container.style.minWidth = cellContext.cellWidth + 'px';
container.style.width = cellContext.cellWidth + 'px';
container.style.height = cellContext.cellHeight + 'px';
console.log("tolle BindToCell");
};
var onCellMove = function () { console.log("tolle OnCellMove"); };
var focus = function(eventInfo) {
input.focus();
console.log("tolle Focus", eventInfo);
};
var onBeginEdit = function (eventInfo) {
inEdit = true;
var currentValue = cellContext.originalValue.localized;
if (currentValue) {
input.value = currentValue;
}
cellContext.Show(container);
console.log("tolle OnBeginEdit");
this.Focus(eventInfo);
};
var onEndEdit = function() {
//cellContext.Hide(container);
inEdit = false;
var value = input.value;
cellContext.SetCurrentValue({
localized: value
});
console.log("tolle OnEndEdit");
};
var unbind = function() { console.log("tolle Unbind"); };
var dispose = function () { console.log("tolle Dispose"); }
return {
SupportedWriteMode: window.SP.JsGrid.EditActorWriteType.LocalizedOnly,
SupportedReadMode: window.SP.JsGrid.EditActorReadType.LocalizedOnly,
BindToCell: bindToCell,
OnCellMove: onCellMove,
Focus: focus,
OnBeginEdit: onBeginEdit,
OnEndEdit: onEndEdit,
Unbind: unbind,
Dispose: dispose
}
};
function handleGridMode(ctx, field) {
window.SP.SOD.executeOrDelayUntilScriptLoaded(function () {
window.SP.GanttControl.WaitForGanttCreation(function (ganttChart) {
var verySimpleColumn = null;
var editId = "EDIT_TOLLE_VERYSIMPLEFIELD";
var columns = ganttChart.get_Columns();
for (var i = 0; i
if (columns[i].columnKey == "Division") {
verySimpleColumn = columns[i];
break;
}
}
if (verySimpleColumn) {
verySimpleColumn.fnGetEditControlName = function (record, fieldKey) {
return editId;
};
window.SP.JsGrid.PropertyType.Utils.RegisterEditControl(editId, function (gridContext, cellControl) {
return createVerySimpleColumnGridEditControl(gridContext, cellControl);
}, []);
}
});
}, "spgantt.js");
}
function verySimpleView(ctx, field) {
var wrapper = '{0}';
var value = ctx.CurrentItem[ctx.CurrentFieldSchema.Name] || "";
if (ctx.inGridMode) {
handleGridMode(ctx, field);
}
return String.format(wrapper, value);
}
var overrideContext = {};
overrideContext.Templates = overrideContext.Templates || {};
overrideContext.Templates.Fields = {
'Division': {
'View': verySimpleView
}
};
window.SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
})();
Ref: http://tech.bool.se/jsgrid-basics/#comment-104438

Thanks in advance
+1
Nanddeep Nachan8y ago
Can you please provide screen shot of the form and reference code to help you better?
0