Kendoui - How To Create Controls At Runtime Based On User Input?

Is there a way to create different type of controls in a KendoUI grid column at runtime? The scenario is, I have 2 columns in my grid. The first column displays a dropdown list w

Solution 1:

You'll likely have to implement that yourself, e.g. by binding the dropdown's change event to store the selected control type (e.g. "kendoDatePicker") in a variable somewhere, then have a data structure that gives you the appropriate options for each control type. Then you can make your editor template for the second column dynamic based on that control type variable.

If you use inline editing and you want to replace the editor directly, your dropdown change handler might look something like this (note that in order to display the various value types nicely, you'll probably need a complex display template as well):

change: function (e) {
    // select other column by index, for examplevar secondColumn = $(e.sender.element).closest("td").siblings().eq(0);
    var name = $(secondColumn).find("input").attr("name");
    secondColumn.empty(); // remove existing editor (you should also call .destroy() for existing widgets in there!)var model = grid._modelForContainer(secondColumn); // get associated data model from kendoGrid instance

    $("<input data-bind='value: " + name + "'/>").appendTo(secondColumn).kendoDatePicker();
    kendo.bind(secondColumn, model); // bind the model again manually
}

See demo here

If you use in-cell editing, then you should use the editor template as I suggested before; the template function for your dynamic column might look something like this:

editor: function (container, options) {
    // model.typeTitle is set by the dropdown columnif (options.model.typeTitle === "DateTime") {
        $("<input data-bind='value:name' />")
            .appendTo(container).kendoDateTimePicker(controlOptions["kendoDateTimePicker"]);
    } elseif (options.model.typeTitle === "String") {
        $("<input data-bind='value:name' />")
            .appendTo(container);
    } elseif (options.model.typeTitle === "Number") {
        $("<input data-bind='value:name' />")
            .appendTo(container).kendoNumericTextBox();
    }  
}

Demo here