Send AutoComplete text along with Kendo UI Grid information

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

    Posted 26 May 2016 Link to this post

    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?

     

     

  2. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 30 May 2016 Link to this post

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