How to make a table component read-only dynamically

Questions
,
1

I have a page displaying a detail view of a row. There is a table with some related items from another object. What would be the best way to make the table of related items read-only, depending on some data in the parent row? Is it a matter of removing all the actions like add, edit, delete and save from the table component via Javascript, or is there a simpler way?

2

Hey Ryan, Sorry for the delay in getting back to you. But yes, you can certainly make a table read-only dynamically. One big caveat, as you probably realize, this is only making the UI read-only. As far as the database is concerned, it’s still writable. That said, you can use the following code as an inline Javascript resource to accomplish what you’ve described. The only tricky part will be if you have a bunch of tables on your page. If that’s the case, you’ll need to narrow in on the specific table you want using some creative jQuery selectors.

var $ = skuid.$; $(function() { var m = skuid.model.getModel('your_model_name'); var renderTable = function() { var row = m.getFirstRow(); var fieldToCheck = row.your_field_name; var table = $('.nx-skootable:visible').data('object'); if(fieldToCheck == true) { table.mode = 'read'; table.list.render({doNotCache:true}); } else { table.mode = 'readonly'; table.list.render({doNotCache:true}); } }; // run the first time (page load) renderTable(); // set to listen for changes, then rerender table // comment out this code if you only want to check // on page load var listener = new skuid.ui.Editor(); listener.handleChange = function() { renderTable(); }; listener.registerModel(m); });
3

Hi Ryan,

If I understand correctly the above code would be to make an entire table read only. What if I wanted a row to be read only based on the value of another field? I tried editing a snippet that Rob put up to highlight the row but now the table doesn’t render. I have no doubt that I am missing tons of pieces.

Basically I am trying to say in the code is if the Status field is ‘Complete’ then mark the row read only.

var field = arguments[0],&nbsp;<br>value = skuid.utils.decodeHTML(arguments[1]);&nbsp;<br>skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value);&nbsp;<br>if (value == 'Complete')&nbsp;<br>&nbsp; &nbsp; {&nbsp;<br>&nbsp; &nbsp; &nbsp; &nbsp; table.mode == 'readonly';<br>&nbsp; &nbsp; }