Question

我有一个kendoui网格列出了声明。其中一列是贷方，它是贷方表的外键引用。我想要的是能够在网格中显示贷方名称而不是其id引用。

我设置贷方数据源如下

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

并且网格看起来像这样

 $("#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: "&nbsp;",
            width: "160px"
          }
      ]
  });

然而它仍然在贷方列中显示id。我已经尝试创建一个本地数据源，并且工作正常，所以我现在与使用远程数据源的事情有关。

任何帮助都会很棒

谢谢

Answer 1

简短的回答是，你做不到。反正不是直接的。请参阅here和here。

您可以（作为上述链接帖子中的响应）将数据预加载到var中，然后可以将其用作列定义的数据。

我使用这样的东西： -

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

然后我会这样使用： -

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

我在延迟的JQuery中使用它，以确保在绑定到网格之前加载所有查找： -

$.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');
});

然后，您可以使用countryLookupData作为您的值。

您也可以使用自定义网格编辑器，但是您可能会发现仍需要将数据加载到var中（而不是使用带有DropDownList的数据源）并确保在网格之前加载数据，因为您很可能需要查找列模板，以便您在网格中显示新选择的值。

我无法让ForeignKey以任何有用的方式工作，所以我最终使用自定义编辑器，因为你可以更好地控制它们。

还有一个问题：确保在定义列之前加载了查找数据。我正在使用一个在变量中定义的列数组，然后将其附加到网格定义中...即使在使用网格之前加载了查找数据，如果在列定义之后定义它也不起作用。

Answer 2

虽然这篇文章过去2年，但我仍然分享我的解决方案

1）假设api url（http://localhost/api/term）将返回：

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

请注意，属性名称必须为“text”和“value”

2）显示来自外表的术语名称（文本）而不是term_id（值）。查看网格列“term_id”，如果添加“values：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>

Answer 3

对于那些现在遇到这个问题的人，支持此功能：

https://demos.telerik.com/aspnet-mvc/grid/foreignkeycolumnbinding

kendoui：如何在网格中显示来自远程数据源的外键

3 个答案: