Michael Bowman
Michael Bowman

Reputation: 245

ShieldUI Grid - show dropdown on insert only

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

Upvotes: 3

Views: 218

Answers (1)

lyub35
lyub35

Reputation: 300

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();
    }    
},

Upvotes: 1

Related Questions