Maintaining grid cell number value on .save()

[Nse]

I have a Kendo UI grid control that has three columns: Price Code, Description, and Quantity. The Price Code uses a DropDownList as a custom editor that changes the value of the Description field once selected. The problem that I'm having is that although the Description field changes when the DropDownList is changed, the Quantity field is reset to 0 when any of the fields in the row are changed. Here is my code:

<div id="workorderdetails" style="padding-top: 2em;">
    <div id="grid"></div>

    <script>
        $(document).ready(function () {
            $("#client").kendoAutoComplete({
                template: "<span class='client-id'>#= AccountNumber #</span> <span class='branch-id'>#= (Branch == null) ? ' ' : Branch #</span> <span class='department-id'>#= (Department == null) ? ' ' : Department #</span> #= Name #",
                dataTextField: "Name",
                height: 520,
                dataSource: {
                    type: "json",
                    transport: {
                        read: "http://localhost:53786/api/client"
                    },
                    schema: {
                        model: {
                            fields: {
                                AccountNumber: { type: "number" },
                                Branch: { type: "string" },
                                Department: { type: "string" },
                                Name: { type: "string" }
                            }
                        }
                    },
                    pageSize: 80,
                    serverPaging: true,
                    serverFiltering: false
                }
            });

            // create DatePicker from input HTML element
            $("#datepicker").kendoDatePicker({
                format: "dddd, MMMM d, yyyy"
            });

            $("#grid").kendoGrid({
                dataSource: {
                    transport: {
                        read: {
                            url: "http://localhost:53786/api/workorder/1/workorderdetails",
                            dataType: "json"
                        }
                    },
                    schema: {
                        model: {
                            fields: {
                                WorkOrderID: { type: "number" },
                                ShortCode: { defaultValue: { PriceCodeID: 1436, ShortCode: "REF3" } },
                                Description: { type: "string" },
                                Quantity: { type: "number" }
                            }
                        }
                    }
                },
                pageable: true,
                height: 550,
                toolbar: ["create"],
                columns: [
                    { field: "ShortCode", title: "Price Code", editor: shortcodeDropDownEditor, template: "#=ShortCode.ShortCode#" },
                    { field: "Description", title: "Description", editable: "false" },
                    { field: "Quantity", title: "Quantity" },
                    { command: ["edit", "destroy"], width: "150px" }],
                editable: true,
                save: function (e) {
                    if (e.values.ShortCode !== "") {
                        var test = e.model.set("Description", e.values.ShortCode.Description);
                    }
                }
            });

            $("#warehouse").kendoDropDownList({
                dataTextField: "Name",
                dataValueField: "WarehouseID",
                dataSource: {
                    valueTemplate: "#= Name#",
                    template: '#= Name# <h3>#= Address1#, #= City #, #= Province#, #= Country#</h3>',
                    transport: {
                        read: {
                            url: "http://localhost:53786/api/warehouse",
                            dataType: "json"
                        }
                    },
                    schema: {
                        model: {
                            fields: {
                                WarehouseID: { type: "number" },
                                Name: { type: "string" },
                                Address1: { type: "string" },
                                City: { type: "string" },
                                Province: { type: "string" },
                                Country: { type: "string" }
                            }
                        }
                    }
                }
            });
        });

        function shortcodeDropDownEditor(container, options) {
            $('<input required data-text-field="ShortCode" data-value-field="PriceCodeID" data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoDropDownList({
                    valuePrimitive: false,
                    dataTextField: "ShortCode",
                    dataSource: {
                        transport: {
                            read: {
                                url: "http://localhost:53786/api/pricecodes/unique",
                                dataType: "json"
                            }
                        }
                    }
                });
        }

    </script>

In addition, I'd like to make it such that the user cannot edit the Description field manually; it can only be altered by changing the Price Code.

 

 

[Dimiter Topalov]

Hi Nse,

You can achieve the desired functionality by handling the save event (like you have done), and attaching a handler for the click event to the Grid's tbody, in which you can apply some custom logic to prevent the user from editing a given column. Check out the following dojo for a sample implementation:

http://dojo.telerik.com/uKuvU

The provided code does not suggest why editing one of your columns resets the Quantity field value, but you can compare your implementation to the one above, and apply the necessary changes.

I hope this helps, but if the problem persists, we will need an isolated runnable project, similar to the mentioned dojo, so we can investigate what might be causing the issue.

Regards,
Dimiter Topalov
Telerik