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

Json Result can't be binded to KendoUI grid

2 Answers 124 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ivan
Top achievements
Rank 1
Ivan asked on 16 May 2017, 07:07 PM
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?

2 Answers, 1 is accepted

Sort by
0
Ivan
Top achievements
Rank 1
answered on 17 May 2017, 04:37 PM
Finnaly I solved my problem on this way, I was returning the full response
dataSource: {
                    data: JSON.parse(dataq.responseText),
                }
0
Georgi
Telerik team
answered on 18 May 2017, 01:07 PM
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.


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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Ivan
Top achievements
Rank 1
Answers by
Ivan
Top achievements
Rank 1
Georgi
Telerik team
Share this question
or