Comment pouvons-nous configurer Kendo-UI Combobox avec la grille.

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

  •  13-12-2019
  •  | 
  •  

Question

J'ai un problème pour configurer le kendo-ui avec la liste déroulante avec des valeurs personnalisées.J'ai vu cette question Comment utiliser ComboBox comme colonne de grille Kendo UI? Mais nous sommes incapables de configurer l'ensemble ...

S'il vous plaît regarder les 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>

Nous n'avons pas implémenter capable de configurer le ComboBox.Nous pouvons simplement construire la boîte de sélection avec les options suivantes.Nous venons de mettre à jour le statut de Combobox.

merci

alen

Était-ce utile?

La solution

Vous pouvez vous référer à cet exemple officiel sur les démos de Kendoui àDéfinissez l'éditeur personnalisé correctement.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top