How to select row from ajax data
<p>Free jqgrid contains button in each row. Clicking in button makes ajax call which returns customer list based on clicked row column value.</p>

<p>User can select customer from this data. Selected customer name and id should written to jqgrid row.</p>

<p>I tried code below but I got:</p>

<blockquote>
  <p>Uncaught TypeError: Cannot read property 'rowIndex' of undefined</p>
</blockquote>

<p>This error happens on this line of code:</p>

<pre><code>var clickedId = $(this).closest('tr')[0].rowIndex,
</code></pre>

<p>when clicked in any place in selection form.</p>

<p>How to fix this ? Application contains number of such selects from different data. Which is best way to implement them to avoid code repetition?</p>

<p>Table is created in javascript. Is it resonable/how to use some MVC partial view or other template for this?</p>

<p>Can this code improved/refactored?</p>

<p>Free jqgrid 4.13.3-pre, .NET 4.6, ASP.NET MVC, Bootstrap 3, jQuery, jQuery UI are used.</p>

<p>Selection form is copied from bootstrap modal sample:</p>

<pre><code>&lt;div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"&gt;
    &lt;div class="modal-dialog" role="document"&gt;
        &lt;div class="modal-content"&gt;
            &lt;div class="modal-header"&gt;
                &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
            &lt;/div&gt;
            &lt;div class="modal-body"&gt;
                &lt;table class='table table-hover table-striped'&gt;
                    &lt;thead&gt;
                        &lt;tr&gt;&lt;td&gt;Customer name&lt;/td&gt;&lt;td&gt;Customer Id&lt;/td&gt;&lt;/tr&gt;
                    &lt;/thead&gt;
                    &lt;tbody&gt;&lt;/tbody&gt;
                &lt;/table&gt;
            &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
                &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;close without selection&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

jqgrid colmodel:
    formatter: "showlink",
    formatoptions: {
        onClick: function (options) {
            var nimeosa = getColumnValue('customername', options.rowid);
            if (nimeosa == null) {
                return false;
            }
            $.ajax('api/Customers/FromRegister?' + $.param({ namepart: nimeosa }), {
                type: 'GET',
                dataType: 'json',
                contentType: "application/json",
                async: false
            }).done(function (data, textStatus, jqXHR) {
                var valik = "";
                for (var i = 0; i &lt; data.customerlist.length; i++) {
                    valik += '&lt;tr&gt;&lt;td&gt;' + data.customerlist[i].customerName + '&lt;/td&gt;&lt;td&gt;' +
                        data.customerlist[i].customerId + '&lt;/td&gt;&lt;/tr&gt;';
                }
                $('#exampleModal').on('show.bs.modal', function (event) {
                    $('.modal-body tbody').html(valik);
                });

                $('#exampleModal').on('click.bs.modal', function (event) {
                    // how to fix Uncaught TypeError: Cannot read property 'rowIndex' of undefined in this line:
                    var clickedId = $(this).closest('tr')[0].rowIndex,                                    clickedElem = data.customerlist[clickedId];
                    $('#' + options.rowid + '_customername').val(clickedElem.customerName);
                    $('#' + options.rowid + '_customerid').val(clickedElem.customerId);
                });
                $('#exampleModal').modal();
            );
            return false;
        }
    }

// gets column value from jqgrid row
function getColumnValue(valjaNimi, rowId) {
    var
        iNimi = getColumnIndexByName($grid, valjaNimi),
        $nimi = $('#' + rowId + '&gt;td:nth-child(' + (iNimi + 1) + ')'),
        nimiVal;

    if ($nimi.find('&gt;input').length === 0) {
        // the cell is not in editing mode 
        nimiVal = $nimi.text();
    }
    else {
        nimiVal = $nimi.find('&gt;input').val();
    }

    if (nimiVal === undefined || nimiVal.trim() === '') {
        alert('No value');
        return null;
    }
    return nimiVal;
}
</code></pre>

<p><strong>Update</strong></p>

<p>I tried code from answer.
Rows are wider than bootstrap modal width.
Wide rows become wider than form:</p>

<p><a href="https://i.stack.imgur.com/8Kjap.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8Kjap.png" alt="enter image description here"></a></p>

<p>How to fix this ?
How to force force rows to appear inside modal ?
How to create scrollbar if there are more rows than fits to screen ?</p>