Hi Craig,

I am using flexigrid to show only 4 columns in the grid, but I'd like to edit the whole row and show all the details.

This is the view code to show information about the client in the grid:

@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>

And this is the controller's code:

    [HttpPost]
        public ActionResult Client(FormCollection formValues)
        {
            // Assume we want to select everything
            var clients = Db.Clients; // Should set type of clients to IQueryable<Clients>
            int searchClientNo = 0;
            
            int.TryParse(formValues["searchClientNo"], out searchClientNo );
            string searchClientName = formValues["searchClientName"].ToString();

            if (searchClientNo == 0 && searchClientName == "Please enter the search value")
                clients = clients.Where(c => (c.Number == searchClientNo));
            else
            {
                if (searchClientNo != 0) //Number was supplied
                    clients = clients.Where(c => (c.Number == searchClientNo));

                // If clientNo was supplied, clients is now filtered by that. If not, it still has the full list. The following will further filter it.
                if (!String.IsNullOrWhiteSpace(searchClientName)) // Part of the name was supplied
                    clients = clients.Where(c => (c.Name.Contains(searchClientName)));

            }
            int page = int.Parse(formValues["page"] ?? "1");

            int rp = int.Parse(formValues["rp"]);
            string qtype = formValues["qtype"].ToString();

            string query = (formValues["query"] ?? "").ToString();

            string sortname = (formValues["sortname"] ?? "Name").ToString();
            string sortorder = (formValues["sortorder"] ?? "asc").ToString();
           

            if (!string.IsNullOrEmpty(sortname) && !string.IsNullOrEmpty(sortorder))
            {
                clients = clients.OrderBy(sortname, (sortorder == "asc"));
            }

            if (!string.IsNullOrEmpty(qtype) && !string.IsNullOrEmpty(query))
            {
                clients = clients.Like(qtype, query);
            }

            int Total = clients.Count();

            clients = clients.Skip((page - 1) * rp).Take(rp);

            var flexgrid = new
            {
                page = page,
                total = Total,
                rows = clients
                .Select(x => new
                {
                    id = x.Id,

                    cell = new { Id = x.Id, Number = x.Number, Name = x.Name, Contact1 = x.Contact1.Contact ?? String.Empty }
                }
                )
            };

            return Json(flexgrid, JsonRequestBehavior.AllowGet);

        }

And finally this is the Clients.js code where the work is done to show flexigrid and execute the actions:

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

    });

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

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

// This function is invoked before the grid is displayed
function ProcessRows(data) {
    confirm("Testing?");
    return data;
}

//This function adds parameters to the post of flexigrid. You can add a verification as well by return to false if you don't want flexigrid to submit			
function addFormData() {

    //passing a form object to serializeArray will get the valid data from all the objects, but, if the you pass a non-form object, you have to specify the input elements that the data will come from
    var dt = $('#sform').serializeArray();
    dt = dt.concat($('#frmClientsSearch').serializeArray());

    $("#flexClients").flexOptions({ params: dt });

    return true;
}

$('#sform').submit(function () {

    $('#flexClients').flexOptions({ newp: 1 }).flexReload();
    alert("Hello World");
    return false;
});

function del(com, grid) {
    try {
        var clientName = $('.trSelected td:eq(2)').text();
        if (clientName) //Variable is defined and not empty
        {
            if (confirm("Are you sure you want to delete " + $.trim(clientName) + "?")===false)
                return false;            

            $('.trSelected', grid).each(function () {
                var id = $(this).attr('id');
                id = id.substring(id.lastIndexOf('row') + 3);

                addFormData(); $('#flexClients').flexOptions({ url: '/Client/Delete/'+ id }).flexReload();
            });

        }
    }
    catch(e) {
        alert('Error ' + e);
    }
}

