Kendo ui grid combox displays undefined when adding custom value

3 posts, 1 answers
  1. David
    David avatar
    2 posts
    Member since:
    May 2015

    Posted 21 May 2017 Link to this post

    I have a kendo Grid with an editor column that uses a combobox whose datasource is set to an object array. Everything works fine except when a user sets enters a custom value into the combobox (for example:'abc') that doesn't match any of the datasource options. The combobox displays undefined when tabbing off of it or moving focus out of the combobox.  I have tried to handle this in the change event of the combox box by adding the custom value to the datasource (using the Telerik online example for adding custom values), but that doesn't appear to work.

    Below is my html file code:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    <meta charset="utf-8" />
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common-material.min.css" />
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.min.css" />
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.mobile.min.css" />

        <script src="https://kendo.cdn.telerik.com/2017.2.504/js/jquery.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script>

    </head>
    <body>
        <div id="mappingGrid"></div>
        <script>



        //$(document).ready(function () {

           //capture vars


            var mGrid = $("#mappingGrid").kendoGrid({

                    dataSource: {

                    schema: {
                            model: {
                               // id: "Id",
                            fields: {
                             //   Id: { editable: false, nullable: false },

                                CustomFunction: { defaultValue: { Value: "0", Name: "" } },



                            }
                            }
                        },

                },
                //   batch:true,

                pageSize: 10,
                autoBind: false,
                height: 300,
                  width: 300,
               
                scrollable: true,
                sortable: true,
                filterable: true,
                editable: true,
            //     serverFiltering: true,
                toolbar: ["create"],
                columns: [
                            { field: "CustomFunction", title: "Custom Function", editor: customFunctionEditor, template: "#=CustomFunction.Name#" },

                          { command: [{ name: "destroy", text: "" }], title: "&nbsp;", width: "100px" }],



            });
       


                function customFunctionEditor(container, options) {
                    $('<input id="CustomFunction" name="CustomFunction">')
                        .appendTo(container)
                        .kendoComboBox({
                            dataTextField: "Name",
                            dataValueField: "Value",
                            change: onComboBoxChange,
                            //       autoBind: abind,
                            dataSource: [
                                        { Name: "Add", Value: "1" },
                                        { Name: "Subtract", Value: "2" },
                                        { Name: "Multiply", Value: "3" },
                                        { Name: "Divide", Value: "4" }
                            ],

                        }).appendTo(container);

                }


                function DisplayError(xhr) {
                    var msg = JSON.parse(xhr.responseText);
                    errornotification("Error", msg.Message);
                    // alert(msg.Message);
                }



                function onComboBoxChange(e) {
                    var combo = e.sender;

                    var comboText = combo.text();
                    // check if new value is a custom one
                    if (!combo.dataItem()) {


                        var dataSource = combo.dataSource;
                        dataSource.add({
                            Value: combo.text(),
                            Name: combo.text()
                        });

                        dataSource.one("sync", function () {
                            combo.select(dataSource.view().length - 1);
                        });

                        dataSource.sync();


                    }

                }
            });

        </script>
    </body>
    </html>

     

     

  2. Answer
    Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 24 May 2017 Link to this post

    Hello David,

    As mentioned in the select article this method does not trigger change event. This could affect MVVM value binding. The model bound to the widget will not be updated. You can overcome this behavior trigerring the change event manually using trigger("change") method. 

    Also the sync method will not be triggered in this case because the DataSource is not configured to support CRUD operations. Please refer to the ComboBox / Add new item demo to check the ComboBox DataSource configuration in order to support Create and Read operations. 

    I modified your example to implement the desired functionality - check the http://dojo.telerik.com/InIyo

    Regards,
    Boyan Dimitrov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. David
    David avatar
    2 posts
    Member since:
    May 2015

    Posted 24 May 2017 in reply to Boyan Dimitrov Link to this post

    Thanks for your help Boyan.  This works for me now.
Back to Top