My code

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            //var theme = getDemoTheme();
              var url = "/A2.JSON";
            // prepare the data


            /*   var source =
             {
             datatype: "json",
             url: url,
             datafields : [
             { name: 'Icon', map:  'Rotation>Shifts>Icon' },
             { name: 'Name' , map: 'Rotation>Name' },
             { name: 'BeginOffset' , map:  'Rotation>Shifts>'+test1()+'>BeginOffset'},
             { name: 'EndOffset', map: 'Rotation>Shifts>'+test1()+'>EndOffset' },
             { name: 'PaidHours', map: 'Rotation>Shifts>'+test1()+'>PaidHours' },
             { name: 'Period' , map: 'Rotation>Shifts>'+test1()+'>Period'}
             ]


             };*/
            var source =
            {
                datatype: "json",
                url: url,
                datafields : [
                    { name: 'Icon' , map: 'Icon' },
                    { name: 'Baseline'},
                    { name: 'Name' },
                    { name: 'BeginOffset' },
                    { name: 'EndOffset' },
                    { name: 'PaidHours' },
                    { name: 'Period' }
                ],
                root: "Rotation>Shifts"

        };


            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) {
                    console.log('data',data);},
                loadComplete: function (data) {
                },
                loadError: function (xhr, status, error) {
                //    console.log(xhr);
                    console.dir(error);
                }
            });
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
                    {
                        width: 1200,
                        source: dataAdapter,
                        editable: true,
                        sortable: true,
                        autoheight: true,
                        sortable: true,
                        altrows: true,
                        // pageable:false,
                        enabletooltips: true,
                        selectionmode: 'multiplecellsadvanced',

                        columns: [
                            { text: 'Icon',  datafield: 'Icon',  width: 250 },
                            { text: 'Baseline',  datafield: 'Baseline',  width: 350, type: 'float' },
                            { text: 'Name',  datafield: 'Name',  width: 250 },
                            { text: 'Start', datafield: 'BeginOffset', width: 180 },
                            { text: 'End',   datafield: 'EndOffset',   width: 120 },
                            { text: 'Hours', datafield: 'Hours', width: 120 },
                            { text: 'Paid',  datafield: 'PaidHours',  width: 120 },
                            { text: 'Period',datafield: 'Period',width: 120 },
                        ]

                    });
        });
    </script>

    <meta content="">
    <style></style>
</head>
<body class="default">
<h1>Test Grid  using Jqxgrid by Mirza </h1>
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
    <div id="jqxgrid">
    </div>
</div>


</body>
</html>