Json Result can't be binded to KendoUI grid

3 posts, 0 answers
  1. Ivan
    Ivan avatar
    18 posts
    Member since:
    Feb 2017

    Posted 16 May 2017 Link to this post

    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. Ivan
    Ivan avatar
    18 posts
    Member since:
    Feb 2017

    Posted 17 May 2017 Link to this post

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

    Posted 18 May 2017 Link to this post

    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.
Back to Top