Include NumericTextBox within Grid using template

[Martin]

I have created a Kendo UI Grid and I have one field within the grid which is editable.  I haven't used the "Inline editing" feature as I chose to simply create a template that has a text box and have an event handler on it.  This works great. 

I now want to change the text box to a `NumericTextBox` but it does not seem to work within the grid but works out side of the grid.

    <div id="grid" style="width:1250px!important;font-size:12px!important"></div>
     <script id="slotsTemplate" type="text/x-kendo-tmpl">
        <input class="numeric" type="number" value="#= additional_slots #" min="0" max="100" step="1" />
    </script>
    <script>
    
        $(document).ready(function() {
          $("#numeric").kendoNumericTextBox();
              $("#grid").kendoGrid({
    
                dataSource: {
                    transport: {
                        read:{
                            dataType: "json",
                            url:  "data.php"
                        }
                    },
                dataBound: function(){
                       $(".numeric").kendoNumericTextBox();
                },
                    schema: {
                        total: "total",
                        data: "result",
                        model: {
                            fields: {
                                id: { type: "number" } ,
                                name: { type: "string" },
                                company: { type: "string" },
                                email: { type: "email" },
                                additional_slots: { type: "number", validation: { min: 0, required: true }},
    
                            }
                        }
                    },
            serverPaging: true,
                    pageSize: 25
                },
                scrollable: false,
                sortable: true,
                filterable: true,
             selectable: "row",
             detailTemplate: kendo.template($("#detailTemplate").html()),
                pageable: {refresh: true,},           
                columns: [
                    {field:"id",title: "ID",filterable: false},
                    {field: "name",title: "Name"},
                    {field: "company",title: "Company"},
                    {field: "email",title: "Email"},
                    {field: "additional_slots",title: "Additional<br />Slots",template: kendo.template($("#slotsTemplate").html()),filterable: false},
    
                               
                ]                  
            });    
            
            
    
             $("#grid").on("change", '#numeric', function(event){
                 alert('changed');
              });
    </script>

Can anyone help get this NumericTextBox working within the grid?

Many thanks

[Kiril Nikolov]

Hello Martin,

The problem comes from the fact that when you are initializing the Kendo UI NumericTextBox widget, the data in the grid is not yet loaded and there is nothing that can be initialized. I would suggest you to use the dataBound event of the grid and initialize the widgets there.

Furthermore I would suggest you to use a class name as a jQuery selector, as using only the ID will give you the first element in the sequence and not the whole collection. Please check the following example in order to see a possible implementation:

http://jsbin.com/ahiXoN/2/edit
 
Regards,
Kiril Nikolov
Telerik

[Martin]

Thank you so much for your help.  That worked.