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

You want the numericTextBox widget to display at all times, or just when editing that row? — gitsitgo, Apr 23 '14 at 18:18
yes, i want to display the numerical Text Box all the time in grid. not in edit mode. — BalaKrishnan웃, Apr 25 '14 at 06:20

score 1 · Answer 1 · answered Apr 24 '14 at 05:02

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()
            });
    }

score 1 · Answer 2 · answered Jul 24 '14 at 06:09

You can define kendo numeric textbox binding in template. Also define databound function where explictly call kendo.bind method. I have updated your fiddle as below:

  template:  "<input value='#=Cost#'   data-bind='value:Cost' type='number' data-role='numerictextbox' />"

Updated fiddle

score 0 · Answer 3 · answered Sep 25 '20 at 04:28

      <kendo-grid-column title="Billed" field="billed" class="text-center" id="">
        <ng-template kendoGridCellTemplate let-dataItem="dataItem">
          <input type="text" width="10px" value="45"> 
          <a class="anchor_pointer">{{dataItem.billed }}</a>
        </ng-template>
      </kendo-grid-column>

How to create kendoNumericTextBox in kendo grid cell?

3 Answers3