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.

I think the only thing we're missing (code-wise) here is your Controller method. It should be the public ActionResult Index().... which contains the DataClasses1DataContext that in turn passes the 'filled' model by the line of return View(context.Persons). I know your code will be slightly different, but you could put a break point on that "return" line in your VB.NET code to see if there is any data being passed. — piercove
Thanks - yes - putting a breakpoint on the grid statement enables me to see that 'model' contains 221 data items. Have added Controller code to question. — Rich Freeman
Have you tried removing the .ToList() part in the return method? perhaps it isn't passing the context correctly? — piercove
That doesn't seem to make any difference - though I can no longer see the 221 data items at the model (the model referring directly to the EF entity rather than a list of items). Either way the grid still doesn't render. — Rich Freeman

Jason Amoss Jason Amoss · Accepted Answer · 2014-06-15T22:49:18

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})))
        )

Kendo UI Grid MVC Not rendering

1 Answers