Save shows dropdown value instead of text

8 posts, 0 answers
  1. Ben
    Ben avatar
    14 posts
    Member since:
    Jul 2015

    Posted 20 Aug 2015 Link to this post

    Hi,

    I have a grid that is bound to an external datasource. One of the colums on edit is a dropdown list with possible value. When I select a new value and save, the data-value field is shown instead of the data-text. How can I fix this? Please find my grid code below.

     

         var sizes = new kendo.data.DataSource({
            data: data.ProductSize,
            schema: {
                model: {
                    id:"Id",
                    fields: {
                        Name: { type: "string" }
                    }
                }
            }
        });
        $("#sizegrid").kendoGrid({
            dataSource: sizes,
            pageSize: 20,
            sortable: false,
            columns: [{
                field: "Name",
                title: "Size",
                editor: UnitSizeDropDownEditor
            },{
                field: "PriceExcVat",
                title: "Price Exc VAT"
            },{
                field: "PurchasePrice",
                title: "Purchase Price"
            },{
                command: ["edit", "destroy"], title: " "
            }],
            editable: "popup"
        });
        kendo.ui.progress($("#tabstrip"), false);
    })

    And the template for the dropdown

    function UnitSizeDropDownEditor(container, options) {
            $('<input required data-text-field="Name" data-value-field="Id" data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoDropDownList({
                    autoBind: false,
                    dataSource: {
                        transport: {
                            read: {
                                url: uri,
                                dataType: "json",
                                data: {"LanguageID": 1}
                            }
                        },
                        schema: {
                            model: {
                                id:"Id",
                                fields: {
                                    Name: { type: "string" }
                                }
                            }
                        }
                    }
                });
        }

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2894 posts

    Posted 24 Aug 2015 Link to this post

    Hello Ben,

    This behaviour is expected by design - by default Grid takes editor's value as a value of the updated cell.

    Please examine this demo page as it demonstrates how to configure the Grid to get the editor's dataItem as a value.

    Note the following part of the code:

    - "category" field contains an Object in the DataSource

    //schema
    Category: { defaultValue: { CategoryID: 1, CategoryName: "Beverages"} },


    - "categoryName" is displayed via template

    { field: "Category", title: "Category", width: "180px", editor: categoryDropDownEditor, template: "#=Category.CategoryName#" },


    I hope this information will help.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Ben
    Ben avatar
    14 posts
    Member since:
    Jul 2015

    Posted 24 Aug 2015 in reply to Alexander Valchev Link to this post

    Using the template for display did the trick. I must have looked over this when I first looked at the demo you posted.
    Thank you for your help.

  4. Ben
    Ben avatar
    14 posts
    Member since:
    Jul 2015

    Posted 25 Aug 2015 Link to this post

    I ran into another issue when I tried to add a "add new record button". When I click the button, I get an error saying ReferenceError: UnitSize is not defined

    UnitSize is the object that I use in the dropdownlist as you can see from the code I posted.

     

  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2894 posts

    Posted 26 Aug 2015 Link to this post

    Hello Ben,

    It should have a defaultValue for the object field.

    For a reference please look at the following part of the previous mentioned example:

    schema: {
        model: {
          id: "ProductID",
          fields: {
             ProductID: { editable: false, nullable: true },
             ProductName: { validation: { required: true } },
             Category: { defaultValue: { CategoryID: 1, CategoryName: "Beverages"} },
             UnitPrice: { type: "number", validation: { required: true, min: 1} }
          }
        }
    }


    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Ben
    Ben avatar
    14 posts
    Member since:
    Jul 2015

    Posted 26 Aug 2015 in reply to Alexander Valchev Link to this post

    That worked perfectly. Looking at it now, it seems so obvious. I'm just getting started with Kendo, so everything that looks obvious is retrospect isn't always clear from the start.

     Thank you for your help!! Much appreciated.

  7. Tom
    Tom avatar
    10 posts
    Member since:
    Sep 2017

    Posted 21 Nov 2017 Link to this post

    Why is this by design? What is the point in DataTextField?
  8. Stefan
    Admin
    Stefan avatar
    2473 posts

    Posted 23 Nov 2017 Link to this post

    Hello, Tom,

    The DataTextField is a property of the DropDown and it is used to determine which of the DropDown values should be shown. This property is not directly related to the Grid. The Grid will show the Category value, and by value, I meen the object value [object Object]. As when the Grid is in read mode, the DropDown is not actually visible, the column.template has to be used in order to display the desired value from the object.

    The need to set the text in two places is because one of them is for the DropDown editor and the second one is for the Grid itself.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top