This is a migrated thread and some comments may be shown as answers.

Grid with rowTemplate with input type not working properly

8 Answers 467 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 21 Jun 2012, 03:18 PM
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

8 Answers, 1 is accepted

Sort by
0
Jerry T.
Top achievements
Rank 1
answered on 22 Jun 2012, 02:04 PM
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>",
0
Chris
Top achievements
Rank 1
answered on 22 Jun 2012, 02:49 PM
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
0
Jerry T.
Top achievements
Rank 1
answered on 22 Jun 2012, 03:02 PM
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
0
Chris
Top achievements
Rank 1
answered on 22 Jun 2012, 03:20 PM
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
0
Jerry T.
Top achievements
Rank 1
answered on 22 Jun 2012, 04:02 PM
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           
});
0
Chris
Top achievements
Rank 1
answered on 22 Jun 2012, 08:09 PM
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
0
Jerry T.
Top achievements
Rank 1
answered on 22 Jun 2012, 08:34 PM
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.
0
Jerry T.
Top achievements
Rank 1
answered on 05 Jul 2012, 01:13 PM
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">
<head>
    <title></title>
    <script type="text/javascript" src="scripts/jquery/jquery-1.7.1.js"></script>
</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
Tags
Grid
Asked by
Chris
Top achievements
Rank 1
Answers by
Jerry T.
Top achievements
Rank 1
Chris
Top achievements
Rank 1
Share this question
or