How can we configure Kendo-UI ComboBox with Grid.

StackOverflow https://stackoverflow.com//questions/9699220

  •  13-12-2019
  •  | 
  •  

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

Was it helpful?

Solution

You can refer to this official example off the KendoUI demos to set the custom editor up correctly.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top