раскрывающийся список отображается как неопределенный в сетке - PullRequest
Новая
       8

раскрывающийся список отображается как неопределенный в сетке

0 голосов
/ 09 ноября 2018

Я пытаюсь добавить раскрывающиеся списки с помощью специального редактора в моей сетке, и раскрывающиеся списки отображаются как неопределенные

Catalogs as undefined

Когда я нажимаю на неопределенное, появляется раскрывающийся список, и я могу выбрать из него значение, но как только я нажимаю на другое неопределенное раскрывающееся меню, оно снова становится неопределенным, но не теряет выбранное значение.

Понятия не имею, почему раскрывающиеся списки отображаются как неопределенные и не будут отображать выбранное значение 

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>

1 Ответ

0 голосов
/ 12 ноября 2018

Это потому, что у вас нет такого объекта, как Catalog.CatalogName. Catalog в ваших данных просто пустая строка. Необходимо проверить, действительно ли свойство отображается в шаблоне (например, template: '#=(data.CatalogDescription || "")#'), и после изменения раскрывающегося значения необходимо установить значение для модели (а также ее описание): 

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

Взгляните на ваш обновленный фрагмент ниже: 

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>
...