jQuery Flexigrid with ASP.NET MVC

Question

I' trying to use Flexigrid with ASP.NET MVC. I need all the JSON type functionality(searching, sorting, find) except that I'm using foreach in my view and looping to generate the table rows.

<table id="gllisting">
            <% foreach (var item in Model)
               { %>
            <tr>
                <td>
                    <%= Html.Encode(item.GLCODE) %>
                </td>
                <td>
                    <%= Html.Encode(item.DESCRIPT) %>
                </td>
                <td>
                    <%= Html.Encode(item.PL_BS) %>
                </td>
                <td>
                    <%= Html.Encode(item.LOCCODE) %>
                </td>
                <td>
                    <%= Html.Encode(item.SUBLEDGER) %>
                </td>
                <td>
                    <%= Html.Encode(item.SALUTATION) %>
                </td>
                <td>
                    <%= Html.Encode(item.DEPARTMENT) %>
                </td>
             </tr>
            <% } %>
        </table>

Now I using a script block like this

$(document).ready(function() {
    $("#gllisting").flexigrid({
        colModel: [
                { display: "Ledger Code", name: "glcode", width: 40, sortable: true, align: "left" },
                { display: "Description", name: "name", width: 180, sortable: true, align: "left" },
                { display: "Account Type", name: "ac_type", width: 120, sortable: true, align: "left" },
                { display: "Cash/Bank Code", name: "loccode", width: 130, sortable: true, align: "left" },
                { display: "Subledger", name: "subledgr", width: 80, sortable: true, align: "left" },
                { display: "Salutation", name: "salutation", width: 80, sortable: true, align: "left" },
                { display: "Department", name: "depmas", width: 80, sortable: true, align: "left" }],
        buttons: [
                { name: "Add", bclass: "add", onpress: test },
                { name: "Delete", bclass: "delete", onpress: test },
                { separator: true}],
        searchitems: [
                { display: "Ledger Code", name: "glcode" },
                { display: "Description", name: "name", isdefault: true}],
        sortname: "glcode",
        sortorder: "asc",
        usepager: true,
        title: "General Ledger Listing",
        useRp: true,
        rp: 15,
        showTableToggleBtn: true,
        width: 700,
        height: 500
    });
});

Its not working please help. I'm unable to use flexigrid. I'm using jQuery version 1.4.2.

Answer 1

Fallback to an older version of jQuery, like version 1.3. I think it will work.

Answer 2

I think you need 2 more parameters: url: '/Controller/Action', dataType: 'json'