Grid with DropDownList

[Gerry]

Hi,

I'm having a hard time making the DropDownListEditor work in a grid. I have seen other posts, but they don't seem to help. What am I missing?

   [{"name":"eth0"},
    {"name":"eth1"},
    {"name":"eth2"},
    {"name":"eth3"},
    {"name":"eth4"}]


      $(document).ready(function () {
                var crudServiceBaseUrl = "http://127.0.0.1:8000/dhcp_client",
                    dataSource = new kendo.data.DataSource({
                        transport: {
                            read:  {
                                url: crudServiceBaseUrl + "/server_load",
                                dataType: "json"
                            },
                            update: {
                                url: crudServiceBaseUrl + "/server_update",
                                dataType: "json",
                                type: "POST"
                            },
                            destroy: {
                                url: crudServiceBaseUrl + "/server_delete",
                                dataType: "json",
                                type: "POST"
                            },
                            create: {
                                url: crudServiceBaseUrl + "/server_add",
                                dataType: "json",
                                type: "POST"
                            },
                            parameterMap: function(options, operation) {
                                if (operation !== "read" && options.models) {
                                    return {models: kendo.stringify(options.models)};
                                }
                                return true;
                            }
                        },
                        batch: true,
                        pageSize: 20,
                        schema: {
                            model: {
                                id: "id",
                                fields: {
                                    nic: { field: "name", defaultValue: "eth0" },
                                    rangestart: { validation: { required: true } },
                                    rangeend: { validation: { required: true } },
                                    gateway: { validation: { required: true } },
                                    dns1: { validation: { required: true } },
                                    dns2: { validation: { required: true } },
                                    domain: { validation: { required: true } },
                                    leasetime: { validation: { required: true } }
                                }
                            }
                        }
                    });
               

                $("#tabstrip").kendoTabStrip({
                    animation: false // {
                   //     open: {
                   //         effects: "fadeIn"
                   //     }
                   // }
                });
               
                $("#grid").kendoGrid({
                    dataSource: dataSource,
                    columnMenu: true,
                    sortable: true,
                    height: 200,
                    width: 500,
                    toolbar: ["create"],
                    columns: [
                        { field: "nic", title: "Interface", width: "80px", editor: nicDropDownEditor},
                        { field: "rangestart", title: "Range Start", width: 105 },
                        { field: "rangeend", title: "Range End", width: 105 },
                        { field: "gateway", title: "Gateway", width: 105 },
                        { field: "dns1", title: "DNS1", width: 105 },
                        { field: "dns2", title: "DNS2", width: 105 },
                        { field: "domain", title: "Domain", width: 105 },
                        { field: "leasetime", title: "Lease Time", width: 105 },
                        { command: ["edit", "destroy"], title: " ", width: 160 }],
                    editable: "inline",
                    scrollable: "true"
                });
                   
            });
            function nicDropDownEditor(container, options) {
                    var input = $("<input/>");
                    input.attr("nic", options.field);
                    input.appendTo(container);
                    input.kendoDropDownList ({
                            autoBind: false,
                            dataTextField: "name",
                            dataSource: {
                                transport: {
                                    read: "http://127.0.0.1/dhcp_client/interfaces_load",
                                    type: "GET",
                                    dataType: "json"
                                }
                            }
                        });
                }
  Thanks,
-G

[Alexander Valchev]

Hello Gerry,

I believe that the problem occurs because the editor input is not bound via MVVM to the edited field. You should add data-bind="value:' + options.field + '"  to the input. For more information please check the corresponding demo and pay attention to the editor function.

• http://demos.kendoui.com/web/grid/editing-custom.html
  
  

function categoryDropDownEditor(container, options) {
    $('<input data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            //...
        });
}

I hope this will help.

Regards,
Alexander Valchev
Telerik

[Gerry]

Hi,

My code was originally based on the example you pointed to. I had tried various things from other posts. What I don't understand is... that I provided the data and the code hoping y'all would be able to tell me how to make it work. Instead, I get a link to the same example that has helped no one else. I have already wasted more time than the cost of the product. I originally bought the DevCraft product to use with .NET, but the product turned out to be so terribly slow that I had to rewrite the GUI with another toolkit. I was hoping that I would be able to at least get some value out of the Javascript toolkit, but alas it appears that I have hit a wall once again. Why isn't there a working example for this?

-G 

[Gerry]

Hi,

My code was originally based on the example you pointed to. I had tried various things from other posts. What I don't understand is... that I provided the data and the code hoping y'all would be able to tell me how to make it work. Instead, I get a link to the same example that has helped no one else. I have already wasted more time than the cost of the product.  Why isn't there a working example for this?

-G 

[Alexander Valchev]

Hello Gerry,

What I don't understand is... that I provided the data and the code hoping y'all would be able to tell me how to make it work.

As I tried to explain you should bind the editor, e.g. you should add data-bind="value:' + options.field + '"  to the input. For example:

function nicDropDownEditor(container, options) {
    var input = $('<input data-bind="value:' + options.field + '"/>');
    input.attr("nic", options.field);
    input.appendTo(container);
    input.kendoDropDownList ({
            autoBind: false,
            dataTextField: "name",
            dataSource: {
                transport: {
                    read: "http://127.0.0.1/dhcp_client/interfaces_load",
                    type: "GET",
                    dataType: "json"
                }
            }
        });
}

The DropDownList should also have a dataValueField specified.

Why isn't there a working example for this?

If I understood correctly you are using a Grid with custom editor - a DropDownList. I believe that the aforementioned demo demonstrates such scenario. What kind of example you would like to see?

Regards,
Alexander Valchev
Telerik

[Gerry]

Hi,

I have tried what you suggested, but it still does not work. The example you referenced earlier does not work either. The function below never gets called. Do you see any other problems in the code I posted previously?

function nicDropDownEditor(container, options) {
                    var input = $('<input data-bind="value:' + options.field + '"/>');
                    input.attr("nic", options.field);
                    input.appendTo(container);
                    input.kendoDropDownList ({
                            autoBind: false,
                            dataTextField: "name",
                            dataValueField: "name",
                            dataSource: {
                                transport: {
                                    read: "http://127.0.0.1/dhcp_client/interfaces_load",
                                    type: "GET",
                                    dataType: "json"
                                }
                            }
                        });
                }

Thanks,
-G

[Alexander Valchev]

Hello Gerry,

I am not sure where exactly the problem comes from. Your code looks OK now.
In order to help you I will need more information - could you please specify what exactly is not working?

• Do you see any JavaScript errors?
• Is the nicDropDownEditor function executed?
• Is the DropDownList initialized?
• Is it bound correctly to the field?
• Is it loaded with data?
• Does the Grid value change when the user selects item from the DropDownList?
• Something else?

What problem you observed with the demo page that I pointed?
Looking forward to your reply.

Regards,
Alexander Valchev
Telerik

[Gal]

10X