Customise edit popup in editable GRID

1 Answer 27 Views
DropDownList Grid Toolbar
Isabelle
Top achievements
Rank 1
Isabelle asked on 15 Dec 2021, 03:54 PM

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

 

 

 

 

1 Answer, 1 is accepted

Sort by
0
Georgi Denchev
Telerik team
answered on 20 Dec 2021, 09:12 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
DropDownList Grid Toolbar
Asked by
Isabelle
Top achievements
Rank 1
Answers by
Georgi Denchev
Telerik team
Share this question
or