Problème with editor in grid

4 posts, 0 answers
  1. Dany
    Dany avatar
    3 posts
    Member since:
    Oct 2015

    Posted 07 Feb Link to this post

    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)))
            });

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1826 posts

    Posted 09 Feb Link to this post

    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.
  3. Dany
    Dany avatar
    3 posts
    Member since:
    Oct 2015

    Posted 09 Feb in reply to Boyan Dimitrov Link to this post

    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"}];

  4. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1826 posts

    Posted 13 Feb Link to this post

    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.
Back to Top