Edit Records Using External Forms

Environment

Product	Progress® Kendo UI® Grid for jQuery
Operating System	All
Browser	All
Browser Version	All

Description

How can I configure the editing functionality of the Grid by using a custom UI form?

Solution

The following example demonstrates how to achieve this behavior, create editors for the string, number, and boolean fields, and add validation.

<div id="grid"></div>
<div id="editForm">
    <h2>Edit Form</h2>
    <ul>
        <li>
            <label for="ProductName">ProductName</label>
            <input type="text" class="k-textbox" name="ProductName" data-bind="value: selected.ProductName" required />
        </li>
        <li>
            <label for="UnitPrice">UnitPrice</label>
            <input data-role="numerictextbox" name="UnitPrice" data-bind="value: selected.UnitPrice" required min="1" />
            <span class="k-invalid-msg" data-for="UnitPrice"></span>
        </li>
        <li>
            <label for="UnitsInStock">UnitsInStock</label>
            <input data-role="numerictextbox" name="UnitsInStock" data-bind="value: selected.UnitsInStock" required min="0" />
            <span class="k-invalid-msg" data-for="UnitsInStock"></span>
        </li>
        <li>
            <label for="Discontinued"></label>
            <input type="checkbox" name="Discontinued" data-bind="checked: selected.Discontinued" />
            <span>Items is discontinued</span>
        </li>
        <li class="buttons">
            <button class="k-button btnSave" data-bind="events: { click: sync }">Save</button>
            <button class="k-button btnCancel" data-bind="events: { click: cancel }">Cancel</button>
        </li>
    </ul>
</div>
<script>
    var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service";
    var validator;
    var viewModel = kendo.observable({
        dataSource: new kendo.data.DataSource({
            transport: {
                read:  {
                    url: crudServiceBaseUrl + "/Products",
                    dataType: "jsonp"
                },
                update: {
                    url: crudServiceBaseUrl + "/Products/Update",
                    dataType: "jsonp"
                },
                destroy: {
                    url: crudServiceBaseUrl + "/Products/Destroy",
                    dataType: "jsonp"
                },
                create: {
                    url: crudServiceBaseUrl + "/Products/Create",
                    dataType: "jsonp"
                },
                parameterMap: function(options, operation) {
                    if (operation !== "read" && options.models) {
                        return {models: kendo.stringify(options.models)};
                    }
                }
            },
            batch: true,
            pageSize: 20,
            schema: {
                model: {
                    id: "ProductID",
                    fields: {
                        ProductID: { editable: false, nullable: true },
                        ProductName: { validation: { required: true } },
                        UnitPrice: { type: "number", validation: { required: true, min: 1} },
                        Discontinued: { type: "boolean" },
                        UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                    }
                }
            },
            change: function () {
                viewModel.set("hasChanges", this.hasChanges());
            }
        }),
        selected: {},
        hasChanges: false,
        sync: function () {
            if(validator.validate()) {
                this.dataSource.sync();
            }
        },
        cancel: function () {
            this.dataSource.cancelChanges();
            validator.hideMessages();
        }
    });

    kendo.bind($("#editForm"), viewModel);
    validator = $("#editForm").kendoValidator().data("kendoValidator");

    var grid = $("#grid").kendoGrid({
        dataSource: viewModel.dataSource,
        pageable: true,
        height: 430,
        columns: [
            "ProductName",
            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 110 },
            { field: "UnitsInStock", title: "Units In Stock", width: 110 },
            { field: "Discontinued", width: 110 }
        ],
        selectable: true,
        dataBound: function(e) {
            var row = this.tbody.find(">tr[data-uid=" + viewModel.selected.uid + "]");
            if(row) {
                this.select(row);
            }
        },
        change: function (e) {
            var model = this.dataItem(this.select());
            validator.hideMessages();
            viewModel.set("selected", model);
        }
    }).data("kendoGrid");

    $("#grid").data("kendoGrid").one("dataBound", function (e) {
        this.select(this.tbody.find(">tr:first"));
    });

</script>

<style scoped>
    #grid {
        width: 700px;
        float: left;
    }
    #editForm {
        width: 600px;
        margin: 20px;
        padding: 20px;
        float: left;
        border: 1px solid #c5c5c5;
        border-radius: 10px;
        font-size: 80%;
    }
    #editForm h2 {
        border-bottom: 1px solid #ccc;
        font-size: 1.4em;
        font-weight: normal;
        padding: 0;
        margin: 0;
    }
    #editForm ul {
        list-style-type: none;
    }
    #editForm ul li {
        margin: 10px;
    }
    #editForm ul label {
        font-weight: bold;
        display: inline-block;
        width: 90px;
        text-align: right;
    }
    #editForm label {
        display: block;
        margin-bottom: 10px;
    }
    #editForm .buttons {
        margin-top: 25px;
    }
    #editForm .k-button {
        width: 100px;
    }
</style>