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.

Answer 1

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

Sign up