Error occurs when invoking addRow on a Grid with templated column

7 posts, 1 answers
  1. Wenhao
    Wenhao avatar
    17 posts
    Member since:
    Jan 2012

    Posted 10 Apr 2013 Link to this post

    Hello Kendo,

    With your latest 2013Q1 release, we just encountered an error every time when trying to add a new row on ui.Grid, which a templated column was involved. A simple code sample shows as below:

        <script>
            $(function() {
                $('#grid').kendoGrid({
                    dataSource: {
                        data: [
                            { a: "dafdsf" }
                        ]
                    },
                    columns: [
                        {
                            field: "a",
                            width: 120,
                            template: 'template: #= a #'
                        }
                    ]
                });

                $('#add').click(function() {
                    $('#grid').data('kendoGrid').addRow();
                });
            });
        </script>
    </head>
    <body>
        <div id="grid"></div>
        <button id="add">add</button>
    </body>

    When the add button was clicked, an error "Uncaught ReferenceError: a is not defined " went out.

    Can you please take a look at this, as this is so much urgent for us. Or could you suggest any other work around?

    Thanks,
    Wenhao
  2. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 11 Apr 2013 Link to this post

    Hello Wenhao,

    The Grid setup that you've posted doesn't work with any version of Kendo UI. Here is a sample with 2012.3.1114(Q3 2012) it will throw the same error.

    In order to make it work you should define DataSource.schema describing the models. Here is a another sample showing the minimal code required to make it work: http://jsbin.com/arohob/5/edit

    Regards,
    Nikolay Rusev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Wenhao
    Wenhao avatar
    17 posts
    Member since:
    Jan 2012

    Posted 11 Apr 2013 Link to this post

    Thank you for your reply, Nikolay. I think I must be doing something wrong, and everything is going to work perfect now. 

    But I still have an other question. We have a Grid control with a custom editor column now, and the column value is expected to be number 0 or 1. However, when adding a new row in the grid, the model field would be undefined initially, after clicking on the dropdownlist editor once, the field gets a value of Observerable.extend object, not the number value we expected. I pasted a test code below for your convenience.

    <script>
    $(function() {
        $('#grid').kendoGrid({
            editable: true,
            dataSource: [
                { Check: 1 }
            ],
            columns: [
                {
                    field: 'Check',
                    editor: makeBooleanCellEditor
                }
            ]
        });

        function makeBooleanCellEditor(container, options) {
            $('<input data-text-field="text" data-value-field="value" data-bind="value: ' + options.field + '" />')
                    .appendTo(container)
                    .kendoDropDownList({
                        autoBind: false,
                        dataSource: [
                            { text: 'True', value: 1 },
                            { text: 'False' , value: 0 }
                        ]
                    });
        }

        $('#add').click(function() {
            $('#grid').data('kendoGrid').addRow();
        });
    });
    </script>
    </head>
    <body>
        <div id="grid"></div>
        <button id="add">add</button>
    </body>

    I am very confused with this, and could you deliver any kind suggestion on it?

    Wenhao
  5. Answer
    Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 12 Apr 2013 Link to this post

    Hello Wenhao,

     
    You still doesn't have model definition. You must have definition of the model fields otherwise editing will not function properly.
    http://jsbin.com/arohob/8/edit

    Regards,
    Nikolay Rusev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Wenhao
    Wenhao avatar
    17 posts
    Member since:
    Jan 2012

    Posted 15 Apr 2013 Link to this post

    Yes, Nikolay. With your help on setting up the model definition completely, the addRow function now works appropriately. But my problem is, after adding a new row, the column value just gets an observerable object, not as the type demonstrated in value field. Checking in your jsbin, the cell displays as [Object object]. What i expected is an interger value of 0 or 1. 

    That's a very strange issue, and how could i bypass it while editing. Or am I still missing anything?

    Wenhao
  7. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 17 Apr 2013 Link to this post

    Hello Wenhao,

    I'm not sure where you see this: "the cell displays as [Object object]" I've captured short video using the jsbin sample from my previous post: http://screencast.com/t/fMp91uUjByNC.

    Can you elaborate a bit?

    Regards,
    Nikolay Rusev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Wenhao
    Wenhao avatar
    17 posts
    Member since:
    Jan 2012

    Posted 17 Apr 2013 Link to this post

    Hi Nikolay,

    I watched your video and re-analized our project code again, now it works great as it does. It was my fault that I must have messed something up terribly. With your sincere help, we are back on track now.

    I would like to say thank you for your continuous help on this thread, your time and expertise are highly appreciated.

    Hope you have a wonderful day.

    Wenhao
Back to Top
Kendo UI is VS 2017 Ready