sap.m.table multi checkbox make it READ ONLY - On Condition + SAP UI5 - sapui5

This is my first post to Stack, appreciate the work you guys do, amazing.
I have a sap.m.table sap ui5 and i have 4 records
out of 4, 2 are selected by default, i want to disable the preselected once based on condition.
I have tried below code but its not working, any input please?
View
/results' }" **mode="MultiSelect"**
Controller logic
//--->disable the selected department checkboxes
var tbl = that.getView().byId('idImpactTable');
var header = tbl.$().find('thead');
var selectAllCb = header.find('.sapMCb');
selectAllCb.remove();
tbl.getItems().forEach(function(r) {
var obj = r.getBindingContext("impactModel").getObject();
var oStatus = obj.COMPLETED;
var cb = r.$().find('.sapMCb');
var oCb = sap.ui.getCore().byId(cb.attr('id'));
if (oStatus === "X") {
oCb.setSelected(true);
oCb.setEnabled(false);
} else {
oCb.setEnabled(false);
}
});
Multiselect Mode Table - Make selected check box read only

Last time I tried this I found it easiest to use the updateFinished event on the table, and then use an internal property of the column list item, like so:
onTableUpdateFinished: function (oEvent) {
oEvent.getSource().getItems().forEach(function (item) {
var data = item.getBindingContext().getObject();
item._oMultiSelectControl.setEnabled(!data.IsEnabled); //whatever your check is
});
}
You'll have to find a way to keep them disabled though when using the Select All checkbox at the top of the table. I ended up extending sap.m.Table to accomplish that, there might be easier ways...
My extension is like this
sap.ui.define([
"sap/m/Table"
], function(Control) {
return Control.extend("myapp.controls.MyTable", {
updateSelectAllCheckbox: function(oEvent) {
if (this._selectAllCheckBox && this.getMode() === "MultiSelect") {
var aItems = this.getItems();
var iSelectedItemCount = this.getSelectedItems().length;
var iSelectableItemCount = aItems.filter(function(oItem) {
//standard table does not check if the item is enabled
return oItem.getSelected() || oItem._oMultiSelectControl.getEnabled();
}).length;
// set state of the checkbox by comparing item length and selected item length
this._selectAllCheckBox.setSelected(aItems.length > 0 && iSelectedItemCount === iSelectableItemCount);
}
}
});
});
And just the standard renderer
sap.ui.define([
"sap/m/TableRenderer"
], function(Control) {
return Control.extend("myapp.controls.MyTableRenderer", {
});
});
I suppose I could have extended the ColumnListItem but that was more effort than I wanted to put into the table extension

I have managed to find the solution, please find sample code to achieve.
//--->disable the selected department checkboxes
var tbl = that.getView().byId("idImpactTable");
var header = tbl.$().find("thead");
var selectAllCb = header.find(".sapMCb");
selectAllCb.remove();
var aItems = that.byId("idImpactTable").getItems();
//---> Check individual item property value and select the item
aItems.forEach(function(oItem) {
debugger;
//---> If using OData Model items Binding, get the item object
var mObject = oItem.getBindingContext().getObject();
var sPath = oItem.getBindingContextPath();
var completed = oItem.oBindingContexts.impactModel.getProperty("COMPLETED");
//--->get the id of Multi Checkbox
var cb = oItem.$().find(".sapMCb");
var oCb = sap.ui.getCore().byId(cb.attr("id"));
if (completed === "X") {
oCb.setEditable(false);
oItem.setSelected(true);
oItem.getCells()[4].setEnabled(false);
} else {
oItem.setSelected(false);
}
});
Thank you,
Jacob.Kata

//--->disable the selected department checkboxes
var tbl = that.getView().byId('idImpactTable');
tbl.getItems().forEach(function(r) {
// this makes the trick --->
var oMultiSelCtrl = r.getMultiSelectControl();
oMultiSelCtrl.setDisplayOnly( true );
});

Related

In SAPUI5 SmartTable on event beforeRebindTable adding some filters

