This is a migrated thread and some comments may be shown as answers.

Kendo ui grid combox displays undefined when adding custom value

2 Answers 311 Views
Grid
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 21 May 2017, 09:24 PM

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 Answers, 1 is accepted

Sort by
0
Accepted
Boyan Dimitrov
Telerik team
answered on 24 May 2017, 07:00 AM

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.
0
David
Top achievements
Rank 1
answered on 24 May 2017, 02:26 PM
Thanks for your help Boyan.  This works for me now.
Tags
Grid
Asked by
David
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
David
Top achievements
Rank 1
Share this question
or