function add(com, grid){
    $("#sform").dialog({
        autoOpen: false,
        show: "blind",
        width: 1000,
        height: 600
    });
    $("#sform").dialog("open");

    clearForm();
    $('#fntype').val('Add');
}

 
function edit(com, grid)
{
        $('.trSelected', grid).each(function () {

          
                var id = $(this).attr('id');
                id = id.substring(id.lastIndexOf('row') + 3);

                document.location = '/Client/Edit/' + id;            

            $("#sform").dialog({
                autoOpen: false,
                show: "blind",
                width: 1000,
                height: 600
            });
            $("#sform").dialog("open");
            clearForm();
            $('#fntype').val('Edit');
            $('#Id').val($('.trSelected td:eq(0)').text());
            $('#Number').val($('.trSelected td:eq(1)').text());
            $('#Name').val($('.trSelected td:eq(2)').text());

            $('#Contact1').val($('.trSelected td:eq(3)').text());

        });

    }

function clearForm() {

    $("#sform input").val("");

}

$(function () {
    $('#btnSave').click(function () {
        addFormData();
        $('#flexClients').flexOptions({ url: '/Client/Client/' }).flexReload();
        clearForm();
        $('#sform').dialog('close');
        return false;
    });
});

$(function () {
    $('#btnCancel').click(function () {

        //clearForm();
        $('#sform').dialog('close');
        return false;
    });
});

$(function () {
    $('#btnClientsSearch').click(function () {
        addFormData();
        $('#flexClients').flexOptions({ url: '/Client/Client/' }).flexReload();
        //$.ajax({
        //    url: $(this).data('url'),
        //    type: 'GET',
        //    cache: false,
        //    success: function (result) {
        //        $('#ClientsResults').html(result);
        //    }
        //});
        return;//false;
    });
});

The problems I explained in my reply to Paul or in this thread on ASP.NET forums
http://forums.asp.net/p/1855963/5199701.aspx/1?Re+Validation+messages+don+t+show+up+what+is+missing+

One problem, which is not really related, is that validations stopped showing after I made my class to use complex types.


>Is this a parent/detail form and you want to grab one detail row? If so, it should be created as a javascript array. It would help to see the code from the view.
>
>>document.location works nice, but what I really want is to be able to grab the row data, but open the form the same way it was opened before (e.g. in modal window).
>>
>>Here is what I currently have:
>>

>>function edit(com, grid)
>>{
>>        $('.trSelected', grid).each(function () {
>>
>>          
>>                var id = $(this).attr('id');
>>                id = id.substring(id.lastIndexOf('row') + 3);
>>
>>                document.location = '/Client/Edit/' + id;            
>>
>>            $("#sform").dialog({
>>                autoOpen: false,
>>                show: "blind",
>>                width: 1000,
>>                height: 600
>>            });
>>            $("#sform").dialog("open");
>>            clearForm();
>>            $('#fntype').val('Edit');
>>            $('#Id').val($('.trSelected td:eq(0)').text());
>>            $('#Number').val($('.trSelected td:eq(1)').text());
>>            $('#Name').val($('.trSelected td:eq(2)').text());
>>
>>            $('#Contact1').val($('.trSelected td:eq(3)').text());
>>
>>        });
>>
>>    }
>>

>>
>>I can not figure out certain things:
>>
>>1. I need to get the row data from the server, but then continue with the rest of the code (e.g. show the info in that modal form)
>>
>>2. How to make double click work
>>
>>3. Why my validations no longer fire after I re-factored the class. I want to use complex types, but with the complex types I get
>>
>>

>><div class="editor-label">
>>    <label for="Email">Email</label>
>></div>
>><div class="editor-field">
>>    <input class="text-box single-line" data-bind="value: Email" data-val="true" 
>>data-val-email="The Email field is not a valid e-mail address." 
>>data-val-length="The field Email must be a string with a maximum length of 100." data-val-length-max="100"
>> id="Email" name="Contact1.Email" type="text" value="" />
>>    <span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>
>></div>

>>
>>So, the id is "Email" and the name is "Contact1.Email"
>>
>>I have two controls with the same Id in the form and this is why I think validations are getting confused. However, I don't know what to do to fix the problem?
>>
>>
>>