My requiremnt is to put some filters on smartTable form my controller.
In Event beforeRebindTable i am using the following code to put filter using this code which is working fine.
onBeforeRebindTable: function (oEvent) {
var oBindingParams = oEvent.getParameter("bindingParams");
statFilter = new sap.ui.model.Filter("Claim_TYPE", "EQ", "1234");
oBindingParams.filters.push(statFilter);
}
But the problem is when the user is clicling on table column on filter again, the filter i am adding in above code is not visible in the selection dialog. User may need to delete this filter, If its not visible in dialog they wont be able to delete it.
I am not able to establish the link why the dialog is not getting updated, or should i add this somewhere else.
Thanks
Sonal.
onBeforeRebindTable: function (oEvent) {
var oSmartTable = oEvent.getSource();
if (this._isOnInit == null) this._isOnInit = true;
if (this._isOnInit) {
oSmartTable.applyVariant(
{
filter: {
filterItems: [{
columnKey: "YourSelectedColumn",
exclude: false,
operation: "EQ",
value1: "SomeEnteredValue",
value2: ""
}]
}
}
);
this._isOnInit = false;
}
}

How to show/hide dialog fields with a checkbox in AEM Touch UI

I am relatively new to AEM and I am trying to hide/show dialog fields on checkbox click. I have tried some ways but failed to achieve this functionality. This is just for my own learning. How can I achieve this?
I have tried adding the js clientlib and adding some classes and target to the checkbox and target fields respectively as suggested in other answers but it didn't seem to work. Please help.
First you need to create a clientLibs and add categories as cq.authoring.dialog.all, see the code below:
(function($, $document) {
$document.on("dialog-ready", function() {
Coral.commons.ready($document, function () {
dispalyOrHideTabs();
$(document).on('change', '#showText', function() {
if($('#showText').attr('checked')){
show('1');
}else{
hide('1');
}
});
$(document).on('change', '#showTable', function() {
if($('#showTable').attr('checked')){
show('2');
}else{
hide('2');
}
});
function hide(index){
var tab = $document.find("[id='compareImgId-"+index+"']").closest(".coral3-Panel");
var tab2 = tab.attr("aria-labelledby");
var tab3 = $document.find("[id='"+tab2+"']");
tab3.addClass("hide");
}
function show(index){
var tab = $document.find("[id='compareImgId-"+index+"']").closest(".coral3-Panel");
var tab2 = tab.attr("aria-labelledby");
var tab3 = $document.find("[id='"+tab2+"']");
tab3.removeClass("hide");
}
function dispalyOrHideTabs(){
var editable = Granite.author.DialogFrame.currentDialog.editable;
if(editable){
var node = Granite.HTTP.eval(Granite.author.DialogFrame.currentDialog.editable.path + ".json");
if(node){
var storedTextValue = node.showText;
var storedTableValue = node.showTable;
if(storedTextValue){
show('1');
}else{
hide('1');
}
if(storedTableValue){
show('2');
}else{
hide('2');
}
}
}
}
});
});
})($, $(document));
Add granite:id property as showText of the checkbox resource type.
And below is the dialog tabs which will be hidden and shown:

JQuery Isotope Combination Filter - preselection

I try to implement an Isotope combination filter. One of the three filters should be set to one selection, the other two filters should show all the items according to these filters. Everything works fine with one exception: When clicking the first time, the preselection is "lost" and all the items according to the preselected filter are shown. Only after the preselected filter is clicked, everything works.
As I am a beginner, I have no idea how to this. Any ideas how to solve this?
Thanks a lot!
<script>
$('#container').isotope({ filter: '.current' });
$(function(){
var $container = $('#container'), filters = {};
$container.isotope({
itemSelector : '.prod'
});
// filter buttons
$('.filter a').click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return;
}
var $optionSet = $this.parents('.option-set');
// change selected class
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// store filter value in object
// i.e. filters.color = 'red'
var group = $optionSet.attr('data-filter-group');
filters[ group ] = $this.attr('data-filter-value');
// convert object into array
var isoFilters = [];
for ( var prop in filters ) {
isoFilters.push( filters[ prop ] )
}
var selector = isoFilters.join('');
$container.isotope({ filter: selector });
return false;
});
});
I had the same problem. The only solution I found was simulating a click on the button for that specific selection after page load.
This is possible with jQuery.
Set an ID for the button in question and call:
$("#button_id").click();

