Show dropdown in cell of kendo grid in template

Question

I have a kendo grid working fine but i want to display the drop down in all cell of a column ie "Security Action" column cell. whether u r editing or not editing so the user know that this is dropdown in that cell.I dont want like that when click in cell a drop down appear like mention in this demo site of kendo.

My code is given below

HTML:

<div id="example" class="k-content">
    <div id="clientsDb">
    <div id="grid" style="top:0px;width:100%;height: 380px">
    </div>              
    </div>

CSS:

<style scoped>
#clientsDb {
     width: 1400px;
         height: 310px;
     margin: 0 auto;
     padding: 0 4px 0 4px;
     background: url('../kendo/content/web/grid/clientsDb.png') no-repeat 0 0;
      }
</style>

JS:

 <script>
        function kendoGridExecute(data){
        $(document).ready(function() {

                                    $("#grid").kendoGrid({
                                        dataSource: {
                                            data: data.items,
                                            autoSync: true,
                                            schema: {
                                                model: {
                                                  fields: {
                                                        Type: { editable: false, nullable: true },
                                                        Penalty:{ editable: false, nullable: true },
                                                        Init_r:{ editable: false, nullable: true },
                                                        Opt_r:{ editable: false, nullable: true },
                                                        Change_r:{editable: false, nullable: true},     
                                                        Action:{defaultValue : {text: "No Action", value: "No Action" } }                               
                                                        }
                                                }
                                            }

                                        },
                                        groupable: true,
                                        sortable: true,
                                        scrollable: true,
                                        filterable: true,
                                        editable : true,

                                        columns: [ {
                                                field : "Type",
                                                width : 90,
                                                title : "Type"                                      
                                            } , {
                                                field : "Penalty",
                                                width : 120,
                                                title : "Penalty"

                                            } , {
                                                width : 50,
                                                field : "Bmk",
                                                title : "Abs. Bmk",
                                                template:"<input class='k-textbox' data-bind='value: Bmk' style='width:50px'>"     
                                            } , {
                                                width : 50,
                                                field : "Init_r",
                                                title : "Rel. Init"
                                            } , {
                                                width : 50,
                                                field : "Opt_r",
                                                title : "Rel. Opt"
                                            } , {
                                                title : "Rel. Chg",
                                                field : "Change_r",
                                                width : 50
                                            },{
                                                title : "Min",
                                                field : "Min",
                                                width: 50,
                                                template:"<input class='k-textbox' data-bind='value: Min' style='width:50px'>" 
                                            },{
                                                title : "Max",
                                                field : "Max",
                                                width : 50,
                                                template:"<input class='k-textbox' data-bind='value: Max' style='width:50px'>" 
                                            },{
                                                field : "Scale",
                                                title : "Scale",
                                                width : 50,
                                                template:"<input class='k-textbox' data-bind='value: Scale' style='width:50px'>" 
                                            },
                                            {
                                                field : "Init",
                                                title : "Abs. Init",
                                                width : 50
                                            },
                                            {
                                                field : "Opt",
                                                title : "Abs. Opt",
                                                width : 50
                                            },
                                            {
                                                field : "Action",
                                                title : "Security Action",
                                                width : 100,
                                                editor: securityActionDropDownEditor,
                                                template: "#=Action#" 
                                            }
                                        ],
                                        batch: true,
                                        dataBound: function() {
                                            var rows = this.tbody.children();
                                            var dataItems = this.dataSource.view();
                                                for (var i = 0; i < dataItems.length; i++)  {
                                                  kendo.bind(rows[i], dataItems[i]);
                                                }
                                            }


                                    });
                                });


                            }
                            function securityActionDropDownEditor(container, options) {

                                $('<input required data-text-field="text" data-value-field="value" data-bind="value:' + options.field + '"/>')
                                    .appendTo(container)
                                    .kendoDropDownList({
                                                dataSource: [ 
                                                              { text: "No Action", value: "No Action" },
                                                              { text: "DNS", value: "DNS" },
                                                              { text: "DNB", value: "DNB" },
                                                              { text: "DNT", value: "DNT" }
                                                 ],
                                                 autoBind: false,
                                                 index:0
                                    });
                                console.log(options);
                                console.log(options.field);
                            }
                            </script>

Answer 1

You can achieve it with client template and some custom logic to initialize the DropDownLists when the dataBound event of the Grid occurs.

Let's say you have the following tempalte for the column:

template: "<input value='#= PositionID #' data-bind='value:PositionID' data-role='dropdownlist' data-source='options' data-text-field='Text' data-value-field='Value' />"

where options is a global variable that contains the collection that you want to use as dataSource

 var options = [{Text:"T1",Value:"V1"}...]

Then on the dataBound event of the Grid you can bind that DropDownList to the underling model for that row like this:

function onGridDataBound() {
    var grid = this;
    this.tbody.find('tr').each(function () {
        var item = grid.dataItem(this);
        kendo.bind(this, item);
    })
}