>Hi everybody,
>
>I want to be able to call edit form when I double click on a row in a grid. I am trying to add this code in my js file
>
>

>$('tr').dblclick(function () {
>    var id = $(this).attr('id');
>    //do something with id
>    edit('Edit', grid);
>});

>
>However, it doesn't seem to fire at all - what am I missing here?
>
>Thanks.


Here is what I have in the js file

$(document).ready(function () {
    if ($('#frmClientsSearch').length === 1) {
        
        $("input[name=searchClientName]").focus();
        $("input[name=searchClientName]").select();
    }

    var scope = $('#sform');
    $('input[type=submit]', scope).click(function (e) {
        try {
            e.preventDefault();

            if (!scope.valid()) {
                 alert('has invalid');
                return;
            }

            save(scope);
           
        } catch (e) {
            alert("Error " + e);
        }

    });
   
    $("input[name=searchClientName]").keyup(function (event) {
        
        if (event.keyCode === 13) {
            $("#btnClientsSearch").click();
        }
    });
});

// http://www.ienablemuch.com/2011/11/flexigrid-crudinline-form-with-aspnet.html
var formHtml = "";

function canRender() {
    return _canRender;
}

$(function () {
    _canRender = false;
});

$("#flexClients").flexigrid({
    url: '/Client/Client/',
    dataType: 'json',
    colModel: [
    { display: 'Client Id', name: 'Id', width: 100, sortable: true, align: 'center', hide: true },
    { display: 'Client #', name: 'Number', width: 100, sortable: true, align: 'center' },
    { display: 'Name', name: 'Name', width: 350, sortable: true, align: 'center' },
    { display: 'Contact 1', name: 'Contact1', width: 350, sortable: true, align: 'center' },
    ],
    buttons: [
    { name: 'Add', bclass: 'add', onpress: add },
    { name: 'Edit', bclass: 'edit', onpress: edit },
    { name: 'Delete', bclass: 'delete', onpress: del },
    { separator: true }
    ],
    searchitems: [
    { display: 'Client Name', name: 'Name' }
    ],
    sortname: "Name",
    sortorder: "asc",
    usepager: true,
    title: 'Clients',
    useRp: true,
    rp: 15,
    rpOptions: [5, 10, 15, 20, 25, 40],
    showTableToggleBtn: true,
    width: 900,
   
    onSubmit: addFormData,
    hideOnSubmit: false,
    height: 'auto',
    singleSelect: true
});

$('#flexClients tr').dblclick(function () {
    var id = $(this).attr('id');
    id != '' || (id = $('#flexClients tr').index( this ));
    alert( id );
    //do something with id
    //edit('Edit', grid);
});

(the file has more code, but the above is relevant to the problem.

Here is what I have in the Client view:

@model CardNumbers.Objects.Client

@{
    ViewBag.Title = "Clients";
}

@section scripts {
    <script src="@Url.Content("~/Scripts/Clients.js")" type="text/javascript" ></script>
}

 <form id="frmClientsSearch">
        <label for="clientNo">Client No: </label>
        <input type="number" name="searchClientNo" class="numericOnly" /><br />
        <label for="clientName">Client Name: </label>
        <input type =  "text" size =25 value ="Please enter the search value" class="SelectOnEntry"
            name ="searchClientName" />
        
       <input type="button" id="btnClientsSearch" value ="Find / Refresh" />      
</form>
<div style="padding-left: 150px; padding-top: 50px; padding-bottom: 50px;" id="ClientsResults">
    <table id="flexClients" style="display: none">
    </table>
</div>

<div id="editor" style="visibility: hidden">
   @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "sform", title="Client Info"  }))
{

        Html.Partial("_ClientForm", Model);    
     
        @*<div style="max-width: 500px; width: 500px;">
            @Html.JsAccessibleValidationSummary(excludePropertyErrors: true)            
        </div>    
      *@   
    }      
    
</div>

So, as you can see I have a table called flexClients which is invisible and gets transformed into flexigrid.

I am looking at this page in FireBug and when I go to HTML tab I don't see flexClients table at all, this is what I see when I drill down into the body:

<section class="content-wrapper main-content clear-fix">
<form id="frmClientsSearch" novalidate="novalidate">
<div id="ClientsResults" style="padding-left: 150px; padding-top: 50px; padding-bottom: 50px;">
<div class="flexigrid" style="width: 900px;">
<div class="nBtn" title="Hide/Show Columns" style="left: 97px; top: 53px; display: none;">
<div></div>
</div>
<div class="nDiv" style="margin-bottom: -8px; display: none; top: 88px; -moz-user-select: none; height: 8px; width: 200px; left: 97px;">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="ndcol1">
<input class="togCol" type="checkbox" value="0">
</td>
<td class="ndcol2">Client Id</td>
</tr>
<tr>
<tr>
<tr>
</tbody>
</table>
</div>
<div class="mDiv">
<div class="tDiv">
<div class="hDiv">
<div class="cDrag" style="top: 54px;">
<div class="bDiv" style="height: auto;">
<div class="sDiv">
<div class="pDiv">
<div class="hGrip" style="height: 96px;">
</div>
</div>
<div id="editor" style="visibility: hidden">
</section>
</div>
<footer>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js">
<script type="text/javascript">
<script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.9.0/jquery-ui.min.js">
<script src="/bundles/jqueryval?v=6Fqs6ZHMM_nFyDgv5mxz89PzsVLAnRNKOhqrK-mI5yU1">
<script src="/bundles/flexigrid?v=zBUy5sJNKep--6xcSWMytUATnHZEJhlcSfcY2gEwe_s1">
<script src="//ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js">
<script src="/bundles/modernizr?v=jmdBhqkI3eMaPZJduAyIYBj7MpXrGd2ZqmHAOSNeYcg1">
­
<style>
<script type="text/javascript" src="/Scripts/Shared/CardNumbers.js">
<script type="text/javascript" src="/Scripts/Clients.js">
</body>
</html>

So, no flexClients table and I think it may be part of my problem. If I try to put a break point in the double click event, it does not go there when I double click on the row.

So, do you see what am I missing and how can I make it to work?