gridview style in shieldui

Question

I try to create gridview from shieldui So i try this

<table id="grid">
<tr>
<th>
Name
</th>
<th>
Name
</th>
<th>
Name
</th>
</tr>
<tr>
<td>
ABC
</td>
<td>
ABC
</td>
<td>
ABC
</td>
</tr>
</table>

js

<script type="text/javascript">
$(document).ready(function () {
    $("#grid").shieldGrid

I also add links but when i build and then check then this show simple grid with no style any soultion?

Answer 1

From the documentation, the sheildui grid expects a JavaScript array of objects as its dataSource.

Sample Code

var sampleData = 
[
    {
        "id": 0,
        "name": "Sue Sharpe",
        "gender": "female",
        "company": "Mitroc",
        "email": "suesharpe@mitroc.com"
    },
    {
        "id": 1,
        "name": "Nieves Hubbard",
        "gender": "male",
        "company": "Syntac",
        "email": "nieveshubbard@syntac.com"
    },
    {
        "id": 2,
        "name": "Anastasia Underwood",
        "gender": "female",
        "company": "Gallaxia",
        "email": "anastasiaunderwood@gallaxia.com"
    },
    {
        "id": 3,
        "name": "Maxine Haley",
        "gender": "female",
        "company": "Songbird",
        "email": "maxinehaley@songbird.com"
    },
    {
        "id": 4,
        "name": "Bennett Alvarez",
        "gender": "male",
        "company": "Marvane",
        "email": "bennettalvarez@marvane.com"
    }
    ];
jQuery(function ($) {
        $("#grid").shieldGrid({
            dataSource: {
                data: sampleData                 
            }
        });
    });            

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://www.shieldui.com/shared/components/latest/css/light/all.min.css" rel="stylesheet"/>
<script src="https://www.shieldui.com/shared/components/latest/js/shieldui-all.min.js"></script>
<div id="grid"></div>

Additional settings for sorting, paging, selection and column definitions are

sorting:{
    multiple: true
},
paging: {
    pageSize: 12,
    pageLinksCount: 10
},
selection:{
    type: "row",
    multiple: true,
    toggle: false
},
columns: [                
    { field: "id", width: "70px", title: "ID" },
    { field: "name", title: "Person Name" },
    { field: "company", title: "Company Name" },
    { field: "email", title:"Email Address", width: "270px" }
]

Documentation: http://demos.shieldui.com/web/grid-general/basic-usage