Bootstrap datepicker with knockout.js databind

This question is similar to knockoutjs databind with jquery-ui datepicker, but instead of the jQueryUI datepicker, I would like to use one of the Bootstrap datepickers.
The API for the Bootstrap datepicker is different from jquery-ui, and I am having some trouble wrapping my head around making it work with knockout.js. I have created a jsFiddle to try it out.
It seems like the Bootstrap datepicker could be much simpler to use because it does not independently store the date. However, I would like to know how whether the jsFiddle is the appropriate way to use the Bootstrap datepicker widget with knockout.js i.e.
ko.bindingHandlers.datepicker = {
init: function(element, valueAccessor, allBindingsAccessor) {
//initialize datepicker with some optional options
var options = allBindingsAccessor().datepickerOptions || {};
$(element).datepicker(options);
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$(element).datepicker("destroy");
});
},
update: function(element, valueAccessor) {
}
};
Here is a sample of how you could accomplish this with the datepicker that you are using:
ko.bindingHandlers.datepicker = {
init: function(element, valueAccessor, allBindingsAccessor) {
//initialize datepicker with some optional options
var options = allBindingsAccessor().datepickerOptions || {};
$(element).datepicker(options);
//when a user changes the date, update the view model
ko.utils.registerEventHandler(element, "changeDate", function(event) {
var value = valueAccessor();
if (ko.isObservable(value)) {
value(event.date);
}
});
},
update: function(element, valueAccessor) {
var widget = $(element).data("datepicker");
//when the view model is updated, update the widget
if (widget) {
widget.date = ko.utils.unwrapObservable(valueAccessor());
if (widget.date) {
widget.setValue();
}
}
}
};
It did not look like there was any destroy functionality, so I removed that piece. This handles the widgets changeDate event to update the view model, when a user changes the date. The update function handles when the view model is changed to update the widget.
If you want to bind the value to a non-observable, then it would take a little more code. Let me know if that is something that you need to support.
http://jsfiddle.net/rniemeyer/KLpq7/
my current version is a mix between the already shown solutions:
ko.bindingHandlers.datepicker = {
init: function (element, valueAccessor, allBindingsAccessor) {
var unwrap = ko.utils.unwrapObservable;
var dataSource = valueAccessor();
var binding = allBindingsAccessor();
//initialize datepicker with some optional options
var options = allBindingsAccessor().datepickerOptions || {};
$(element).datepicker(options);
$(element).datepicker('update', dataSource());
//when a user changes the date, update the view model
ko.utils.registerEventHandler(element, "changeDate", function (event) {
var value = valueAccessor();
if (ko.isObservable(value)) {
value(event.date);
}
});
},
update: function (element, valueAccessor) {
var widget = $(element).data("datepicker");
var value = ko.utils.unwrapObservable(valueAccessor());
//when the view model is updated, update the widget
if (widget) {
widget.date = value;
if (widget.date) {
widget.setValue();
$(element).datepicker('update', value)
}
}
}};
The accepted answer didn't work for me with the current version of the date picker. The input wasn't being initialized with the value of the observable. I made an updated binding, to which I added this:
$(element).datepicker('update', dataSource());
That seems to do the trick.
Here's an updated fiddle that uses the latest available date picker, Bootstrap, jQuery, and Knockout: http://jsfiddle.net/krainey/nxhqerxg/
Update:
I experienced some difficulty with the date picker not playing nicely with the observable when a user would edit the value in the text field manually. The tool would immediately parse the date, and plug the result into the input field.
If the user tried to edit 10/07/2014, for example, and used the backspace or delete to remove a number (10/0/2014), the resulting value would be parsed immediately and inserted into the text input. If the value was, for a moment, 10/0/2014, the picker would shift the calendar to 09/30/2014, and plug that value into the text field. If I tried to edit the month, and the value was, for a moment, 1/7/2014, the picker would shift to January 7, 2014, and plug that value in to the text field.
You can see that behavior in this fiddle:
http://jsfiddle.net/krainey/nxhqerxg/10/
I had to update my binding with a special handler to detect focus, and bind a one-time blur event to get it to handle manual edits correctly.
$(element).on("changeDate", function (ev) {
var observable = valueAccessor();
if ($(element).is(':focus')) {
// Don't update while the user is in the field...
// Instead, handle focus loss
$(element).one('blur', function(ev){
var dateVal = $(element).datepicker("getDate");
observable(dateVal);
});
}
else {
observable(ev.date);
}
});
The fiddle referenced in the original answer has been updated to reflect this:
http://jsfiddle.net/krainey/nxhqerxg/
Here is what I Ended up
ko.bindingHandlers.datepicker = {
init: function (element, valueAccessor, allBindingsAccessor) {
//initialize datepicker with some optional options
var options = {
autoclose: true,
format: 'yyyy-mm-dd',
}
//var options = allBindingsAccessor().datepickerOptions || {};
$(element).datepicker(options);
//when a user changes the date, update the view model
ko.utils.registerEventHandler(element, "changeDate", function (event) {
var value = valueAccessor();
if (ko.isObservable(value)) {
var myDate = event.date;
var month = myDate.getMonth() + 1;
var monthText = month;
if (month < 10)
monthText = "0" + month;
var day1 = parseInt(myDate.getDate());
var dayText = day1;
if (day1 < 10)
dayText = '0' + day1;
value(myDate.getFullYear() + '-' + monthText + '-' + dayText);
}
});
},
update: function (element, valueAccessor) {
var widget = $(element).data("datepicker");
//when the view model is updated, update the widget
if (widget) {
widget.date = ko.utils.unwrapObservable(valueAccessor());
widget.setValue(widget.date);
}
}};
There is a much simpler way to get bootstrap-datepicker.js and knockout.js working together. Typically the initialization of the datepicker inputs is invoked during/after the page load. However when knockout.js updates the value binding, the datepicker is not updated correctly with the new value and so when you focus on the datepicker input it defaults to 01-Jan-2001.
All you have to do is to destroy and reinitialise the datepicker inputs after any knockout.js value bindings are updated as per the ViewModel method below, which sets up a mapped object to be edited.
self.showEditOrderForm = function (data) {
ko.mapping.fromJS(data, self.entity);
self.mode('edit');
$('#edit-dateordered').datepicker('destroy');
$('#edit-dateordered').datepicker({
format: 'dd-M-yyyy',
title: 'Select Date',
weekStart: 1,
todayHighlight: true,
autoClose: true,
endDate: '0d'
});
};

JQGrid select row checkboxclick

I try to receive row id of JQGrid on checkbox click like:
loadComplete : function() {
jQuery(".jqgrow td input").each(function() {
jQuery(this).click(function() {
var grid = $("#list");
var rowid = grid.jqGrid('getGridParam', 'selrow');
alert(rowid);
});
});
}
But row is not selected - so I always receive a null.
What can be the reason?
Thanks.
The reason is var rowid = grid.jqGrid('getGridParam', 'selrow'); will only contain rowid if you have already selected a row by clicking on the row before.
If you want an alternative, then you can select the checkbox on onSelectRow instead
onSelectRow: function(id,status){
var rowData = jQuery(this).getRowData(id);
var ch = jQuery(this).find('#'+id+' input[type=checkbox]').attr('checked');
if(ch) {
jQuery(this).find('#'+id+' input[type=checkbox]').attr('checked',false);
} else {
jQuery(this).find('#'+id+' input[type=checkbox]').attr('checked',true);
}
rowChecked=1;
currentrow=id;
}
Why not use the onSelectRow event built in jqGrid?
You can read more about jqGrid events here