kendoui : 그리드에 원격 데이터 소스에서 외래 키를 표시하는 방법

Question

나는 퀘스트 목록에있는 겐도우 그리드가 있습니다. 컬럼 중 하나는 대금업자 테이블에 대한 외래 키 참조 인 대금업자입니다. 내가 원하는 것은 ID 참조 대신 그리드에 대금업자 이름을 표시 할 수 있어야한다는 것입니다.

필자 설정 대출 데이터 소스

var dsLenders = new kendo.data.DataSource({ 
    transport: { 
     read: { 
      url: "../data/lenders/", 
      dataType: "jsonp" 
     }, 
     parameterMap: function(options, operation) { 
      if (operation === "read") { 
       return options; 
      } 
     } 
    } 
}); 

을 다음과 여전히 대출 열의 ID를 표시하지만 그리드이

$("#gridClaims").kendoGrid({ 
     dataSource: claimData, 
     autoSync:true, 
     batch: true, 
     pageable: { 
      refresh: true, 
      pageSizes: true 
     }, 
     filterable: true, 
     sortable: true, 
     selectable: "true", 
     editable: { 
      mode: "popup", 
      confirmation: "Are you sure you want to delete this record?", 
      template: $("#claimFormPopup").html() 
     }, 
     navigable: true, // enables keyboard navigation in the grid 
     toolbar: ["create"], // adds insert buttons 
     columns: [ 
      { field:"id_clm", title:"Ref", width: "80px;" }, 
      { field:"status_clm", title:"Status", width: "80px;" }, 
      { field:"idldr_clm", title:"Lender", values: dsLenders }, 
      { field:"type_clm", title:"Claim Type"}, 
      { field:"value_clm", title:"Value", width: "80px;", format:"{0:c2}", attributes:{style:"text-align:right;"}}, 
      { field:"created", title:"Created", width: "80px;", format: "{0:dd/MM/yyyy}"}, 
      { field:"updated", title:"Updated", width: "80px;", format: "{0:dd/MM/yyyy}"}, 
      { field:"user", title:"User" , width: "100px;"}, 
      { command: [ 
       {text: "Details", className: "claim-details"}, 
       "destroy" 
      ], 
      title: " ", 
      width: "160px" 
      } 
     ] 
    }); 

처럼 보이는. 필자는 로컬 데이터 소스를 만들려고 했으므로 이제는 원격 데이터 소스를 사용하여 저와 관련이 있습니다.

어떤 도움

Answer 1

짧은 대답은 당신이 할 수 없다는 것입니다

덕분에 좋은 것입니다. 어쨌든 직접은 아니야. here 및 here을 참조하십시오.

var에 데이터를 미리로드 할 수 있으며 (위에서 링크 된 게시물의 응답으로) 열 정의의 데이터로 사용할 수 있습니다.

나는 이런 식으로 뭔가를 사용 : - : 내 모든 조회 내가 전에로드되도록 연기 JQuery와에서 사용

var countryLookupData; 
getLookupData('country', function (data) { countryLookupData = data; }); 

-

function getLookupData(type, callback) { 
    return $.ajax({ 
     dataType: 'json', 
     url: '/lookup/' + type, 
     success: function (data) { 
      callback(data); 
     } 
    }); 
} 

나는 다음과 같이 사용 그리드에 바인딩 : - 당신은 다음 값 countryLookupData을 사용할 수 있습니다

$.when(
    getLookupData('country', function (data) { countryLookupData = data; }), 
    getLookupData('state', function (data) { stateLookupData = data; }), 
    getLookupData('company', function (data) { companyLookupData = data; }) 
) 
.then(function() { 
    bindGrid(); 
}).fail(function() { 
    alert('Error loading lookup data'); 
}); 

.

사용자 정의 그리드 편집기를 사용할 수도 있지만, 데이터를 var에로드해야하며 (DropDownList가있는 데이터 소스를 사용하는 것과 반대), 데이터가로드되기 전에 그리드에 새 값이 선택되도록 열 템플릿을 조회해야 할 가능성이 높기 때문에 그리드를 선택해야합니다.

ForeignKey는 어떤 유용한 방식으로도 작동하지 못하기 때문에 사용자 정의 편집기를 사용하면 훨씬 더 많은 제어권을 얻을 수 있습니다.

하나 이상의 특성 : 열을 정의하기 전에 조회 데이터를로드했는지 확인하십시오. 나는 그리드 정의에 붙이는 변수에 정의 된 컬럼 배열을 사용하고 있었다 ... 비록 컬럼 정의 후에 정의 된 것이라면 그리드를 사용하기 전에 조회 데이터가로드된다 할지라도 작동하지 않을 것이다. 이년 과거이 게시물, 난 아직도 돌아갑니다 내 솔루션

1) API를 URL (http://localhost/api/term 가정)을 공유하지만

Answer 2

:

{ 
    "odata.metadata":"http://localhost/api/$metadata#term","value":[ 
     { 
      "value":2,"text":"2016-2020" 
     },{ 
      "value":1,"text":"2012-2016" 
     } 
    ] 
} 

속성 이름은 "텍스트"해야한다는 유의하시기 바랍니다 및 "값"

2) term_id (값) 대신 외부 테이블의 용어 이름 (텍스트)을 보여줍니다."data_term 값"

<script> 
    $.when($.getJSON("http://localhost/api/term")).then(function() { 
     bind_grid(arguments[0].value); 
    }); 

    function bind_grid(data_term) { 
     $("#grid").kendoGrid({ 
      dataSource: ds_proposer, 
      filterable: true, 
      sortable: true, 
      pageable: true, 
      selectable: "row", 
      columns: [ 
       { field: "user_type", title: "User type" }, 
       { field: "user_name", title: "User name" }, 
       { field: "term_id", title: "Term", values: data_term } 
      ], 
      editable: { 
       mode: "popup", 
      } 
     }); 
    } 
</script>