Trying to Populate Grid Data

2 posts, 1 answers
  1. Kerry
    Kerry avatar
    3 posts
    Member since:
    Jun 2016

    Posted 08 Jun 2016 Link to this post

    OK, I am a total stinking newb. This is an idiotic question, that I'm sure will serve as a laughingstock for years to come.

    So I have a grid ... I have columns defined for that grid, and the names of the data elements that I expect to appear in those columns. As well as button at the end of each row that will, at some point, you know ... do stuff. So I have this below ... and it doesn't do that. I get the names and ages ...

    • but then I also get "bar" in the last column ... Why? I never told anyone about the "foo" element.
    • also I don't get the button at the end of the row that I expect.

    So far I've narrowed the problem down to somewhere between the <html> and </html> tags.

    Thanks in advance, for any and all sense that you kind folks may knock into me :-)

    Here's the code:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <link rel="stylesheet" href="/content/kendo/kendo.common.min.css" />
        <link rel="stylesheet" href="/content/kendo/kendo.default.min.css" />
     
        <script src="/scripts/kendo/jquery.min.js"></script>
        <script src="/scripts/kendo/kendo.web.min.js"></script>
    </head>
    <body>
        <input id="testButton" type="button" value="Click Me" onclick="testButton_onclick(this)" />
     
        <div id="example">
            <div id="grid"></div>
     
            <script>
                $().ready(function () {
                    setupKendoGridInitial();
                });
     
                function setupKendoGridInitial() {
                    $("#grid").kendoGrid({
                        columns: [
                           { field: "name", title: "Happy Name" }
                          , { field: "age" }
                          , {
                              command: [
                                       {
                                           name: "details",
                                           click: function (e) {
                                               rowEdit(e);
                                           }
                                       }
                              ]
                          }
                        ]
                    });
                }
     
                function rowEdit(e) {
                    alert("Do stuff: " + e.age);
                }
     
                function testButton_onclick(event) {
                    // let's pretend I just called Web API and got this as JSON from the server
                    var structuredData =
                        {
                            blinkyBot: 1,
                            grannyGunner: "xyz",
                            funkyRows: [
                              { name: "Jimmie Doe", age: 70, foo: "bar" },
                              { name: "Johnny Doe", age: 73, foo: "bar" }
                            ]
                        };
     
                    $("#grid").kendoGrid({
                        dataSource: structuredData.funkyRows
                        });
                }
            </script>
        </div>
    </body>
    </html>

  2. Answer
    Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2310 posts

    Posted 10 Jun 2016 Link to this post

    Hello Kerry,

    The reason for the issue is that in the current code the Grid is initialized twice - first in the setupKendoGridInitial function and then in the button click handler with different options. If you only want to set the Grid's data in the click handler, you could use the data() method of the Grid's dataSource. Here is the modified version of the example.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top