Put the grid in its own div, then load the div content from a partial view when you need it

>I am actually now very close to the final solution!! Just may need a bit more help on jQuery as I almost got it the way I wanted. I just need to figure out how to not load the grid the very first time.
>
>Here is how I did it after I found this FAQ:
>
>http://code.google.com/p/flexigrid/wiki/FAQ
>
>My Client view file is now this:
>

>@model CardNumbers.Objects.Client
>
>@{
>    ViewBag.Title = "Client";
>}
>
> <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 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 style="display: none">
>   <form id="sform">
>        <input type="hidden" id="fntype" name="fntype">
>        <input type="hidden" id="Id" name="Id">
>        <label for="Number">Client No: </label>
>        <input type="number" id="Number" name="Number" class="numericOnly" />
>        <label for="Name">Client Name: </label>
>        <input type="text" size="25" id="Name" name="Name" /><br />
>        <label for="Contact11">Contact 1: </label>
>        <input type="text" size="25" id="Contact1" name="Contact1" /><br />
>        <div class="float-right">
>            <input type="button" value="Submit" id="btnSave">
>            <input type="button" value="Cancel" id="btnClear" />
>        </div>
>    </form>
></div>
>

>
>as you can see, I am using unobtrusive AJAX. And here is my CardNumbers.js file - the important thing was to figure out the AddFormData method which I took from that FAQ:
>
>

>/// <reference path = "jquery-1.5.1-vsdoc.js"/>
>/// <reference path = "jquery-ui-1.8.11.js"/>
>
>$(document).ready(function() {
>    $(":input[data-autocomplete]").each(function() {
>        $(this).autocomplete({ source: $(this).attr("data-autocomplete") });
>    });
>});
>
>$(function () {
>    $('input[name="delete"]').click(function () {
>        return confirm('Are you sure?');
>    });
>});
>
>$(".numericOnly").keypress(function (e) {
>    if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) return 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: test },
>        { name: 'Edit', bclass: 'edit', onpress: test },
>        { name: 'Delete', bclass: 'delete', onpress: test },
>        { separator: true }
>        ],
>        searchitems: [
>        { display: 'Client Name', name: 'Name' }
>        ],
>        sortname: "Name",
>        sortorder: "asc",
>        usepager: true,
>        title: 'Clients',
>        useRp: true,
>        rp: 15,
>        showTableToggleBtn: true,
>        width: 1000,
>        onSubmit: addFormData,
>        height: 300
>    });
>
>//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 test(com, grid) {
>    if (com === 'Delete') {
>        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) + "?"))
>                return false;
>
>            $('#fntype').val('Delete');
>            $('#Id').val($('.trSelected td:eq(0)').text());
>            $('#Number').val('');
>            $('#Name').val('');
>            $('#Contact1').val('');
>
>            $('.trSelected', grid).each(function () {
>                var id = $(this).attr('id');
>                id = id.substring(id.lastIndexOf('row') + 3);
>
>                addFormData(); $('#flexClients').flexOptions({ url: '/Client/Client/' }).flexReload();
>            });
>
>            clearAll();
>        }
>    } else if (com === 'Add') {
>
>        $("#sform").dialog({
>            autoOpen: false,
>            show: "blind",
>            width: 1000,
>            height: 500
>        });
>        $("#sform").dialog("open");
>
>        $('#fntype').val('Add');
>        $('#Number').val('');
>        $('#Name').val('');
>        $('#Contact1').val('');
>
>    } else if (com === 'Edit') {
>
>        $('.trSelected', grid).each(function () {
>
>            $("#sform").dialog({
>                autoOpen: false,
>                show: "blind",
>                width: 1000,
>                height: 500
>            });
>            $("#sform").dialog("open");
>
>            $('#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 clearAll() {
>    $('#fntype').val('');
>    $('#Number').val('');
>    $('#Name').val('');
>    $('#Contact1').val('');
>
>};
>
>$(function () {
>    $('#btnSave').click(function () {
>        addFormData();
>        $('#flexClients').flexOptions({ url: '/Client/Client/' }).flexReload();
>        clearAll();
>        $('#sform').dialog('close');
>        return false;
>    });
>});
>
>$(function () {
>    $('#btnClear').click(function () {      
>        
>        clearAll();
>        $('#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;
>    });
>});
>

>
>So, now it works almost perfect except that when I run that view the very first time it loads the grid with all the clients. I somehow need to figure out if that's the first time or not. So, one possibility is to test by both SearchName and SearchID beeing null (or I can use some artificial initial values that will tell me it is not loaded from the form).
>
>Let me see, if I can make this idea work!