Gecko [ nrupathungauniversityblr.ac.in ]

Name	Size	Permission
inc	[ DIR ]	drwxr-xr-x
js	[ DIR ]	drwxr-xr-x
jqGridDemo.html	15.35 KB	-rwxr-xr-x

Code Editor : jqGridDemo.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">

$("#grid").jqGrid({
    data: mydata,
    datatype: "local",
    colNames: ["Name", "Country", "Continent"],
    colModel: [{
        name: 'name',
        index: 'name',
        editable: true,width:150 // set it to false if you don't want the column to be editable
    }, {
        name: 'country',
        index: 'country',
        editable: true,width:150
    }, {
        name: 'continent',
        index: 'continent',
        editable: true,width:150
    }],caption: "Stack Overflow Example",
	rowNum:10,
    rowList:[2,4,8,16],
		height:'250',
		width:'900',
    pager: '#pager',

'cellEdit': true, // TRUE = turns on celledit for the grid.
    'cellsubmit' : 'clientArray',
    editurl: 'clientArray',

});

$(window).ready(function(){

var data = [[48803, "DSK1", "", "02200220", "OPEN"], [48769, "APPR", "", "77733337", "ENTERED"]];

$("#grid2").jqGrid({
    datatype: "local",
    height: 250,
    colNames: ['Inv No', 'Thingy', 'Blank', 'Number', 'Status'],
    colModel: [{
        name: 'id',
        index: 'id',
        width: 60,
        sorttype: "int"},
    {
        name: 'thingy',
        index: 'thingy',
        width: 90,
        sorttype: "date"},
    {
        name: 'blank',
        index: 'blank',
        width: 30},
    {
        name: 'number',
        index: 'number',
        width: 80,
        sorttype: "float"},
    {
        name: 'status',
        index: 'status',
        width: 80,
        sorttype: "float"}
    ],
    caption: "Stack Overflow Example",
	height:'250',
		width:'900',
    // ondblClickRow: function(rowid,iRow,iCol,e){alert('double clicked');}
});

var names = ["id", "thingy", "blank", "number", "status"];
var mydata = [];

for (var i = 0; i < data.length; i++) {
    mydata[i] = {};
    for (var j = 0; j < data[i].length; j++) {
        mydata[i][names[j]] = data[i][j];
    }
}

for (var i = 0; i <= mydata.length; i++) {
    $("#grid2").jqGrid('addRowData', i + 1, mydata[i]);
}

/*
$("#grid").jqGrid('setGridParam', {onSelectRow: function(rowid,iRow,iCol,e){alert('row clicked');}});
*/

/*
$("#grid2").jqGrid('setGridParam', {ondblClickRow: function(rowid,iRow,iCol,e){alert('double clicked');}});

});

$(document).ready(function () {
    'use strict';
     var gidData = [
            { id: "1", orderdate: "2013-10-01", customer: "customer",  price: "200.00", vat: "10.00", completed: true, shipment: "TN", total: "210.00"},
            { id: "2", orderdate: "2013-10-01", customer: "customer2",  price: "300.00", vat: "20.00", completed: false, shipment: "FE", total: "320.00"},
            { id: "3", orderdate: "2011-07-30", customer: "customer3",  price: "400.00", vat: "30.00", completed: false, shipment: "FE", total: "430.00"},
            { id: "4", orderdate: "2013-10-04", customer: "customer4",  price: "200.00", vat: "10.00", completed: true, shipment: "TN", total: "210.00"},
            { id: "5", orderdate: "2013-11-31", customer: "customer5",  price: "300.00", vat: "20.00", completed: false, shipment: "FE", total: "320.00"},
            { id: "6", orderdate: "2013-09-06", customer: "customer6",  price: "400.00", vat: "30.00", completed: false, shipment: "FE", total: "430.00"},
            { id: "7", orderdate: "2011-08-30", customer: "customer7",  price: "200.00", vat: "10.00", completed: true, shipment: "TN", total: "210.00"},
            { id: "8", orderdate: "2013-10-03", customer: "customer8",  price: "300.00", vat: "20.00", completed: false, shipment: "FE", total: "320.00"},
            { id: "9", orderdate: "2013-09-01", customer: "customer9",  price: "400.00", vat: "30.00", completed: false, shipment: "TN", total: "430.00"},
            { id: "10", orderdate: "2013-09-08", customer: "customer10", price: "702.00", vat: "30.00", completed: true, shipment: "IN", total: "530.00"},
            { id: "11", orderdate: "2013-09-08", customer: "customer11",  price: "500.00", vat: "30.00", completed: false, shipment: "FE", total: "530.00"},
            { id: "12", orderdate: "2013-09-10", customer: "customer12",  price: "500.00", vat: "30.00", completed: false, shipment: "FE", total: "530.00"},
			{ id: "1", orderdate: "2013-10-01", customer: "customer",  price: "200.00", vat: "10.00", completed: true, shipment: "TN", total: "210.00"},
            { id: "2", orderdate: "2013-10-01", customer: "customer2",  price: "300.00", vat: "20.00", completed: false, shipment: "FE", total: "320.00"},
            { id: "3", orderdate: "2011-07-30", customer: "customer3",  price: "400.00", vat: "30.00", completed: false, shipment: "FE", total: "430.00"},
            { id: "4", orderdate: "2013-10-04", customer: "customer4",  price: "200.00", vat: "10.00", completed: true, shipment: "TN", total: "210.00"},
            { id: "5", orderdate: "2013-11-31", customer: "customer5",  price: "300.00", vat: "20.00", completed: false, shipment: "FE", total: "320.00"},
            { id: "6", orderdate: "2013-09-06", customer: "customer6",  price: "400.00", vat: "30.00", completed: false, shipment: "FE", total: "430.00"},
            { id: "7", orderdate: "2011-08-30", customer: "customer7",  price: "200.00", vat: "10.00", completed: true, shipment: "TN", total: "210.00"},
            { id: "8", orderdate: "2013-10-03", customer: "customer8",  price: "300.00", vat: "20.00", completed: false, shipment: "FE", total: "320.00"},
            { id: "9", orderdate: "2013-09-01", customer: "customer9",  price: "400.00", vat: "30.00", completed: false, shipment: "TN", total: "430.00"},
            { id: "10", orderdate: "2013-09-08", customer: "customer10", price: "702.00", vat: "30.00", completed: true, shipment: "IN", total: "530.00"},
            { id: "11", orderdate: "2013-09-08", customer: "customer11",  price: "500.00", vat: "30.00", completed: false, shipment: "FE", total: "530.00"},
            { id: "12", orderdate: "2013-09-10", customer: "customer12",  price: "500.00", vat: "30.00", completed: false, shipment: "FE", total: "530.00"}
        ],
        theGrid = $("#theGrid"),
        numberTemplate = {formatter: 'number', align: 'right', sorttype: 'number'}
 
 
    theGrid.jqGrid({
		url:'jqGridData.php',
        datatype: 'json',
      
        colNames: ['Customer', 'Date',  'Price', 'VAT', 'Total', 'Completed', 'Shipment'],
        colModel: [                  
                  {name: 'customer', index: 'customer', width: 90, editable:true},
            {name: 'orderdate', index: 'orderdate', width: 100, align: 'center', sorttype: 'date',
                formatter: 'date', datefmt: 'd-M-Y'},
            {name: 'price', index: 'price', width: 55, template: numberTemplate},
            {name: 'vat', index: 'vat', width: 42, template: numberTemplate},
            {name: 'total', index: 'total', width: 50, template: numberTemplate},
            {name: 'completed', index: 'completed', width: 30, align: 'center', formatter: 'checkbox',
                edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'Yes'}},
            {name: 'shipment', index: 'shipment', width: 80, align: 'center', formatter: 'select',
               edittype: 'select', editoptions: {value: 'FE:FedEx;TN:TNT;IN:Intime;us:USPS', defaultValue: 'Intime'}}                  
        ],	
		 
        autowidth: true,
            gridview: true,             
            rownumbers: false,
        rowNum: 10,
        rowList: [5, 10, 15],
        pager: '#gridPager',
        viewrecords: true,  
        caption: 'Edit Commands Buttons',
        height: '100%',
        gridComplete : function () {
                                    var maxDate; 
                                    var rowIDs = jQuery("#theGrid").jqGrid('getDataIDs');
                                    for (var i = 0; i < rowIDs.length ; i++) 
                                    {
                                        var rowID = rowIDs[i];
                                        var row = jQuery('#theGrid').jqGrid ('getRowData', rowID);
 
                                        if(i==0)
                                        {
                                            maxDate = new Date(row.orderdate);
                                        }
                                        else
                                        {
                                            if(maxDate < new Date(row.orderdate))
                                {   
                                maxDate = new Date(row.orderdate);
                                }                                       
                                        }       
                                    }
                                     
                                    $("#maxDateField").val(maxDate);
                                }
    });
});

function showJQGrid() {

var AllApplicationList=[{"AppId":1004,"TenantId":1,"AppName":"Sensiple IT Help Desk"}, {"AppId":2000,"TenantId":1,"AppName":"HR Help Desk"}, {"AppId":3000,"TenantId":1,"AppName":"Admin Desk"}, {"AppId":4000,"TenantId":1,"AppName":"Transport Facility"}, {"AppId":5000,"TenantId":2,"AppName":"Security Services"}, {"AppId":6000,"TenantId":5,"AppName":"Premises"},{"AppId":6001,"TenantId":8,"AppName":"Head Office"},{"AppId":6002,"TenantId":14,"AppName":"Ticket Incident"}, {"AppId":6003,"TenantId":14,"AppName":"Food Service"}, {"AppId":6005,"TenantId":14,"AppName":"Cleaning Service"}]

$("#ApplicationDetailsTable").jqGrid({
			
            width:'900',
            height: '100%',
            datatype: "json",
            data:AllApplicationList,
            colNames: ["Application ID", "TenantId", "Application Name", "Actions","Inbuild Actions"],
            colModel: [
            { name: 'AppId', index: 'AppId', hidden: true },
            { name: 'TenantId', index: 'TenantId',width:'60', resizable: true, align: 'center', title: false, sortable: true, searchoptions: { sopt: ['eq', 'ne', 'le', 'lt', 'gt', 'ge'] }, searchtype: "number" ,width:'70'},
            { name: 'AppName', index: 'AppName', sortable: true,width:'150' },
            { name: 'Actions', sortable: false,width:'150', search: false, fixed: true,align:'center',
                formatter: function () {
                    return "<img src='../../Images/edit-icon.png' alt='Edit' id='editID' style='margin-left:12px;height:18px;width:18px;cursor:pointer;' /><img src='../../Images/Trash-can-icon.png' alt='Edit' id='deleteID'style='margin-left:12px;height:18px;width:18px;cursor:pointer;' onclick='deleteApplication()' />";
                }
            },
            { name: 'myac', width: 80, fixed: true, resizable: false, sortable: false,width:'150', search: false, resize: false, formatter: 'actions',
                formatoptions: { keys: true}
            },
            ],
            rowNum: 10,
            rowList: [5, 10, 20, 30],
            pager: '#JQGridPaging',
            viewrecords: true,
            caption: "Application List Details",
            sortname: "TenantId",
            sortorder: "asc",
            altRows: true,
            altclass: 'jqgaltrow',
            hoverrows: true,
            loadonce: true,
            gridview: false,
            rownumWidth: 40,
            rownumbers: true,
            multiSort: true,
            hidegrid: true,
            toppager: false,
            pgbuttons: true,
          
            shrinkToFit: true,
            emptyrecords: "No records to view",
            loadtext:'Loading Data please wait ...'
        });
        jQuery("#ApplicationDetailsTable").jqGrid('filterToolbar', { searchOperators: false,searchOnEnter: false, });
        $("#ApplicationDetailsTable").jqGrid('navGrid', '#JQGridPaging',
            {
                refresh: false, add: false, edit: false, del: true, search: true,
                searchtext: "Search",
                addtext: "Add",
                edittext: "Edit",
                deltext: "Delete",
                deltitle: "Delete Application",
                refreshtext: "Refresh",
                position: 'left'
            },
                {},
                {},
                {
                    mtype: "POST",
                    reloadAfterSubmit: true,
                    url: '@Url.Action("DeleteApplicationDetails", "JQGridHome")',
                    resize: false,
                    closeOnEscape: true,
                    drag: false,
                    ajaxDelOptions: { contentType: 'application/json; charset=utf-8' },
                    serializeDelData: function (postdata) {
                        alert(postdata);
                        console.log(postdata);
                        return JSON.stringify({ AppId: postdata.id });
                    }
                },
                { sopt: ['eq', 'cn', 'lt', 'le', 'bw', 'bn', 'in'], closeOnEscape: true, multipleSearch: true, overlay: true, width: 460, closeAfterSearch: true }
         );

}

$(document).ready(function () {
        showJQGrid();
    });

</script>
 </head>

${this.title}

Code Editor : jqGridDemo.html