JavaScript Grid Local Data

In this blog entry, we look at binding the ShieldUI Grid to local data.

Binding to static, local data is one of the most common data binding scenarios for grid components. It is useful for cases when we are dealing with static data, which is available in advance. 

In this particular case, we will bind the grid to a local file, which contains json data. The declaration of the file looks like this:

<script src="/Content/Json/gridData.js"></script>

Once we have the data necessary for the grid, we then include the control declaration. To do so, we first include a div element, which will be the container for the grid widget:

<div id="grid"></div>

The next step is to include the complete declaration of the grid. It contains two important sections. The first one is the dataSource element, which points to the json file we included in the beginning. The second important setting is the columns collection. It specifies all the columns, which will be available in the grid control. 

The complete declaration of the example looks like this:

<script type="text/javascript">
    $(document).ready(function () {
        $("#grid").shieldGrid({
            dataSource: {
                data: gridData                 
            },
            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"}
            ]
        });
    });            
</script>

A fully functional example, demonstrating this approach is available here.