Flex Grid not rendering in Orchard CMS

I dont understand why Flex Grid is not rendering in my orchard cms project. same code is running in separate project but does not work here. below is the code for page. i have verified the path for scripts and style sheet and both are correct.

View

@{

Script.Include("navigation-admin.js");
Script.Require("jQuery");
Script.Require("jQueryUI");
Script.Require("flexgrid");

Style.Include("flexgrid.css");
Style.Include("flexgrid.pack.css");
}

<table id="jobListing" style="display: none"></table>

@using (Script.Foot()) { 

<script type="text/javascript">

    $(document).ready(function () {
        $('#jobListing').flexigrid({
            url: '/Member/List',
            dataType: 'json',
            colModel: [
                {
                    display: 'Caption',
                    name: 'Caption',
                    width: 180,
                    sortable: true,
                    align: 'left'
                }, {
                    display: 'Name',
                    name: 'Name',
                    width: 180,
                    sortable: true,
                    align: 'left'
                }, ]
        });
    });        

</script>

}

ResourceManifest

    public void BuildManifests(ResourceManifestBuilder builder)
    {
        // Create and add a new manifest
        var manifest = builder.Add();


        manifest.DefineScript("flexgrid").SetUrl("flexigrid.pack.js", "flexigrid.js");        
    }

Currently showing

Should show layout like this (not data or columns)

Console Errors

I think you need to move your $('#jobListing').flexigrid({ .. }); to the document ready part.

Also, to give you some tips:

1. You should add your scripts and styles to the ResourceManifest

2. If your don't use the ResourceManifest, use Script.Include("PathToScript") instead

3. You should use Script.Require("jQuery") instead of requiring it yourself (it probably is injected twice)

4. I don't think there is a section called Scripts in Orchard. Use the following instead:

@using (Script.Foot()) {

<script type="text/javascript">

    //<![CDATA[
    $(document).ready(function () {

        [.....your code here.....]
    });
    //]]>

</script>

}

EDIT:

Looking at your console errors, I'd say you miss the web.config in the Scripts and Styles folder.

"By default, Orchard is setup to restrict folder permissions. This is usually overriden by adding a web.config to each folder as required (in this case, your scripts folder).

If you use the codegen module to generate your module, then this is done for you as part of the generation. If not, then you need to add the web.config yourself."

source: Orchard CMS : Javascript file returns 404 not found even though it exists