Implementing FlexGrid and also using an Ajax form - is it possible?

Question

User1096912014 posted

Hi everybody,

I want the following interface:

Client #  Input

Client Name Input                        Search button

When I click on the Search button I want to see a flexgrid with my results if the search returned more than 1 row or go directly to the Edit client if it returned 1 row.

Let's concentrate on the search returning multiple results for now.

Here is what I have in the Index view in the Client folder:

@model CardNumbers.Objects.Client

@{
    ViewBag.Title = "Clients";
}

<h2>Clients Search</h2>

<br />

@*<div id="progress" class ="ui-progressbar">
    Loading...
</div>*@

@using (Ajax.BeginForm("Search", "Client",
    new AjaxOptions
    {
        HttpMethod = "GET",
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "flexClients"
      
    }))
    
{
    <fieldset>
        <legend>Search</legend>
        <label for="clientNo">Client No: </label>
        <input type="number" name="clientNo" class="numericOnly" /><br />
        <label for="clientName">Client Name: </label>
        <input type =  "text" size =25 data-autocomplete="@Url.Action("QuickSearch", "Client")"  name ="clientName" />
        <div>
            <input type="submit" value="Find / Refresh" />
        </div>
    </fieldset>
    
}

<br />
<div style="padding-left:150px; padding-top:50px; padding-bottom:50px;">
<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="ClientId" name="ClientId">
<label style="width:5px">Client # </label>: <input id="ClientNo" name="ClientNo"><br/>
<label style="width:5px">Name </label>: <input id="ClientName" name="ClientName"><br />
<label style="width:5px">Contact 1 </label>: <input id="Contact1" name="Contact1"><br />
<input type="button" value="Submit" onclick="addFormData();$('#flexClients').flexOptions({ url: '/Client/Index/'}).flexReload();clearAll();$('#sform').dialog('close');">
</form>
</div>

(The code for flex grid is in the CardNumbers.js file).

This is what I have in my Client Controller:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using CardNumbers.Controllers;
using CardNumbers.Models;

namespace CardNumbers.Controllers
{
    public class ClientController : CardNumbersController
    {
        //
        // GET: /Client/

        public ActionResult JsonClients()
        {
            var result = Db.Clients
                    .Select(x => new {x.Id, x.Number, x.Name, x.Contact1 });
            return Json(result, JsonRequestBehavior.AllowGet);
        }

        #region Clients
        [HttpGet]
        public ActionResult Client(int id = 0)
        {
            return View();
        }

        [HttpPost]
        public ActionResult Client()
        {

            int page = int.Parse(Request.Form["page"]);
            int rp = int.Parse(Request.Form["rp"]);
            string qtype = Request.Form["qtype"].ToString();
            string query = Request.Form["query"].ToString();
            string sortname = Request.Form["sortname"].ToString();
            string sortorder = Request.Form["sortorder"].ToString();


            switch (Request.Form["fntype"])
            {
                case "Add":
                    if (Request.Form["ClientId"] != "" && Request.Form["ClientId"] != null)
                    {
                        // Logic to add new client
                        
                    }
                    break;
                case "Edit":
                    if (Request.Form["ClientId"] != "" && Request.Form["ClientId"] != null)
                    {
                        // Logic to Edit a Client
                    }
                    break;
                case "Delete":
                    if (Request.Form["ClientId"] != "" && Request.Form["ClientId"] != null)
                    {
                        int clientId = Convert.ToInt32(Request.Form["ClientId"]);
                        var client = Db.Clients.Single(c => c.Id == clientId);

                        Db.DeleteClient(client);
                    }
                    break;
            }

            var DBList = from c in Db.Clients  select c;

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

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

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

            var flexgrid = new
            {
                page = page,
                total = Db.Clients.Count(),
                rows = DBList
                .Select(x => new
                {
                    id = x.Id,
                    cell = new { x.Number, x.Name, x.Contact1 }
                }
                )

            };


            return Json(flexgrid, JsonRequestBehavior.AllowGet);
        }

        #endregion Clients


        public ActionResult Search(int? clientNo = null, string clientName = null)
        {
            // Assume we want to select everything
            var clients = Db.Clients; // Should set type of clients to IQueryable<Clients>

            if ((clientNo ?? 0) != 0) //Number was supplied
                clients = clients.Where(c => (c.Number == clientNo));

            // 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(clientName)) // Part of the name was supplied
                clients = clients.Where(c => (c.Name.Contains(clientName)));

            // Order the filtered list
            clients = clients.OrderBy(c => c.Name).Take(15);
            
            var flexgrid = new
            {
                page = 1,
                total = clients.Count(),
                rows = clients
                .Select(x => new
                {
                    id = x.Id,
                    cell = new { x.Number, x.Name, x.Contact1 }
                }
                )

            };

            return Json(flexgrid, JsonRequestBehavior.AllowGet);
            //return PartialView("_ClientsSearch", clients);
        }

