Maintaining grid cell number value on .save()

2 posts, 0 answers
  1. Nse
    Nse avatar
    12 posts
    Member since:
    Feb 2016

    Posted 20 May 2016 Link to this post

    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.

     

     

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1292 posts

    Posted 24 May 2016 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top