I have a js fiddle to show the issue that I am facing.
Tabulator 'email' column has freetext set to true to allow the user to set the value of the cell to a free text entry as follows:
editorParams:{
values:{
"steve#boberson.com":"steve",
"bob#jimmerson.com":"bob",
"jim#stevenson.com":"jim",
"harvy#david.com":"Harvy",
"ken#thompson.com":"Ken",
"denny#beckham.com":"Denny"
},
freetext:true,
searchFunc:function(term, values){
console.log("term and val "+term +" \n"+values);
var matchedEntries = {};
var matchFound = false;
for(var key in values) {
if(key.includes(term)){
matchFound = true;
matchedEntries[key] = values[key];
}
}
if(matchFound){
return matchedEntries;
}
else{
return {term: term};
}
}
}}
Select one of the values from the selector list displayed, say steve, value being 'steve#bobberson.com'.
Then after the value is selected, click on the same tabulator cell, the value displayed suddenly changes to the label.When user clicks enter key now, the label is selected instead of the value,.ie. steve will be displayed instead of steve#bobberson.com
If this is not a bug, how do I make sure that the value steve#bobberson.com remains selected after clicking enter. This is because freetext option is set to true in the editorParams of the column
Attached a gif showing the issue
That is not a bug,
With freetext enabled, users are able to enter any text they like in that field and it will be saved which is exactly what is happening in the example
If they select the email address again from the list then it is correctly saved.
It is an either/or scenario, you can either restrict the users to selecting specific values from the list OR you can allow them freetext in which case anything goes.
If you want a different behaviour then you can always build a custom editor that works in the way you want. Checkout the Custom Editor Documentation for more information
I have created an autocomplete item on my page and i want to trigger the change on this field. I am using Apex 18.2 and for the autocomplete item i have used a dynamic action with event Update [Text field with autocomplete].
This works fine when i change the value from the autocomplete and put another value from the list, but if i want to delete the value, the DA is not triggered.
I have tried also ojupdate custom event, but the same problem.
I have tried event change when item is null, but no success.
What i want to do is when deleting the value from the item (when item is null) to trigger an action.
Is there a DA that can help me on this particular issue?
Item: P37_ART
Type: Text field with autocomplete
Settings: Contains & Ignore Case
Lazy Loading: YES
Maximum values in List: 20
Item based on SQL Query and the format is number1||' - '||text1
Example: 1245 - Groceries
Dynamic Action:
Event: Update [Text field with autocomplete]
Action: Execute Javascript code
alert('test');
create another dynamic action thats has client side condition type javascript condition and check if your Text field is empty or is null using JS code, for example:
document.getElementById("textfield").value == "" || document.getElementById("textfield").value.length == 0 || document.getElementById("textfield").value== null
I'm using tabulator (fantastic thing), which has a built in, in line editing functionality.
The thing is though, it's either on or off by having the editor tag on a column basis.
You can disable the editor for a given cell as well.
What I'm trying to do is to have the table displayed as read only so to say.
Then click on a 'edit' button (which is in my table and I capture the click). That would in turn enable the inline, built-in editor functionality for that raw only.
Then I click a save button, write the updated data back to my DB and make the row read-only again.
So, with tabulator 4.2, I'd be looking for something like
var usrtable = new Tabulator("#usrtable", {
ajaxURL:"/account/cgi-bin/getallusers.php",
resizableColumns:false,
tooltips:true,
history:true,
pagination:"local",
paginationSize:10,
paginationSizeSelector:true,
reactiveData:true,
selectable:true,
initialSort:[{column:"username", dir:"asc"},],
columns:[
{ formatter: editIcon, width: 40, sortable: false, align: "center", cellClick: function (e, cell) {
var id = cell.getRow().getData().id;
row(id).editable=true;
/\/\/\/\/\/\/\/\/\/\/\
}
},
{title:"Id", field:"id", visible:false},
{title:"Username", field:"username", width:80, editor:"input"},
{title:"Password", field:"password", width:70, editor:"input"},
{title:"Role", field:"role", width:70, align:"center", formatter:"plaintext", editor:"select", editorParams:{values:["user","admin"]}},
{title:"Change passwd", field:"changepasswd", width:90, align:"center", formatter:"tickCross", sorter:"boolean", editor:true},
],
});
Is that somehow possible or do I have to re-invent the wheel? i.e. create a model to edit the data outside the table?
What I have tried.....
Once rendered, a cell looks like this:
<div class="tabulator-cell" role="gridcell" tabulator-field="username" tabindex="0" title="test" style="width: 80px; height: 29px;">test</div>
And when you click on the cell, it becomes editable and the class 'tabulator-editing' is added to the div.
So..... I though I could 'just' catch the click event and do something like this:
$(".tabulator-cell").on("click",function(){
($this).removeClass("tabulator-editing");
});
that didn't work so tried this:
$(".tabulator-cell").on("click",function(e){
e.preventDefault();
});
that didn't work either.
When doing this:
$(".tabulator-cell").on("click",function(){
alert("cell clicked");
});
it actually never fires... :-(
Either I'm doing something wrong or really do not know where to go from here....
This can be achieved with Tabulator's Optional Editing:
// column definition
{ title:"Name", field:"name", editor:"input", editable:editCheck }
var editCheck = function (cell) {
var isEditable = cell.getRow().getElement().classList.contains('isEditable');
return isEditable;
}
With this logic in place, you simply need to toggle isEditable class on the appropriate Tabulator Row.
In the documentation under Column Setup, there is a Data Manipulation option called editable.
http://tabulator.info/docs/4.2/columns#definition
editable - callback to check if the cell is editable (see Manipulating Data for more details)
I haven't experimented with it myself, but it appears as if this is only called when initially rendering the table, so you may have to force a re-render with table.redraw(true) when the user clicks the Edit and Save buttons.
You could also just use your cellClick event and call cell.edit().
So, I also got feedback from Oli who is the developer for Tabulator.
The short answer is that there is no option to enable editing at the row lever as I feared.
Furthermore, the option will not be added due to multiple factors.
In other words, what I'm trying to do is not available out of the box and the editing is to be done at the cell level.
There is no option for this in the tabulator. But if you want to disable a cell from editing, you can simply remove all the tabulator applied classes for the particular cell. For eg., if you want to make the last row edit disabled, you can use something like this,
$(".tabulator-row:last .tabulator-cell").removeAttr("role tabulator-field tabindex title");
I know this is a old question but my answer can be useful for visitors come here (like me) in future..
We have also a similar requirements, and we ended up by this solution. We have added "editor" in every column with another attribute "editable". In "editable", we are checking whether the row is selected or not, if row is selected then field can be editable otherwise not editable.
Other than that we have also used a "rowSelected" and "rowDeselected" to show/hide save button and on "rowSelected", we are checking that only 1 row is selected at a time.
For a custom page type, I have a multiple choice form filed as seen in image 1 and 2. I was able to set it up (using jquery) so that when I click on other checkboxes belonging to a another field, the checkbox Label and value of this field is changed accordingly as seen in image 3 - 'Author1', 'Author2', 'Author3' were replaced with something else.
The problem is when I hit the Save button, all of my new label/value are not Saved, but the checkbox value and label return to its original value.
Is there a way to make it so that these checkboxes can accept new value and the new value can be saved. Thanks!
Where does authors values come from? Database? You should be able to use SQL query as data source for multiple choice control. This will allow you to store actual values into database whenever you save a page on the Form tab.
So the idea is to load actual values, replace them with 'AuthorN' and change back to original value when checked.
I've set up an example which might help you. I've created a form with three fields:
FirstAuthor
Type: Integer
Form control: Radio buttons
Data source: SQL Query (select userid,username from cms_user)
Has depending fields: true
SecondAuthor
Type: Integer
Form control: Radio buttons
Data source: SQL Query (select userid,username from cms_user)
Has depending fields: true
OrderedAuthors
Type: Text (1000)
Form control: Label
Default value: {% (if(firstauthor>0) { GlobalObjects.Users.Where("userid="+firstauthor)[0].UserName } else {""}) + ", " + (if(secondauthor>0) {GlobalObjects.Users.Where("userid="+secondauthor)[0].UserName} else {""} #%}
Depends on another field: true
I guess you have a list of authors somewhere in the database so you can just replace CMS_User table with your table. Then all you need to do is to adjust the macro in the third field to give you results you want.
I wound up modifying the source from a publically posted POC: http://datacogs.com/datablogs/archive/2007/08/26/641.aspx, which is a custom field definition for cascading drop downs. The modifications were to allow parent-child list boxes where a user can multiselect for filtering and selecting the values to be written back to a SharePoint list. I got the parent-child cascading behavior working, but the save operation only takes the first value that is selected from the list box. I changed the base type for the custom field control from "SPFieldText" to "SPMultiLineText", along with changing the FLD_TYPES field definition values from:
Text to Note and this did not work. So, I changed the field control base type to "SPFieldMultiChoice" and the FLD_TYPES to "MultiChoice" and still get the same result, which is only the first value that's selected, writing to the SharePoint list.
Does anyone have any idea how to get a custom field with multiple selections to write those multiple selections to a SharePoint list?
Thanks for taking the time to read through my post.
Cheers,
~Peter
I was able to accomplish this by inheriting from SPFieldLookup and overriding its internal handling of AllowMultipleValues:
In your FLDTYPES_*.xml set <ParentType>LookupMulti</ParentType>
In your extension of SPFieldLookup, be sure to override AllowMultipleValues (always true), FieldValueType (probably typeof(SPFieldLookupValueCollection)) and FieldRenderingControl. I also set base.LookupField = "LinkTitleNoMenu", though in retrospect I'm not sure why. :)
In your field editor control's OnSaveChange(), set the field's Mult value to true.
To set Mult, you can either string manipulation on field.SchemaXml:
string s = field.SchemaXml;
if (s.IndexOf(" Mult=", StringComparison.OrdinalIgnoreCase) < 0)
field.SchemaXml = s.Insert(s.IndexOf("/>", StringComparison.Ordinal), " Mult=\"TRUE\" ");
Or use reflection:
var type = field.GetType();
var mi = type.GetMethod("SetFieldBoolValue", BindingFlags.Instance | BindingFlags.NonPublic);
mi.Invoke(field, new object[] { "Mult", true });
It's been a while, so I might be forgetting something, but that should be most of it.