I have a queue where I want to show a list of items and when you click on an item in the queue it Runs Multiple Actions. This works fine.
I now want to change the CSS and disable some items in the queue based on some complex criteria about what is selected in another model.
I think I have a way to change the CSS but I am having trouble making the queue item not clickable, or having the click do nothing (or do something else like show an alert).
Here is my Item Renderer Snippet code so far:
var selectedMtgModel = skuid.model.getModel('SelectedMeeting');
var classname = 'not-available';
if (selectedMtgModel.data.length > 0){
var mtgRow = selectedMtgModel.getFirstRow();
//More conditional logic to go here...
classname = 'available';
}
var args = arguments[0],
item = args.item,
list = args.list,
model = args.model,
element = args.element,
row = item.row,
renderTemplate = '<div class="attendee-queue-item ' + classname + '">{{Attendee__r.Name}} ({{Number_of_Meetings__c}}) - {{{Attendee__r.Congressional_District_Account__r.Name}}}</div>',
mergeSettings = {
createFields: true,
registerFields: true
};
if (classname=='available'){
element.html(
skuid.utils.merge('row',renderTemplate,mergeSettings,model,row)
);
} else {
element.html(
skuid.utils.merge('row',renderTemplate,mergeSettings,model,row)
).click (function() {
alert ("This person is not available for this meeting");
});
Any ideas for how to disable the clickability or the actions for a queue item?
Thanks