Grid with DropDownList

8 posts, 0 answers
  1. Gerry
    Gerry avatar
    4 posts
    Member since:
    Jun 2012

    Posted 22 Jul 2013 Link to this post

    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
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 22 Jul 2013 Link to this post

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

    I hope this 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. Kendo UI is VS 2017 Ready
  4. Gerry
    Gerry avatar
    4 posts
    Member since:
    Jun 2012

    Posted 22 Jul 2013 Link to this post

    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 
  5. Gerry
    Gerry avatar
    4 posts
    Member since:
    Jun 2012

    Posted 22 Jul 2013 Link to this post

    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 

  6. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 22 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Gerry
    Gerry avatar
    4 posts
    Member since:
    Jun 2012

    Posted 22 Jul 2013 Link to this post

    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
  8. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 24 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Gal
    Gal avatar
    48 posts
    Member since:
    Apr 2009

    Posted 05 Nov 2014 in reply to Alexander Valchev Link to this post

    10X worked ! 
Back to Top
Kendo UI is VS 2017 Ready