How to make a table component read-only dynamically

  • 1
  • Question
  • Updated 3 years ago
  • Answered
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?
Photo of Ryan Paddy

Ryan Paddy

  • 306 Points 250 badge 2x thumb

Posted 5 years ago

  • 1
Photo of John Nelson

John Nelson, Product Manager

  • 3,234 Points 3k badge 2x thumb
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);
});
Photo of Tami Lust

Tami Lust

  • 5,280 Points 5k badge 2x thumb
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], 
value = skuid.utils.decodeHTML(arguments[1]); 
skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value); 
if (value == 'Complete') 
    { 
        table.mode == 'readonly';
    }