Combobox and popup editor

[Guru]

I am testing out these new widgets and am attempting to use the popup edit mode with a grid and am not having any luck.
The grid is showing the value I need it to show the text.
The popup drop list is not selected when it pops up.
Once selected and click update it does not reflect the change in the grid.

Please let me know the way to do this I am using ASP.NET MVC 3, jquery 1.7.1 and KendoUI 2012 Q1.

var crudServiceBaseUrl = "/Admin/",

        dataSource = new kendo.data.DataSource({

            transport: {

                read: {

                    url: crudServiceBaseUrl + "UserEditorRead",

                    dataType: "json",

                    type: "POST"

                },

                update: {

                    url: crudServiceBaseUrl + "UserEditorUpdate",

                    dataType: "json",

                    type:"POST"

                },

                destroy: {

                    url: crudServiceBaseUrl + "UserEditorDestroy",

                    dataType: "json",

                    type: "POST"

                },

                create: {

                    url: crudServiceBaseUrl + "UserEditorCreate",

                    dataType: "json",

                    type: "POST"

                },

                parameterMap: function (options, operation) {

                    if (operation !== "read" && options.models) {

                        return { models: kendo.stringify(options.models) };

                    }

                }

            },

            batch: true,

            pageSize: 30,

            schema: {

                model: {

                    id: "UserID",

                    fields: {

                        UserID: { editable: false, nullable: true },

                        UserFirstName: { editable: true, validation: { required: true} },

                        UserLastName: { editable: true, validation: { required: true} },

                        UserGroupID: { editable: true, validation: { required: true} },

                        UserLastActivityDate: { editable: false, type: "date" },

                        UserCreateDate: { editable: false, type: "date" }

                    }

                }

            }

        });

 

        $("#gridUserManage").kendoGrid({

            dataSource: dataSource,

            pageable: true,

            height: 600,

            toolbar: ["create"],

            columns: [

            { title: "ID", field: "UserID", width: 40 },

            { title: "First", field: "UserFirstName", width: 100 },

            { title: "Last", field: "UserLastName", width: 100 },

            { title: "Group", field: "UserGroupID", width: 200,

                editor: function (container, options) {

                    $('<input name="' + options.field + '"/>').appendTo(container).kendoComboBox({

                        dataSource: new kendo.data.DataSource({

                            data: [

                                { Id: "1", title: "Guest" },

                                { Id: "2", title: "Employee" }

                            ]

                        }),

                        dataValueField: "Id",

                        dataTextField: "title",

                        autobind: false

                    });

                }

            },

            { command: ["edit", "destroy"], title: " ", width: "210px"}],

            editable: { mode: "popup", confirmation: false },

            remove: function (e) {

                // also can we e.cancel=true here?

            }

        });

[Alexander Valchev]

Hi Zack,

Straight to the problems that you are experiencing:

1.The grid is showing the value I need it to show the text. 
I am not sure if I understood you correctly. Are you referring to the value returned from the dropDownList editor? If that is the case, I am afraid that this is the default behaviour of the widget and it cannot be changed out of the box. As a workaround I can suggest to try the following approach:

• define the dataSource of the editor as a global variable
• set a template for the column and call a function that will match the values to their corresponding text
• implement the matching using the IDs from editor dataSource

For example:

{ title: "Group", field: "UserGroupID", width: 200,
                editor: function (container, options) {
                    $('<input name="' + options.field + '"/>').appendTo(container)
                    .kendoComboBox({
                        dataSource: editorDataSource,
                        dataValueField: "Id",
                        dataTextField: "title",
                        autobind: false
                    });
                },
template: "#= matchingFunction(UserGroupID) #"
}

2.The popup drop list is not selected when it pops up. Once selected and click update it does not reflect the change in the grid. 

The data attributes of the editor input are missing - most probably that is causing the problems. Please try to add the data-bind="value:' + options.field + ' to the input element and check if the problem still exists. For convenience you could check the the code of our custom editor example.


