Send AutoComplete text along with Kendo UI Grid information

[Nse]

I have a Kendo UI Grid that sends data to my server through ASP.NET Web API. I have data in an AutoComplete control and a DatePicker control that I want to send as well to the API through the Kendo UI Grid. In the example below I want tot send the ClientID from the AutoComplete as well as the date from the DatePicker to the server. How do I do this?

<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 # <span style='visibility: hidden'>^#=ClientID#</span>",
            dataTextField: "Name",
            height: 520,
            dataSource: {
                transport: {
                    read: "http://localhost:53786/api/client",
                    type: "json"
                },
                schema: {
                    model: {
                        fields: {
                            ClientID: { type: "number" },
                            AccountNumber: { type: "number" },
                            Branch: { type: "string" },
                            Department: { type: "string" },
                            Name: { type: "string" }
                        }
                    }
                },
                pageSize: 80,
                serverPaging: true,
                serverFiltering: false
            },
            select: function(e) {
                var item = e.item.text().split("^");
                var ClientID = item[1];
            }
        });

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

        $("#grid").kendoGrid({
            dataSource: {
                transport: {
                    create: {
                        url: "http://localhost:53786/api/workorder/0/workorderdetails",
                        contentType: "application/json",
                        type: "POST"
                    },
                    read: {
                        url: "http://localhost:53786/api/workorder/0/workorderdetails",
                        dataType: "json"
                    },
                    update: {
                        url: "http://localhost:53786/api/workorder/0/workorderdetails",
                        dataType: "json",
                        type: "PUT"
                    },
                    destroy: {
                        url: function (workorderdetail) {
                            return "http://localhost:53786/api/workorder/1/workorderdetails" + workorderdetail.WorkOrderDetailID;
                        },
                        contentType: "application/json",
                        type: "DELETE"
                    },
                    parameterMap: function (data, operation) {
                        return JSON.stringify(data);
                    }
                },
                schema: {
                    data: "Data",
                    total: "Total",
                    model: {
                        fields: {
                            WorkOrderID: { type: "number" },
                            PriceCodeID: { type: "number" },
                            WorkOrderDetailID: { type: "number" },
                            ShortCode: { defaultValue: { PriceCodeID: 1436, ShortCode: "REF3" } },
                            Description: { type: "string" },
                            Quantity: { type: "number" }
                        }
                    }
                }
            },
            pageable: true,
            height: 550,
            toolbar: ["create", "save", "cancel"],
            columns: [
                { field: "ShortCode", title: "Price Code", editor: shortcodeDropDownEditor, width: "150px", template: "#=ShortCode.ShortCode#" },
                { field: "Description", title: "Description", editable: "false" },
                { field: "Quantity", title: "Quantity", width: "100px" },
                { command: ["edit", "destroy"], width: "300px" }],
            editable: true,
            save: function(e) {
                if (e.values.hasOwnProperty('ShortCode')) {
                    var test = e.model.set("Description", e.values.ShortCode.Description);
                    var test = e.model.set("PriceCodeID", e.values.ShortCode.PriceCodeID);
                }
            },
            saveChanges: function (e) {
                var client = $("#client")
                if (client.text === "") {
                    e.preventDefault();
                    alert("Please select a Client before saving the Work Order.");
                }
            }
        });

        $("#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>

One idea that I had is to send the ClientID from the AutoComplete and the date to hidden DIVs but then how do I retrieve the data into the Grid and send it to the server?

 

 

[Stefan]

Hello Nse,

In order to take the ClientID, use the dataItem method of the Kendo UI AutoComplete, which will return the selected data item object (a Kendo UI Model instance), and then use the get method of the Kendo UI Model to get the desired value. 

http://docs.telerik.com/kendo-ui/api/javascript/ui/autocomplete#methods-dataItem

http://docs.telerik.com/kendo-ui/framework/mvvm/observableobject#field-values

autoComplete.dataItem().get("ClientID")

Also use the value method of the Kendo UI DatePicker to get its value:

http://docs.telerik.com/kendo-ui/api/javascript/ui/datepicker#methods-value

When you have all the needed information, check the transport.update.data configuration of the Kendo UI DataSource, and use it to send the additional parameters to the remote service.

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-transport.update.data

Let me know if you need additional assistance.

Regards,
Stefan
Telerik