Json Result can't be binded to KendoUI grid

[Ivan]

I can't display in a kendo grid the data that I am returning from my Controller as Json Result.


        

[HttpPost]
public ActionResult PermitSearch(BptSearchViewModel viewModel)
{
    var data = appService.SearchPermitInspection(viewModel);

    return Json(data, JsonRequestBehavior.AllowGet);
}

now from my View I am submitting the information using ajax

      

@using (Ajax.BeginForm("PermitSearch", "Home", null, new AjaxOptions
      {
            HttpMethod = "post",
            InsertionMode = InsertionMode.InsertAfter,
            UpdateTargetId = "search-results-grid",
            OnComplete = "OnCompleteMethod"
      }))
      {
               ....
      }

    <div id="search-results-grid"></div>

an the script with the OnCompleteMethod is below

function OnCompleteMethod(dataq, status) {
    if (status === "success") {
        $("#search-results-grid").kendoGrid({
            columns: [
                {
                    field: "jobname",
                    title: "Job Type"
                }
            dataSource: {
                data: {
                    "items" : dataq
                },
                schema: {
                    data: "items"
                }
            },
            groupable: true,
            sortable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            noRecords: {
                template: "No data available on current page. Current page is: #=this.dataSource.page()#"
            }
        });
    }
}

 
and the data that I am returning looks like this after I call the controller

    

[
      {
        "jobname": "job1"
      },
      {
        "jobname": "job2"
      }
    ]

What I am doing wrong here?

[Ivan]

Finnaly I solved my problem on this way, I was returning the full response
dataSource: {
                    data: JSON.parse(dataq.responseText),
                }

[Georgi]

Hi Ivan,

I have examined the provided code and noticed that the ActionMethod returns an object. However, dataSource.data expects an array. In order to ensure that the data is returned in the correct format from the server you should use ToDataSourceResult when returning data. Please check out the article below that describes Ajax binding in more detail.

• http://docs.telerik.com/aspnet-mvc/helpers/grid/binding/ajax-binding

Furthermore, you should set the type for dataSource to aspnetmvc-ajax and specify the schema.data property. This way the dataSource will know from what field in the response to read the data.

The snippets below show how the code would look after the modifications. Give the approach a try and let me know  how the behavior changes.

Grid definition: 

$(document).ready(function () {
   $("#grid").kendoGrid({
       dataSource: {
           transport: {
               type:"aspnetmvc-ajax",
               read: {
                   url: '/Home/GetData'
               }
           },
           schema: {
               data: "Data"
           },
           pageSize: 20
       },
       autoBind: false,
       height: 550,
       filterable: true,
       sortable: true,
       pageable: true,
       columns: [{
           field: "Month",
       },

       ]
   });
});

Read ActionMethod: 

public ActionResult GetData([DataSourceRequest]DataSourceRequest request, string month)
{
   var months = new string[] { "Jan", "Fev", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" };

   return Json(months.Where(x => x == month).ToDataSourceResult(request));
}

In order to request the data for the Grid component you just need to call the read() method. You can pass additional parameters as arguments and use that information in the Read Action. Note the month argument in the previous snippet.

The code snippet below shows an example of how to call call read() with additional parameters.

function update() {

  var month =  $('#monthInput').val();

        $('#grid').data('kendoGrid').dataSource.read({ month })
}




 $('#submitButton').on('click', update)

The workaround you describe is doing something similar. It passes the parsed data directly to the dataSource. 


Regards,
Georgi
Telerik by Progress