Regards,
Alexander Valchev
the Telerik team

[Juan]

Hi, I can use in a grid field an editor from a dropdownlist variable ?

Like this:

            var DDLReason0 = $("#DDLReason0").kendoDropDownList({
                optionLabel: "Select Reason ...",
                dataTextField: "Descr",
                dataValueField: "Id",
                dataSource: ReasonTreeSharedDataSource0,
                index: 1,
                autobind: true,
                close: function () {
                    Reas_Id0 = this.value();
                    var value = Reas_Id0.toString();
                    
                    if (value) {
                        ReasonTreeSharedDataSource1.read();
                        DDLReason1.enable();
                        DDLReason1.refresh();
                    } else {
                        DDLReason1.enable(false);
                    }
                    DDLReason1.select(0);
                    DDLReason2.select(0);
                    DDLReason2.enable(false);
                }
            });

And the grid wirth editor function:

            var grid = $("#grid").kendoGrid({
                dataSource: DowsSharedDataSource,
                height: 400,
                autoSync: true,
                pageable: false,
                scrollable: false,
                navigatable: false,
                selectable: "row",
                sortable: false,
                change: onChangeGrid,
                editable: "popup",
                edit: function(e) {
                    var model = e.model; //gets the model of the currently edited row
                    var RT_Id1 = model.RT_Id1; //gets the value of the field "country"
                    var CMFault_Desc = model.CMFault_Desc;
                },                
                columns: [
                    { field: "CMFault_Desc", title: "Fault Desc" },
                    { field: "RT_Id1", title: "Reason 1", editor: reasonComboEditor0 },
                    { command: ["edit"], title: " ", width: "190px" }
                ]
            });


            function reasonComboEditor0(container, options) {
                $('<input name="' + options.field + '"/>').appendTo(container).kendoDropDownList(DDLReason0);
            }

[Alexander Valchev]

Hi Juan,

I am afraid I cannot understand what you mean. Generally speaking it is possible to have a custom drop down list editor in the grid. I noticed that in your code you are trying to initialize the drop down twice, most likely that is causing the problems:

var DDLReason0 = $("#DDLReason0").kendoDropDownList({.....});

$('<input name="' + options.field + '"/>').appendTo(container).kendoDropDownList(DDLReason0);
//the DDLReason0 is already a drop down list

In the source code of this demo, you can see the right approach for creating a custom editor.
I hope this information help you to solve the problems.

Regards,
Alexander Valchev
the Telerik team

[Juan]

Thanks Alexander.
My DDL is working fine in a Grid using a DataSource:

            function reasonComboEditor2(container, options) {
                $('<input id="DDL2" name="' + options.field + '"/>').appendTo(container).kendoDropDownList({
                            autoBind: false,
                            dataSource: ReasonTreeSharedDataSource2,
                            optionLabel: "Select Reason",
                            dataTextField: "Descr",
                            dataValueField: "Id",
                            change: function() {
                                // Setting values
                                Reas_Id2 = this.value();
//                                alert("Change Reas_Id2 " + Reas_Id2);
                            }
                        });
            }

[Richard]

I new to KendoUI and have a question? I've tried to implement the editor example you provided but am unclear on the matching template function. Can you provide a quick example of how that works?

[Juan]

Hi, the grid for this editor:

            var grid = $("#grid").kendoGrid({
                dataSource: DowsSharedDataSource,
                autoBind: true,
                pageable: true,
                scrollable: true,
                navigatable: true,
                selectable: "row",
                change: onChangeGrid,
                editable: "inline",
                columns: [
                    {field: "CMFault_Desc", title: "Fault" },
                    { field: "DTStart_Time", title: "Start Time" },
                    {field: "Reason_Desc3", title: "Reason 3", editor: reasonComboEditor2 },
                    { command: ["edit"], title: " ", width: "100px" }
                ]
            });

I don't understand what you need.