Блог

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

как реализовать эту функциональность, используя этот код в качестве отправной точки:

 const pendingGrid = $("#pending").kendoGrid({  dataSource: pendingGridDataSource,  editable: true,  filterable: true,  sortable: true,  resizable: true,  detailInit: pendingSubGrid,  columns: [  {  field: "narrative",  title: "Narrative",  width: "300px",  },  {  field: "cost_type_description",  title: "Expense Type",  width: 200,  attributes: {  'title': 'Click to edit',  },  editor: function (container, options) {  if ((options.model.cost_type_description == null)) {  $('lt;input required name="'   options.field   '" /gt;')  .appendTo(container)  .kendoDropDownList({  optionLabel: 'Select Expense Type',  dataSource: ['Gifts', 'MSG'],  });  }  else if ((options.model.cost_type_description == 'MSG') ||  (options.model.cost_type_description == 'Gifts')) {  $('lt;input required name="'   options.field   '" /gt;')  .appendTo(container)  .kendoDropDownList({  dataSource: ['Gifts', 'MSG'],  });  }  else {  $('lt;divgt;'   options.model.cost_type_description   'lt;/divgt;')  .appendTo(container)  .removeClass("k-edit-cell");  }  },  filterable: {  operators: {  string: {  contains: "Contains",  eq: "Is equal to",  neq: "Is not equal to"  }  }  }  },  {  field: "client_name",  title: "Client",  width: "150px",  },  {  field: "matter",  title: "Matter Number",  width: "155px",  },  {  field: "business_purpose",  title: "Purpose",  },  {  field: "venue",  title: "Venue",  },  {  field: "work_date",  title: "Expense Date",  format: "{0:MM/dd/yyyy}",  width: "140px"  },  {  field: "post_date",  title: "Post Date",  format: "{0:MM/dd/yyyy}",  width: "130px"  },  {  field: "work_amt",  title: "Amount",  width: "120px",  format: "{0:c}"  },  {  field: "partner_work_amt",  title: "Partner Share",  width: "140px",  format: "{0:c}"  },  {  field: "timekeeper_name",  width: "140px",  title: "Timekeeper",  },  { command: ["edit", "destroy", { text: "Approve", click: ApprovePending }, { text: "Reject", click: RejectPending }], width: "350px" }  ],  editable: "inline" }).data("kendoGrid");  // Pending tab personnel, add new records with associated dropdowns function pendingSubGrid(e) {  $(`lt;div class='partners partners-${e.data.cost_index}' /gt;`).appendTo(e.detailCell).kendoGrid({  dataSource: {  transport: {  read: function (options) {  $.ajax({  url: `/Partners/GetPartners?flag=Pendingamp;cost_index=${e.data.cost_index}`,  contentType: "application/json",  dataType: 'json',  type: "POST",  data: JSON.stringify(options.data),  success: function (result) {  options.success(result);  }  })  },  create: function (options) {  $.ajax({  url: `/Partners/Create?cost_index=${e.data.cost_index}`,  contentType: "application/json",  dataType: 'json',  type: "POST",  data: JSON.stringify(options.data),  success: function (result) {  options.success(result);  pendingGridDataSource.read();  }  })  },  destroy: function (options) {  $.ajax({  url: `/Partners/Delete?cost_index=${e.data.cost_index}`,  contentType: "application/json",  dataType: 'json',  type: "POST",  data: JSON.stringify(options.data),  success: function (result) {  options.success(result);  pendingGridDataSource.read();  }  })  },  },  dataType: "json",  schema: {  model: {  id: "employee_id",  fields: {  first_name: { type: "string", editable: true },  middle_name: { type: "string", editable: true },  last_name: { type: "string", editable: true },  company: { type: "string" },  contact_listing_id: { type: "number" },  company_listing_id: { type: "number" }  }  }  },  pageSize: 0  },  toolbar: ["create"],  editable: "inline",  edit: function (e) {  if (e.model.isNew()) {  $('#first_name').attr("readonly", true);  $('#middle_name').attr("readonly", true);  $('#last_name').attr("readonly", true);  }  },  pageable: false,  columns: [  {  field: "company", title: "Contact",  headerAttributes: { "data-override": "company" },  editor: function (container, options) {  var td = container;  var input = $('lt;input id="dvLinkContAC" name"'   options.field   '" type="text" required validationMessage="Please make a selection before saving entry"/gt;');   input = input.appendTo(container);   input.kendoAutoComplete({  dataTextField: "NAME",  dataValueField: "NAME",  value: "",   minLength: 2,  autoBind: false,  suggest: true,  placeholder: "Select client...",  change: function (e) {  if (!valid) {  e.sender.value("");  }  },  filtering: function () {  valid = false;  },  dataSource: {  serverFiltering: true,  transport: {  read: {  url: "/Partners/PartnerNames",  type: "GET",  cache: false,  dataType: "json",  contentType: "application/json; charset=utf-8"  },  parameterMap: function () {  return "searchBy="   encodeURIComponent($('#dvLinkContAC').data("kendoAutoComplete").value());  }  },  schema: {  model: {  fields: {  FIRST_NM: { type: "string" }, // validation: { min: 1, required: true } },  LAST_NM: { type: "string" }, // , validation: { min: 1, required: true } },  MIDDLE_NM: { type: "string" }, // , validation: { min: 1, required: true } },  NAME: { type: "string" },  COMPANY_NM: { type: "string" }  }  }  }  },  select: function (e) {  valid = true;  options.model.set('employee_id', this.dataItem(e.item.index()).SYS_ID);  options.model.set('first_name', this.dataItem(e.item.index()).FIRST_NM);  options.model.set('middle_name', this.dataItem(e.item.index()).MIDDLE_NM);  options.model.set('last_name', this.dataItem(e.item.index()).LAST_NM);  options.model.set('company', this.dataItem(e.item.index()).COMPANY_NM);  options.model.set('contact_listing_id', this.dataItem(e.item.index()).CONTACT_LISTING_ID);  options.model.set('company_listing_id', this.dataItem(e.item.index()).COMPANY_LISTING_ID);  }  });  }  },  {  field: "first_name",  title: "First Name",  },  {  field: "middle_name",  title: "Middle Name",  },  {  field: "last_name",  title: "Last Name",  },  { command: ["destroy", "edit"] }  ]  });