Grid ComboBox Restrict Entries to provided list.
I have a grid combo box in my grid control that has an inventory list. I want the user to be able to search by typing text into the input box but I do not want them to be able to enter and save items that are not in the list. How would I do this?
I also need to be able to search on the value or the text. So in the screenshot below the user should be able to search on the number or the description in the string.
For example, right now I can type in 10154 and the item will be found but if I type in Armor nothing happens.
CODE:
@Html.EJS().Grid("ContainerGrid").DataSource(DataManager => { DataManager.Json(@Model.ContainerTransactions.ToArray()).InsertUrl("/Container/AddContainerTransaction").UpdateUrl("/Container/UpdateContainerTransaction").RemoveUrl("/Container/DeleteContainer").Adaptor("RemoteSaveAdaptor"); }).Width("auto").Columns(col =>
{
col.Field("TransactionNo").Visible(false).Add();
col.Field("InventoryID").HeaderText("Item").IsPrimaryKey(true).Width("40").Visible(false).EditType("dropdownedit").Edit(new { create = "create", read = "read", destroy = "destroy", write = "write" }).ValidationRules(new { required = true }).Add();
...
}).ActionBegin("actionBegin").ActionComplete("actionComplete")
<script>
var elem;
var inventoryObj;
var inventoryData = @Html.Raw(Json.Encode(@Model.Inventory.ToArray()));
function create(args) {
elem = document.createElement('input');
return elem;
}
function destroy() {
inventoryObj.destroy();
}
function read(args) {
return inventoryObj.value;
}
function write(args) {
inventoryObj = new ej.dropdowns.ComboBox({
dataSource: inventoryData,
placeholder: args.column.headerText,
value: args.rowData[args.column.field],
floatLabelType: "Always",
fields: { text: "CatalogDescription", value: "InventoryID" },
change: function() {
description = inventoryObj.text;
}
});
inventoryObj.appendTo(args.element);
}
</script>
