Json Result can't be binded to KendoUI grid

6 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);<br>        }


    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. Alain
    Alain avatar
    2 posts
    Member since:
    Feb 2015

    Posted 17 May 2017 in reply to Ivan Link to this post

    HI Ivan,

    Here there is an example how to bind a grid to local data:

    http://demos.telerik.com/kendo-ui/grid/local-data-binding

    Maybe it can help you

    Alain

  3. Ivan
    Ivan avatar
    18 posts
    Member since:
    Feb 2017

    Posted 17 May 2017 in reply to Alain Link to this post

    I just added the schema but it doesn't work for me.I don't know why this example is working http://dojo.telerik.com/UtOQE/3 but when I pass the data from my Controller returning the Json instead of copying the data as part of the javascript it doesn't work

     

  4. Ivan
    Ivan avatar
    18 posts
    Member since:
    Feb 2017

    Posted 17 May 2017 in reply to Alain Link to this post

    I tried to add the schema as well, but it did not work. I don't know why this example is working http://dojo.telerik.com/UtOQE/3 

    but when I pass the data from my controller as JsonResult it doesn't work

  5. 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),
                    }

     

  6. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2480 posts

    Posted 18 May 2017 Link to this post

    Hello Ivan,

    Please check out the answer in the other thread you have submitted. Give the suggested approach a try and see how it works for you. In case you have additional queries please use only one of the threads.



    Regards,
    Viktor Tachev
    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