Kendo UI Grid MVC Not rendering

Question

I have recently started incorporating Kendo UI into my project. I have a strongly typed view and wish to bind the Kendo grid to the appropriate View Model on the view:

@ModelType IEnumerable(Of IMS_2.Models.expenseclaims)
@Code
ViewData("Title") = "Index"
End Code

<h2>Index</h2>

    <div>
    @code
        Html.Kendo().Grid(Model).Name("ExpenseClaims") _
         .Columns(Sub(c)
                          c.Bound(Function(x) x.ClaimDate).Width(140)
                          c.Bound(Function(x) x.Title).Width(190)
                          c.Bound(Function(x) x.Company)
                  End Sub)
    end code
</div>

The code executes without exceptions on the server and with no javascript errors at the client. Examination of the rendered source shows no mention of the grid:

<h2>Index</h2>

<div>          
</div>
        <hr />
        <footer>

...etc

My code is (I think) a direct translation of other examples I've seen in c# (see http://telerikhelper.net/2012/10/26/using-kendo-grid-in-asp-net-mvc-4-0/)

Expenseclaims is generated by the EF template and is defined as:

 Partial Public Class expenseclaims
        Public Property id As Long
        Public Property Title As String
        Public Property ClaimDate As Nullable(Of Date)
        Public Property Creator As Nullable(Of Long)
        Public Property Company As Long
        Public Property AdvanceOffset As Nullable(Of Decimal)   
        Public Overridable Property expenselines As ICollection(Of expenselines) = New HashSet(Of expenselines)
        Public Overridable Property companies As companies 
    End Class

The controller code is:

 Public Class ExpenseController
        Inherits System.Web.Mvc.Controller

        Private db As New IMSEntities

        ' GET: /Expense/
        Function Index() As ActionResult
            Return View(db.expenseclaims.ToList())
        End Function

Which is where I am stumped...Any help gratefully appreciated.

Answer 1

Edit: You do need the .tolist() A really good vb start is at Telerik, at least that is where i started http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/vb I did mine a bit different but this should get same result for you. I think possibly the issue is you are wrapping this is a code block which isn't really right from what I read. Here is an example of what I do for a tracking grid. Where I have the datasource(since I use an ajax source and you want to use a model) you can just put the following:

  .DataSource(dataSource => dataSource        
            .Ajax()
            .PageSize(20)
            .ServerOperation(false)        
         )

The bottom line is that you seem to be missing the datasource and I am unsure about the code block to be honest, but I do not do it that way.

 @(Html.Kendo().Grid(Of TrackingGroupModel)().Name("grid") _
        .Columns(Function(col)
                     col.Bound(Function(e) e.TrackingNumber).ClientTemplate("<a href='#=ShippingCompanyUrl##=TrackingNumber#' target='_blank'>#=TrackingNumber#</a>")
                     col.Bound(Function(e) e.DateAdded).Format("{0:D}")
                     col.Bound(Function(e) e.ProductCount).Title("Total Shipped")
                     col.Command(Function(command) command.[Custom]("View Details").Click("showDetails"))
                 End Function)
.DataSource(Function(ds) ds.Ajax().Read(Function(read) read.Action("getTracking", "OrderManagement", New With {.id = Model.Id})))
        )