How can we configure Kendo-UI ComboBox with Grid.

Question

I have a problem to configure the Kendo-Ui with Combo-box with custom values. I have seen this question How to use ComboBox as Kendo UI grid column? but we are unable to configure the whole ...

Please look at the codes.

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.js"></script>
<link href="css/kendo.common.css" rel="stylesheet" />
<link href="css/kendo.default.css" rel="stylesheet" />
</head>
<body>
        <div id="example" class="k-content">
        <div id="grid"></div>

        <script>
               $(document).ready(function (){



             //   var crudServiceBaseUrl = "http://localhost/kendo-prac/",
                    dataSource = new kendo.data.DataSource({
                        transport: {
                            read:{
                            url: "http://localhost/kendo-prac/data/employees.php",
                             dataType: "jsonp"
                            },
                            update: {
                              url: "http://localhost/kendo-prac/data/update.php",
                              dataType: "jsonp"
                            },
                            destroy: {
                                url:"http://localhost/kendo-prac/data/delete.php",
                                dataType: "jsonp"
                            },
                            parameterMap: function(options, operation) {
                                if (operation !== "read" && options.models) {
                                    return {models: kendo.stringify(options.models)};
                                }
                            }
                        },
                        batch: true,
                        pageSize: 10,
                        schema: {
                      model: {
                                id: "ID",
                                fields: {
                                    Name: { editable: false, nullable: false },
                                    Title: { editable: true, nullable: false },
                                    URL: { editable: true, nullable: false },
                                    FTP: { editable: true, nullable: false },
                                //  date: { editable: false, nullable: false },
                                    Status: { type: "string", editable:false},
                                    Remarks: { editable: false, nullable: false }
                                }
                    }
                        }
                    });
        //       template: ('<select id="combobox" name="Status"/><option value="#=Status#">#=Status#</option><option value="Added">Added</option><option value="Rejected">Rejected</option></select>') 

              $("#grid").kendoGrid({
                    dataSource: dataSource,
                    navigatable: true,
                    pageable: true,
                    height: 650,
                    scrollable: true,
                    sortable: true,
                    toolbar: ["save", "cancel"],
                    columns: [                   
                        { field: "Name", width: "60px" },
                        { field: "URL", width: "350px" },
                        { field: "Title", width: "150px" },
                        { field: "FTP", width: "150px" },
                    //  { field: "Date", width: "150px" },
                    //  { field: "Status", width: "100px" },
                        {field: "Status", width:"150px", template: ('<select id="combobox" name="Status"/><option value="#=Status#">#=Status#</option><option value="Added">Added</option><option value="Rejected">Rejected</option></select>')},
                    //  { field: "Action", width: "100px" },
                    //  { field: "Code", width: "100px" },
                        { field: "Remarks", width: "50px",template:('<a href="http://www.seoranksmart.com?eid=#=ID#" target="_blank">#=Remarks#</a>')},
                        { command: "destroy", title: "Delete", width: "100px" }],
                    editable: true
                });
                    $("#com").kendoComboBox({
                    dataTextField: "text",
                    dataValueField: "value",
                    dataSource: [
                        { text: "Cotton", value: "1" },
                        { text: "Polyester", value: "2" },
                        { text: "Cotton/Polyester", value: "3" },
                        { text: "Rib Knit", value: "4" }
                    ],
                    filter: "contains",
                    suggest: true,
                    index: 3
                });
            });
        </script>
    </div>


 </body>
 </html>

We have not implement able to configure the Combobox. we can simply built the select box with following options. We just update the Status from Combobox.

Thanks

Alen

Answer 1

您可以在KendoUI演示中参考此官方示例，以正确设置自定义编辑器。

How can we configure Kendo-UI ComboBox with Grid.

Question

1 answers

solution1
3 ACCPTED 2012-04-02 17:40:56

How can we configure Kendo-UI ComboBox with Grid.

Question

1 answers

solution1 3 ACCPTED 2012-04-02 17:40:56

solution1
3 ACCPTED 2012-04-02 17:40:56