Quick Edit supports JS Link and Client Side Rendering
Today I attended #SPSChicagoBurbs and the session by Wes Preston (@idubbs) on Client Side Rendering. A question was asked by someone in the audience if Quick Edit (new Data Sheet) would support CSR rendering. The consensus was probably not because of the advanced rendering, event handlers, and cell editing.
I gave it a quick test and surprisingly it worked!
When I renamed a file to become “test.txt” it turns the background green, text white, and even shows a custom icon <IMG> tag. This could be leveraged to give end users real-time feedback on the values entered. Unlike a JQuery page load event which only triggers once, this triggers per row as values are changed.
Video
Screenshot
Code
//override
(function () {
var overrideCtx = {};
overrideCtx.Templates = {};
overrideCtx.Templates.Fields = {
'LinkFilename': { 'View': ConditionalStatus }
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();
function ConditionalStatus(ctx) {
var ret;
console.log(ctx.CurrentItem.FileLeafRef);
if (ctx.CurrentItem.FileLeafRef== "test.txt") {
ret = ""
+ "
"
+ ctx.CurrentItem.FileLeafRef
+ "";
} else {
ret = ctx.CurrentItem.FileLeafRef;
}
return ret;
}

Awesome article Jeff. Great way to figure out this out on the spot. Very useful.
Jeff where to write this code.
Hey Kajal! This goes in the web part property pane “JS Link”, please see step #4 at http://www.learningsharepoint.com/2013/04/04/color-code-list-items-with-javascript-using-js-link-in-sharepoint-2013/
Hey Jeff.. Thanks al ot .. I have an query will this method help me restrict edit and delete operations on list based on certain values coming from database. Also, I wanted to know can we modify the call to our list web services in our HTTP module. i.e. I am writing script to send the call to list service with query dept=HR now in module i need to change it to dept=IMS is this possible to tamper request before the response is completed. i tried few steps I was able to read request but not write it. Can you please guide on this.. Thanks
Good question. I would start with formatting the REST URL calls. Please take a look at https://msdn.microsoft.com/en-us/library/office/jj164022.aspx From there maybe a function to return True/False if the department matches. Good luck! F12 breakpoints for debug always help me.
Hi Jeff, is it possible to override items in a combo while in quick edit? I’m trying to filter which options a user can select.
Excellent question.
Yes, I think so. Press F12, use DOM insepctor to locate the element you want to modify. You can code a JS function to modify the child nodes (delete options you don’t want to show. Think less about SP and more about JS browser DOM load. Hope that helps!
http://www.w3schools.com/jsref/met_select_remove.asp
Hi Jeff,
Let me know if you know anything on this…
I have a choice column in my custom list in SharePoint 2013. What I want is as follows:
I go to quick edit view in SharePoint. I change the value of choice field in quick edit mode and a corresponding value should be filled in another text field.
I searched a lot but could not find a change event for the choice (dropdown) in quick edit mode.
Please let me know if you have any idea.
Thanks,
Nirav
Interesting. Not sure exactly how to implement that in Quick Edit cascading across columns.
Why not use a SharePoint calculated column? That can take values from one source field to display in another. Simple and supported.
Making that occur in real-time on QuickEdit might involve some sort of DOM “.parent().nextChild()” selector to walk over to the next in the current row. Check out http://www.youmightnotneedjquery.com for creative ways to walk DOM tree without jQuery library dependency.
Cheers!
Hi Jeff,
It is really difficult to get the id of the field in Quick Edit. Sharepoint has lots of nesting and by navigating DOM would be a terrible task.
Let me know if you come across solution.
Thanks,
Nirav
I am trying to replicate this on SP online site but it is not working. Does Modern UI need to be enabled for it to work?
I only tested this with classic pages in SharePoint 2013 on-premise.
For SharePoint Online modern pages, check out this GitHub repo at https://github.com/SharePoint/sp-dev-column-formatting
Hi Jeff,
will it be possible to do a post back upon updating a field?
Hi Rinu,
Good question. The CSR (Client Side Rendering) is intended to update HTML view only.
However, line #19 after (ret=””;) would be a good place to try adding a HTTP GET/POST execution. That way it occurs only when the IF () statement is true.