Grid with rowTemplate with input type not working properly

[Chris]

I'm using a rowTemplate on a kendo grid in version 2012.1.322 that contains an input element of type text (happens with number type as well) but when I interact with the control for a particular row it is not displaying and binding properly.

JsFiddle: http://jsfiddle.net/7nB4v/4/ 

Steps:
-> launch grid
-> click on a rows age column and modify the input value
-> click off to the control (do not click the column)
-> notice the input is updated but the total is not updated and if you look at the dataSource.data for the record updated it will not show the change
-> now click on the column to the right of the input box
-> the control is converted to a kendo control
-> enter a value
-> click off of the control
-> the total is updated and the control does not appear as an input control anymore

I've also tried this in 2012.1.515 with the same results.

Anyone know if this is the expected behavior? I'm assuming a template is used for custom row for display as well as edit mode. Workarounds/hacks/solutions welcome :)

Thanks,
Chris

[Jerry T.]

Chris,

In essence, you're defining an extra input element.

Try changing your row template to:

rowTemplate: "<tr data-uid='#= uid #'><td><span>#= firstName #</span></td><td>#= age #</td></tr>",

[Chris]

Removing the input element does work but a kendo control is used. I thought that any of my own controls could be used in a kendo row template? 

Thanks,
Chris

[Jerry T.]

Try using a custom editor.

Here's an example of where we use a combobox as a custom editor:

function comboboxBillType(container, options) {

    $("<input name='" + options.field + "' style='width:150px;'/>")

    .appendTo(container)

    .kendoDropDownList({

        autoBind: false,

        dataSource: me.billTypeDataSource,

        dataTextField: "BillType",

        dataValueField: "BillTypeId"

    });

};

and in the column definition for that column in particular:

{ field: "BillType", title: "Bill Type", width: 75, editor: comboboxBillType },

Jerry

[Chris]

Thanks Jerry. Edit mode now shows an input but if you enter a value and click off of the input element it does not properly bind the data to the datasource. If you click to the right of the input box after you enter a value it will still change the control to the kendo one and not properly save the new value.

Here is an updated jsfiddle: http://jsfiddle.net/7nB4v/11/ 


Thanks,
Chris

[Jerry T.]

Chris,

You still had the extra <input> tag in the rowTemplate. Also, the datasource needs to have the id field defined.  Try this code:
http://jsfiddle.net/7nB4v/12/

var localDataSource = new kendo.data.DataSource({

    data: [{firstName: "Mike", age: 25}, {firstName: "Chris", age: 30}, {firstName:"John", age: 29}],

    aggregate: [{field: "age", aggregate: "sum"}],

    schema: {model: {id: "firstName", fields: {firstName: {editable: false}, age: {editable: true, type: "number"}}}},

    change: function(e){

                  var theGrid = $('#grid').data('kendoGrid'); 

                  // only update the footer, don't want the whole grid refreshed

                  theGrid._footer();

    }       

});

 

function inputNumberType(container, options) {

    $("<input type='text' value='"+ options.field + "'/>")

        .appendTo(container);

};

 

var element = $(grid).kendoGrid({

    dataSource: localDataSource,

    columns: [{title: "First Name", field:"firstName"},

              {title: "Age", field:"age", aggregates:"sum", width:0, footerTemplate:"#= sum #", editor: inputNumberType}],

    autoBind: true,

    rowrowTemplate: "<tr data-uid='#= uid #'><td><span>#= firstName #</span></td><td>#= age #</td></tr>",

    editable: true           

});

[Chris]

Jerry, is there any way to use a non-kendo control in a row template? There will be cases that I'll need to use custom controls and have them bind to my data properly (not just in edit mode). My current example is just an input element but I'm thinking if it can't handle an input text element in the row template properly then it won't be able to handle a checkbox, numberic or other type...

Thanks,
Chris

[Jerry T.]

Good question and it reminds me that I'm having an issue, myself, with a checkbox in my rowtemplate. When I change the value and <Tab> out of the field, the checkbox reverts to text with a "true" or "false" value.

I have an open ticket with Telerik re: a different issue but did raise that specific issue with them. Hopefully I'll get a reply by Monday. I'm going to work on this some over the weekend and perhaps my work will help in your situation, too.

[Jerry T.]

Chris, fwiw, I did get a solution to my rowTemplate issue which might help you somewhat.

The trick is to define the template in the column definition as well as in the rowTemplate definition. Here's a sample that Telerik sent to me:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script type="text/javascript" src="scripts/jquery/jquery-1.7.1.js"></script>

    <script src="http://cdn.kendostatic.com/2012.2.621/js/kendo.all.min.js"></script>

    <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.common.min.css" rel="stylesheet">

    <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.default.min.css" rel="stylesheet">

</head>

<body>

    <div id="grid"></div>

    <script>

 

        var data = [

            { foo: 1, bar: true },

            { foo: 2, bar: false },

            { foo: 3, bar: true },

            { foo: 4, bar: true },

            { foo: 5, bar: false }

        ];

 

        $("#grid").kendoGrid({

            dataSource: {

                data: data,

                schema: {

                    model: {

                        id: "foo",

                        fields: {

                            foo: { type: "number" },

                            bar: { type: "boolean" }

                        }

                    }

                }

            },

            columns: ["foo", { field: "bar", template: '<input type="checkbox" #= (bar === true) ? checked="checked" : "" # disabled />' }],

            rowTemplate: '<tr data-uid="#= uid #"><td>#= foo #</td><td><input type="checkbox" #= (bar === true) ? checked="checked" : "" # disabled /></td></tr>',

            navigatable: true,

            editable: true,

            toolbar: ["save", "cancel"]

        });

    </script>

</body>

</html>

Rather simple really but not something I would have thought was necessary. Specifying the rowTemplate should be enough.
Jerry