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
Related
I have to enable columns selection and perform operation like export Excel/copy to clipboard on particular columns selected.
The requirement is when I click on column header it should select the entire column.
How can this be achieved?
There are a few ways to do it.
One would be to add a new 'Select Column' entry to the Column Menu and then in the Action create a new cell range. Something like this should do the trick:
var gridOptions = {
....
getMainMenuItems: getMainMenuItems,
....
}
function getMainMenuItems(params) {
var menuItems = params.defaultItems.slice(0);
menuItems.push({
name: 'Select Column',
action: function () {
gridOptions.api!.clearRangeSelection();
const cellRangeParams: CellRangeParams = {
rowStartIndex: 0,
rowEndIndex: gridOptions.api!.getDisplayedRowCount(),
columnStart: params.column.getId(),
columnEnd: params.column.getId(),
};
gridOptions.api!.addCellRange(cellRangeParams);
},
});
return menuItems;
}
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 );
});
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:
Is there a way to have row selection checkbox for each row without configuring a special column for it? I mean to add propertie for my gridOptions and to see checkbox near each row, then to get all selected rows?
All the documentation I read is showing how to do it by adding it to specific column.
Thanks,
You can still have row selection without having a checkbox column - you can either simply have selection based on row selection, or have a column render with a checkbox in it (with a custom cell renderer).
Take a look at the Selection Documentation for more information about row selection, and at the Cell Rendering Documentation about cell rendering
I know it is too late to answer on this post. But It may help someone who look for solution still. It works with checkbox selection on each row (click anywhere on the row to select checkbox), shift/control and toggle selection. Here I have given only necessary code.
vm.gridOptions = {
appSpecific : {},
onRowClicked : onRowClicked,
onGridReady : function() {
let api = vm.gridApi = vm.gridOptions.api;
}
};
function toggleSelect(row) {
row.node.setSelected(!row.node.isSelected(), false);
}
function onRowClicked(row) {
var appSpecific = vm.gridOptions.appSpecific;
var lastSelectedRow = appSpecific.lastSelectedRow;
var shiftKey = row.event.shiftKey;
// if not modifier keys are clicked toggle row
if (!shiftKey) {
toggleSelect(row);
} else if (lastSelectedRow !== undefined) {
if (shiftKey) {
var startIndex, endIndex;
// Get our start and end indexes correct
if (row.rowIndex < lastSelectedRow.rowIndex) {
startIndex = row.rowIndex;
endIndex = lastSelectedRow.rowIndex;
}
else {
startIndex = lastSelectedRow.rowIndex;
endIndex = row.rowIndex;
}
// Select all the rows between the previously selected row and the
// newly clicked row
for (var i = startIndex; i <= endIndex; i++) {
vm.gridApi.selectIndex(i, true, true);
}
}
}
// Store the recently clicked row for future use
appSpecific.lastSelectedRow = row;
getSelection(); // Implement functionality to get selected rows
}
I'm trying to set values in a slick grid from jQuery thru val and text e.g. .find('div.slick-cell.l2.r2').text('xyz'). There is a jquery autocomplete on the cell in question but it only gets activated on click. So when I click the cell in question it get overwritten by the initial defaultValue in the editor:
function ComboBoxEditor(args) {
...
this.loadValue = function (item) {
defaultValue = item[args.column.field] || "";
$input.val(defaultValue);
$input[0].defaultValue = defaultValue;
$input.select();
};
...
Can I get the jQuery text value from within the world of the slick grid.
Think of slickgrid as a rendering engine and dataView as the data interface (You are using dataView right?) Jquery or javascript editing of dom elements isn't gong to work so think about how jquery/javascript can use the dataView methods to do the updating.
I ran into this same issue when adding drag and drop of files into SlickGrid
I detect the elementID of the drop and map it back to the dataView row and column.
Here is the function I used for text pasting:
function insertText(textString, location) {
grid.resetActiveCell();
$(location).click();
var startCell = grid.getActiveCell();
if (startCell) {
// only paste text into active cells for now
var columnDef = grid.getColumns();
var colField = columnDef[startCell.cell].field;
if (!dataView.getItem(startCell.row)) {
// new row
var tobj = {'id': "new_" + (Math.random() + 1).toString(36).substring(7)};
tobj[colField] = textString;
dataView.addItem(tobj);
} else {
// modify existing cell
var item = dataView.getItem(startCell.row);
item[colField] = textString;
dataView.updateItem(item.id, item);
}
grid.resetActiveCell();
grid.render();
dataView.refresh();
}
}