4

クレームを一覧表示するケンドウイグリッドがあります。列の1つは、lendersテーブルへの外部キー参照であるlendersです。私が欲しいのは、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: " ",
            width: "160px"
          }
      ]
  });

ただし、それでも貸し手列にIDが表示されます。私はローカルデータソースを作成しようとしましたが、それはうまく機能しているので、今はリモートデータソースを使用して私と関係があります。

どんな助けでも素晴らしいでしょう

ありがとう

4

3 に答える 3

8

簡単な答えはあなたができないということです。とにかく直接ではありません。こことここを参照してください。

（上記のリンクされた投稿の応答で言及されているように）データを変数にプリロードして、列定義のデータとして使用できます。

私はこのようなものを使用します：-

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ます。

カスタムグリッドエディタを使用することもできますが、（DropDownListでデータソースを使用するのではなく）データを変数にロードし、グリッドの前にデータがロードされるようにする必要があることに気付くでしょう。新しく選択した値がグリッドに表示されるように、列テンプレートを検索する必要があります。

私はForeignKeyを便利な方法で機能させることができなかったので、カスタムエディタを使用することになりました。これは、カスタムエディタをより細かく制御できるためです。

もう1つの落とし穴：列を定義する前に、ルックアップデータがロードされていることを確認してください。グリッド定義にアタッチしていた変数で定義された列配列を使用していました...グリッドを使用する前にルックアップデータが読み込まれたとしても、列定義の後に定義されていると機能しません。

于 2013-02-24T05:33:22.857 に答える
0

この投稿は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"
        }
    ]
}

属性名は「テキスト」および「値」でなければならないことに注意してください

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>
于 2015-08-07T03:23:59.797 に答える