A word of caution before we start
- It seems to be carefully prepared (all possible situations are covered)
- The api is human-readable. The events and properties are called OnBeginEdit, OnEndEdit, Focus, BindToCell and so on (opposed to the properties in the SP.Microfeed.js like $v_1, $v_2)
So to me it seems quite okay to use it in real applications, but we have to live with the risk that the jsgrid api will be changed without any notice to us developers.
Set up a site column with a custom jslink
The first step is to set up everything so we can start discovering jsgrid. It is just a walkthrough, not a detailed explanation. If you are eager to look at jsgrid, jump directly to that section. In this example we’ll apply a jslink to a custom site column. The very same jslink will be used in jsgrid, too. First of all add a new Site Column, call it VerySimpleColumn. The type is Multiple lines of text: Let us put it in a new group: Tolle Columns (beautiful, huh?) Three lines of plain text. Nothing extravagant. After that we can verify that the column exists. Fine. Now we have to update the jslink property for the new column. Make it in an app: Now add a custom list, call it “TolleList”: In the List Settings add the new site column, then you’ll see this: Now upload an empty js file to the Style Library, call it field.jslink.verysimplecolumn.js: It goes so fast :) Now it is time to implement some jslink code
JSGrid. First Step: Disable the field in Quick Edit
Wiring up a jsgrid EditControl
Implementing the actual editing
When working on this I did small changes to these events and tried it out in the web browser. I’d recommend it to you, too. Trying out is the best way of learning. Here comes the functions that we need to have to implement:
- createVerySimpleColumnGridEditControl (“constructor”). Here we initialize the edit control
- bindToCell. Here we get the cellContext that we save as a “private” variable on that Edit Control object. The cell context is needed to get and set the field value.
- focus. Here we define what element should be focused. In this case we forward the focus event to the actual input
- onBeginEdit. Here we show the Edit Control and make it editable.
- onEndEdit. Here we save the field value and hide the edit control.
Some notes on the Edit Control and Events
Well, jsgrid is quite complicated. I have tried to keep it as simple and minimalistic as possible. When we can these basics, we can move on and master advanced examples where we can deliver high value to business that loves Quick Edit :)
Interesting, Anton, Andrey and me are born in Sovyet and are interested in JSGrid. Coincidence? :)
Disabling a column in Quick Edit - Bool Tech - Dec 1, 2014
[…] Yesterday I wrote about jsgrid in my blog. Now comes more. Today I’ll share a little practical solution how one can disable editing a field in Quick Edit. […]
[…] has a better layout and uses JSGrid to render the data. Check this post for details about that ( chuvash.eu/2014/11/27/jsgrid-basics/ […]
“Now we have to update the jslink property for the new column. Make it in an app:”… Can you please elaborate on this? I am tryig this in sharepoint online. Do i need to write provided hosted app to link my custom js to this verysimplecolumn field?
Good Point. You can do it in many ways: provider hosted app, console app, you can also update this using JSOM. As the matter of fact, I am about to publish a tiny tool - a bookmarklet - for updating jslink. Stay tuned.
Hello, Any idea how we can handle the copy paste events into the JSgrid.In IE we can copy from excel and paste(like in excel). I need to validate some columns on bulk paste.However none of the handlers are being called when its pasted from clip board. Any help appreciated
great article! Was very, very helpful. Thank you!
Hi, i am fresher in my organisation, i have doubt in QuickEdit in sharepoint 2013 using CSR. 1. I have changed three single line text into three drop down choice field in New Form, Edit form using CSR (Cascading functionality). 2. i have changed even in quick edit from single line to drop down, but when i clicked in the field to edit. it shows the original value of single line text. 3.kindly let me know how to deal with it. Thanks kamalesh Paul
On enter or Tab key, how do you come out of the custom Edit Control created within cell? Please help!
Hello, I had changed three single line text into three drop down choice field in edit form using CSR (Cascading functionality). now i want do same functionality in quick edit. kindly let me know how to deal with it..