Populating JSON Data in HTML table using Kendo Grid

2 posts, 0 answers
  1. Srivatsa
    Srivatsa avatar
    1 posts
    Member since:
    Mar 2016

    Posted 22 Mar 2016 Link to this post

    I'm reading a sample JS object array and binding the information to the Kendo UI Grid as shown below

    var sites = [{

                sitename: "HTS_SITE_001",
                    address: "HTS Orion",
                    contact: "john.smith@telerik.com",
                    status: "70",
                    persons: "5"
                },
                   {

                       sitename: "HTS_SITE_002",
                       address: "Smith",
                       contact: "john.smith@telerik.com",
                       status: "70"
                   },
                  {

                      sitename: "HTS_SITE_003",
                      address: "Smith",
                      contact: "john.smith@telerik.com",
                      status: "70"
                  },
                   {

                       sitename: "HTS_SITE_004",
                       address: "Smith",
                       contact: "john.smith@telerik.com",
                       status: "70"
                   }];

            $("#grid").kendoGrid({
                columns: [{ title: "Site Name", field: "sitename" },
                   { title: "Site Address", field: "address"},
                   { title: "Contact", field: "contact" },
                    { title: "Status", field: "status" }],
                pageable: true,
                sortable: true,
                navigatable: true,
                dataSource: sites
            });
    However, the styling of the grid is not what I expect. I want to populate the data in the HTML table which has the pre-defined styling as shown below.  How do I achieve this using Kendo Grid,

    <div class="box-body">
                <div class="table-responsive">
                    <table class="table no-margin">
                        <thead>
                            <tr>
                                <th data-field="sitename">Sites</th>
                                <th data-field="address">Address</th>
                                <th data-field="status">Status</th>
                                <th data-field="contact">Contact</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><a href="pages/examples/invoice.html">HTS_SITE_001</a></td>
                                <td>#24, Pirmasenserstrasse</td>
                                <td>In progress</td>
                                <td>joe.simon@google.de</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- /.table-responsive -->
            </div>

  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 24 Mar 2016 Link to this post

    Hello,

    You need to apply the required styling on Grid table. Please check the following documentation article that should get you started with the Kendo UI CSS framework:

    http://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top