CODEWITHSUNDEEP
javascriptkendo-ui
ckv
ckv

Reputation: 10830

Binding datasource to Kendo Grid where some field may not be present in JSON

I have a Kendo Grid and the data is bound with results from a webApi. Below is a snapshot of the code. This is used to render the Kendo Grid. Now in the JSON result there could be cases where the field 'nominalVoltage' will not be there. In other words some results may return the field, some may not. In case the field is not returned the code fails. I will get error like field is undefined. Can this be handled anyway while loading Kendo grid controls?

$scope.columns = [{
    field: 'businessCode',
    title: 'Business Code',
    width: '120px',
}, {
    field: 'nominalVoltage',
    title: 'Nominal Voltage',
    width: '120px'
}];

var options = {
    dataSource: {
        data: data
    },
    width: '100%',
    resizable: true,
    sortable: true,
    scrollable: true,
    reorderable: true,
    dataBinding: function (e) {
        var pageSizes = e.sender.dataSource.pageSize() || 20;
    },
    pageable: {
        pageSize: pageSize,
        pageSizes: [5, 10, 20, 50, 100, 200],
        refresh: true
    },
    columns: $scope.columns
};

Upvotes: 0

Views: 69

Answers (3)

Sandman
Sandman

Reputation: 2307

You could apply a conditional template attribute on the grid column which requires validation:

field: 'nominalVoltage',
title: 'Nominal Voltage',
width: '120px',
template: "#if(nominalVoltage) {#:nominalVoltage#} else{'Oops nothing found'}#"

Or the template as a function,

template: validateNominalVoltage

function validateNominalVoltage(dataItem) {
    return dataItem.nominalVoltage ? dataItem.nominalVoltage : 'Oops nothing found';
}

Usually this method is used to modify how data is being displayed i.e. bolding content, using an external HTML template but in your case this will work fine for checking if the nominalVoltage attribute contains a value before displaying.

Upvotes: 1

Ankush Jain
Ankush Jain

Reputation: 7059

You can define template like below

//field: 'nominalVoltage', // do not include it
template: function(data) {
  return data.nominalVoltage ? data.nominalVoltage : "";
},
title: 'Nominal Voltage',
width: '120px'

Upvotes: 0

Cara
Cara

Reputation: 644

You can set a schema for your data.

schema: {
    model: {
        businessCode: { type: "string" },
        nominalVoltage: { type: "number" },
    }
}

Upvotes: 0

Related Questions