        public ActionResult QuickSearch(string term)
        {
            var clients = from c in Db.Clients
                          where c.Name.Contains(term)
                          orderby c.Name
                          select new { label = c.Name };

            return Json(clients, JsonRequestBehavior.AllowGet);
        }

This is the behavior I currently observe: I see my form + the flexgrid at the bottom without the content and also add/delete/edit buttons don't have pictures.

Pressing the Find/Refresh button does nothing.

So, do you see how can I fix it?

Thanks in advance.

Answer 1

User197322208 posted

1. So you want yo refresh the second form when you click the buton on the first?

2.Too much code. Could you make simpler?

Answer 2

User1096912014 posted

I want to show the flex grid with the results after I pressed the search button. Right now the empty flex grid is shown (and for some reason the Add/Edit/Delete buttons don't show pictures while the rest of the interface does - I originally didn't have the pictures and copied them from the example)

The code which is executed when I press Search button is this:

public ActionResult Search(int? clientNo = null, string clientName = null)
        {
            // Assume we want to select everything
            var clients = Db.Clients; // Should set type of clients to IQueryable<Clients>

            if ((clientNo ?? 0) != 0) //Number was supplied
                clients = clients.Where(c => (c.Number == clientNo));

            // 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(clientName)) // Part of the name was supplied
                clients = clients.Where(c => (c.Name.Contains(clientName)));

            // Order the filtered list
            clients = clients.OrderBy(c => c.Name).Take(15);
            
            var flexgrid = new
            {
                page = 1,
                total = clients.Count(),
                rows = clients
                .Select(x => new
                {
                    id = x.Id,
                    cell = new { x.Number, x.Name, x.Contact1 }
                }
                )

            };

I was trying to follow this sample http://mvc4beginner.com/Sample-Code/Insert-Update-Delete/Asp-.Net-MVC-Ajax-Insert-Update-Delete-Using-Flexigrid.html although when I downloaded the code from the Web, opened in VS 2012, changed connection string to point to my server (SQL 2012 Developer edition) and that's all I've changed there, it didn't work for me either, although it showed flexgrid with the add/delete/edit buttons having pictures.

Answer 3

User1096912014 posted

I can make the sample work fine, but how can I make my slightly different variation to also work? The difference between the sample and my version is what I want to start with the search, I don't want to display all clients right away.

Answer 4

User1096912014 posted

I don't understand what is wrong in my application :( The sample works perfectly and I see that on the very first hit the [HttpPost]Country method on the Admin controller is fired.

In my case the HttpGet method is fired, but the HttpPost version is never fired. I tried to follow the sample very closely.

Here is my _Layout page (it's different than the sample as I am using Bundles, but I think it is the same essentially):

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
        @Styles.Render("~/Content/themes/base/css")
        @Styles.Render("~/Content/themes/FlexGrid/css")
        @Scripts.Render("~/bundles/modernizr")
        
    </head>
    <body>
        <header>
            <div class="content-wrapper">
                @*<div class="float-left">
                    <p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>
                </div>*@
                <div class="float-right">
                    <section id="login">
                        @Html.Partial("_LoginPartial")
                    </section>
                    <nav>
                        <ul id="menu">
                            <li>@Html.ActionLink("New Order", "Index", "ClientOrder",null, new {title= "Create New Order for Selected Client"})</li>
                            <li>@Html.ActionLink("Clients", "Client", "Client",null, new {title= "Clients Maintenance"})</li>
                            <li>@Html.ActionLink("Operators", "Index", "Operator",null, new {title= "Operators Maintenance"})</li>
                            <li>@Html.ActionLink("History", "History", "ClientOrder",null, new {title= "View Clients Orders History"})</li>
                            <li>@Html.ActionLink("About", "About", "Home")</li>
                            
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <div id="body">
            @RenderSection("featured", required: false)
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
        </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; @DateTime.Now.Year - Card Numbers</p>
                </div>
            </div>
        </footer>
        
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/jqueryui")
        @Scripts.Render("~/bundles/jqueryval")
        @Scripts.Render("~/bundles/flexgrid") 

        <script src ="@Url.Content("~/Scripts/CardNumbers.js")" type = "text/javascript"></script>
        @RenderSection("scripts", required: false)
    </body>
</html>

------------------

So, I created ClientController and also instead of Index.chtml I now created Client.cshtml. I comment for now the Ajax form and my Client.cshtml looks very similar to the sample again:

@model CardNumbers.Objects.Client

@{
    ViewBag.Title = "Clients";
}

<h2>Clients</h2>

<br />

@*<div id="progress" class ="ui-progressbar">
    Loading...
</div>*@

@*@using (Ajax.BeginForm("Client", "Client",
    new AjaxOptions
    {
        HttpMethod = "GET",
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "flexClients"
      
    }))
    
{
    <fieldset>
        <legend>Search</legend>
        <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 data-autocomplete="@Url.Action("QuickSearch", "Client")"  name ="searchClientName" />
        <div>
            <input type="submit" value="Find / Refresh" />
        </div>
    </fieldset>
    
}*@

<br />
<div style="padding-left:150px; padding-top:50px; padding-bottom:50px;">
<table id="flexClients" style="display:none">
</table>
</div>
<script type="text/javascript">
    $("#flexClients").flexigrid({
        url: '/Client/Client/',
        dataType: 'json',
        colModel: [
        { display: 'Client Id', name: 'ClientId', width: 100, sortable: true, align: 'center' },
        { display: 'Client #', name: 'ClientNo', width: 100, sortable: true, align: 'center' },
        { display: 'Name', name: 'ClientName', 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: 'ClientName' },
        ],
        sortname: "ClientName",
        sortorder: "asc",
        usepager: true,
        title: 'Name',
        useRp: true,
        rp: 15,
        showTableToggleBtn: true,
        width: 900,
        onSubmit: addFormData,
        height: 200
    });

    //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();

        $("#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') {
            if (confirm("Are you sure you want to delete " + $('#ClientName').val($('.trSelected td:eq(2)').text()) + "?"))
                return false;

            $('#fntype').val('Delete');
            $('#ClientId').val($('.trSelected td:eq(0)').text());
            $('#ClientNo').val('');
            $('#ClientName').val('');
            $('#Contact1').val('');

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

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

            clearAll();

        } else if (com === 'Add') {

            $("#sform").dialog({
                autoOpen: false,
                show: "blind",
            });
            $("#sform").dialog("open");

            $('#fntype').val('Add');
            $('#ClientNo').val('');
            $('#ClientName').val('');
            $('#Contact1').val('');

        } else if (com === 'Edit') {

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

                $("#sform").dialog({
                    autoOpen: false,
                    show: "blind",
                    width: 400,
                    height: 300
                });
                $("#sform").dialog("open");

                $('#fntype').val('Edit');
                $('#ClientNo').val($('.trSelected td:eq(1)').text());
                $('#ClientName').val($('.trSelected td:eq(2)').text());
                $('#Contact1').val($('.trSelected td:eq(3)').text());

            });

        }
    }

