I'm trying to setup a column in a jqGrid that has one radio button per row in it, to allow the user to set a single row as the "primary" child of the parent. The following code, however, merely renders empty cells.
I imagine the cells are not being put into 'edit mode' or whatever, which is confusing to me because there's an editable checkbox column on the same grid which just works as desired.
(There's a navButton at the bottom of the grid that saves the state of the grid if that's relevant.)
var createRadioButton = function(value) {
return $("<input type='radio' />", {
name: mySubGridID,
checked: value
}).get();
}
var extractFromRadioButton = function(elem) {
return $(elem).val();
}
$("#grid").jqGrid({
url: '/GetData',
datatype: 'json',
colModel: [
...
{ label: 'Selected', name: 'selected', index: 'selected', editable: true, edittype: 'custom', editoptions:
{
custom_element: createRadioButton,
custom_value: extractFromRadioButton
}
},
...
],
...
});
Thanks for any help!
You try to use edittype: 'custom'. This work only in a edit mode (inline editing or form editing). If I correct understand your question you try to add radio button which are displayed in all rows in the corresponding column. So you should use better custom formatter (see here an example). You can bind click event in the loadComplete (see here an example).
I am not sure that I understand why you need to use radio button. If you want use radio buttons only for row selection probably you should consider to use multiselect:true instead. Some small behavior of selection you can change inside of onSelectRow or beforeSelectRow event handler if needed.
I had this same problem with the formatter and had to set a width on the radio button as it was getting set wider than the cell for some reason.
function radioButtonFormatter(cellValue, options, rowObject) {
var radioHtml = '<input style="width:25px" type="radio" value=' + cellValue + ' name="radioid"></input>';
return radioHtml;
}
I needed a simpler solution so I came up with this method which uses the built-in multiselect rather than adding a col to the grid.
...
var gridSelector = $("#myGrid");
//jqGrid code snippet, methods below:
multiselect : true, //Must be true to allow for radio button selection
beforeSelectRow: function(rowid, e)
{
// Allow only one selection
$(gridSelector).jqGrid('resetSelection');
return (true);
},
beforeRequest : function() {
//Remove multi-select check box from grid header
$('input[id=cb_myGrid]', 'div[id=jqgh_myGrid_cb]').remove();
},
loadComplete : function () {
//Convert grid check boxes to radio buttons
$('input[id^="jqg_myGrid_"]').attr("type", "radio");
},
...
Cheers,
Related
jQuery("#grid").jqGrid({
datatype: "local",
width:'auto',
height: 'auto',
multiselect:true,
colNames:[
'no'
],
colModel:[
{name:'no', align:'right', width:70}
],
beforeSelectRow: function(rowid, e) {
if($("#grid>tbody tr").eq(rowid).children().eq(3).text()=="unused"){
return true;
}else{
return false;
}
}
loadComplete: function(data) {
$("#grid").parents('div.ui-jqgrid-bdiv').css("max-height","250px");
},
});
i don't want to select skyblue part.
so i removed its checkbox.
but when i select all, even skyblue part doesn't have checkbox, it's still selected.
how can i solve this problem?
If you add a disabled class to this row, it will be not selected either with user input and when you click SelectAll - in this case you do not need to remove the check box.
If you use jQuery UI css the class is named ui-state-disabled
If You use Bootstrap 3,4,5 the class is named ui-disabled
The beforeSelectionChange is being called with an rowItem array while clicking the select All checkbox in the header, no option to disallow selection. I have a requirement to disabled the checkbox for some row depending upon model. I can do it with CheckboxCellTemplate with configuring ng-disabled. But i want the disabled row not be selected when clicking on select all checkbox. Is there a way to do it?
Thanks
Got this one fixed with the below solution, please let me know if you have a better solution or you see any issue with this.
$scope.myGridOptions = {
data: 'gridData',
enableSorting: false,
showSelectionCheckbox: true,
selectedItems: $scope.selectedData,
selectWithCheckboxOnly: true,
afterSelectionChange: function (rowItem) { return $scope.updateRowSelection(rowItem); }};
$scope.updateRowSelection = function (rowItem) {
if (rowItem.length) {
for(var i = 0 ; i < rowItem.length ; i ++ ) { //Foreach can be used
if (!$scope.isMySelectionAllowed(rowItem[i].entity)){
if (rowItem[i].selected) {
$scope.myGridOptions.selectRow(rowItem[i].rowIndex, false);
}
}
}
}
};
In jqgrid with multiselect enabled, even when the beforeSelectRow returns false, the checkbox remains checkable. Is it a bug and if so is there a workaround for this.
$("#grid").jqGrid({
beforeSelectRow: function(rowid, e) {
return false;
}
Usecase here:
http://jsfiddle.net/erduT/1/
http://jsfiddle.net/erduT/2/
Please advice.
It is not exactly a bug, beforeSelectRow in this case is disabling the selection of the row, not the selection of the checkbox. Which is evident in your fiddle since the row itself does not remain highlighted. So in your beforeSelectRow function you are going to have to disable any other UI elements yourself.
Ex.
beforeSelectRow: function(rowid, e) {
$('#jqg_grid_' + rowid).attr("disabled", "disabled");
return false;
},
For working with the Select All/None checkbox you can use the onSelectAll event.
Params: aRowids,status
This event fires when multiselect option is
true and you click on the header checkbox.
aRowids - array of the selected rows (rowid's).
status - boolean variable determining the status of the header check box - true if checked, false if not checked.
Note that the aRowids alway contain the ids when header checkbox is checked or unchecked.
Ex.
onSelectAll: function(aRowids,status) {
if (status) {
$.each(aRowids, function(i, rowid) {
$('#jqg_grid_' + rowid).attr("disabled", "disabled");
});
}
},
I have a Kendo grid that has links, which I also set to selectable, snippet here:
columns: [{
field: 'link', title: 'Link',
template: 'Click Here'
}],
...
selectable: 'row',
change: function(e) {
var rowUid = this.select().data('uid');
rowDs = this.dataSource.getByUid(rowUid);
console.log('Went (1): ' + rowDs);
return false;
}
When I click on the external link <a>, I also select the row. Is there any way to suppress the selectable event?
You can also detect what element triggered the click by giving the column a CSS class. Then you would put an if-statement in the change event to detect if the column was clicked or not:
columns: [
{
title: ' ',
command: {
text: 'My Button',
click: function (e) {
e.preventDefault();
//GET SELECTED DATA
var data = this.dataItem($(e.currentTarget).closest('tr'));
//DO SOMETHING
}
},
attributes: {
'class': 'actions'
}
}
]
Then in the change you would have this:
change: function (e) {
//GET TRIGGER SOURCE TO DETERMINE IF ACTION CLICKED
var eventTarget = (event.target) ? $(event.target) : $(event.srcElement);
var isAction = eventTarget.parent().hasClass('actions');
//SELECT ITEM IF APPLICABLE
if (!isAction) {
var grid = e.sender;
var dataItem = grid.dataItem(this.select());
if (dataItem) {
//DO SOMETHING
}
}
}
I just stumbled across a forum post by a Kendo UI dev stating that "the selection of the grid cannot be prevented" (link). I guess that means I will have to work around this.
Edit: I actually just want to get the row's uid attribute so I can select the selected dataItem from the dataSource. I've discovered that you can get it while you're defining your columns template,
columns: [{
field: 'link', title: 'Link',
template: 'Manual Edit Link'
}],
And use it to retrieve the selected row's dataItem.
var selectedRow = $('#gridId').data('kendoGrid').dataSource.getByUid(rowUid);
Will close this question in a while, in case anyone else can help.
Basically, I am trying to include radio buttons in a jqGrid.
I can see that we can use a custom formatter for this.
Following is my code, which does not tell me which radio button is selected/ or whether it is selected or not.
the value is "undefined" all the times.
// The custom formatter definition
function radio(value, options, rowObject){
var radioHtml = '<input type="radio" value=' + value + ' name="radioid" />';
return radioHtml;
}
// Snippet of the colModel in jqGrid definition
colModel:[
{name:'select', label:'Select', width: 60, align:'center', edittype:'custom',
editable:true, formatter: radio},
{name:'name', label: 'Source Disk Volume', width: 170}],
// The method called on submit
function evaluate() {
// try 1
alert('val: '+$("[name='radioid']:checked").val());
// try 2
tried accessing the checked radio button through simple javascript
}
Please help me access the value of the radio button which is selected by the user.
gridComplete: function () {
$("td[aria-describedby=jqgridName_select] input[type='radio']").click(function () {
alert($(this).val());
});
}