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

Problème with editor in grid

3 Answers 41 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Dany
Top achievements
Rank 1
Dany asked on 08 Feb 2017, 01:59 AM

In one grid i have a dropdownlist editor in one column. When grid load, i see the value but when i edit my row (inline), the value is not selected in dropdownlist. When i click on the arrow dropdownlist expand and close immediatly. What is my problem ?

@* Liste des téléphones *@
        var phoneDs = new kendo.data.DataSource({
            transport: {
                read:  {
                    url: "@Url.Action("ShowPhones", "SupplierInformations")",
                    method: "post",
                    dataType: "json"
                },
                update: {
                    url: "@Url.Action("UpdatePhone", "SupplierInformations")",
                    method: "post",
                    dataType: "json"
                },
                destroy: {
                    url: "@Url.Action("DeletePhone", "SupplierInformations")",
                    method: "post",
                    dataType: "json"
                },
                create: {
                    url: "@Url.Action("AddPhone", "SupplierInformations")",
                    method: "post",
                    dataType: "json"
                },
                parameterMap: function(options, operation) {
                    if (operation !== "read" && options.models) {
                        return {models: kendo.stringify(options.models)};
                    }
                    else
                    {
                        //return options;   
                    }
                }
            },
            batch: true,
            autoSync: true,
            schema: {
                model: {
                    id: "PhoneId",
                    fields: {
                        PhoneId: { editable: false, nullable: true },
                        PhoneNumber: { validation: { required: true,
                            phonevalidation: function (input) 
            {
                                if (input.is("[name='PhoneNumber']")) {
                                    input.attr("data-phonevalidation-msg", "@LocalizationValues.The_Phone_Number_Format_Is_Invalid");
                                                    return /^@RegexHelper.PhoneRegex^/.test(input.val());
                }

                                                return true;
        }
                        } },
                        PhoneExtension: { validation: { required: false,
                            extensionvalidation: function (input) 
                            {
                                if (input.is("[name='PhoneExtension']") && input.val() != "") {
                                    input.attr("data-extensionvalidation-msg", "@LocalizationValues.The_Phone_extension_Is_Invalid");
                                    return /^\d+$/.test(input.val());
                                }

                                return true;
                            }}},
                        PhoneTypes:  { validation: { required: true} },
                        IsEmergency: { type: "boolean" },
                        Type: { validation: { required: true,
                    typevalidation: function (input) 
                    {
                        if (input.is("[name='Type']")) {
                            input.attr("data-typevalidation-msg", "@LocalizationValues.The_Phone_Type_Is_Mandatory");
                                    return (input.val() != "");
                                }

                                return true;
                            }
                } }
    }
                }
            }
        });

        $("#phoneGrid").kendoGrid({
            dataSource: phoneDs,
            pageable: false,
            dataBound: function(e){ },
            pageSize: 99999,
            toolbar: [ {name: "create", text : "@LocalizationValues.Add"}],
            columns: [
                { field: "Type", width: "130px", editor: typeDropDownEditor, title: "Type"},
        {
                field: "PhoneNumber", editor: phoneEditor, title: "PhoneNumber", format: "{0:n}", width: "250px" },
                { field: "PhoneExtension", title:"PhoneExtension", width: "150px", template: '@LocalizationValues.Ext: #: (PhoneExtension == null) ? "" : PhoneExtension#' },
                { command: [{ name : "edit", text: {
                    edit: "@LocalizationValues.Update",
                    update: "@LocalizationValues.Confirm",
                    cancel: "@LocalizationValues.Cancel"
                }},
                { name : "destroy", text: "@LocalizationValues.Remove"}], title: " ", width: "250px"}],
            editable: {mode : "inline", confirmation: false},
        });

 

   function typeDropDownEditor(container, options) {
        $('<input name="' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                autoBind: false,
                dataTextField: "Text",
                dataValueField: "Value",
                dataSource: @(New HtmlString(Json.Encode(Model.PhoneTypes)))
        });

3 Answers, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 09 Feb 2017, 12:47 PM

Hello Dany,

Could you please check for any errors in the developer console of your browser? Also could you please clarify what is the output of the  @(New HtmlString(Json.Encode(Model.PhoneTypes))) method in order to perform some tests? 

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
Dany
Top achievements
Rank 1
answered on 09 Feb 2017, 01:39 PM

Hi Boyan

I don't see errors in developper console. Here's the output for @(New HtmlString(Json.Encode(Model.PhoneTypes)))

[{"Selected":false,"Text":"","Value":null},{"Selected":false,"Text":"Mobile","Value":"mobile"},{"Selected":false,"Text":"Personnel","Value":"personal"},{"Selected":false,"Text":"Principal","Value":"principal"},{"Selected":false,"Text":"Professionel","Value":"professional"},{"Selected":false,"Text":"Téléavertisseur","Value":"paget"},{"Selected":false,"Text":"Télécopieur","Value":"fax"}];

0
Boyan Dimitrov
Telerik team
answered on 13 Feb 2017, 09:54 AM

Hello,

In order the Kendo UI DropDownList to select a specific item when the row is switched to edit mode the of the bound property should match an item with such value. For example please refer to the http://dojo.telerik.com/EBAya/2 example. The value of Type object (data item of the grid) matches the second item in the DropDownList. 

 

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.
Tags
Grid
Asked by
Dany
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Dany
Top achievements
Rank 1
Share this question
or