Hi,
I tried following this guide and applying it to my situation but I get stuck when trying to update the value. https://docs.skuid.com/v10.0.4/en/skuid/javascript/snippets/table-custom-field.html
I’ve running a custom field Renderer on the Quantity field and it shows the field correctly, but I can’t get it to update the field with a number instead of a true or false.
Where do I put the js function that updates the model? I know I need to use this code, but how do I format the function around the event of clicking the checkbox?
field.model.updateRow( field.row, field.id, ); This is the code I currently have var field = arguments[0], value = arguments[1], $ = skuid.$; function updateField() { field.model.updateRow(field.row, field.id, 1); console.log('function working'); } switch (field.row.Name) { case 'GoPro rental (per day)': skuid.ui.fieldRenderers.BOOLEAN.edit( field, value ); break; case 'Private guide (per day)': skuid.ui.fieldRenderers.BOOLEAN.edit( field, value ); break; case 'Compass rental (per day)': skuid.ui.fieldRenderers.BOOLEAN.edit( field, value ); break; default: skuid.ui.fieldRenderers.PICKLIST.edit( field, value ); break; }
Thank you for any help you can provide!
Sam,
I think you’ll have to modify the code a bit more than expected. Basically, to be able to edit the value of your row based on the checkbox, I think you have to create and add the checkbox to the DOM, so that you can take custom actions when it’s checked or unchecked. This is what I’ve been able to come up with:
var $ = skuid.$, field = arguments[0], value = arguments[1], cellElem = field.element; // if the field is in read mode if ( field.mode == 'read' ) { // just use the standard Integer read-mode renderer // you can customize this as well, if needed skuid.ui.fieldRenderers.INTEGER.read(field,value); } else if (field.mode == 'edit') { // this function runs whenever the checkbox is clicked function optionClickHandler ( event ) { // get the new value from the click event, either true or false var newValue = event.target.checked; //if true (checkbox is checked), update the Quantity field to 1 (or modify this to whatever the value should be) if (newValue) { field.model.updateRow( field.row, field.id, 1 ); } else { field.model.updateRow( field.row, field.id, 0 ); } } // modify this to fit what you need // I changed from switch case to if else so you didn't have to duplicate var name = field.row.Name; if (name === "GoPro rental (per day)" || name === "Private guide (per day)") { var v = false; if (value == 1) { v = true; } // create a checkbox DOM element, making it checked or not based on the value, and attaching the click handler function to it var checkbox = $( '' ).attr('checked', v).click(optionClickHandler); // add the checkbox element to the original DOM element so that it shows up on the page checkbox.appendTo( cellElem ); } else { skuid.ui.fieldRenderers.PICKLIST.edit( field, value ); } }<br /><br />
You might need to do some tweaks based on what you specifically want to do, but I think this is headed in the right direction
Thanks!
Amy
