ShieldUI Grid - show dropdown on insert only

Question

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" }
                        ]
                    }
                ]
            });
        });

Answer 1

There is a workaround. Leave your column editable, just bind on the edit event thrown from the grid, find the editor for that column and just hide it or replace it with the value of the cell.

events: {
    edit: function(e) {
        var target = $("#column_editor_id");
        target.hide();
    }    
},