var source = {
                dataType: "json",
                dataFields: [{
                    name: 'name',
                    type: 'string'
                }, {
                    name: 'description',
                    type: 'string'
                }, {
                    name: 'date',
                    type: 'string'
                }, {
                    name: 'user',
                    type: 'string'
                }, {
                    name: 'path',
                    type: 'string'
                }, {
                    name: 'active',
                    type: 'boolean'
                }, {
                    name: 'seq',
                    type: 'int'
                }, {
                    name: 'topic',
                    type: 'string'
                }],
                id: 'programId',
                url: '${pageContext.request.contextPath}/program-list/getProgramLi',
                type: 'GET',
                async: true,
                updaterow: function(rowid, data, commit) {
                    data.id = rowid;
                    $.ajax({
                        type: 'POST',
                        url: '${pageContext.request.contextPath}/program-list/updateProgram',
                        data: data,
                        success: function(data, textStatus, jqXHR) {
                            commit(true);
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            alert("Error");
                            commit(false);
                        }
                    });
                },
                addrow: function (rowid, rowdata, position, commit) {
                    var data = $.extend({}, rowdata);
                    $.ajax({
                        type: 'POST',
                        url: '${pageContext.request.contextPath}/program-list/addProgram',
                        data: data,
                        success: function(data, textStatus, jqXHR) {
                            var newRowId = data != undefined ? parseInt(data) : 0
                            commit(true, newRowId);
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            alert("Error");
                            commit(false);
                        }
                    });
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#grid").jqxGrid({
                source: dataAdapter,
                altRows: true,
                filterable: true,
                height: 500,
                autorowheight: true,
                sortable: true,
                pageable: true,
                editable: true,
                pagesizeoptions: ['10', '20', '50', '100', '1000'],
                theme: 'energyblue',
                width: '100%',
                showtoolbar: true,
                toolbarheight: 40,
                rendertoolbar: function (statusbar) {
                    // appends buttons to the status bar.
                    var container = $("<div style='overflow: hidden; position: relative; margin: 7px;'></div>");
                    var titletable = $("<div style='float: left; margin-left: 5px; position: relative; bottom: 3px;'><h6><b>PROGRAM LIST</b></h6></div>");
                    var exportButton = $("<div style='float: right; margin-right: 5px;'><a class='btn btn-icon' style='text-decoration: none; color: #000;' data-toggle=\"modal\" data-target=\"#export-modal\"><span class=\"glyphicon glyphicon-export\" aria-hidden=\"true\"></span></a></div>");
                    var reloadButton = $("<div class='btn btn-icon' style='float: right; margin-right: 5px;'><span class=\"glyphicon glyphicon-refresh\" aria-hidden=\"true\"></span></div>");
                    var deleteButton = $("<div class='btn btn-icon' style='float: right; margin-right: 5px;'><span class=\"glyphicon glyphicon-remove\" aria-hidden=\"true\"></span></div>");
                    var addButton = $("<div class='btn btn-icon' style='float: right; margin-right: 5px;'><span class=\"glyphicon glyphicon-plus\" aria-hidden=\"true\"></span></div>");

                    container.append(titletable);
                    container.append(exportButton);
                    container.append(reloadButton);
                    container.append(deleteButton);
                    container.append(addButton);
                    statusbar.append(container);

                    addButton.jqxButton({width: 30});
                    deleteButton.jqxButton({width: 30});
                    reloadButton.jqxButton({width: 30});

                    // add new row.
                    exportButton.click(function () {
                        var offset = $("#grid").offset();
                        $("#AddpopupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });

                    });
                    addButton.click(function (row) {
                        //$("#grid").jqxGrid('addrow', null, {}, "first");
                        addrow = row;
                        var offset = $("#grid").offset();
                        $("#AddpopupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
                        // get the clicked row's data and initialize the input fields.
                        var dataRecord = $("#grid").jqxGrid('getrowdata', addrow);
                        $("#nameadd");
                        $("#descriptionadd");
                        $("#dateadd").val(formatAMPM());
                        $("#useradd");
                        $("#pathadd");
                        $("#activeadd");
                        $("#seqadd");
                        $("#topicadd");
                        // show the popup window.
                        $("#AddpopupWindow").jqxWindow('open');
                    });
                    $("#AddpopupWindow").jqxWindow({
                        width: 500, height: 300, resizable: true,  isModal: true, autoOpen: false, cancelButton: $("#CancelAdd"), modalOpacity: 0.3
                    });
                    $("#AddpopupWindow").on('open', function () {
                        $("#nameadd").jqxInput('selectAll');
                    });

                    $("#CancelAdd").jqxButton({ theme: theme });
                    $("#SaveAdd").jqxButton({ theme: theme });
                    // update the edited row when the user clicks the 'Save' button.
                    $("#SaveAdd").click(function () {
                        var row = { name: $("#nameadd").val(), description: $("#descriptionadd").val(), date: $("#dateadd").val(), user: $("#useradd").val(), path: $("#pathadd").val(), active: $("#activeadd").val(), seq: $("#seqadd").val(), topic: $("#topicadd").val()
                        };
                        $('#grid').jqxGrid('addrow', null, row, "last");
                        $("#AddpopupWindow").jqxWindow('hide');
                    });
                    // delete selected row.
                    deleteButton.click(function (event) {
                        var selectedrowindex = $("#grid").jqxGrid('getselectedrowindex');
                        var rowscount = $("#grid").jqxGrid('getdatainformation').rowscount;
                        var id = $("#grid").jqxGrid('getrowid', selectedrowindex);
                        $("#grid").jqxGrid('deleterow', id);
                    });
                    // reload grid data.
                    reloadButton.click(function (event) {
                        $("#grid").jqxGrid({ source: dataAdapter });
                    });
                },
                columns: [{
                    text: 'Program name',
                    dataField: 'name',
                    cellsAlign: 'center',
                    align: 'center',
                    width: '15%',
                    editable: false
                }, {
                    text: 'Description',
                    dataField: 'description',
                    cellsAlign: 'center',
                    align: 'center',
                    editable: false
                }, {
                    text: 'Date',
                    dataField: 'date',
                    cellsAlign: 'center',
                    align: 'center',
                    editable: false
                }, {
                    text: 'User',
                    dataField: 'user',
                    cellsAlign: 'center',
                    align: 'center',
                    width: '5%',
                    editable: false
                }, {
                    text: 'Program path',
                    dataField: 'path',
                    cellsAlign: 'center',
                    align: 'center',
                    width: '10%',
                    editable: false
                }, {
                    text: 'Active',
                    dataField: 'active',
                    cellsAlign: 'center',
                    align: 'center',
                    width: '5%',
                    columntype: 'checkbox'
                }, {
                    text: 'Sequency',
                    dataField: 'seq',
                    cellsAlign: 'center',
                    align: 'center',
                    width: '7%',
                    editable: false
                }, {
                    text: 'Topic',
                    dataField: 'topic',
                    cellsAlign: 'center',
                    align: 'center',
                    width: '10%',
                    editable: false
                }, {
                    text: 'Action',
                    datafield: 'Edit',
                    width: '7%',
                    cellsAlign: 'center',
                    align: 'center',
                    editable: false,
                    filterable: false,
                    sortable: false,
                    createwidget: function (row, column, value, htmlElement) {
                        var editImgUrl = 'https://www.jqwidgets.com/jquery-widgets-demo/images/add.png';
                        var delImgUrl = 'https://www.jqwidgets.com/jquery-widgets-demo/images/close.png';

                        var editImg = '<img height="30" width="30" src="' + editImgUrl + '"/>';
                        var delImg = '<img height="30" width="30" src="' + delImgUrl + '"/>';

                        var editButton = $("<div style='border:none; display:inline-block;'>" + editImg + "</div>");
                        var delButton = $("<div style='border:none; display:inline-block;'>" + delImg + "</div>");

                        $(htmlElement).append(editButton);
                        $(htmlElement).append(delButton);
                        editButton.jqxButton({ height: 30, width: 30 });
                        editButton.click(function (event) {
                            editrow = row;
                            var offset = $("#grid").offset();
                            $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
                            // get the clicked row's data and initialize the input fields.
                            var dataRecord = $("#grid").jqxGrid('getrowdata', editrow);
                            $("#name").val(dataRecord.name);
                            $("#description").val(dataRecord.description);
                            $("#date").val(formatAMPM());
                            $("#user").val(dataRecord.user);
                            $("#path").val(dataRecord.path);
                            $("#active").val(dataRecord.active);
                            $("#seq").val(dataRecord.seq);
                            $("#topic").val(dataRecord.topic);
                            // show the popup window.
                            $("#popupWindow").jqxWindow('open');
                        });

                        delButton.jqxButton({ height: 30, width: 30 });
                        delButton.click(function (event) {
                            let id = $("#grid").jqxGrid('getrowid', row.boundindex);
                            $("#grid").jqxGrid('deleterow', id);
                        });
                    },
                }]
            });
            $("#popupWindow").jqxWindow({
                width: 500, height: 300, resizable: true,  isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.3
            });
            $("#popupWindow").on('open', function () {
                $("#name").jqxInput('selectAll');
            });

            $("#Cancel").jqxButton({ theme: theme });
            $("#Save").jqxButton({ theme: theme });
            // update the edited row when the user clicks the 'Save' button.
            $("#Save").click(function () {
                if (editrow >= 0) {
                    var row = { name: $("#name").val(), description: $("#description").val(), date: $("#date").val(), user: $("#user").val(), path: $("#path").val(), active: $("#active").val(), seq: $("#seq").val(), topic: $("#topic").val()
                    };
                    var rowID = $('#grid').jqxGrid('getrowid', editrow);
                    $('#grid').jqxGrid('updaterow', rowID, row);
                    $("#popupWindow").jqxWindow('hide');
                }
            });
        });