Edit this page

Make DropDownList Column Always Visible

Environment

Product Progress Kendo UI Grid
Progress Kendo UI version Created with the 2017.3.1026 version

Description

How can I make the drop-down list editors always visible in the Grid?

Solution

Important

The implementation of this functionality might lead to slow Grid performance.

  1. Use the columns.template configuration to add inputs to the column cells.
  2. In the dataBound event handler, initialize a DropDownList for each input.
<div id="grid"></div>
<script>
    var ddlDataSource = [{
            value: 1,
            displayValue: "one"
        },
        {
            value: 2,
            displayValue: "two"
        },
        {
            value: 3,
            displayValue: "three"
        }
    ];

    $("#grid").kendoGrid({
        columns: [{
            field: "value",
            template: columnTemplateFunction
        }],
        dataSource: [{
                value: 1
            },
            {
                value: 2
            },
            {
                value: 3
            }
        ],
        dataBound: function(e) {
            var grid = e.sender;
            var items = e.sender.items();

            items.each(function(e) {
                var dataItem = grid.dataItem(this);
                var ddt = $(this).find('.dropDownTemplate');

                $(ddt).kendoDropDownList({
                    value: dataItem.value,
                    dataSource: ddlDataSource,
                    dataTextField: "displayValue",
                    dataValueField: "value",
                    change: onDDLChange
                });
            });
        }
    });

    function columnTemplateFunction(dataItem) {
        var input = '<input class="dropDownTemplate"/>'

        return input
    };

    function onDDLChange(e) {
        var element = e.sender.element;
        var row = element.closest("tr");
        var grid = $("#grid").data("kendoGrid");
        var dataItem = grid.dataItem(row);

        dataItem.set("value", e.sender.value());
    };
</script>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy