jQuery Grid Plugin - jqGrid

    <link type="text/css" href="Scripts/css/start/jquery-ui-1.8.11.custom.css" rel="Stylesheet" media="screen" />
    <link type="text/css" href="Scripts/css/ui.jqgrid.css" rel="stylesheet" media="screen" />
    <script src="Scripts/js/jquery-1.5.2.min.js" type="text/javascript"></script>
    <script src="Scripts/js/jquery-ui-1.8.11.custom.min.js" type="text/javascript"></script>
    <script src="Scripts/js/jquery.validate.min.js" type="text/javascript"></script>
    <script src="Scripts/js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="Scripts/js/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#Journals").jqGrid({
                url: "OutputAjax.aspx",
                datatype: "xml",
                colNames: ['Id', 'Journal Name', 'Date of Publication'],
                colModel: [
                    { name: 'projectjournalid', hidden: true, key: true },
                    { name: 'journalname', width: 250, sortable: false, editable: true, edittype: 'select', editoptions: { dataUrl: 'OutputAjax.aspx?method=getjournals'} },
                    { name: 'datepublication', width: 150, editable: true, sortable: false, editoptions: { dataInit: function (el) { $(el).datepicker().css({ 'background-image': 'url("calendar.gif")', 'background-position': 'right center', 'background-repeat': 'no-repeat' }); } } }
                ],
                pager: $("#jpager"),
                rowNum: 20,
                editurl: "OutputAjax.aspx",
                caption: "Journals",
                viewrecords: true,
                postData: {
                    method: "getprojectjournal",
                    projectid: function () { return getParameterByName("projectid"); }
                }
            });
            
            $("#Journals").jqGrid('navGrid','#jpager', { edit: true, add: true, del: true, search: false },
                { // edit option
                    modal: true, closeOnEscape: true, editData: { method: "editprojectjournal", projectid: function () { return getParameterByName("projectid"); } }, mtype: "GET", closeAfterEdit: true,
                    beforeShowForm: function (form) { $('#tr_journalname', form).hide(); }
                },
                { // add option
                    modal: true, closeOnEscape: true, editData: { method: "addprojectjournal", projectid: function () { return getParameterByName("projectid"); } }, mtype: "GET", closeAfterAdd: true
                },
                {
                    modal: true, closeOnEscape: true, delData: { method: "delprojectjournal", projectid: function () { return getParameterByName("projectid"); } }, mtype: "GET"
                });