JavaScript Grid XML DataSource

In this blog entry, we look at binding the ShieldUI Grid to data located in an xml file. 

Bacause of the flexible binding mechanism of the ShieldUI DataSource control, this task is achieved easily and with little code. 

In order to be able to render the grid on the page, we first add a div element, which will host our widget. 

Its simple declaration looks like this:

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

Once we have our backend xml data ready, binding to it is easy. The code for our sample looks like this:

<script type="text/javascript">
    $(function () {
        $("#grid").shieldGrid({
            dataSource: {
                remote: {
                    read: {
                        url: "../../../../../Content/xml_files/employees.xml"
                    }
                },
                schema: {
                    type: "xml",
                    data: "employee",
                    fields: {
                        title: { path: "_title" },
                        name: { path: "name._text" },
                        started_text: { path: "started._text" },
                        year: { path: "started.year._text" },
                        full: { path: "started.year._full" },
                        month: { path: "started.month._text" }
                    }
                }
            }
        });
    });
</script>

As shown in the code, the only requirements are to setup the data source and specify the fields, which will be rendered in the grid widget. Everything else will be handled automatically by the controls.
A fully functional example of this approach is available here.