How to create kendoNumericTextBox in kendo grid cell?

Question

Is there is any way to create widgets in kendo grid cell template? here is the sample code.

columns: [{
    field: "Name",
    title: "Contact Name",
    width: 100
},
{
    field: "Cost",
    title: "Cost",
    template: "<input value='#: Cost #'> </input>",// input must be an numerical up down.

}]

I want to create a numerical up down for cost column.

here is the demo

Answer 1

Use the "editor" property in your field definition. You have to specify a function that will append the widget to the row/bound cell.

Here's an example where I put a drop downlist in each of the rows of a grid:

$('#grdUsers').kendoGrid({
        scrollable: true,
        sortable: true,
        filterable: true,
        pageable: {
            refresh: true,
            pageSizes: true
        },
        columns: [
            { field: "Id", title: "Id", hidden: true },
            { field: "Username", title: "UserName" },
            { field: "FirstName", title: "First Name" },
            { field: "LastName", title: "Last Name" },
            { field: "Email", title: "Email" },
            { field: "Team", title: "Team", editor: teamEdit, template: "#=Team ? Team.Name : 'Select Team'#" },
            { command: { text: "Save", click: saveEmployee }, width: '85px' },
            { command: { text: "Delete", click: deleteEmployee }, width: '85px' }
        ],
        editable: true,
        toolbar: [{ name: "create-user", text: "New Employee" }]
    });

       function teamEdit(container, options) {
        $('<input required data-text-field="Name" data-value-field="Id" data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                autoBind: false,
                optionLabel: {
                    Name: "Select Team",
                    Id: ""
                },
                dataTextField: "Name",
                dataValueField: "Id",
                dataSource: model.getAllTeams()
            });
    }