Customise edit popup in editable GRID

[Isabelle]

Hello

I'm using an editable GRID with CREATE toolbar. I would like to customise my editable pop-up to add a kendoDropDownList for selecting a element in a list. 

In my exemple I have a grid with "accessoires"  I can ADD new one or DELETE existing ones

If I create I want to choose the new element in a kendoDropDownList  NOT in TYPE=INPUT 

 

 

 

How to do this ?

Here is the code of my GRID

  //Grille des accessoires
    $("#gvAccessoires").kendoGrid({
        columns: [
            {
            field: "LibelleObj",
            title: "Accessoire"
            },
            { command: [{ name: "destroy", text: "Supprimer", visible: function (dataItem) { return !dataItem.IsPublie } }], title: " ", width: "250px" },
        ],

        editable: {
            mode: "popup",
            window: {
                title: "Saisie des accessoires",
                width: 600
            }
        },

        toolbar: ["create"],
        edit: function (e) {

???? how to add here the kendoDropDownList

        },
        save: function (e) {

            Accessoires.add(new Accessoire(false, e.model));

        },
        remove: function (e) {     
            _.forEach(selectedOP.Accessoires, function (item) {
                if (item.idObj == e.model.idObj) Accessoires.remove(item);
            });
        }

    });

 

        var ds3 = new kendo.data.DataSource({
            data: Accessoires,
            schema: {
                model: {
                    id: "idObj",
                    fields: {
                        id: { editable: false, nullable: true },
                        LibelleObj: { validation: { required: true } },
                    }
                }
            }
        });
        $("#gvAccessoires").data("kendoGrid").setDataSource(ds3);

 

Thank you

 

 

 

 

[Georgi Denchev]

Hello, Isabelle,

Thank you for the provided details.

I noticed that my colleague has already provided you with a solution in the other support ticket. I'll repost his response here in case anyone else needs the solution.

Please follow the steps below which demonstrates one way you can provide a custom Kendo UI DropDownList Template when adding an entry based on this Kendo UI Knowledge Base article:

1. Similar to the following Kendo UI Grid live demo, create an object with id and text and a defined schema.model.field.defaultValue.
   
   DataSource
   
   

           //Local DataSource for demo
           var dataSource = new kendo.data.DataSource({
   
             schema: {
               model: {
                 id: "idObj",
                 fields: {
                   idObj: { 
                     editable: false,
                     nullable: true 
                   },
                   LibelleObj: { 
   
                     //defaultValue necessary for LibelleObj
                     //and for dropdownlist
                     defaultValue: { 
                       LibelleID: 1, 
                       LibelleText: "100 Euros"
                     }  
                   }
                 }
               }
              //...
           });

2. Within the Kendo UI Grid column, configure the columns.template to show the text of the object:
   
   Grid
   

           $("#grid").kendoGrid({
             dataSource: dataSource,
             pageable: true,
             columns: [
               {
                 field: "LibelleObj",
                 title: "Accessoire",
                 template: "#=LibelleObj.LibelleText#", //displays the text
                 width: "120px",
               },
               { command: [
                 { 
                   name: "destroy",
                   text: "Supprimer" 
                 }
               ],
                title: " ",
                width: "200px" 
               }
             ],
             //...
           });

3. Set the editable.template to append the custom template:
   
   Grid
   

           $("#grid").kendoGrid({
             editable: {
               mode: "popup",
               window: {
                 title: "Saisie des accessoires",
                 width: 600
               },
               template: $("#template").html() //sets the custom template
             },
             //...
           });

4. Define the external Kendo UI Templates which will check if it's a new entry, and creates the element:
   
   Kendo UI Templates
   

       <!--If a new item is added, get the Create Template and execute it-->
       <script type="text/x-kendo-template" id="template">
           #if(data.isNew()) {#
               #var createTemp = kendo.template($("\#createTemplate").html());#
               #=createTemp(data)# 
           #}#
       </script>
   
       <!--Create Template-->
       <script type="text/x-kendo-template" id="createTemplate">
       	<input id="dropdownlist" style="margin-left:10px">
       </script>

5. Finally, initialize the Kendo UI DropDownList during the Edit event.  Ensure the DropDownList's change event sets the model of the Kendo UI Grid.
   
   Grid and DropDownList Editor
   

           $("#grid").kendoGrid({
             edit: function(e){
   
               //Initialize DropDownList on Edit event
               $("#dropdownlist").kendoDropDownList({
                 dataTextField: "LibelleText",
                 dataValueField: "LibelleID",
                 change: function(f){
   
                   //On change, set the model to the value and text
                   e.model.LibelleObj.LibelleID=this.value();
                   e.model.LibelleObj.LibelleText=this.text();
   
                 },
                 dataSource: [
                   { LibelleText: "100 Euros", LibelleID: 1 },
                   { LibelleText: "200 Euros", LibelleID: 2 },
                   { LibelleText: "300 Euros", LibelleID: 3 },
                   { LibelleText: "400 Euros", LibelleID: 4 },
                   { LibelleText: "500 Euros", LibelleID: 5 }
                 ]
               });
             },
            //...
           });

Best Regards,
Georgi Denchev
Progress Telerik