Json 결과를 KendoUI 그리드에 바인드 할 수 없습니다.

Question

컨트롤러에서 Json Result로 반환하는 데이터를 검도 그리드에 표시 할 수 없습니다. 지금

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

     return Json(data); 
    } 

내보기에서 나는 아약스

@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> 

을 사용하여 정보를 제출하고 OnCompleteMethod으로 스크립트는

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()#" 
      } 
     }); 
    } 
} 

나는 이런 모습을 반환하고 데이터 아래 내가 컨트롤러에 전화하면

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

내가 그 작품을보고있는 예제는 이런 식으로 배열 안의 객체 키를 따옴표없이 사용하고 있지만 그런 식으로 json 데이터를 그리드에 전달하는 데 적용 할 수있는 변환을 찾을 수 없습니다 .

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

당신은 내가 잘못 여기서 뭐하는 거지 여기에서

브라우저의 반응을 볼 수 있습니까?

Answer 1

경우, 그리드 정의 사용해보십시오 :

$("#search-results-grid").kendoGrid({ 
    columns: [{ 
     field: "jobname", 
     title: "Job Type" 
    }], 
    dataSource: { 
     data: JSON.parse(dataq), 
     pageSize: 10    
    }, 
    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()#" 
    } 
}); 

편집을

같이 dataq의 정의를 포함하도록 업데이트 OP별로 추가하고 pageSize 특성을 추가하여 그리드의 페이징에서 널 (null)을 방지합니다.

이 Dojo 예제는 내게 잘 작동합니다 (질문에 지정된 두 형식 모두 포함)?

EDIT 2 - 용액은 상기 논의를 계속 한 후

하는 결과, 그 dataq 컨트롤러 함수로부터 전체 응답을 포함 점등했다. 따라서 에 dataq에서 액세스해야하고 JSON 문자열이므로 JSON.parse(dataq.responseText)을 수행하여 표의 데이터 소스에 적합한 개체 목록으로 추출해야합니다.

Answer 2

자바 스크립트 함수 대신 면도기 코드에서 격자 htmlhelper를 사용하여 격자를 작성해야한다고 생각합니다.

Ajax binding in the Telerik documentation here을 참조 할 수 있습니다.

기본적으로 그리드의 채우기가 Ajax를 필요로하는 경우에만 해당 "사용"사양이 필요하지 않습니다. 대신 그리드 구성에 지정됩니다. 어떤 결과가 표시되지 않으면

@(Html.Kendo().Grid<BptSearch>() 
    .Name("search-results-grid") 
    .DataSource(dataSource => dataSource 
      .Ajax() 
      .Read(read => read.Action("PermitSearch", "[controller]")) 
    ) 
     .Columns(columns => 
      { 
       columns.Bound(job => job.jobID).Title("Job ID"); 
       columns.Bound(job => job.jobName).Title("Job Type"); 
      }) 
     .Pageable() 
     .Sortable() 
    ) 

, 메시지 내에서 표시됩니다 "레코드가 표시되지하는"마찬가지로, 당신도 ... 뷰의 면도날에 그리드는 다음과 같이 보일 수있는 자바 스크립트 코드가 필요하지 않습니다 호출기 (의도적으로 설계된 것임).

이 Grid FAQ은 다른 용도로 사용하기를 원하면 좋은 참조 일 수 있습니다. dataq 그리드에 필요한 모든 항목 객체의 배열을 포함 local data입니다