CODEWITHSUNDEEP
javascriptjquerykendo-uikendo-grid
Chris
Chris

Reputation: 3129

dropdownlist showing as undefined in grid

I am trying to add dropdown's by way of using the custom editor in my grid, and the dropdowns are showing as undefined

Catalogs as undefined

When I click on the undefined, the dropdown appears, and I can select a value from it, but once I click on another undefined dropdown, then it goes back to being undefined, but doesn't lose the selected value.

I have no idea why the dropdowns are showing as undefined and won't keep its selected value visible

var datasource = [{
    "CatalogID": 1,
    "Catalog": "Free"
  },
  {
    "CatalogID": 2,
    "Catalog": "Discount"
  },
  {
    "CatalogID": 3,
    "Catalog": "Regular"
  },
  {
    "CatalogID": 4,
    "Catalog": "Holiday"
  }
];

const DEFAULT_AREA_NAME = "1";

$(document).ready(function() {
  LoadCatalogsGrid();
});

function LoadCatalogsGrid() {
  $("#Grid").empty();
  $("#Grid").kendoGrid({
    scrollable: true,
    selectable: "row",
    filterable: false,
    height: 700,
    columns: [{
      field: "RoomName",
      title: "Room Name",
      width: "120px",
      template: "<div >#=RoomName #</div>"
    }, {
      title: "Catalog",
      field: "Catalog",
      template: '#=Catalog.CatalogName#',
      width: "200px",
      editable: false,
      editor: catalogDropDownEditor
    }],
    editable: {
      mode: "incell",
      confirmation: false
    },
    dataSource: {
      data: [{
          RoomName: "Living Room",
          AreaName: DEFAULT_AREA_NAME,
          Catalog: ""
        },
        {
          RoomName: "Kitchen",
          AreaName: DEFAULT_AREA_NAME,
          Catalog: ""
        },
        {
          RoomName: "Master Bedroom",
          AreaName: DEFAULT_AREA_NAME,
          Catalog: ""
        },
        {
          RoomName: "Mud Room",
          AreaName: DEFAULT_AREA_NAME,
          Catalog: ""
        },
        {
          RoomName: "Garage",
          AreaName: DEFAULT_AREA_NAME,
          Catalog: ""
        }
      ],
      //schema: {
      //    model: {
      //        fields: {
      //            RoomName: { nullable: true, editable: true },
      //            AreaName: { nullable: true, editable: true },
      //            Catalog: { editable: false },
      //        }
      //    }
      //}
    },
    dataBound: function(e) {

    }
  });
}

function catalogDropDownEditor(container, options) {
  $('<input required name="' + options.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
      dataTextField: "Catalog",
      dataValueField: "CatalogID",
      dataSource: {
        data: datasource
      }
    });
}
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.mobile.min.css" />

<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>

<div id="GridWrapper">
  <div id="Grid">

  </div>
</div>

Upvotes: 0

Views: 131

Answers (1)

DontVoteMeDown
DontVoteMeDown

Reputation: 21475

That's because you don't have an object like Catalog.CatalogName. Catalog in your data is just an empty string. You have to check if the property is valid to be shown in the template(e.g. template: '#=(data.CatalogDescription || "")#') and after changing the dropdown value, you have to set the value to the model(as well it's description):

change: function() {
    options.model[options.field] = this.select();
    options.model[options.field + 'Description'] = this.text();
}

Take a look at your updated snippet below:

var datasource = [{
    "CatalogID": 1,
    "Catalog": "Free"
  },
  {
    "CatalogID": 2,
    "Catalog": "Discount"
  },
  {
    "CatalogID": 3,
    "Catalog": "Regular"
  },
  {
    "CatalogID": 4,
    "Catalog": "Holiday"
  }
];

const DEFAULT_AREA_NAME = "1";

$(document).ready(function() {
  LoadCatalogsGrid();
});

function LoadCatalogsGrid() {
  $("#Grid").empty();
  $("#Grid").kendoGrid({
    scrollable: true,
    selectable: "row",
    filterable: false,
    height: 700,
    columns: [{
      field: "RoomName",
      title: "Room Name",
      width: "120px",
      template: "<div >#=RoomName #</div>"
    }, {
      title: "Catalog",
      field: "Catalog",
      template: '#=(data.CatalogDescription || "")#',
      width: "200px",
      editable: false,
      editor: catalogDropDownEditor
    }],
    editable: {
      mode: "incell",
      confirmation: false
    },
    dataSource: {
      data: [{
          RoomName: "Living Room",
          AreaName: DEFAULT_AREA_NAME,
          Catalog: ""
        },
        {
          RoomName: "Kitchen",
          AreaName: DEFAULT_AREA_NAME,
          Catalog: ""
        },
        {
          RoomName: "Master Bedroom",
          AreaName: DEFAULT_AREA_NAME,
          Catalog: ""
        },
        {
          RoomName: "Mud Room",
          AreaName: DEFAULT_AREA_NAME,
          Catalog: ""
        },
        {
          RoomName: "Garage",
          AreaName: DEFAULT_AREA_NAME,
          Catalog: ""
        }
      ],
      //schema: {
      //    model: {
      //        fields: {
      //            RoomName: { nullable: true, editable: true },
      //            AreaName: { nullable: true, editable: true },
      //            Catalog: { editable: false },
      //        }
      //    }
      //}
    },
    dataBound: function(e) {

    }
  });
}

function catalogDropDownEditor(container, options) {
  $('<input required name="' + options.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
      dataTextField: "Catalog",
      dataValueField: "CatalogID",
      value: options.model[options.field],
      dataSource: {
        data: datasource
      },
      change: function() {
          options.model[options.field] = this.select();
          options.model[options.field + 'Description'] = this.text();
      }
    });
}
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.mobile.min.css" />

<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>

<div id="GridWrapper">
  <div id="Grid">

  </div>
</div>

Upvotes: 1

Related Questions