Come possiamo configurare Kendo-UI ComboBox con la griglia.

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

  •  13-12-2019
  •  | 
  •  

Domanda

Ho un problema per configurare il Kendo-UI con combo-box con valori personalizzati.Ho visto questa domanda Come utilizzare ComboBox come colonna Grid Kendo UI? ma non siamo in grado di configurare il tutto ...

Si prega di guardare i codici.

<!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>
.

Non abbiamo implementare in grado di configurare il ComboBox.Possiamo semplicemente costruire la casella Seleziona con le seguenti opzioni.Aggiorniamo lo stato da ComboBox.

Grazie

Alen

È stato utile?

Soluzione

Puoi fare riferimento a Questo esempio ufficiale off le demo di Kendoui aImpostare correttamente l'editor personalizzato.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top