Click here to Skip to main content
16,019,768 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
@{
    ViewBag.Title = "Grid2";
}

<h2>Grid2</h2>


<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<link href="~/Content/Blue%20theme/jquery-ui-1.9.2.custom.min.css" rel="stylesheet" />

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.jqGrid.min.js"></script>
@*<script src="~/Scripts/my%20script/jquery.jqGrid.min.js"></script>*@
<script src="~/Scripts/i18n/grid.locale-en.js"></script>
<script src="~/Scripts/my%20script/jquery-ui-1.9.2.custom.min.js"></script>



<div class="container-fluid">
    <table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
    <div id="pager" class="scroll" style="text-align:center;"></div>
</div>
<script>

    var mydata = [
                 { action: "", id: "1", invdate: "2007-10-01", name: "test", note: true, amount: "200.00", tax: "10.00", total: "210.00" },
                 { action: "", id: "2", invdate: "2007-10-02", name: "test2", note: false, amount: "300.00", tax: "20.00", total: "320.00" },
                 { action: "", id: "3", invdate: "2007-09-01", name: "test3", note: true, amount: "400.00", tax: "30.00", total: "430.00" },
                 { action: "", id: "4", invdate: "2007-10-04", name: "test", note: true, amount: "200.00", tax: "10.00", total: "210.00" },
                 { action: "", id: "5", invdate: "2007-10-05", name: "test2", note: false, amount: "300.00", tax: "20.00", total: "320.00" },
                 { action: "", id: "6", invdate: "2007-09-06", name: "test3", note: false, amount: "400.00", tax: "30.00", total: "430.00" },
                 { action: "", id: "7", invdate: "2007-10-04", name: "test", note: false, amount: "200.00", tax: "10.00", total: "210.00" },
                 { action: "", id: "8", invdate: "2007-10-03", name: "test2", note: false, amount: "300.00", tax: "20.00", total: "320.00" },
                 { action: "", id: "9", invdate: "2007-09-01", name: "test3", note: false, amount: "400.00", tax: "30.00", total: "430.00" },
                 { action: "", id: "10", invdate: "2007-10-01", name: "test", note: false, amount: "200.00", tax: "10.00", total: "210.00" },
                 { action: "", id: "11", invdate: "2007-10-02", name: "test2", note: false, amount: "300.00", tax: "20.00", total: "320.00" },
                 { action: "", id: "12", invdate: "2007-09-01", name: "test3", note: true, amount: "400.00", tax: "30.00", total: "430.00" },
                 { action: "", id: "13", invdate: "2007-10-04", name: "test", note: false, amount: "200.00", tax: "10.00", total: "210.00" },
                 { action: "", id: "14", invdate: "2007-10-05", name: "test2", note: false, amount: "300.00", tax: "20.00", total: "320.00" },
                 { action: "", id: "15", invdate: "2007-09-06", name: "test3", note: false, amount: "400.00", tax: "30.00", total: "430.00" },
                 { action: "", id: "16", invdate: "2007-10-04", name: "test", note: false, amount: "200.00", tax: "10.00", total: "210.00" },
                 { action: "", id: "17", invdate: "2007-10-03", name: "test2", note: false, amount: "300.00", tax: "20.00", total: "320.00" },
                 { action: "", id: "18", invdate: "2007-09-01", name: "test3", note: false, amount: "400.00", tax: "30.00", total: "430.00" }
    ];

    $("#list").jqGrid({ //set your grid id
        caption: "<h5>Employee Details</h5>",
        data: mydata, //insert data from the data object we created above
        datatype: 'local',

        width: 500, //specify width; optional
        colNames: ['Action', 'Inv No', 'Date', 'Name', 'Amount', 'Tax', 'Total', 'Notes'],
        colModel: [
            { name: 'action', index: 'action', sortable: false, formatter: displayButtons },
            { name: 'id', index: 'id', key: true, width: 70, sorttype: "int" },
            { name: 'invdate', index: 'invdate', width: 90, sorttype: "date" },
            { name: 'name', index: 'name', width: 100,editable:true },
            { name: 'amount', index: 'amount', width: 80, align: "right", sorttype: "float", editable: true },
            { name: 'tax', index: 'tax', width: 80, align: "right", sorttype: "float" },
            { name: 'total', index: 'total', width: 80, align: "right", sorttype: "float", editable: true },
            { name: 'note', index: 'note', width: 150, sortable: false, align: 'center', formatter: 'checkbox',
            edittype: 'checkbox', editoptions: { value: 'Yes:No', defaultValue: 'Yes' },editable:true
            }],
        //define column models
        //pager: '#pager', //set your pager div id
        sortname: 'id', //the column according to which data is to be sorted; optional
        viewrecords: true, //if true, displays the total number of records, etc. as: "View X to Y out of Z" optional
        sortorder: "asc",
        pager: jQuery("#pager"),
        rowNum: 1,
        rowList: [10, 20, 30, 40],
        height: '100%',
        rowId:'id',
        viewrecord: true,
        loadonce: true,
        emptyrecord: "No record to display",
        jsonReader: {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            id: 0
        },
        autowidth: true,
        multiselect: false,//sort order; optional,
        multiSort:true
    }).navGrid('#pager', { add: true, edit: true, del: true, search: true, refresh: true },
    {
        zIndex: 100,
        url: '/Home/Edit/',
        closeOnEscape: true,
        closeAfterEdit: true,
        recreateForm: true,
        afterComplete: function (response) {
            if (response.responseText) {
                alert(response.responseText);
            }
        }
    }, {
        zIndex: 100,
        url: '/Home/Create/',
        closeOnEscape: true,
        closeAfterEdit: true,
        afterComplete: function (response) {
            if (response.responseText) {
                alert(response.responseText);
            }
        }
    }, {
        zIndex: 100,
        url: '/Home/Delete/',
        closeOnEscape: true,
        closeAfterEdit: true,
        recreateForm: true,
        msg: "Are you sure you want to delete the data",
        afterComplete: function (response) {
            if (response.responseText) {
                alert(response.responseText);
            }
        }
    }, { multipleSearch: true, multipleGroup: true, showQuery: true })

    //$("#list").jqGrid('navGrid', '#pager', { add: true, edit: true, del: true, search: true, refresh: true },
    //                {}, {}, {}, { multipleSearch: true, multipleGroup: true, showQuery: true });
    function displayButtons(cellvalue, options, rowObject) {
        var edit = "<input style='...' type='button' value='Edit' onclick=\"jQuery('#list').editRow('" + options.rowId + "');\"  />",
             save = "<input style='...' type='button' value='Save' onclick=\"jQuery('#list').saveRow('" + options.rowId + "');\"  />",
             restore = "<input style='...' type='button' value='Restore' onclick=\"jQuery('#list').restoreRow('" + options.rowId + "');\" />";
        return edit + save + restore;
    }
</script>
Posted
Updated 11-Dec-15 0:03am
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900