Kendo for jQuery: show one of two different controls in each cell of a grid column

Question

I'm using Kendo for jQuery. I have a grid where each cell of a column needs to display either a dropdown control or a text input control. I have found a method here on SO for displaying one or the other in all cells of a given column but not for doing this on a row by row, cell by cell basis.

let searchValue = ''; let selectedTab = 0;

$(document).ready(function () {

// SET UP TAB

$("#tabstrip").kendoTabStrip({
    animation: {
        open: {
            effects: "fadeIn"
        }
    }
});

// RETRIEVE GRID DATA

const pendingGridDataSource = new kendo.data.DataSource({
    transport: {
        read: function (options) {
            $.ajax({
                url: `/pending/Index?searchValue=${searchValue}`,
                contentType: "application/json",
                dataType: 'json',
                type: "POST",
                data: JSON.stringify(options.data),
                success: function (result) {
                    options.success(result);
                }
            })
        },
        create: function (options) {
            $.ajax({
                url: "/pending/Create",
                contentType: "application/json",
                dataType: 'json',
                type: "POST",
                data: JSON.stringify(options.data),
                success: function (result) {
                    options.success(result);
                }
            })
        },
        update: function (options) {
            $.ajax({
                url: "/pending/Update",
                contentType: "application/json",
                dataType: 'json',
                type: "POST",
                data: JSON.stringify(options.data),
                success: function (result) {
                    options.success(result);
                }
            })
        },
        destroy: function (options) {
            $.ajax({
                url: "/pending/Delete",
                contentType: "application/json",
                dataType: 'json',
                type: "POST",
                data: JSON.stringify(options.data),
                success: function (result) {
                    options.success(result);
                }
            })
        },
        parameterMap: function (options, operation) {
            if (operation !== "read" && options.models) {
                return { models: kendo.stringify(options.models) };
            }
        }
    },
    sort: { field: "work_date", dir: "desc" },
    schema: {
        model: {
            id: "cost_index",
            fields: {
                client_name: { type: "string", editable: false },
                matter: { type: "string", editable: false },
                narrative: { type: "string", editable: false },
                cost_type_description: { type: "string" },
                business_purpose: { type: "string" },
                venue: { type: "string" },
                work_date: { type: "date" },
                post_date: { type: "date" },
                work_amt: { type: "number" },
                partner_work_amt: { type: "number", editable: false },
                timekeeper_name: { type: "string", editable: false }
            }
        }
    },
    sort: { field: "work_date", dir: "desc" }
});

// BUILD THE GRID

const pendingGrid = $("#pending").kendoGrid({
    dataSource: pendingGridDataSource,        
    editable: true, 
    filterable: true,
    sortable: true,
    detailInit: pendingSubGrid,
    schema: {
        model: {
            fields: {
                narrative: {},
                cost_type_description: {},
                client_name: {},
                matter: {},
                business_purpose: {},
                venue: {},
                work_date: {},
                post_date: {},
                work_amt: {},
                partner_work_amt: {},
                timekeeper_name: {},                    }
        }
    },
    columns: [
        {
            field: "narrative",
            title: "Narrative",
            width: "300px",
        },
        {
            //field: "cost_type_description",
            //title: "Cost Type Description1",
            field: "cost_type_description",
            title: "Expense Type",
            template: columnTemplateFunction,
            filterable: {
                operators: {
                    string: {
                        contains: "Contains",
                        eq: "Is equal to",
                        neq: "Is not equal to"
                    }
                }
            }
        },          
        {
            field: "client_name",
            title: "Client",
            width: "150px",
        },
        {
            field: "matter",
            title: "Matter Number",
            width: "155px",
        },
        {
            field: "business_purpose",
            title: "Purpose",
        },
        {
            field: "venue",
            title: "Venue",
        },
        {
            field: "work_date",
            title: "Expense Date",
            format: "{0:MM/dd/yyyy}",
            width: "140px"
        },
        {
            field: "post_date",
            title: "Post Date",
            format: "{0:MM/dd/yyyy}",
            width: "130px"
        },
        {
            field: "work_amt",
            title: "Amount",
            width: "120px",
            format: "{0:c}"
        },
        {
            field: "partner_work_amt",
            title: "Partner Share",
            width: "140px",
            format: "{0:c}"
        },            
        {
            field: "timekeeper_name",
            width: "140px",
            title: "Timekeeper",
        },
        { command: ["edit", "destroy", { text: "Approve", click: ApprovePending }, { text: "Reject", click: RejectPending }], width: "350px" }
    ],
    dataBound: function (e) {
        var grid = e.sender;
        var items = e.sender.items();

        items.each(function (e) {
            var i = 0;
            var dataItem = grid.dataItem(this);
            var ddt = $(this).find('.dropDownTemplate');
            //if (i == 0) {
            $(ddt).kendoDropDownList({
                enable: false,
                value: getET(), //dataItem.value,
                dataSource: ddlDataSource,
                dataTextField: "displayValue",
                dataValueField: "value",
                change: onDDLChange
            });
            //}
            i = i + 1;
        });
    },
    editable: "inline"
}).data("kendoGrid");

// VALUES FOR THE DROPDOWNS

var ddlDataSource = [{
    value: 1,
    displayValue: "Select Expense Type"
},
{
    value: 2,
    displayValue: "Gifts"
},
{
    value: 3,
    displayValue: "MSG"
}
];

function getET() {
    return "2"
};

function columnTemplateFunction(dataItem) {
    var i = 1;
    if (i == 0)
        var input = '<input class="dropDownTemplate"/>'
    else
        return "<strong>" + kendo.htmlEncode(dataItem.name) + dataItem + "</strong>"
    //return "<strong>" + dataItem + "</strong>"
    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());
};

});

Answer 1

Can't use your minimal working example as I don't have those endpoints. So here's an example where each cell of a column displays either a drop down list or a text box. The meat is in the editor function. On the State column, if the Reference is greater than 999 then a drop down list is displayed otherwise a text box is displayed. Should be clear enough in the code. I believe this is what you are looking for as stated in the title "show one of two different controls in each cell of a grid column". Try the code below in the Telerik DOJO.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Kendo Grid Different Input Control in Column</title> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1118/styles/kendo.default-v2.min.css"/> <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script></head> <body> <div id="example"> <div id="grid"></div> <script> $(document).ready(function() { var grid = $('#grid').kendoGrid({ persistSelection: true, selectable: 'cell', editable: true, dataSource: [{ reference: 100, state: 'Pending', },{ reference: 1000, state: 'Pending', }], columns: [{ editable: function() { return false; }, field: 'reference', title: 'Reference', width: 100, },{ field: 'state', title: 'State', width: 200, attributes: { 'title': 'Click to edit', }, editor: function(container, options) { if (options.model.reference > 999) { $('<input name="' + options.field + '" />') .appendTo(container) .kendoDropDownList({ optionLabel: 'Select Expense Type', dataSource: ['Gifts', 'MSG'], }); } else { $('<input name="' + options.field + '" />') .appendTo(container) .kendoTextBox({ }); } }, }], }).data('kendoGrid'); }); </script> </div> </body> </html>