I'm using the ShieldUI Grid, and would like to have a new row on the grid show a dropdown in one of the columns. This column is not editable and displays text. I want the user to be able to select a value from a dropdown, but it not be editable after being added. I've reviewed the documentation multiple times, and can't seem to figure it out.
$(document).ready(function() {
$("#propertiesGrid").shieldGrid({
theme: "light-bootstrap",
dataSource: {
remote: {
read: {
url: "/api" + window.location.pathname + "/ProductAttributes",
dataType: "json"
}
},
modify: {
update: function(items, success, error) {
$.ajax({
type: "PUT",
url: "/api" + window.location.pathname + "/ProductAttributes",
dataType: "json",
contentType: "application/json",
data: JSON.stringify(items[0].data)
}).then(success, error);
}
}
},
schema: {
fields: {
"attributeId": { path: "attributeId" },
"productAttributeId": { path: "productAttributeId" },
"productId": { path: "productId" },
"attributeName": { path: "attributeName" },
"minimum": { path: "minimum" },
"target": { path: "target" },
"maximum": { path: "maximum" },
"method": { path: "method" }
}
},
rowHover: false,
resizing: true,
scrolling: true,
events: {
insert: function() { AddNewRow() }
},
editing: {
enabled: true,
type: "row",
insertNewRowAt: "pagebottom"
},
toolbar: [
{
buttons: [
{ commandName: "insert", caption: "Add Product" }
],
position: "bottom"
}
],
paging: {
pageSize: 10,
pageLinksCount: 12,
messages: {
infoBarTemplate: "From {0} to {1} items of a total of {2}",
firstTooltip: "First page",
previousTooltip: "Previous page",
nextTooltip: "Next page",
lastTooltip: "Last page"
}
},
columns: [
{
field: "attributeName",
title: "Attribute",
editable: false,
id: "attributeName"
},
{ field: "minimum", title: "Minimum" },
{ field: "target", title: "Target" },
{ field: "maximum", title: "Maximum" },
{ field: "method", title: "Method" },
{
width: 150,
title: " ",
buttons: [
{ commandName: "edit", caption: "Edit" },
{ commandName: "delete", caption: "Delete" }
]
}
]
});
});