Grid with rowTemplate with input type not working properly

9 posts, 0 answers
  1. Chris
    Chris avatar
    6 posts
    Member since:
    Jun 2012

    Posted 21 Jun 2012 Link to this post

    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
  2. Jerry T.
    Jerry T. avatar
    118 posts
    Member since:
    Jul 2012

    Posted 22 Jun 2012 Link to this post

    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>",
  3. Kendo UI is VS 2017 Ready
  4. Chris
    Chris avatar
    6 posts
    Member since:
    Jun 2012

    Posted 22 Jun 2012 Link to this post

    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
  5. Jerry T.
    Jerry T. avatar
    118 posts
    Member since:
    Jul 2012

    Posted 22 Jun 2012 Link to this post

    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
  6. Chris
    Chris avatar
    6 posts
    Member since:
    Jun 2012

    Posted 22 Jun 2012 Link to this post

    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
  7. Jerry T.
    Jerry T. avatar
    118 posts
    Member since:
    Jul 2012

    Posted 22 Jun 2012 Link to this post

    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           
    });
  8. Chris
    Chris avatar
    6 posts
    Member since:
    Jun 2012

    Posted 22 Jun 2012 Link to this post

    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
  9. Jerry T.
    Jerry T. avatar
    118 posts
    Member since:
    Jul 2012

    Posted 22 Jun 2012 Link to this post

    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.
  10. Jerry T.
    Jerry T. avatar
    118 posts
    Member since:
    Jul 2012

    Posted 05 Jul 2012 Link to this post

    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
Back to Top
Kendo UI is VS 2017 Ready