I don't need to edit, only be able to select (not even multiselect) the row with a radio button. I haven't been able to find another relevant post. I already have several columns of data, but I can't figure out how to place a radio button in the first column of each group.
The jqGrid renders with an invisible column--a unique ID I'd like to post when the user clicks a button. This should be enough for me to work with. So, I also need to be able to identify which row was selected when I fire
$.ajax({...});
return new JQGrid
{
Columns = new List<JQGridColumn>()
{
new JQGridColumn
{
DataField = "CallID", //this is the unique ID I need to postback
Visible = false
},
new JQGridColumn
{
DataField = "Name",
HeaderText = "Full Name",
PrimaryKey = false,
Editable = false,
Width = 120
},
new JQGridColumn
{
DataField = "CallStartTime",
HeaderText = "Call Placed On",
PrimaryKey = false,
Editable = false,
Width = 130
}
}
};
.jqGrid({options});
$('#list').jqGrid({
url: 'SearchTestGridDataRequested',
datatype: 'json',
mtype: 'GET',
colNames: ['Select', 'Name', 'Call Placed On'],
colModel: [
{ name: 'CallID', index: 'CallID', width: 50 },
{ name: 'ModelName', index: 'ModelName', width: 120 },
{ name: 'CallStartTime', index: 'CallStartTime', width: 130, align: 'right' }],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [10, 20, 30],
viewrecords: true,
caption: 'Calls'
});
$('td[aria-describedby="list_CallID"]').each(function (i) {
var id = $(this).attr('title');
$(this).html('<input type="radio" value="' + id + '" name="selectedRow" />');
});
I was able to rig this when I queried the data in my model. When I create my gridrows to then JSON'ify, I manually enter the HTML for the radio button setting its value attribute to the CallID in my model:
var gridrows = from call in calls
select new
{
i = call.CallID,
cell = new string[] {
//call.CallID.ToString(),
"<input type=\"radio\" name=\"selectedCall\" value=\"" + call.CallID + "\" />",
call.Name,
call.CallStartTime.ToString("MM/dd/yyyy hh:mm tt")
}
};
It seems jqGrid does not require the model object to be named the same as the DataField attribute when creating the JQGrid object in the model--I thought I read in the documentation it had to be the same, but then you could modify it using the HeaderText property. So, the new JQGridColumn object just isn't invisible any more and I added a HeaderText value:
new JQGridColumn
{
DataField = "CallID",
HeaderText = "Select",
Width = 50
},