<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridTest.aspx.cs" Inherits="GridTest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
<link href="css.axd?files=themes/flora/*,gridthemes/basic/grid.css,jqModal.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="js.axd?files=base/*,Plugins/*,Plugins/Grid/*" ></script>

</head>
<script type="text/javascript"> 
jQuery(document).ready(function(){  
var lastsel;
var lastval;
$("#AddOne > ul").tabs();

  jQuery("#list").jqGrid({ 
    url:'GridTest.aspx?action=get', 
    datatype: 'xml', 
    mtype: 'POST', 
    colNames:['Actions','Id','Name', 'Age','Datetime','Isuse','Context'], 
    colModel :[  
	  {name:'act',index:'act', width:75,sortable:false},
      {name:'Id', index:'Id', width:55,search:true},  
      {name:'Name', index:'Name', width:90,search:true,editable:true,edittype:"select",editoptions:{value:"FE:FedEx;TN:TNT"}},
      {name:'Age', index:'Age', width:80, align:'right',editable:true,editoptions:{size:10}},
      {name:'Datetime', index:'Datetime', width:80, align:'right',editable:false},  
      {name:'Isuse', index:'Isuse', width:80, align:'right',editable:false},  
      {name:'Context', index:'Context', width:150, sortable:false,editable:true,editoptions:{size:10}} ], 
    pager: jQuery('#pager'), 
    rowNum:20, 
    rowList:[20,20,35], 
    sortname: 'id', 
    sortorder: "DESC", 
    viewrecords: true, 
    imgpath: 'css/Gridthemes/basic/images', 
    caption: 'My first grid' ,
    multiselect: false,
    cellEdit: true,
    cellurl:"GridTest.aspx?action=edit",
    height:300,
    afterEditCell : function(rowid,name,val,iRow,iCol) {
//       if(name=='Name'){
//       lastval = $("#"+iRow+"_Name").val();
//        alert("afterEditCell  "+lastval);
//        }
    },    
    beforeSaveCell: function (id,name,val,iRow,iCol){
     lastval = $("#"+iRow+"_Name").val();
     jQuery("#list").setRowData(id,{Age:100});

    //alert("beforeSaveCell "+lastval);
//		if(name=='invdate') {
//			jQuery("#"+iRow+"_invdate","#celltbl").datepicker({dateFormat:"yy-mm-dd"});
//		}
	},

    loadComplete: function(){
		var ids = jQuery("#list").getDataIDs();
		for(var i=0;i<ids.length;i++){
			var cl = ids[i];
			be = "<input style='height:22px;width:20px;' type='button' value='E' onclick=jQuery('#list').editRow("+cl+"); >"; 
			se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=jQuery('#list').saveRow("+cl+"); />"; 
			ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=jQuery('#list').restoreRow("+cl+"); />"; 
			jQuery("#list").setRowData(ids[i],{act:be+se+ce});
		}	
	}
	//,
//	editurl: "server.php",
//	onSelectRow: function(id){
//		if(id && id!==lastsel){
//			jQuery('#list').restoreRow(lastsel);
//			jQuery('#list').editRow(id,true);
//			lastsel=id;
//		}
//	}
  }).navGrid('#pager',{edit:false,add:false,del:false,position:"right"}); 
 
 $("#bedata").click(function(){
	var gr = jQuery("#list").getGridParam('selrow');
	if( gr != null ) jQuery("#list").editGridRow(gr,{height:280,reloadAfterSubmit:false});
	else alert("Please Select Row");
});
 

  //$('#dialog').jqm(); 
  //$('#dialog').jqmShow(); 
  
  
   $('#ex3a').jqm({
    trigger: '#ex3aTrigger',
    overlay: 30, /* 0-100 (int) : 0 is off/transparent, 100 is opaque */
    overlayClass: 'whiteOverlay'})
    .jqDrag('.jqDrag'); /* make dialog draggable, assign handle to title */
  
  // Close Button Highlighting. IE doesn't support :hover. Surprise?
  $('input.jqmdX')
  .hover(
    function(){ $(this).addClass('jqmdXFocus'); }, 
    function(){ $(this).removeClass('jqmdXFocus'); })
  .focus( 
    function(){ this.hideFocus=true; $(this).addClass('jqmdXFocus'); })
  .blur( 
    function(){ $(this).removeClass('jqmdXFocus'); });


