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

Populating JSON Data in HTML table using Kendo Grid

1 Answer 371 Views

Grid

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

Srivatsa asked on 22 Mar 2016, 04:07 PM

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>
            
        </div>

Populating JSON Data in HTML table using Kendo Grid

1 Answer, 1 is accepted