This is a migrated thread and some comments may be shown as answers.

MVC Grid does not return data

1 Answer 98 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Paul
Top achievements
Rank 1
Paul asked on 25 Jul 2012, 09:22 PM
I am new to this but I can't seem to find the answer.  

In both MVC3 and MVC4 (I tried both), I create the vanilla project, define my table with EF and scaffold up the controller, repository and views.  All works fine.  The Index view returns hundreds of records.  

2 problems:  1) When I try to use the Kendo Grid, 0 records are returned.  
2) The GetCarriers method never seems to fire because I never hit the breakpoint.

Here is what I did to add the Kendo Grid to my Index view:
Referenced the .dll
Copied in the CSS and JS files and put them in the head tag section of my _layout.cshtml
Added the following method to my CarriersController

        public ActionResult GetCarriers([DataSourceRequest]DataSourceRequest request)
        {
            var carriers = carrierRepository.All;  // <<<=== Never breaks here if I set the break point
            DataSourceResult result = carriers.ToDataSourceResult(request);
            return Json(result);
        }

Replaced the code in my Index.cshtml

@(Html.Kendo().Grid<TBCarrierTools.Data.Models.Carrier>()
    .Name("Grid")
    .Columns(columns => 
        {
            columns.Bound(p => p.CarrierID);
            columns.Bound(p => p.CarrierName);   
        })
    .DataSource(datasource => datasource
        .Ajax()
        .Read(read => read.Action("GetCarriers", "Carriers")
        ))
)

Here is the Page Source:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Index</title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/kendo.all.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>


    <script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
</head>
<body>
    <div class="page">
        <header>
            <div id="title">
                <h1>My MVC Application</h1>
            </div>
            <div id="logindisplay">
                    [ <a href="/Account/LogOn">Log On</a> ]


            </div>
            <nav>
                <ul id="menu">
                    <li><a href="/">Home</a></li>
                    <li><a href="/Home/About">About</a></li>
                    <li><a href="/Carriers">Carriers</a></li>
                </ul>
            </nav>
        </header>
        <section id="main">
            


<h2>Carriers</h2>


<div class="k-widget k-grid" id="Carriers"><table cellspacing="0"><colgroup><col /><col /></colgroup><thead class="k-grid-header"><tr><th class="k-header" data-field="CarrierID" data-title="Carrier ID" scope="col"><span class="k-link">Carrier ID</span></th><th class="k-header" data-field="CarrierName" data-title="Carrier Name" scope="col"><span class="k-link">Carrier Name</span></th></tr></thead><tbody><tr class="t-no-data"><td colspan="2"></td></tr></tbody></table></div><script>
jQuery(function(){jQuery("#Carriers").kendoGrid({columns:[{title:"Carrier ID",field:"CarrierID",encoded:true},{title:"Carrier Name",field:"CarrierName",encoded:true}],scrollable:false,dataSource:{transport:{read:{url:"/Carriers/GetCarriers"}},serverPaging:true,serverSorting:true,serverFiltering:true,serverGrouping:true,serverAggregates:true,type:"aspnetmvc-ajax",filter:[],schema:{data:"Data",total:"Total",errors:"Errors",model:{fields:{CarrierID:{type:"number"},CarrierName:{type:"string"},CarrierAddress:{type:"string"},CarrierCity:{type:"string"},CarrierState:{type:"string"},CarrierPostal:

... omitted for brevity

{type:"number",defaultValue:null},usrDate:{type:"date",defaultValue:null},usrMemo:{type:"string"},TypeID:{type:"number"},PayMethod:{type:"number"},UserGUID:{type:"object"},tblCarrierContacts:{type:"object"}}}}}});});
</script>
        </section>
        <footer>
        </footer>
    </div>
</body>
</html>

Any ideas?
Thanks
P

1 Answer, 1 is accepted

Sort by
0
Paul
Top achievements
Rank 1
answered on 26 Jul 2012, 10:09 PM
Solved.  The js scripts 1) need to be in the right order and 2) I needed the aspnetmvc.js script.  

    <script src="../../Scripts/jquery.min.js" type="text/javascript"></script>
    <script src="../../Scripts/kendo.web.min.js" type="text/javascript"></script>
    <script src="../../Scripts/kendo.aspnetmvc.min.js" type="text/javascript"></script>

works both MVC3 and MVC4 (when in the bundle).
Tags
Grid
Asked by
Paul
Top achievements
Rank 1
Answers by
Paul
Top achievements
Rank 1
Share this question
or