$('#ex3c')
    .jqDrag('.jqDrag')
    .jqResize('.jqResize')
    .jqm({
      trigger:'#ex3cTrigger',
      overlay: 0,
      onShow: function(h) {
        /* callback executed when a trigger click. Show notice */
        h.w.css('opacity',0.92).slideDown(); 
        },
      onHide: function(h) {
        /* callback executed on window hide. Hide notice, overlay. */
        h.w.slideUp("slow",function() { if(h.o) h.o.remove(); }); } 
      });

});  
</script>
<body>
  <table id="list" class="scroll"></table>  
  

<div id="pager" class="scroll" style="text-align:center;"></div>  <br />

<input type="BUTTON" id="bedata" value="Edit Selected" /><br />

<div class="jqmWindow" id="dialog">

  <br />
  ==================

<a href="#" class="jqmClose">Close</a>
<hr>
<em>READ ME</em> -->
This is a "vanilla plain" jqModal window. Behavior and appeareance extend far beyond this.
The demonstrations on this page will show off a few possibilites. I recommend walking
through each one to get an understanding of jqModal <em>before</em> using it.

<br /><br />
You can view the sourcecode of examples by clicking the Javascript, CSS, and HTML tabs.
Be sure to checkout the <a href="README">documentation</a> too!

<br /><br />
<em>NOTE</em>; You can close windows by clicking the tinted background known as the "overlay".
Clicking the overlay will have no effect if the "modal" parameter is passed, or if the
overlay is disabled.
</div>



<a href="#" id="ex3aTrigger">view</a> (dialog)

<div id="ex3a" class="jqmDialog">
<div class="jqmdTL"><div class="jqmdTR"><div class="jqmdTC jqDrag">Dialog Title</div></div></div>
<div class="jqmdBL"><div class="jqmdBR"><div class="jqmdBC">

<div class="jqmdMSG">
Styled windows or dialogs are easy!
 
<br /><br />
This particular theme was done for <a href="http://www.pommo.org">poMMo</a> --
feel free to borrow the styling, or use it as a reference when creating your own.
CSS and Markup is available under the HTML + CSS tabs of example 3a.
</div>

</div></div></div>
<input type="image" src="images/jqModal/close.gif" class="jqmdX jqmClose" />
</div>


<p></p><p></p><p></p>
<a href="#" id="ex3cTrigger">view</a> (notice)

<div style="position: absolute; margin: -100px 0 0 100px;">
<div id="ex3c" class="jqmNotice">
    <div class="jqmnTitle jqDrag">
      <h1>Did you know?</h1>
    </div>
  
  <div class="jqmnContent">
  <p>Pine, spruce, or other evergreen wood should never be used in barbecues. These woods, when burning or smoking, can add harmful tar and resins to the food. Only hardwoods should be used for smoking and grilling, such as oak, pecan, hickory, maple, cherry, alder, apple, or mesquite, depending on the type of meat being cooked.</p>
  </div>
  
  <img src="images/jqModal/close_icon.png" alt="close" class="jqmClose" />
  <img src="images/jqModal/resize.gif" alt="resize" class="jqResize" />
</div>
</div>




<div id="AddOne">
<ul style="height: 30px;"> <li><a href="#fragment-1"><span>　演　示　</span></a></li> <li><a href="#fragment-2"><span>　源码　</span></a></li> <li><a href="#fragment-3"><span>Three</span></a></li> 

</ul> 
<div id="fragment-1"> <p>First tab is active by default</p> </div> 
<div id="fragment-2"> <p><b>Second tab is active</b></p><br> <p>Alternative ways to specify the active tab will overrule this argument, listed in the order of their precedence:</p><br> <ol> <li>If a fragment identifier (hash) in the URL of the page refers to the id of a tab panel of a tab interface the corresponding tab will become the initial tab.</li> <li>Same if you use the cookie option to save the latest selected tab in.</li> <li>Last not least you can set the selected tab by attaching the selected tab class class (default: "ui-tabs-selected") to one of the <code>li</code> elements representing a single tab.</li> </ol> </div> 

<div id="fragment-3"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div>
</div>
</body>
</html>
