Clever Geek Handbook

Kendoui: how to display foreign key from remote data source in grid

I have a kendui grid that lists the claims. one of the columns is Vendors, which is a foreign key reference to the Vendors table. I want to be able to display the lender name in the grid instead of the id reference.

ive set up the vendor data source as follows

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

and the grid looks like this

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

however, its ID still appears in the vendor column. Ive tried to create a local datasource and it works fine, so now I somehow connect with me using a remote datasource.

any help would be great

thank

+3


source to share


2 answers


The short answer is that you cannot. In any case, this is not the case. See here and here .

You can (as mentioned in the link above) preload the data into var, which can then be used as data to define the column.

I am using something like this: -

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

Which I then use like this: -

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


I am using it in JQuery, deferred to ensure all my search queries are loaded before binding to the grid: -

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

Then you can use countryLookupData

for your values.

You can also use a dedicated grid editor, however you will probably find that you still need to load the data into var (as opposed to using a datasource with DropDownList) and make sure the data is loaded before the grid, because you most likely have to you will need to find the column template for you to select the new value in the grid.

I couldn't completely get ForeignKey to work in any useful way, so I ended up using custom editors as you have a lot more control over them.

Another question: make sure you load the search data before you define the column. I used an array of columns, which was defined in a variable, which I then bind to the grid definition ... even if the search data is loaded before using the grid, if defined after the column definition, it won't work.

+6


source


Although this post for the past 2 years I still share my solution

1) Suppose api url ( http: // localhost / api / term ) will return:

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


note that the attribute name must be "text" and "value"

2) specify the name (text) from the external table instead of term_id (value). See Grid Column "term_id", dropdown will be created if added "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>
0


source






More articles:


All Articles