    function clearAll() {
        $('#fntype').val('');
        $('#ClientNo').val('');
        $('#ClientName').val('');
        $('#Contact1').val('');

    }

</script>
<div style="display:none">
<form id="sform">
<input type="hidden" id="fntype" name="fntype">
<input type="hidden" id="ClientId" name="ClientId">
<label for="clientNo">Client No: </label>
<input type="number" name="clientNo" class="numericOnly" /><br />
<label for="clientName">Client Name: </label>
<input type =  "text" size =25 name ="clientName" /><br />
<input type="button" value="Submit" onclick="addFormData();$('#flexClients').flexOptions({ url: '/Client/Client/'}).flexReload();clearAll();$('#sform').dialog('close');">
<input type="button" value="Cancel" onclick="$('#sform').dialog('close');" />
</form>
</div>

And my Client method in the Controller also looks very much like the sample.

However, while the sample works fine for me, my Client view displays empty grid and never runs the HttpPost method.

Do you see what I may be missing?

Thanks a lot in advance.

Answer 5

User1096912014 posted

I think I am somewhat now close to solution, but I would appreciate if someone smarter than me can help me.

Here is where I think I need to hook

 //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();

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

        return true;
    }

And I also found this http://code.google.com/p/flexigrid/wiki/FAQ where Multiple filters example can be of some help. So, can someone help me to put this together? Again, the idea is to have few search controls on the top that will filter results returned by the flexigrid.

Answer 6

User1096912014 posted

I almost figured this out expect that I need to make sure I don't load all the data the very first time. I also finally got closer to understanding better that sample I was using (thanks again!).

Here is what I have as a solution now for the Client view:

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

And the main work is done in CardNumbers.js file - I am very new to jQuery so my code there may be better and I appreciate the suggestions to improve it:

/// <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 seems to almost work as I wanted. Almost, because when I load the form the first time, it still shows all the clients and I want to load empty grid. I also haven't tested it fully yet for all scenarios as I got excited on my first success.