Having trouble with table field Renderer boolean depending on name

Sam BeckerSam Becker Member ✭✭
edited May 2019 in Questions
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, <insert value here> );    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!


Comments

  • Amy DewaalAmy Dewaal Member, Skuad ✭✭
    edited April 23
    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 );     } }

    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
Sign In or Register to comment.