How can I use a radio button to select a jqGrid row?

Question

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({...});

There doesn't seem to be enough documentation on the website for me to figure it out. I have been looking for some kind of API, but it only exists for PHP. Here's how I generate my grid in the model:

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
                }
            }
        };

Edit

I thought about using jQuery to manually change the HTML if I render the ID column visible. However, the .jqGrid({options}); doesn't seem to have a property for code to launch after a grid is loaded.

I could load the grid like this:

$('#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" />');
});

But, the delay between the ajax post to request the data is too long and I guess the code doesn't execute.

score 1 · Answer 1 · answered Nov 19 '10 at 16:42

1

I would recommend you to do the same but on the client side. You can use Custom Formatter to construct the HTML fragment inside your custom formatter function:

{ name: 'CallID', index: 'CallID', width: 50,
  formatter:function (cellvalue, options, rowObject) {
      return '<input type="radio" name="selectedCall" value="' + cellvalue + '"' />"
  }
},

The server part should return only data without any HTML.

Moreover I would recommend you to send back as the values for the CallStartTime column the data formatted as ISO date ISO8601Long ("Y-m-d H:i:s") and use newformat setting of the formatoptions of the formatter:'date'.

answered Nov 19 '10 at 16:42

Oleg

220,925
34
403
798

I'll have to test that out--I thought there may have been a way to use the custom formatter, but it wasn't obvious to me how. – David Fox Nov 20 '10 at 12:59
@David: I tried only to produce the same radio button on the client side like you do on the server side. I not really understand how the radio button with one radio button like `''` can help you. It will look like a ckeckbox. If your problem is not yet solved, could you post a HTML code fragment of a picture which shows what you want to have inside a table cells. – Oleg Nov 20 '10 at 15:21
The radio button helps me by allowing the row to be selected in the context of my next postback. In the next postback, I receive an element named `selectedCallXXX` where XXX is the unique ID I need to handle. – David Fox Nov 23 '10 at 20:29
@David: Why you not use just `multiselect:true` instead? – Oleg Nov 23 '10 at 21:02

score 0 · Answer 2 · answered Sep 21 '16 at 20:34

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.

...

multiselect : true, //Must be true to allow for radio button selection
beforeSelectRow: function(rowid, e)
{
    // Allow only one selection
    $("#myGrid").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,

score 0 · Accepted Answer · answered Nov 19 '10 at 14:38

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
},

How can I use a radio button to select a jqGrid row?

Edit

3 Answers3

Linked