Kendo Grid Ajax Binding Not showing Data

Question

I'm having some problems showing data in a Kendo Grid. My scenario is this: I have a grid that should display information about tasks for a certain project. Only tasks related to that project should show up on the grid. I'm using ajax binding to get the data from the server. However, the grid is not displaying any of the data. I'm fairly certain that the Read function is returning the correct results and I think in the correct format, but clearly I'm wrong. Below is my code.

Here are my model definitions:

Public Class TaskViewModel
    Public Property IdTasks As Integer

    Public Property Task As String
    Public Property AssignedToId As Nullable(Of Integer)
    Public Property StartDate As Nullable(Of Date)
    Public Property DueDate As Nullable(Of Date)

    Public Property usersAssignedTo As UserViewModel
    Public Property costChange As CostChangeViewModel
End Class

Public Class CostChangeViewModel
     Public Property Text as String
     Public Property Value as Integer
End Class

Public Class UserViewModel
     Public Property Text as String
     Public Property Value as Integer
End Class

Read Action from Controller

Function Tasks_Read(familyId As Integer) As JsonResult
        'get the customer family that is being viewed on the margin report
        Dim custFamily As CustomerFamilies = (From a In dbLMT.CustomerFamilies Where a.CustomerFamilyId = familyId).Single
        'get a list of tasks related to that customer family
        Dim lstTasks As IQueryable(Of Tasks) = getTaskList(custFamily)
        'create a queryable of the task view model and select only those properties
        Dim lstTaskViewModel As IQueryable(Of TaskViewModel) = (From a In lstTasks Select New TaskViewModel With {.IdTasks = a.IdTasks, .Task = a.Task, .AssignedToId = a.AssignedToId, .usersAssignedTo = New UserViewModel With {.Text = a.usersAssignedTo.FirstName & " " & a.usersAssignedTo.LastName, .Value = a.usersAssignedTo.IdUsers}, .StartDate = a.StartDate, .DueDate = a.DueDate, .costChange = New CostChangeViewModel With {.Text = a.costChange.CostChangeDesc, .Value = a.costChange.CostChangeProjectId}})

        Return Json(lstTaskViewModel, JsonRequestBehavior.AllowGet)
End Function

The above function appears that it works fine and lstTaskViewModel contains the correct tasks with the correct properties.

My Grid code is shown below:

@Html.Kendo.Grid(Of TaskViewModel).Name("gridTasks").Columns(Sub(col)
                                                                             col.Bound(Function(p) p.IdTasks).Title("Id")
                                                                             col.Bound(Function(p) p.costChange).Title("Cost Change Project").ClientTemplate("#=costChange.Text#").Width(200)
                                                                             col.Bound(Function(p) p.Task).Title("Task").Width(400)
                                                                             col.Bound(Function(p) p.StartDate).Title("Start Date").Width(100).Format("{0:MM/dd/yyyy}")
                                                                             col.Bound(Function(p) p.DueDate).Title("Due Date").Width(100).Format("{0:MM/dd/yyyy}")
                                                                             col.Bound(Function(p) p.usersAssignedTo).Title("Assigned To").ClientTemplate("#=usersAssignedTo.Text#").Width(100)
                                                                         End Sub).DataSource(Sub(ds)
                                                                                                     ds.Ajax().Read(Sub(rd)
                                                                                                                            rd.Action("Tasks_Read", "Reports").Data("getFamilyId")
                                                                                                                    End Sub).Model(Sub(model)
                                                                                                                                           model.Id(Function(p) p.IdTasks)
                                                                                                                                   End Sub)
                                                                                             End Sub).AutoBind(True)

Using the above Grid, I have succesfully created new Tasks and displayed them, but I can't see the list of tasks that get passed from Tasks_Read . (I've taken out everything that wasn't reading data for testing purposes)

Using the IE debugger, I got the JSON string that Tasks_Read returns to the grid:

[{"IdTasks":7027,"Task":"this is a test to ensure that creating a task and an issue is possible","AssignedToId":3151,"StartDate":"\/Date(1438056000000)\/","DueDate":"\/Date(1438228800000)\/","usersAssignedTo":{"Text":"Eric Hemphill","Value":3151},"costChange":{"Text":"Change Final Assy AT from 0.82 to 0.73","Value":125}}]

To me it seems like that JSON result fits the model from the grid, but the grid doesn't show any data. I think I've read every post that has a similar issue but nothing has worked so far.

Any ideas are welcome. Thanks for the help!

Answer 1

I figured it out after many more hours of trying. In the read function of the controller, there needs to be a Kendo.mvc.ui.dataSourceRequest object that gets passed in. This object is sent from the grid. Then, before the Enumerable is returned, it needs to be converted to a Kendo DataSourceResult and then to a JSON object. (I think my use of the word object is wrong, so don't write any papers on it.) Anyway, the controller function should look something like this:

Function Tasks_Read(dataRequest as Kendo.Mvc.UI.DataSourceRequest, other param) as JsonResult {
'get your list of tasks and store them in some sort of enumerable
dim lstTasks as IQueryable(of Tasks) = (Get your list)


'convert the enumerable to a dataSourceResult
dim dataResult as Kendo.Mvc.UI.DataSourceResult = lstTasks.ToDataSourceResult(dataRequest)

To use the ToDataSourceResult function, you need to import the kendo.mvc.extensions Namespace.

Everything in this post is in their documentation, so it's nothing crazy, I misunderstood their docs. I hope this helps someone in the future. Good Luck All!