Databases
StackOverflow2013
Postsdbo
POHow can I use a radio button to select a jqGrid row?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I use a radio button to select a jqGrid row?
    text
    copied!<p>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.</p> <p>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 <code>$.ajax({...});</code></p> <p>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:</p> <pre><code>return new JQGrid { Columns = new List&lt;JQGridColumn&gt;() { 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 } } }; </code></pre> <h2>Edit</h2> <p>I thought about using jQuery to manually change the HTML if I render the ID column visible. However, the <code>.jqGrid({options});</code> doesn't seem to have a property for code to launch after a grid is loaded.</p> <p>I could load the grid like this:</p> <pre><code>$('#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('&lt;input type="radio" value="' + id + '" name="selectedRow" /&gt;'); }); </code></pre> <p>But, the delay between the ajax post to request the data is too long and I guess the code doesn't execute.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload